<script>
  /**
   * /study/topics/[id]/review — 문제풀이 (PR-9 + PR-10).
   *
   * 라우트 진입 모드:
   *   - ?session=N 있으면 해당 세션 로드 (이어풀기) — 'playing'.
   *   - 없으면 'start' UI (옵션 입력 + 시작).
   *
   * 풀이 중 정답·해설 노출 안 함. "모르겠음" 5번째 옵션. 답 클릭 시 즉시 다음.
   * 마지막 문제 풀이 후 (서버 status='done') /quiz-sessions/[sid] 결과 페이지로 redirect.
   * 그 결과 페이지에 정답/오답/모르겠음 3 카테고리 + AI 해설 + 분야 설명 + 학습완료 체크.
   */
  import { onMount } from 'svelte';
  import { page } from '$app/stores';
  import { goto } from '$app/navigation';
  import { api } from '$lib/api';
  import { addToast } from '$lib/stores/toast';
  import { ArrowLeft, Play, HelpCircle } from 'lucide-svelte';
  import { renderMathMarkdown, renderMathMarkdownInline } from '$lib/utils/mathMarkdown';
  import Button from '$lib/components/ui/Button.svelte';
  import Card from '$lib/components/ui/Card.svelte';
  import Skeleton from '$lib/components/ui/Skeleton.svelte';
  import TextInput from '$lib/components/ui/TextInput.svelte';
  import ImgAuth from '$lib/components/ImgAuth.svelte';

  let topicId = $derived(Number($page.params.id));
  let topicName = $state('');

  // 진입 화면 옵션 (start 모드용)
  let mode = $state('start'); // 'start' | 'playing'
  // Phase 2-A: 학습 단계 + 분량 (Phase 1-E bucket+stage 알고리즘 입력)
  // null = 기본 (subject bucket 모드, 기존 PR-12-B 동작)
  let optStage = $state(null);  // null | 'intro' | 'learning' | 'pre_exam'
  let optSize = $state(50);     // 30 / 50 / 100
  let advancedOpen = $state(false);
  // 기존 옵션 (advanced — stage 미선택 시만 사용)
  let optSubject = $state('');
  let optWrongOnly = $state(false);
  let optTarget = $state(20);

  // 세션 + 문제 로드
  let sessionId = $state(null);
  let questions = $state([]); // 출제 순서대로 (서버에서 받음)
  let cursor = $state(0); // 0-based — 다음 풀 문제 index
  let submitting = $state(false);
  let loading = $state(true);

  let progressTotal = $derived(questions.length);
  let currentQ = $derived(questions[cursor] ?? null);
  let progressLabel = $derived(progressTotal > 0 ? `${cursor + 1} / ${progressTotal}` : '0 / 0');

  async function loadTopic() {
    try {
      const t = await api(`/study-topics/${topicId}`);
      topicName = t?.topic?.name ?? '';
    } catch {}
  }

  /** ?session=N 로드. 풀이된 attempt 갯수 = cursor 위치 (서버 신뢰). */
  async function loadSession(sid) {
    loading = true;
    try {
      const detail = await api(`/study-topics/${topicId}/quiz-sessions/${sid}`);
      const summary = detail.summary;
      if (summary.status === 'done') {
        // 이미 끝난 세션 — 결과 페이지로.
        goto(`/study/topics/${topicId}/quiz-sessions/${sid}`, { replaceState: true });
        return;
      }
      if (summary.status === 'abandoned') {
        addToast('info', '이 세션은 이미 포기 처리되어 새 세션을 시작합니다');
        goto(`/study/topics/${topicId}`, { replaceState: true });
        return;
      }
      sessionId = summary.id;
      questions = detail.questions ?? [];
      cursor = summary.cursor;
      mode = 'playing';
    } catch (err) {
      addToast('error', err?.detail || '세션 로드 실패');
      goto(`/study/topics/${topicId}`, { replaceState: true });
    } finally {
      loading = false;
    }
  }

  onMount(async () => {
    await loadTopic();
    const url = new URL(window.location.href);
    const sid = url.searchParams.get('session');
    if (sid) {
      await loadSession(Number(sid));
    } else {
      loading = false;
    }
  });

  /** 'start' 모드에서 [시작] 클릭 → 신규 세션 생성 후 ?session=N 으로 이동.
   *  optStage 가 설정되면 Phase 1-E bucket+stage 알고리즘으로 출제 (단일 풀이 진입점).
   *  미설정이면 기존 subject bucket + spacing 경로 (advanced 옵션 호환). */
  async function start() {
    loading = true;
    try {
      const body = optStage
        ? {
            stage: optStage,
            size: optSize,
            abandon_existing: false,
          }
        : {
            target_per_subject: optTarget,
            subject: optSubject.trim() || null,
            wrong_only: optWrongOnly,
            abandon_existing: false,
          };
      const res = await api(`/study-topics/${topicId}/quiz-sessions`, {
        method: 'POST',
        body: JSON.stringify(body),
      });
      goto(`/study/topics/${topicId}/review?session=${res.id}`, { replaceState: true });
      // loadSession 은 navigate 후 onMount 가 다시 안 트리거되므로 직접 호출.
      await loadSession(res.id);
    } catch (err) {
      addToast('error', err?.detail || '문제풀이 시작 실패');
      loading = false;
    }
  }

  /** answer = 1|2|3|4 (객관식) 또는 'unsure'. 즉시 제출 + cursor 갱신.
   *  서버가 status='done' 으로 응답하면 결과 페이지로 이동. */
  async function submitAndAdvance(answer) {
    if (submitting || !currentQ) return;
    submitting = true;
    try {
      const body = answer === 'unsure'
        ? { is_unsure: true, quiz_session_id: sessionId }
        : { selected_choice: Number(answer), quiz_session_id: sessionId };
      const res = await api(`/study-questions/${currentQ.id}/attempt`, {
        method: 'POST',
        body: JSON.stringify(body),
      });
      // 서버 cursor 신뢰.
      if (res.quiz_session_status === 'done') {
        goto(`/study/topics/${topicId}/quiz-sessions/${sessionId}`, { replaceState: true });
        return;
      }
      cursor = typeof res.quiz_session_cursor === 'number' ? res.quiz_session_cursor : cursor + 1;
    } catch (err) {
      addToast('error', err?.detail || '제출 실패');
    } finally {
      submitting = false;
    }
  }

  async function abandonSession() {
    if (!sessionId) return;
    if (!confirm('현재 진행 중인 풀이를 포기하고 주제 화면으로 돌아갑니다. 진행률은 보존됩니다.')) return;
    try {
      await api(`/study-topics/${topicId}/quiz-sessions/${sessionId}`, {
        method: 'PATCH',
        body: JSON.stringify({ action: 'abandon' }),
      });
    } catch {}
    goto(`/study/topics/${topicId}`);
  }
