"use client";

import { Accordion, Label, Radio, RadioGroup } from "@heroui/react";
import { Check, ChevronDown, Plus, Trash2 } from "lucide-react";
import type { Question } from "@/lib/aula/schema";
import { createEditorId } from "@/lib/aula/client-id";
import { useConfirmDialog } from "@/components/ui/useConfirmDialog";
import { IconActionButton, ActionButton, Field, TextField } from "./EditorUI";

type Props = {
  questions: Question[];
  activeId: string | null;
  onActiveChange: (id: string | null) => void;
  onChange: (questions: Question[]) => void;
};

export default function QuestionListEditor({
  questions,
  activeId,
  onActiveChange,
  onChange,
}: Props) {
  const { ask, confirmationDialog } = useConfirmDialog();
  function update(index: number, question: Question) {
    onChange(questions.map((previous, i) => (i === index ? question : previous)));
  }
  function add() {
    const id = createEditorId();
    onChange([
      ...questions,
      { id, question: "", options: ["", ""], correctAnswer: 0, explanation: "" },
    ]);
    onActiveChange(id);
  }
  return (
    <section aria-label="Preguntas de la evaluación" className="space-y-3">
      {confirmationDialog}
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h3 className="font-medium">
            Preguntas <span className="text-zinc-400">({questions.length})</span>
          </h3>
          <p className="mt-1 text-xs text-zinc-500">
            Abre una pregunta para editarla y marca su respuesta correcta.
          </p>
        </div>
        <ActionButton onClick={add}>
          <Plus className="size-4" />
          Agregar pregunta
        </ActionButton>
      </div>
      {!questions.length && (
        <p className="rounded-xl border border-dashed border-zinc-200 p-5 text-center text-sm text-zinc-500">
          Agrega la primera pregunta de tu evaluación.
        </p>
      )}
      <Accordion
        className="w-full"
        expandedKeys={new Set(activeId ? [activeId] : [])}
        onExpandedChange={(keys) => onActiveChange(keys.size ? String([...keys][0]) : null)}
      >
        {questions.map((q, index) => {
          const complete =
            !!q.question.trim() &&
            q.options.every((option) => !!option.trim()) &&
            q.correctAnswer < q.options.length;
          return (
            <Accordion.Item key={q.id} id={q.id}>
              <Accordion.Heading>
                <Accordion.Trigger className="items-start gap-3 py-4">
                  <span className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-zinc-100 text-xs font-semibold text-zinc-600">
                    {index + 1}
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="line-clamp-2 break-words text-sm font-medium text-zinc-800">
                      {q.question.trim() || "Pregunta sin completar"}
                    </span>
                    <span
                      className={`mt-1.5 flex items-start gap-1.5 text-xs ${complete ? "text-green-700" : "text-amber-700"}`}
                    >
                      {complete ? (
                        <>
                          <Check className="mt-0.5 size-3 shrink-0" />
                          <span className="line-clamp-2 break-words">
                            Correcta: {String.fromCharCode(65 + q.correctAnswer)}.{" "}
                            {q.options[q.correctAnswer]}
                          </span>
                        </>
                      ) : (
                        "Pendiente de completar"
                      )}
                    </span>
                  </span>
                  <Accordion.Indicator>
                    <ChevronDown />
                  </Accordion.Indicator>
                </Accordion.Trigger>
              </Accordion.Heading>
              <Accordion.Panel>
                {activeId === q.id && (
                  <Accordion.Body className="space-y-4 pb-4">
                    <TextField
                      label="Enunciado"
                      rows={2}
                      maxLength={20000}
                      value={q.question}
                      onChange={(e) => update(index, { ...q, question: e.target.value })}
                    />
                    <RadioGroup
                      aria-label="Respuesta correcta"
                      value={String(q.correctAnswer)}
                      onChange={(value) => update(index, { ...q, correctAnswer: Number(value) })}
                      className="space-y-2"
                      variant="secondary"
                    >
                      <Label>Respuestas</Label>
                      {q.options.map((option, i) => (
                        <div
                          key={i}
                          className={`flex items-center gap-3 rounded-xl border p-3 ${q.correctAnswer === i ? "border-green-200 bg-green-50/60" : "border-zinc-200"}`}
                        >
                          <Radio value={String(i)}>
                            <Radio.Content
                              aria-label={`Marcar opción ${String.fromCharCode(65 + i)} como correcta`}
                            >
                              <Radio.Control>
                                <Radio.Indicator />
                              </Radio.Control>
                            </Radio.Content>
                          </Radio>
                          <div className="min-w-0 flex-1">
                            <Field
                              label={`Opción ${String.fromCharCode(65 + i)}`}
                              value={option}
                              maxLength={2000}
                              onChange={(e) =>
                                update(index, {
                                  ...q,
                                  options: q.options.map((old, oi) =>
                                    oi === i ? e.target.value : old,
                                  ),
                                })
                              }
                            />
                          </div>
                          {q.options.length > 2 && (
                            <IconActionButton
                              aria-label={`Quitar opción ${String.fromCharCode(65 + i)}`}
                              onClick={async () => {
                                if (
                                  !(await ask({
                                    title: "¿Eliminar esta opción?",
                                    description: `Se quitará la opción ${String.fromCharCode(65 + i)} de la pregunta y se ajustará la respuesta correcta si es necesario.`,
                                    confirmLabel: "Eliminar opción",
                                  }))
                                )
                                  return;
                                update(index, {
                                  ...q,
                                  options: q.options.filter((_, oi) => oi !== i),
                                  correctAnswer:
                                    q.correctAnswer === i
                                      ? 0
                                      : q.correctAnswer > i
                                        ? q.correctAnswer - 1
                                        : q.correctAnswer,
                                });
                              }}
                              className="shrink-0"
                            >
                              <Trash2 className="size-4" />
                            </IconActionButton>
                          )}
                        </div>
                      ))}
                    </RadioGroup>
                    {q.options.length < 8 && (
                      <ActionButton
                        onClick={() => update(index, { ...q, options: [...q.options, ""] })}
                      >
                        <Plus className="size-3.5" />
                        Agregar opción
                      </ActionButton>
                    )}
                    <Accordion>
                      <Accordion.Item id={`explanation-${q.id}`}>
                        <Accordion.Heading>
                          <Accordion.Trigger className="text-sm text-zinc-500">
                            Explicación opcional
                            <Accordion.Indicator>
                              <ChevronDown />
                            </Accordion.Indicator>
                          </Accordion.Trigger>
                        </Accordion.Heading>
                        <Accordion.Panel>
                          <Accordion.Body>
                            <TextField
                              label="Explicación de la respuesta"
                              rows={2}
                              value={q.explanation ?? ""}
                              maxLength={20000}
                              onChange={(e) => update(index, { ...q, explanation: e.target.value })}
                            />
                          </Accordion.Body>
                        </Accordion.Panel>
                      </Accordion.Item>
                    </Accordion>
                    <div className="flex flex-wrap items-center justify-between gap-3 border-t border-zinc-100 pt-3">
                      <ActionButton
                        onClick={async () => {
                          if (
                            !(await ask({
                              title: "¿Eliminar esta pregunta?",
                              description:
                                "Se quitará la pregunta junto con sus opciones y explicación de la evaluación.",
                              confirmLabel: "Eliminar pregunta",
                            }))
                          )
                            return;
                          onChange(questions.filter((_, i) => i !== index));
                          onActiveChange(null);
                        }}
                      >
                        <Trash2 className="size-3.5" />
                        Eliminar pregunta
                      </ActionButton>
                      <ActionButton disabled={!complete} onClick={() => onActiveChange(null)}>
                        Listo
                      </ActionButton>
                    </div>
                  </Accordion.Body>
                )}
              </Accordion.Panel>
            </Accordion.Item>
          );
        })}
      </Accordion>
    </section>
  );
}