<template>
  <v-sheet class="bg-surface" v-bind="$attrs">
    <!-- Header Section -->
    <DashboardHeader
      class="mb-4"
      :greeting-title="props.greetingTitle"
      :projects="props.statProjects"
      :team="props.statTeam"
      :todo="props.statTodo"
      :user-avatar="props.userAvatar"
      :weather-info="props.weatherInfo"
    />

    <v-row>
      <!-- Left Column (Main) -->
      <v-col cols="12" md="8">
        <!-- Applications Card -->
        <DashboardApps
          :apps="props.applications"
          class="mb-4"
          :title="props.appsTitle"
          @app-click="$emit('app-click', $event)"
          @view-all="$emit('view-all-apps')"
        />

        <!-- School Announcements (Dynamic) -->
        <DashboardAnnouncements
          :announcements="props.announcements"
          :title="props.announcementsTitle"
          @item-click="$emit('announcement-click', $event)"
          @view-more="$emit('view-more-announcements')"
        />
      </v-col>

      <!-- Right Column (Side) -->
      <v-col cols="12" md="4">
        <!-- Quick Nav -->
        <DashboardQuickNav
          class="mb-4"
          :navs="props.quickNavs"
          :title="props.quickNavTitle"
          @nav-click="$emit('nav-click', $event)"
        />

        <!-- To-Do List -->
        <DashboardTodoList
          class="mb-4"
          :title="props.todoTitle"
          :todos="props.todos"
          @toggle-todo="$emit('toggle-todo', $event)"
        />

        <!-- Visit Source Chart -->
        <DashboardChart :title="props.chartTitle" :value="props.chartValue" />
      </v-col>
    </v-row>
  </v-sheet>
</template>

<script setup lang="ts">
import DashboardAnnouncements from './base/dashboard/DashboardAnnouncements.vue'
import DashboardApps from './base/dashboard/DashboardApps.vue'
import DashboardChart from './base/dashboard/DashboardChart.vue'
import DashboardHeader from './base/dashboard/DashboardHeader.vue'
import DashboardQuickNav from './base/dashboard/DashboardQuickNav.vue'
import DashboardTodoList from './base/dashboard/DashboardTodoList.vue'

defineEmits([
  'view-all-apps',
  'app-click',
  'view-more-announcements',
  'announcement-click',
  'nav-click',
  'toggle-todo',
])

interface DashboardApp {
  name: string
  desc: string
  icon: string
  color: string
  group: string
  date: string
}

interface Announcement {
  title: string
  author: string
  time: string
  avatarSrc?: string | null
  avatarColor?: string
}

interface QuickNav {
  icon: string
  title: string
  color: string
}

interface Todo {
  title: string
  due: string
  done: boolean
}

const props = defineProps({
  // Header
  userAvatar: {
    type: String,
    default:
      'https://avataaars.io/?avatarStyle=Circle&topType=ShortHairShortFlat&accessoriesType=Sunglasses&hairColor=Blonde&facialHairType=Blank&clotheType=Hoodie&clotheColor=Red&eyeType=Happy&eyebrowType=Default&mouthType=Smile&skinColor=Light',
  },
  greetingTitle: { type: String, default: '早安，校長！開始您一天的工作吧！' },
  weatherInfo: { type: String, default: '今日晴，20℃ - 32℃！' },
  statTodo: { type: String, default: '2/10' },
  statProjects: { type: String, default: '8' },
  statTeam: { type: String, default: '300' },

  // Apps
  appsTitle: { type: String, default: '應用程式' },
  applications: { type: Array as () => DashboardApp[], default: () => [] },

  // Announcements
  announcementsTitle: { type: String, default: '學校公告' },
  announcements: { type: Array as () => Announcement[], default: () => [] },

  // Right Side
  quickNavTitle: { type: String, default: '快速導航' },
  quickNavs: { type: Array as () => QuickNav[], default: () => [] },

  todoTitle: { type: String, default: '待辦事項' },
  todos: { type: Array as () => Todo[], default: () => [] },

  chartTitle: { type: String, default: '訪問來源' },
  chartValue: { type: Number, default: 75 },
})
</script>