</script>

<svelte:head><title>문제풀이 — {topicName || '주제'}</title></svelte:head>

<div class="p-4 md:p-6 max-w-3xl mx-auto">
  <div class="flex items-center gap-2 text-xs md:text-sm mb-3">
    <a href="/study" class="text-dim hover:text-text">공부</a>
    <span class="text-faint">/</span>
    <a href="/study/topics" class="text-dim hover:text-text">주제</a>
    <span class="text-faint">/</span>
    <a href={`/study/topics/${topicId}`} class="text-dim hover:text-text truncate">{topicName || '...'}</a>
    <span class="text-faint">/</span>
    <span class="text-text font-medium">문제풀이</span>
  </div>

  {#if loading}
    <Skeleton h="h-32" rounded="lg" />
  {:else if mode === 'start'}
    <Card>
      {#snippet children()}
        <div class="p-5 flex flex-col gap-4">
          <h1 class="text-base font-semibold text-text">문제풀이</h1>
          <p class="text-xs text-dim">
            학습 단계와 분량을 선택하세요. 단계에 맞춰 안 푼 문제, 오답, 복습 예정, 빈출 유형이 자동으로 섞여 출제됩니다.
            풀이 중 정답·해설은 표시하지 않으며, 다 풀면 결과 화면에서 카테고리별로 한 번에 확인합니다.
            나갔다 와도 같은 위치에서 이어풀 수 있습니다.
          </p>

          <!-- 학습 단계 -->
          <div class="flex flex-col gap-1.5">
            <span class="text-xs text-dim">학습 단계</span>
            <div class="grid grid-cols-3 gap-1.5">
              {#each [
                { v: 'intro', label: '입문', desc: '안 푼 문제 위주' },
                { v: 'learning', label: '학습 중', desc: '오답·복습·신규 균형' },
                { v: 'pre_exam', label: '시험 직전', desc: '실전 + 약점 보강' },
              ] as opt (opt.v)}
                <button
                  type="button"
                  onclick={() => (optStage = opt.v)}
                  class="p-2 rounded border text-left transition-colors
                    {optStage === opt.v ? 'border-accent bg-accent/10 text-text' : 'border-default bg-surface text-dim hover:border-accent/40'}"
                >
                  <div class="text-xs font-semibold">{opt.label}</div>
                  <div class="text-[10px] mt-0.5">{opt.desc}</div>
                </button>
              {/each}
            </div>
          </div>

          <!-- 분량 -->
          {#if optStage}
            <div class="flex flex-col gap-1.5">
              <span class="text-xs text-dim">분량</span>
              <div class="grid grid-cols-3 gap-1.5">
                {#each [30, 50, 100] as size (size)}
                  <button
                    type="button"
                    onclick={() => (optSize = size)}
                    class="p-2 rounded border text-center transition-colors
                      {optSize === size ? 'border-accent bg-accent/10 text-text' : 'border-default bg-surface text-dim hover:border-accent/40'}"
                  >
                    <div class="text-xs font-semibold">{size}문제</div>
                  </button>
                {/each}
              </div>
            </div>
          {/if}

          <!-- 고급 옵션 (단계 미선택 시만 활성) -->
          {#if !optStage}
            <button
              type="button"
              onclick={() => (advancedOpen = !advancedOpen)}
              class="text-xs text-dim hover:text-text text-left"
            >
              {advancedOpen ? '▾' : '▸'} 고급 옵션 (단계 미선택 시 — 과목 단위 균등 출제)
            </button>
            {#if advancedOpen}
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3 pl-3 border-l-2 border-default">
                <div>
                  <TextInput label="과목 (선택, 비워두면 전체 균등)" bind:value={optSubject} placeholder="예: 연소공학" />
                </div>
                <div>
                  <label class="flex flex-col gap-1.5">
                    <span class="text-xs text-dim">과목당 문제 수</span>
                    <input
                      type="number"
                      bind:value={optTarget}
                      min="1"
                      max="100"
                      class="px-3 py-2 bg-surface border border-default rounded text-sm text-text outline-none focus:border-accent"
                    />
                  </label>
                </div>
                <label class="flex items-center gap-2 text-xs text-text cursor-pointer md:col-span-2">
                  <input type="checkbox" bind:checked={optWrongOnly} />
                  <span>오답만 (가장 최근 attempt 가 오답인 문제만)</span>
                </label>
              </div>
            {/if}
          {/if}

          <div class="flex gap-2 justify-end">
            <Button href={`/study/topics/${topicId}`} variant="ghost" icon={ArrowLeft}>주제로</Button>
            <Button onclick={start} icon={Play} disabled={!optStage && !advancedOpen}>시작</Button>
          </div>
          {#if !optStage && !advancedOpen}
            <p class="text-[11px] text-dim text-right">학습 단계를 선택하거나 고급 옵션으로 시작</p>
          {/if}
        </div>
      {/snippet}
    </Card>
  {:else if mode === 'playing' && currentQ}
    <div class="mb-3 flex items-center justify-between text-xs text-dim flex-wrap gap-2">
      <span>{progressLabel}</span>
      <span>
        {#if currentQ.subject}<span>{currentQ.subject}</span>{/if}
        {#if currentQ.scope}<span> · {currentQ.scope}</span>{/if}
      </span>
      <button type="button" onclick={abandonSession} class="text-dim hover:text-warning text-[11px]">중단</button>
    </div>

    <!-- 진행 바 -->
    <div class="w-full h-1.5 bg-default/30 rounded-full overflow-hidden mb-3">
      <div class="h-full bg-accent transition-all" style="width: {progressTotal > 0 ? (cursor / progressTotal) * 100 : 0}%"></div>
    </div>

    <Card>
      {#snippet children()}
        <div class="p-5 flex flex-col gap-4">
          <div class="text-base text-text leading-relaxed markdown-body math-area">{@html renderMathMarkdown(currentQ.question_text)}</div>

          {#if currentQ.images?.length > 0}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-1">
              {#each currentQ.images as img (img.id)}
                <ImgAuth src={img.served_url} class="w-full max-h-72 object-contain rounded border border-default bg-bg/30" />
              {/each}
            </div>
          {/if}

          <div class="flex flex-col gap-2">
            {#each currentQ.choices as ch (ch.number)}
              <button
                type="button"
                disabled={submitting}
                onclick={() => submitAndAdvance(ch.number)}
                class="text-left p-3 rounded-lg border border-default bg-surface text-text hover:border-accent/40 hover:bg-accent/5 transition-colors flex items-start gap-3 disabled:opacity-60"
              >
                <span class="font-semibold w-5 shrink-0">{ch.number}</span>
                <span class="flex-1 text-sm math-area overflow-x-auto">{@html renderMathMarkdownInline(ch.text)}</span>
              </button>
            {/each}

            <button
              type="button"
              disabled={submitting}
              onclick={() => submitAndAdvance('unsure')}
              class="mt-2 text-left p-3 rounded-lg border border-dashed border-default bg-bg/30 text-dim hover:border-warning/60 hover:text-warning transition-colors flex items-center gap-2 disabled:opacity-60"
            >
              <HelpCircle size={14} class="shrink-0" />
              <span class="text-sm font-medium">모르겠음 (해당 분야 설명을 결과 화면에서 확인)</span>
            </button>
          </div>

          {#if submitting}
            <div class="text-[11px] text-dim text-right">제출 중…</div>
          {/if}
        </div>
      {/snippet}
    </Card>
  {/if}
</div>
