"use client";

import { useState } from "react";
import Link from "next/link";
import { useStudentWorkspace } from "./StudentWorkspaceProvider";

type Question = { id: string; question: string; answer: string };

export function ChapterPractice({ chapterId, title, subject, questions }: {
  chapterId: string; title: string; subject: string; questions: Question[];
}) {
  const { updateWorkspace, status } = useStudentWorkspace();
  const [index, setIndex] = useState(0);
  const [drafts, setDrafts] = useState<Record<string, string>>({});
  const [revealed, setRevealed] = useState<Record<string, boolean>>({});
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const question = questions[index];
  if (!question) return <p>Practice questions for this chapter are being prepared. You can study the notes and formulas above.</p>;
  const draft = drafts[question.id] ?? "";
  const shown = revealed[question.id] ?? false;

  async function saveAttempt() {
    if (saving || !draft.trim()) return;
    setSaving(true);
    setError(null);
    setMessage(null);
    const now = new Date().toISOString();
    const id = `chapter-practice:${chapterId}:${question.id}`;
    try {
      await updateWorkspace((current) => {
        const existing = current.notes.find((note) => note.id === id);
        const note = {
          id, title: `${title} · Practice ${index + 1}`,
          body: `Question\n${question.question}\n\nMy answer\n${draft.trim()}\n\nReference answer\n${question.answer}\n\nSelf-check practice. Not automatically graded.`,
          subject, topic: title, source_id: null, source_label: "DocDoe chapter sample practice",
          favorite: existing?.favorite ?? false, created_at: existing?.created_at ?? now, updated_at: now,
        };
        return { ...current, notes: [note, ...current.notes.filter((item) => item.id !== id)] };
      });
      setMessage("Attempt saved to Notes. Saving again updates this question's note.");
    } catch {
      setError("Could not sync this attempt. Your answer is still here; retry when connected.");
    } finally {
      setSaving(false);
    }
  }

  function move(next: number) {
    setIndex(next);
    setMessage(null);
    setError(null);
  }

  return <div className="border-y border-[#e3e1da] py-5">
    <div className="mb-4 flex flex-wrap items-center justify-between gap-3 text-xs text-[#6f6e68]">
      <p>Question {index + 1} of {questions.length}</p>
      <p>Self-check · not graded</p>
    </div>
    <h3 id={`practice-question-${chapterId}`} className="text-base font-semibold leading-7 text-[#171716]">{question.question}</h3>
    <label className="mt-5 block text-sm font-medium" htmlFor={`practice-answer-${chapterId}`}>Your answer</label>
    <textarea id={`practice-answer-${chapterId}`} aria-describedby={`practice-question-${chapterId}`} value={draft}
      onChange={(event) => { setDrafts((current) => ({ ...current, [question.id]: event.target.value })); setMessage(null); }}
      placeholder="Try from memory first. Use the notes above if you get stuck."
      className="mt-2 min-h-32 w-full resize-none rounded-lg border border-[#d6d4cc] bg-white p-3 text-sm leading-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#171716]" />
    <p className="text-xs text-[#6f6e68]">Drafts stay on this page only. Save to Notes before leaving.</p>
    <button type="button" onClick={() => setRevealed((current) => ({ ...current, [question.id]: !shown }))}
      aria-expanded={shown} aria-controls={`practice-reference-${chapterId}`}
      className="mt-4 min-h-11 rounded-lg bg-[#171716] px-4 text-sm font-semibold text-white hover:bg-[#343432] focus-visible:outline-2 focus-visible:outline-offset-2">
      {shown ? "Hide reference answer" : draft.trim() ? "Compare my answer" : "I need help · show answer"}
    </button>
    {shown && <div id={`practice-reference-${chapterId}`} className="mt-5 border-l-2 border-[#171716] pl-4">
      <h4 className="font-semibold">Reference answer</h4>
      <p className="mt-2 whitespace-pre-line">{question.answer}</p>
      <p className="mt-3 text-sm text-[#6f6e68]">Check your reasoning and keywords. Rewrite anything you missed before saving.</p>
    </div>}
    <div className="mt-5 flex flex-wrap items-center gap-3">
      <button type="button" onClick={() => void saveAttempt()} disabled={saving || !draft.trim() || status === "loading"} aria-busy={saving}
        className="min-h-11 rounded-lg border border-[#d6d4cc] px-4 text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2">
        {saving ? "Saving…" : "Save attempt to Notes"}
      </button>
      <Link href="/notes" className="inline-flex min-h-11 items-center text-sm underline">Open Notes</Link>
    </div>
    {message && <p role="status" className="mt-3 text-sm">{message}</p>}
    {error && <p role="alert" className="mt-3 text-sm text-[#b33a3a]">{error}</p>}
    <nav aria-label="Practice questions" className="mt-6 flex justify-between gap-4 border-t border-[#e3e1da] pt-4">
      <button type="button" disabled={index === 0 || saving} onClick={() => move(index - 1)} className="min-h-11 px-2 text-sm underline disabled:opacity-40">Previous question</button>
      <button type="button" disabled={index === questions.length - 1 || saving} onClick={() => move(index + 1)} className="min-h-11 px-2 text-sm underline disabled:opacity-40">Next question</button>
    </nav>
  </div>;
}