<script setup lang="ts">
import { computed, ref } from 'vue'
import { RouterLink } from 'vue-router'
import { getAllScreens } from '@/registry/screens'
import { useScreenPreferenceStore } from '../../../shared/shell/screenPreferenceStore'

interface AttentionItem {
  id: string
  title: string
  module: string
  count: number
  path: string
  severity: 'high' | 'medium' | 'low'
}

interface ModuleGroup {
  module: string
  entries: any[]
  count: number
}

const preference = useScreenPreferenceStore()

// Get screen definition
const homeScreenDef = getAllScreens().find(s => s.screenId === 'home.dashboard')
const screenDef = computed(() => homeScreenDef)

// Get all screens from registry (excluding internal-only and home)
const allScreens = computed(() =>
  getAllScreens()
    .filter(s => s.screenId !== 'home.dashboard' && s.telemetry?.enabled !== false),
)

// Build screen index for quick lookup
const screenByScreenId = computed(() => new Map(allScreens.value.map(s => [s.screenId, s])))

// Favorites from preference store
const favorites = computed(() => {
  const faves = preference.favoriteScreenIds
    .map(id => screenByScreenId.value.get(id))
    .filter((s): s is any => Boolean(s))
  return faves
})

// Group screens by module
const screensByModule = computed(() => {
  const grouped = new Map<string, any[]>()

  allScreens.value.forEach(screen => {
    const module = screen.module || 'Other'
    if (!grouped.has(module)) {
      grouped.set(module, [])
    }
    grouped.get(module)!.push(screen)
  })

  // Convert to array and sort by module name
  return Array.from(grouped.entries())
    .map(([module, entries]) => ({
      module,
      entries: entries.sort((a, b) => a.title.localeCompare(b.title)),
      count: entries.length,
    }))
    .sort((a, b) => a.module.localeCompare(b.module))
})

// Workbench: favorites + recent screens
const workbench = computed(() => {
  const faves = favorites.value
  const recent = preference.recents
    .map(r => screenByScreenId.value.get(r.screenId))
    .filter((s): s is any => {
      if (!s) return false
      return !faves.some(f => f?.screenId === s.screenId)
    })
    .slice(0, 10 - faves.length)

  return [...faves, ...recent].slice(0, 10)
})

// DEBT-030: Attention items aggregation
// Each feature module should provide attention sources
const attentionItems = ref<AttentionItem[]>([])

// Helper: Get screen by screenId
const getScreen = (screenId: string) => screenByScreenId.value.get(screenId)

// Helper: Check if screen is favorite
const isFavorite = (screenId: string) => preference.isFavorite(screenId)

// Helper: Toggle favorite
const toggleFavorite = (screenId: string) => {
  preference.toggleFavorite(screenId)
}
</script>

<template>
  <article class="ks-home" v-if="screenDef">
    <!-- Header -->
    <header class="ks-home__header">
      <div>
        <p>K-ArtSell Aegis</p>
        <h1>{{ screenDef.title }}</h1>
        <span>{{ screenDef.description }}</span>
      </div>
    </header>

    <!-- Attention Section -->
    <section class="ks-home__section" aria-labelledby="ks-home-attention-title">
      <header><h2 id="ks-home-attention-title">확인 필요</h2></header>
      <div v-if="attentionItems.length > 0" class="ks-home__attention-list" role="list">
        <RouterLink
          v-for="item in attentionItems"
          :key="item.id"
          :to="item.path"
          role="listitem"
          class="ks-home__attention-item"
          :class="`severity-${item.severity}`"
        >
          <span class="badge">{{ item.count }}</span>
          <span class="main">
            <b>{{ item.title }}</b>
            <small>{{ item.module }}</small>
          </span>
        </RouterLink>
      </div>
      <p v-else class="ks-home__empty">현재 확인할 작업이나 알림이 없습니다.</p>
    </section>

    <!-- Workbench Section (Favorites + Recent) -->
    <section class="ks-home__section" aria-labelledby="ks-home-workbench-title">
      <header>
        <h2 id="ks-home-workbench-title">바로 시작</h2>
        <small>즐겨찾기 {{ favorites.length }} · 최근 {{ workbench.length - favorites.length }}</small>
      </header>
      <div v-if="workbench.length" class="ks-home__workbench-list" role="list">
        <RouterLink
          v-for="entry in workbench"
          :key="entry.screenId"
          :to="entry.path"
          role="listitem"
          class="ks-home__workbench-item"
        >
          <span class="source">{{ favorites.some(f => f.screenId === entry.screenId) ? '즐겨찾기' : '최근' }}</span>
          <span class="main">
            <b>{{ entry.title }}</b>
            <small>{{ entry.module }}</small>
          </span>
        </RouterLink>
      </div>
      <p v-else class="ks-home__empty">아직 즐겨찾기하거나 최근에 연 화면이 없습니다. 아래에서 화면을 찾아보세요.</p>
    </section>

    <!-- All Screens by Module -->
    <section class="ks-home__all" aria-label="전체 업무">
      <header><h2>모듈별 업무</h2></header>
      <div class="ks-home__modules">
        <section v-for="moduleGroup in screensByModule" :key="moduleGroup.module" class="ks-home__module">
          <header>
            <strong>{{ moduleGroup.module }}</strong>
            <small>{{ moduleGroup.count }}개 화면</small>
          </header>
          <div class="ks-home__module-links">
            <div v-for="screen in moduleGroup.entries" :key="screen.screenId" class="ks-home__module-row">
              <RouterLink class="launch" :to="screen.path">{{ screen.title }}</RouterLink>
              <button
                v-if="screen.telemetry?.enabled !== false"
                type="button"
                class="favorite"
                :aria-pressed="isFavorite(screen.screenId)"
                :aria-label="
                  isFavorite(screen.screenId) ? `${screen.title} 즐겨찾기 해제` : `${screen.title} 즐겨찾기 추가`
                "
                @click="toggleFavorite(screen.screenId)"
              >
                {{ isFavorite(screen.screenId) ? '★' : '☆' }}
              </button>
            </div>
          </div>
        </section>
      </div>
    </section>
  </article>
