<script>
  // /study — 학습 hub.
  // 주제로 보기(퀴즈·복습·통계) / 자료 학습 / 필사 세션 / 암기카드 검수.
  import { onMount } from 'svelte';
  import { api } from '$lib/api';
  import { BookOpen, PenLine, GraduationCap, FolderKanban, Layers, Repeat, Flag, Inbox, Activity } from 'lucide-svelte';

  let cardReviewCount = $state(0);
  let questionFlagCount = $state(0);
  onMount(async () => {
    try {
      const r = await api('/study-cards/needs-review/count');
      cardReviewCount = r?.count ?? 0;
    } catch {}
    try {
      const r2 = await api('/study-questions/needs-review/count');
      questionFlagCount = r2?.count ?? 0;
    } catch {}
  });
</script>

<div class="p-4 md:p-6 max-w-5xl mx-auto">
  <header class="mb-6">
    <h1 class="text-xl font-semibold text-text flex items-center gap-2">
      <GraduationCap size={22} /> 공부
    </h1>
    <p class="text-sm text-dim mt-1">주제별 퀴즈·복습(SRS)·통계 / 학습 자료 회독 / 손글씨 필사 세션.</p>
  </header>

  <a
    href="/study/topics"
    class="block mb-3 p-5 rounded-lg border border-default bg-surface hover:border-accent hover:bg-accent/5 transition-colors"
  >
    <div class="flex items-center gap-2 mb-2">
      <FolderKanban size={18} class="text-accent" />
      <h2 class="text-base font-semibold text-text">주제로 보기</h2>
    </div>
    <p class="text-xs text-dim">"가스기사" 같은 학습 주제 아래에 필기 세션과 자료를 함께 묶어 본다. 한 주제 안에서 필기·자료를 한눈에.</p>
  </a>

  <a
    href="/study/diagnosis"
    class="block mb-3 p-5 rounded-lg border border-default bg-surface hover:border-accent hover:bg-accent/5 transition-colors"
  >
    <div class="flex items-center gap-2 mb-2">
      <Activity size={18} class="text-accent" />
      <h2 class="text-base font-semibold text-text">학습 진단</h2>
    </div>
    <p class="text-xs text-dim">누적 풀이 이력에서 약점 토픽과 학습 태도를 코치(이드)가 진단합니다. 매일 새벽 약점 스냅샷을 만들고, 권장 복습세트 초안까지 제안.</p>
  </a>

  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
    <a
      href="/study/sources"
      class="block p-5 rounded-lg border border-default bg-surface hover:border-accent hover:bg-accent/5 transition-colors"
    >
      <div class="flex items-center gap-2 mb-2">
        <BookOpen size={18} class="text-accent" />
        <h2 class="text-base font-semibold text-text">자료 학습</h2>
      </div>
      <p class="text-xs text-dim">자료실에 올린 학습 자료를 카테고리별로 읽고 회독 카운트를 누적합니다. "안 본 자료만" 필터로 진도 관리.</p>
    </a>

    <a
      href="/study/write"
      class="block p-5 rounded-lg border border-default bg-surface hover:border-accent hover:bg-accent/5 transition-colors"
    >
      <div class="flex items-center gap-2 mb-2">
        <PenLine size={18} class="text-accent" />
        <h2 class="text-base font-semibold text-text">손글씨 필사 세션</h2>
      </div>
      <p class="text-xs text-dim">iPad + Apple Pencil 로 자격증 교재 / 어학 한자·단어를 손으로 필사. 세션 단위 stroke 보존.</p>
    </a>

    <a
      href="/study/cards-review"
      class="block p-5 rounded-lg border border-default bg-surface hover:border-accent hover:bg-accent/5 transition-colors"
    >
      <div class="flex items-center gap-2 mb-2">
        <Layers size={18} class="text-accent" />
        <h2 class="text-base font-semibold text-text">암기카드 검수</h2>
        {#if cardReviewCount > 0}
          <span class="ml-auto rounded-full bg-accent px-2 py-0.5 text-xs font-bold text-white">{cardReviewCount}</span>
        {/if}
      </div>
      <p class="text-xs text-dim">푼 문제에서 AI가 추출한 암기카드(cloze 빈칸 / qa)를 확인하고 승인·수정·폐기. 승인된 카드만 학습에 쓰입니다.</p>
    </a>

    <a
      href="/study/cards-study"
      class="block p-5 rounded-lg border border-default bg-surface hover:border-accent hover:bg-accent/5 transition-colors"
    >
      <div class="flex items-center gap-2 mb-2">
        <Repeat size={18} class="text-accent" />
        <h2 class="text-base font-semibold text-text">암기카드 학습</h2>
      </div>
      <p class="text-xs text-dim">검수한 암기카드를 모바일에서 학습. <b>복습(간격반복 1·3·7·14일)</b>으로 자기평가하거나, <b>그냥 공부</b>로 덜 본 카드를 가볍게 훑어봅니다.</p>
    </a>

    <a
      href="/study/review-box"
      class="block p-5 rounded-lg border border-default bg-surface hover:border-accent hover:bg-accent/5 transition-colors"
    >
      <div class="flex items-center gap-2 mb-2">
        <Inbox size={18} class="text-accent" />
        <h2 class="text-base font-semibold text-text">복습함</h2>
      </div>
      <p class="text-xs text-dim">오늘 복습할 카드와 미확인 카드를 한눈에 보고, <b>골라서</b> 복습합니다.</p>
    </a>

    <a
      href="/study/questions-review"
      class="block p-5 rounded-lg border border-default bg-surface hover:border-accent hover:bg-accent/5 transition-colors"
    >
      <div class="flex items-center gap-2 mb-2">
        <Flag size={18} class="text-accent" />
        <h2 class="text-base font-semibold text-text">문제 신고함</h2>
        {#if questionFlagCount > 0}
          <span class="ml-auto rounded-full bg-warning px-2 py-0.5 text-xs font-bold text-white">{questionFlagCount}</span>
        {/if}
      </div>
      <p class="text-xs text-dim">퀴즈·문제 화면에서 <b>이상하다고 신고한 문제</b>를 모아 확인하고 수정·검토 완료·폐기합니다.</p>
    </a>
  </div>

  <div class="mt-6 p-4 rounded-lg border border-dashed border-default/60 text-xs text-dim">
    <div class="font-medium text-dim mb-1">예정</div>
    <ul class="list-disc list-inside space-y-0.5">
      <li>애플워치 빠른복습 + 공부 알람(push)</li>
    </ul>
  </div>
</div>
