<script>
  /**
   * /study/review-box — 복습함 (카드 SR 복습 현황 + 선택 학습, B4).
   *
   * GET /study-cards/due (review_stage 포함) 로 오늘의 복습 큐를 받아 2탭으로 분리:
   *   - 오늘 할 일: review_stage != null (예전에 평가돼 복습일이 도래한 카드)
   *   - 미확인    : review_stage == null (검수 통과했지만 아직 한 번도 회상 안 한 새 카드)
   *   - 완료      : 졸업 카드 — 백엔드 엔드포인트 필요(현재 미배포 = eid contention 중 fastapi 무재빌드)라 추후.
   *
   * 멀티셀렉트 → 선택 카드를 pendingReviewCards store 로 cards-study 복습 세션에 전달(백엔드 세션 X).
   */
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
  import { api } from '$lib/api';
  import { addToast } from '$lib/stores/toast';
  import { pendingReviewCards } from '$lib/stores/studySession';
  import { ArrowLeft, Repeat, GraduationCap, CheckCheck, Play } from 'lucide-svelte';
  import Button from '$lib/components/ui/Button.svelte';
  import Skeleton from '$lib/components/ui/Skeleton.svelte';
  import EmptyState from '$lib/components/ui/EmptyState.svelte';

  let loading = $state(true);
  let cards = $state([]); // /due 결과 (CardItem[], review_stage 포함)
  let tab = $state('today'); // 'today' | 'new' | 'done'
  let selected = $state({}); // card.id -> true

  let newCards = $derived(cards.filter((c) => c.review_stage === null || c.review_stage === undefined));
  let dueCards = $derived(cards.filter((c) => c.review_stage !== null && c.review_stage !== undefined));
  let shown = $derived(tab === 'today' ? dueCards : tab === 'new' ? newCards : []);
  let selectedCount = $derived(shown.filter((c) => selected[c.id]).length);
  let allShownSelected = $derived(shown.length > 0 && shown.every((c) => selected[c.id]));

  async function load() {
    loading = true;
    try {
      cards = (await api('/study-cards/due?limit=200')) ?? [];
    } catch (err) {
      addToast('error', err?.detail || '복습 카드 조회 실패');
      cards = [];
    } finally {
      loading = false;
    }
  }

  function frontText(c) {
    const t = (c.format === 'cloze' && c.cloze_text ? c.cloze_text : c.cue) ?? '';
    return t.length > 60 ? t.slice(0, 60) + '…' : t;
  }

  function toggle(id) {
    selected = { ...selected, [id]: !selected[id] };
  }
  function selectAllShown() {
    const next = { ...selected };
    shown.forEach((c) => { next[c.id] = !allShownSelected; });
    selected = next;
  }

  function startCards(list) {
    if (!list.length) return;
    pendingReviewCards.set(list);
    goto('/study/cards-study?mode=review');
  }
  function startSelected() {
    startCards(shown.filter((c) => selected[c.id]));
  }
  function startTab() {
    startCards(shown);
  }

  function setTab(t) {
    if (t === 'done' || t === tab) return; // 완료 탭은 백엔드 준비 전 비활성
    selected = {}; // 탭 전환 시 선택 초기화 — 탭별 독립 선택(선택 복습은 현재 탭 기준)
    tab = t;
  }

  onMount(load);
</script>

<svelte:head><title>복습함</title></svelte:head>

<div class="mx-auto max-w-3xl px-4 py-6">
  <div class="mb-4 flex items-center gap-3">
    <Button variant="ghost" size="sm" icon={ArrowLeft} onclick={() => goto('/study')}>공부</Button>
    <h1 class="text-xl font-bold text-text">복습함</h1>
  </div>
  <p class="mb-4 text-sm text-dim">
    검수 통과한 암기카드의 복습 현황입니다. 탭에서 카드를 골라 <b class="text-text">선택 복습</b>하거나, 탭 전체를 한 번에 복습할 수 있어요.
  </p>

  <!-- 탭 -->
  <div class="mb-4 flex gap-1.5">
    {#each [['today', '오늘 할 일', dueCards.length], ['new', '미확인', newCards.length], ['done', '완료', null]] as [val, label, n] (val)}
      <button
        onclick={() => setTab(val)}
        disabled={val === 'done'}
        class="flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-semibold transition-colors
          {tab === val ? 'border-accent bg-accent text-white' : 'border-default bg-surface text-dim hover:text-text'}
          {val === 'done' ? 'cursor-not-allowed opacity-50' : ''}"
      >
        {label}
        {#if n !== null}<span class="rounded-full px-1.5 text-[10px] {tab === val ? 'bg-white/25' : 'bg-default'}">{n}</span>{/if}
        {#if val === 'done'}<span class="text-[10px]">추후</span>{/if}
      </button>
    {/each}
  </div>

  {#if loading}
    <div class="space-y-2">{#each Array(5).fill(0) as _, i (i)}<Skeleton class="h-12 w-full" />{/each}</div>
  {:else if tab === 'done'}
    <EmptyState title="완료 탭은 준비 중" description="졸업(완료)한 카드 목록은 백엔드 엔드포인트가 준비되면 추가됩니다." icon={GraduationCap} />
  {:else if shown.length === 0}
    <EmptyState
      title={tab === 'today' ? '오늘 복습할 카드가 없습니다' : '미확인 카드가 없습니다'}
      description={tab === 'today' ? '애매·모름으로 평가한 카드의 복습일이 되면 여기에 나타납니다.' : '검수 통과한 새 카드가 여기에 모입니다. 지금은 모두 한 번씩 본 상태예요.'}
      icon={Repeat}
    />
  {:else}
    <!-- 선택 바 -->
    <div class="mb-3 flex flex-wrap items-center gap-2">
      <button onclick={selectAllShown} class="rounded-md border border-default px-2.5 py-1 text-xs font-medium text-dim transition-colors hover:text-text">
        {allShownSelected ? '선택 해제' : '전체 선택'}
      </button>
      <span class="text-xs text-dim">{selectedCount > 0 ? `${selectedCount}장 선택됨` : `${shown.length}장`}</span>
      <div class="ml-auto flex gap-2">
        {#if selectedCount > 0}
          <Button variant="secondary" size="sm" icon={Play} onclick={startSelected}>선택 {selectedCount}장 복습</Button>
        {/if}
        <Button variant="primary" size="sm" icon={CheckCheck} onclick={startTab}>이 탭 전체 복습</Button>
      </div>
    </div>

    <!-- 카드 목록 -->
    <div class="space-y-1.5">
      {#each shown as c (c.id)}
        <label class="flex cursor-pointer items-center gap-3 rounded-lg border border-default bg-surface px-3 py-2.5 transition-colors hover:border-accent">
          <input type="checkbox" checked={!!selected[c.id]} onchange={() => toggle(c.id)} class="size-4 shrink-0 accent-accent" />
          <span class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold text-white {c.format === 'cloze' ? 'bg-accent' : 'bg-domain-engineering'}">{c.format}</span>
          <span class="min-w-0 flex-1 truncate text-sm text-text">{frontText(c)}</span>
        </label>
      {/each}
    </div>
  {/if}
</div>
