<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useDashboardStore } from '~/stores/dashboard'

const dashboardStore = useDashboardStore()
const { kpiCards, trendBars, runningProjects } = storeToRefs(dashboardStore)
</script>

<template>
  <div class="space-y-4">
    <header class="rounded-xl border border-slate-700/80 bg-gradient-to-r from-slate-900 via-indigo-950/70 to-slate-900 px-5 py-4">
      <p class="text-xs uppercase tracking-[0.18em] text-cyan-300">대시보드</p>
      <div class="mt-2 flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 class="text-2xl font-bold text-slate-100">운영 대시보드</h1>
          <p class="mt-1 text-sm text-slate-400">진행중 프로젝트, 전체 프로젝트, 신규 리드를 가로형 위젯으로 확인하세요.</p>
        </div>
        <NuxtLink
          to="/admin/projects"
          class="rounded-md border border-cyan-300/30 bg-cyan-500/10 px-3 py-1.5 text-sm font-semibold text-cyan-100 hover:bg-cyan-500/20"
        >
          프로젝트 더 보기
        </NuxtLink>
      </div>
    </header>

    <section class="grid gap-3 xl:grid-cols-[2fr_1fr]">
      <div class="grid grid-cols-3 gap-3">
        <article
          v-for="card in kpiCards"
          :key="card.label"
          class="rounded-xl border bg-gradient-to-br from-slate-900 to-slate-950 p-5"
          :class="[card.border]"
        >
          <p class="text-xs uppercase tracking-[0.16em] text-slate-200">{{ card.label }}</p>
          <div class="mt-3 flex items-center gap-3">
            <p class="text-3xl font-black" :class="card.color">{{ card.value }}</p>
            <span class="inline-flex h-2.5 w-2.5 rounded-full bg-gradient-to-r" :class="card.band"></span>
          </div>
          <p class="mt-2 text-sm text-slate-400">{{ card.note }}</p>
        </article>
      </div>

      <section class="rounded-xl border border-slate-800 bg-gradient-to-b from-slate-900 to-indigo-950/50 p-5">
        <h2 class="text-sm font-semibold">리드 추이(샘플)</h2>
        <div class="mt-3 h-36 rounded-lg border border-cyan-300/20 bg-slate-950/80">
          <div class="flex h-full items-end gap-2 px-4 pb-4">
            <span v-for="bar in trendBars" :key="bar" class="w-full bg-gradient-to-t from-cyan-300 to-indigo-300/80" :style="{ height: `${bar}%` }"></span>
          </div>
        </div>
      </section>
    </section>

    <section class="grid gap-3 xl:grid-cols-[1fr_1fr]">
      <article class="rounded-xl border border-slate-800 bg-gradient-to-b from-slate-900 to-slate-950 p-5">
        <h2 class="text-lg font-semibold">진행중 프로젝트 목록</h2>
        <p class="mt-1 text-sm text-slate-400">운영 중인 핵심 프로젝트</p>
        <div class="mt-4 overflow-hidden rounded-lg border border-slate-800">
          <table class="w-full text-left text-sm">
            <thead class="bg-slate-900">
              <tr class="text-slate-300">
                <th class="px-4 py-3">프로젝트</th>
                <th class="px-4 py-3">도메인</th>
                <th class="px-4 py-3">상태</th>
                <th class="px-4 py-3 text-right">리드</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="project in runningProjects" :key="project.domain" class="border-t border-slate-800 text-slate-200">
                <td class="px-4 py-3">{{ project.name }}</td>
                <td class="px-4 py-3">{{ project.domain }}</td>
                <td class="px-4 py-3">
                  <span class="inline-flex items-center gap-1 rounded-full bg-indigo-900/40 px-2.5 py-0.5 text-xs font-medium text-indigo-200">
                    {{ project.status }}
                  </span>
                </td>
                <td class="px-4 py-3 text-right">{{ project.leads }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </article>

      <article class="rounded-xl border border-slate-800 bg-gradient-to-b from-slate-900 to-indigo-950/40 p-5">
        <h2 class="text-lg font-semibold">빠른 액션</h2>
        <p class="mt-1 text-sm text-slate-400">바로 이동해 바로 시작</p>
        <div class="mt-4 flex flex-col gap-2">
          <NuxtLink to="/admin/projects" class="rounded-md bg-gradient-to-r from-indigo-600 to-cyan-500 px-4 py-2 text-sm font-semibold text-white">새 프로젝트 만들기</NuxtLink>
          <NuxtLink to="/admin/pages" class="rounded-md border border-indigo-300/30 bg-indigo-950/20 px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-900/30">페이지 바로가기</NuxtLink>
          <NuxtLink to="/admin/leads" class="rounded-md border border-cyan-300/30 bg-cyan-950/20 px-4 py-2 text-sm text-cyan-100 hover:bg-cyan-900/30">리드 조회</NuxtLink>
        </div>
      </article>
    </section>
  </div>
</template>
