"use client";
// components/QuestionCard.jsx — one question rendered as a row in the editor
// document: a left rail (drag grip + number), the prompt/options in the center,
// and the answer key in the right margin, styled in red pen.
import { useState } from "react";
import {
  IconGripVertical, IconArrowUp, IconArrowDown, IconRefresh, IconX,
  IconCircleCheck, IconAlertTriangle, IconArrowRight,
} from "@tabler/icons-react";
import { questionTypeLabel } from "@/lib/schema";

const LETTERS = "ABCDEFGHIJ";

function AutoTextarea({ value, onChange, rows = 2, ...rest }) {
  return <textarea value={value || ""} rows={rows} onChange={(e) => onChange(e.target.value)} {...rest} />;
}

export default function QuestionCard({
  q, index, count, onChange, onMove, onDelete, onRegenerate, busy,
  dragging, over, onDragStart, onDragEnter, onDrop, onDragEnd,
}) {
  const [regenOpen, setRegenOpen] = useState(false);
  const [note, setNote] = useState("");
  const [grabbed, setGrabbed] = useState(false);

  function set(patch) {
    onChange({ ...q, ...patch, verification: patch.verification || { status: "unchecked", note: "" } });
  }
  function setPoints(points) { onChange({ ...q, points }); }

  const v = q.verification || { status: "unchecked" };
  const hasMargin = q.type !== "matching"; // matching edits pairs in the center; others use the margin

  return (
    <div
      className={`qrow${dragging ? " dragging" : ""}${over ? " drag-over" : ""}`}
      draggable={grabbed}
      onDragStart={(e) => { e.dataTransfer.effectAllowed = "move"; onDragStart?.(); }}
      onDragEnter={(e) => { e.preventDefault(); onDragEnter?.(); }}
      onDragOver={(e) => e.preventDefault()}
      onDrop={(e) => { e.preventDefault(); onDrop?.(); }}
      onDragEnd={() => { setGrabbed(false); onDragEnd?.(); }}
    >
      {/* ---- left rail: drag grip + number ---- */}
      <div className="qrail">
        <button
          className="qgrip"
          title="Drag to reorder"
          aria-label={`Drag question ${index + 1} to reorder`}
          onMouseDown={() => setGrabbed(true)}
          onMouseUp={() => setGrabbed(false)}
          onBlur={() => setGrabbed(false)}
          disabled={busy}
        >
          <IconGripVertical size={18} />
        </button>
        <span className="qnum">{index + 1}</span>
      </div>

      {/* ---- center: meta, prompt, student-facing body ---- */}
      <div className="qmain">
        <div className="qcard-head">
          <span className="chip chip-pill chip-neutral">{questionTypeLabel(q.type)}</span>
          {v.status === "pass" && <span className="stamp stamp-pass" title="The accuracy check confirmed this answer against your source."><IconCircleCheck size={13} /> Verified</span>}
          {v.status === "warn" && <span className="stamp stamp-warn" title={v.note}><IconAlertTriangle size={13} /> Check this</span>}
          <span className="qcard-actions">
            <label className="small muted" style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
              <input className="points-input" type="number" min="0" max="100" value={q.points}
                onChange={(e) => setPoints(Math.max(0, Number(e.target.value) || 0))} aria-label="Points" />
              pts
            </label>
            <button className="icon-btn" title="Move up" aria-label="Move up" disabled={index === 0 || busy} onClick={() => onMove(-1)}><IconArrowUp size={16} /></button>
            <button className="icon-btn" title="Move down" aria-label="Move down" disabled={index === count - 1 || busy} onClick={() => onMove(1)}><IconArrowDown size={16} /></button>
            <button className="icon-btn" title="Regenerate this question" aria-label="Regenerate" disabled={busy} onClick={() => setRegenOpen((o) => !o)}><IconRefresh size={16} /></button>
            <button className="icon-btn danger" title="Delete question" aria-label="Delete" disabled={busy} onClick={onDelete}><IconX size={16} /></button>
          </span>
        </div>

        {v.status === "warn" && v.note && (
          <div className="alert alert-warn" style={{ marginTop: 0 }}><IconAlertTriangle size={17} /> <span><b>Accuracy reviewer:</b> {v.note}</span></div>
        )}

        {regenOpen && (
          <div className="alert alert-info" style={{ marginTop: 0, display: "block" }}>
            <div className="field-label">Regenerate this question from your source</div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              <input type="text" placeholder="Optional note to steer it — e.g. make it harder, focus on the causes" value={note}
                onChange={(e) => setNote(e.target.value)} style={{ flex: 1, minWidth: 200 }} />
              <button className="btn btn-primary btn-sm" disabled={busy} onClick={() => { onRegenerate(note); setRegenOpen(false); setNote(""); }}>
                {busy ? <><span className="spinner" /> Working…</> : "Regenerate"}
              </button>
              <button className="btn btn-sm" onClick={() => setRegenOpen(false)}>Cancel</button>
            </div>
          </div>
        )}

        <AutoTextarea
          className="q-prompt"
          value={q.question}
          onChange={(question) => set({ question })}
          rows={q.type === "essay" || q.type === "discussion" ? 3 : 2}
          aria-label="Question text"
          placeholder={q.type === "fill_blank" ? "Sentence with ______ (six underscores) for each blank" : "Question text…"}
        />

        {q.type === "multiple_choice" && (
          <div style={{ marginTop: 10 }}>
            {(q.options || []).map((opt, i) => (
              <div className="opt-row" key={i}>
                <input type="radio" name={"correct-" + q.id} checked={q.correctIndex === i}
                  onChange={() => set({ correctIndex: i })} title="Mark as the correct answer" />
                <span className="opt-letter">{LETTERS[i]}.</span>
                <input type="text" value={opt} onChange={(e) => { const options = [...q.options]; options[i] = e.target.value; set({ options }); }} placeholder={"Option " + LETTERS[i]} />
                <button className="icon-btn danger" title="Remove option" aria-label="Remove option" disabled={q.options.length <= 2}
                  onClick={() => {
                    const options = q.options.filter((_, j) => j !== i);
                    let correctIndex = q.correctIndex;
                    if (correctIndex === i) correctIndex = 0;
                    else if (correctIndex > i) correctIndex -= 1;
                    set({ options, correctIndex });
                  }}><IconX size={15} /></button>
              </div>
            ))}
            {(q.options || []).length < 6 && (
              <button className="btn btn-sm" style={{ marginTop: 6 }} onClick={() => set({ options: [...q.options, ""] })}>+ Add option</button>
            )}
            <div className="field-hint">The <span className="redpen">red radio</span> marks the correct answer.</div>
          </div>
        )}

        {q.type === "matching" && (
          <div className="answer-key" style={{ marginTop: 12 }}>
            <span className="ak-label">Answer key — correct pairs (the student copy shuffles the right column)</span>
            {(q.pairs || []).map((p, i) => (
              <div key={i} style={{ display: "flex", gap: 7, margin: "5px 0", alignItems: "center", flexWrap: "wrap" }}>
                <input type="text" value={p.left} placeholder="Left item" style={{ flex: 1, minWidth: 130 }}
                  onChange={(e) => { const pairs = q.pairs.map((x, j) => j === i ? { ...x, left: e.target.value } : x); set({ pairs }); }} />
                <IconArrowRight size={16} className="muted" />
                <input type="text" value={p.right} placeholder="Matches with" style={{ flex: 1, minWidth: 130 }}
                  onChange={(e) => { const pairs = q.pairs.map((x, j) => j === i ? { ...x, right: e.target.value } : x); set({ pairs }); }} />
                <button className="icon-btn danger" aria-label="Remove pair" disabled={(q.pairs || []).length <= 2} onClick={() => set({ pairs: q.pairs.filter((_, j) => j !== i) })}><IconX size={15} /></button>
              </div>
            ))}
            {(q.pairs || []).length < 10 && (
              <button className="btn btn-sm" onClick={() => set({ pairs: [...q.pairs, { left: "", right: "" }] })}>+ Add pair</button>
            )}
          </div>
        )}

        {q.sourceRef ? (
          <p className="small muted" style={{ margin: "12px 0 0" }}><b style={{ fontWeight: 600 }}>Source:</b> &ldquo;{q.sourceRef}&rdquo;</p>
        ) : null}
      </div>

      {/* ---- right margin: the answer key, in red pen ---- */}
      {hasMargin && (
        <div className="qmargin">
          {q.type === "multiple_choice" && (
            <div className="answer-key">
              <span className="ak-label">Answer key</span>
              <p style={{ margin: 0, fontWeight: 600, color: "var(--redpen-ink)" }}>
                Correct: <span className="redpen">{LETTERS[q.correctIndex] || "?"}</span>
              </p>
            </div>
          )}

          {q.type === "true_false" && (
            <div className="answer-key">
              <span className="ak-label">Answer key</span>
              <label className="check" style={{ margin: "2px 0", display: "inline-flex", marginRight: 18 }}>
                <input type="radio" name={"tf-" + q.id} checked={q.correctAnswer === true} onChange={() => set({ correctAnswer: true })} />
                <span>True</span>
              </label>
              <label className="check" style={{ margin: "2px 0", display: "inline-flex" }}>
                <input type="radio" name={"tf-" + q.id} checked={q.correctAnswer === false} onChange={() => set({ correctAnswer: false })} />
                <span>False</span>
              </label>
            </div>
          )}

          {q.type === "short_answer" && (
            <div className="answer-key">
              <span className="ak-label">Answer key — sample answer</span>
              <AutoTextarea value={q.sampleAnswer} onChange={(sampleAnswer) => set({ sampleAnswer })} rows={2} placeholder="A model answer…" />
              <span className="ak-label" style={{ marginTop: 8 }}>Must-include points (one per line)</span>
              <AutoTextarea value={(q.keyPoints || []).join("\n")}
                onChange={(text) => set({ keyPoints: text.split("\n").map((s) => s.trim()).filter(Boolean) })}
                rows={2} placeholder={"point 1\npoint 2"} />
            </div>
          )}

          {q.type === "essay" && (
            <div className="answer-key">
              <span className="ak-label">Answer key — sample response</span>
              <AutoTextarea value={q.sampleResponse} onChange={(sampleResponse) => set({ sampleResponse })} rows={4} placeholder="A strong model response or outline…" />
              <span className="ak-label" style={{ marginTop: 8 }}>Rubric</span>
              {(q.rubric || []).map((r, i) => (
                <div key={i} style={{ display: "flex", gap: 7, margin: "5px 0", flexWrap: "wrap" }}>
                  <input type="text" value={r.criterion} placeholder="Criterion" style={{ flex: 2, minWidth: 120 }}
                    onChange={(e) => { const rubric = q.rubric.map((x, j) => j === i ? { ...x, criterion: e.target.value } : x); set({ rubric }); }} />
                  <input type="number" className="points-input" value={r.points} min="0" title="Points"
                    onChange={(e) => { const rubric = q.rubric.map((x, j) => j === i ? { ...x, points: Math.max(0, Number(e.target.value) || 0) } : x); set({ rubric }); }} />
                  <input type="text" value={r.description} placeholder="What earns full points" style={{ flex: 3, minWidth: 140 }}
                    onChange={(e) => { const rubric = q.rubric.map((x, j) => j === i ? { ...x, description: e.target.value } : x); set({ rubric }); }} />
                  <button className="icon-btn danger" aria-label="Remove criterion" onClick={() => set({ rubric: q.rubric.filter((_, j) => j !== i) })}><IconX size={15} /></button>
                </div>
              ))}
              <button className="btn btn-sm" onClick={() => set({ rubric: [...(q.rubric || []), { criterion: "", points: 0, description: "" }] })}>+ Add criterion</button>
              {(q.rubric || []).length > 0 && (
                <div className="field-hint">Rubric total: {(q.rubric || []).reduce((s, r) => s + (Number(r.points) || 0), 0)} / question points: {q.points}</div>
              )}
            </div>
          )}

          {q.type === "fill_blank" && (
            <div className="answer-key">
              <span className="ak-label">Answer key — one per blank, in order</span>
              {(q.answers || []).map((a, i) => (
                <div key={i} style={{ display: "flex", gap: 7, alignItems: "center", margin: "5px 0" }}>
                  <span className="opt-letter">{i + 1}.</span>
                  <input type="text" value={a} onChange={(e) => { const answers = [...q.answers]; answers[i] = e.target.value; set({ answers }); }} />
                </div>
              ))}
              <div className="field-hint">
                Blanks in the question: {(String(q.question).match(/_{3,}/g) || []).length}.{" "}
                <button className="btn btn-sm" onClick={() => {
                  const blanks = (String(q.question).match(/_{3,}/g) || []).length || 1;
                  const answers = Array.from({ length: blanks }, (_, i) => q.answers?.[i] || "");
                  set({ answers });
                }}>Match slots to blanks</button>
              </div>
            </div>
          )}

          {q.type === "discussion" && (
            <div className="answer-key">
              <span className="ak-label">Facilitator notes — key talking points</span>
              <AutoTextarea value={(q.talkingPoints || []).join("\n")}
                onChange={(text) => set({ talkingPoints: text.split("\n").map((s) => s.trim()).filter(Boolean) })} rows={3} />
              <span className="ak-label" style={{ marginTop: 8 }}>Follow-up questions (one per line)</span>
              <AutoTextarea value={(q.followUps || []).join("\n")}
                onChange={(text) => set({ followUps: text.split("\n").map((s) => s.trim()).filter(Boolean) })} rows={2} />
            </div>
          )}

          {/* Explanation, present for all types except discussion */}
          {q.type !== "discussion" && (
            <div className="answer-key">
              <span className="ak-label">Explanation (teacher key)</span>
              <AutoTextarea value={q.explanation} onChange={(explanation) => set({ explanation })} rows={3} placeholder="Why this answer is correct…" />
            </div>
          )}
        </div>
      )}
    </div>
  );
}