</template>

<style scoped>
.ks-home {
  display: grid;
  gap: var(--ks-space-4);
  max-width: var(--ks-content-max);
  margin: 0 auto;
}

.ks-home__header p,
.ks-home__header span {
  margin: 0;
  color: var(--ks-color-text-muted);
  font-size: var(--ks-font-caption);
}

.ks-home__header h1 {
  margin: 0;
  font-size: var(--ks-font-page);
}

.ks-home__section,
.ks-home__all {
  border: 1px solid var(--ks-color-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-color-surface);
}

.ks-home__section > header,
.ks-home__all > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ks-space-3);
  padding: var(--ks-space-2) var(--ks-space-3);
  border-bottom: 1px solid var(--ks-color-border);
}

.ks-home__section > header h2,
.ks-home__all > header h2 {
  margin: 0;
  font-size: var(--ks-font-section);
}

.ks-home__section > header small {
  color: var(--ks-color-text-muted);
  font-size: var(--ks-font-caption);
}

.ks-home__empty {
  margin: 0;
  padding: var(--ks-space-4) var(--ks-space-3);
  color: var(--ks-color-text-muted);
  font-size: var(--ks-font-body);
}

.ks-home__workbench-list {
  display: flex;
  flex-direction: column;
}

.ks-home__workbench-item {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--ks-space-2);
  padding: var(--ks-space-2) var(--ks-space-3);
  border-bottom: 1px solid var(--ks-color-border);
  text-decoration: none;
  color: inherit;
}

.ks-home__workbench-item:last-child {
  border-bottom: 0;
}

.ks-home__workbench-item .source {
  font-size: var(--ks-font-caption);
  font-weight: 600;
  color: var(--ks-color-action);
}

.ks-home__workbench-item .main small {
  display: block;
  color: var(--ks-color-text-muted);
  font-size: var(--ks-font-caption);
}

.ks-home__modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.ks-home__module {
  border-right: 1px solid var(--ks-color-border);
  border-bottom: 1px solid var(--ks-color-border);
}

.ks-home__module > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ks-space-2) var(--ks-space-3);
  border-bottom: 1px solid var(--ks-color-border);
}

.ks-home__module > header small {
  color: var(--ks-color-text-muted);
  font-size: var(--ks-font-caption);
}

.ks-home__module-row {
  display: flex;
  align-items: center;
}

.ks-home__module-row .launch {
  flex: 1;
  padding: var(--ks-space-2) var(--ks-space-3);
  text-decoration: none;
  color: inherit;
}

.ks-home__module-row .launch:hover {
  background: var(--ks-color-surface-secondary);
}

.ks-home__module-row .favorite {
  width: 2rem;
  border: 0;
  background: transparent;
  color: var(--ks-color-text-muted);
  cursor: pointer;
}

.ks-home__module-row .favorite:hover {
  color: var(--ks-color-action);
}

.ks-home__module-row .favorite[aria-pressed='true'] {
  color: var(--ks-color-action);
}

.ks-home__attention-list {
  display: flex;
  flex-direction: column;
}

.ks-home__attention-item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: var(--ks-space-2);
  padding: var(--ks-space-2) var(--ks-space-3);
  border-bottom: 1px solid var(--ks-color-border);
  text-decoration: none;
  color: inherit;
}

.ks-home__attention-item:last-child {
  border-bottom: 0;
}

.ks-home__attention-item .badge {
  font-size: var(--ks-font-body);
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--ks-radius-sm);
  background: var(--ks-color-surface-secondary);
  text-align: center;
}

.ks-home__attention-item.severity-high .badge {
  background: rgb(239, 68, 68);
  color: white;
}

.ks-home__attention-item.severity-medium .badge {
  background: rgb(251, 146, 60);
  color: white;
}

.ks-home__attention-item.severity-low .badge {
  background: var(--ks-color-surface-secondary);
  color: var(--ks-color-text-muted);
}

.ks-home__attention-item .main small {
  display: block;
  color: var(--ks-color-text-muted);
  font-size: var(--ks-font-caption);
}
</style>
