import { useState } from 'react';
import { Check, RotateCcw, X } from 'lucide-react';
import type { QuizPayload, QuizResult, ToolCallView } from '@/lib/types';
import { api } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/cn';
import { StreamingText } from '@/components/chat/streaming-text';

export function QuizCard({ call }: { call: ToolCallView }) {
  const quiz = (call.payload as { quiz?: QuizPayload }).quiz;
  const [answers, setAnswers] = useState<Record<string, unknown>>({});
  const [result, setResult] = useState<QuizResult | null>(null);
  const [busy, setBusy] = useState(false);
  if (!quiz) return null;

  const submit = async () => {
    setBusy(true);
    try {
      setResult(await api<QuizResult>(`/quiz/${quiz.quiz_id}/answers`, { method: 'POST', body: JSON.stringify({ answers }) }));
    } finally {
      setBusy(false);
    }
  };
  const reset = () => {
    setAnswers({});
    setResult(null);
  };
  const res = (id: string) => result?.results.find((r) => r.id === id);
  const answered = quiz.questions.every((q) => answers[q.id] !== undefined && answers[q.id] !== '');

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between gap-2">
        <div>
          <div className="font-semibold text-uqo-blue-dark">{quiz.title}</div>
          <div className="text-xs text-neutral-muted">{quiz.course} · {quiz.questions.length} questions · {quiz.difficulty}</div>
        </div>
        {result && (
          <div className={cn('rounded-xl px-3 py-1.5 text-sm font-semibold', result.score >= 0.7 ? 'bg-[#e9f6d9] text-[#3f7a0a]' : 'bg-amber-50 text-amber-700')}>
            {result.correct}/{result.total} · {Math.round(result.score * 100)} %
          </div>
        )}
      </div>
      <ol className="space-y-4">
        {quiz.questions.map((q, i) => {
          const r = res(q.id);
          return (
            <li key={q.id} className={cn('rounded-xl border p-3 bg-white', r ? (r.correct ? 'border-uqo-green' : 'border-semantic-error') : 'border-neutral-line')}>
              <div className="flex gap-2">
                <span className="text-sm font-semibold text-uqo-blue">{i + 1}.</span>
                <div className="md text-sm flex-1"><StreamingText text={q.prompt} /></div>
                {r && (r.correct ? <Check className="text-uqo-green shrink-0" size={18} /> : <X className="text-semantic-error shrink-0" size={18} />)}
              </div>
              <div className="mt-2 pl-5 space-y-1.5">
                {q.type === 'mcq' && q.choices?.map((c, idx) => (
                  <label key={idx} className={cn('flex items-start gap-2 rounded-lg px-2 py-2 cursor-pointer min-h-[44px] hover:bg-neutral-surface', r && Number(r.answer) === idx && 'bg-[#e9f6d9]')}>
                    <input type="radio" name={q.id} className="mt-1 accent-uqo-blue" disabled={!!result} checked={answers[q.id] === idx} onChange={() => setAnswers((a) => ({ ...a, [q.id]: idx }))} />
                    <span className="text-sm">{c}</span>
                  </label>
                ))}
                {q.type === 'true_false' && (
                  <div className="flex gap-2">
                    {[true, false].map((v) => (
                      <button key={String(v)} disabled={!!result} onClick={() => setAnswers((a) => ({ ...a, [q.id]: v }))}
                        className={cn('h-11 px-4 rounded-xl border text-sm font-medium', answers[q.id] === v ? 'bg-uqo-blue text-white border-uqo-blue' : 'border-neutral-line bg-white', r && r.answer === v && 'ring-2 ring-uqo-green')}>
                        {v ? 'Vrai' : 'Faux'}
                      </button>
                    ))}
                  </div>
                )}
                {q.type === 'numeric' && (
                  <div className="flex items-center gap-2">
                    <input type="text" inputMode="decimal" disabled={!!result} placeholder="Réponse" value={(answers[q.id] as string) ?? ''}
                      onChange={(e) => setAnswers((a) => ({ ...a, [q.id]: e.target.value }))}
                      className="h-11 w-44 rounded-xl border border-neutral-line px-3 text-sm" />
                    {q.unit && <span className="text-sm text-neutral-muted">{q.unit}</span>}
                    {r && !r.correct && <span className="text-sm text-neutral-muted">Réponse : <b>{String(r.answer)}</b> {r.unit}</span>}
                  </div>
                )}
                {r && r.explanation && <div className="md text-sm mt-2 rounded-lg bg-uqo-blue-light/60 p-2.5"><StreamingText text={r.explanation} /></div>}
              </div>
            </li>
          );
        })}
      </ol>
      <div className="flex gap-2">
        {!result ? (
          <Button onClick={submit} disabled={!answered || busy}>{busy ? 'Correction…' : 'Corriger'}</Button>
        ) : (
          <Button variant="secondary" onClick={reset}><RotateCcw size={16} /> Refaire</Button>
        )}
      </div>
    </div>
  );
}