import { useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { createTemplate } from "../api/templates";
import { useToast } from "../context/ToastContext";
import { Field, Input, Select, Checkbox } from "../components/ui/Field";
import Button from "../components/ui/Button";
import { Badge } from "../components/ui/Misc";
import { QUESTION_TYPES, DIFFICULTIES } from "../utils/constants";
import { totalQuestionsFromProfile } from "../utils/format";

const emptyType = () => ({
  type: "multichoice",
  count: 5,
  options_count: 4,
  multiple_correct: false,
  score: 1,
  penalty: 0,
});

export default function CreateTemplatePage() {
  const navigate = useNavigate();
  const toast = useToast();

  const [form, setForm] = useState({
    title: "",
    subject: "",
    educational_level: "",
    language: "es",
  });
  const [types, setTypes] = useState([emptyType()]);
  const [settings, setSettings] = useState({
    shuffle_questions: true,
    shuffle_answers: true,
    include_feedback: true,
  });
  const [difficulty, setDifficulty] = useState({
    easy: 2,
    medium: 3,
    hard: 0,
    very_hard: 0,
  });
  const [errors, setErrors] = useState({});
  const [saving, setSaving] = useState(false);

  const totalDifficulty = useMemo(
    () => totalQuestionsFromProfile(difficulty),
    [difficulty]
  );

  const onField = (e) =>
    setForm((f) => ({ ...f, [e.target.name]: e.target.value }));

  const updateType = (idx, patch) =>
    setTypes((prev) => prev.map((t, i) => (i === idx ? { ...t, ...patch } : t)));

  const addType = () => setTypes((prev) => [...prev, emptyType()]);
  const removeType = (idx) =>
    setTypes((prev) => prev.filter((_, i) => i !== idx));

  const validate = () => {
    const e = {};
    if (form.title.trim().length < 3) e.title = "Mínimo 3 caracteres.";
    if (form.subject.trim().length < 2) e.subject = "Mínimo 2 caracteres.";
    if (form.educational_level.trim().length < 2)
      e.educational_level = "Mínimo 2 caracteres.";
    if (types.length === 0) e.types = "Añade al menos un tipo de pregunta.";
    if (totalDifficulty <= 0)
      e.difficulty = "Reparte al menos una pregunta entre las dificultades.";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!validate()) {
      toast.error("Revisa los campos marcados.");
      return;
    }
    const payload = {
      ...form,
      title: form.title.trim(),
      subject: form.subject.trim(),
      educational_level: form.educational_level.trim(),
      settings: {
        question_types: types.map((t) => ({
          type: t.type,
          count: Number(t.count),
          options_count:
            t.type === "multichoice" ? Number(t.options_count) : null,
          multiple_correct:
            t.type === "multichoice" ? t.multiple_correct : false,
          score: Number(t.score),
          penalty: Number(t.penalty),
        })),
        ...settings,
      },
      difficulty_profile: {
        easy: Number(difficulty.easy) || 0,
        medium: Number(difficulty.medium) || 0,
        hard: Number(difficulty.hard) || 0,
        very_hard: Number(difficulty.very_hard) || 0,
      },
    };

    setSaving(true);
    try {
      const created = await createTemplate(payload);
      toast.success("Plantilla creada correctamente.");
      navigate(`/plantillas/${created.id}`);
    } catch (err) {
      toast.error(err.message);
      if (err.details) {
        console.warn("Detalles de validación:", err.details);
      }
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="page page-narrow">
      <div className="page-header">
        <div>
          <h1>Nuevo examen</h1>
          <p className="page-lead">Define la estructura. Después podrás subir material y generar preguntas.</p>
        </div>
      </div>

      <form onSubmit={submit} noValidate>
        {/* Datos generales */}
        <div className="card mb">
          <div className="card-head">
            <h3>1 · Información general</h3>
          </div>
          <div className="card-body">
            <Field label="Título del examen" error={errors.title}>
              <Input
                name="title"
                value={form.title}
                onChange={onField}
                placeholder="Ej. Examen Tema 3 — Sistemas Operativos"
                error={errors.title}
              />
            </Field>
            <div className="row">
              <Field label="Asignatura" error={errors.subject}>
                <Input
                  name="subject"
                  value={form.subject}
                  onChange={onField}
                  placeholder="Ej. Sistemas Operativos"
                  error={errors.subject}
                />
              </Field>
              <Field label="Nivel educativo" error={errors.educational_level}>
                <Input
                  name="educational_level"
                  value={form.educational_level}
                  onChange={onField}
                  placeholder="Ej. Ciclo Superior DAM"
                  error={errors.educational_level}
                />
              </Field>
            </div>
            <Field label="Idioma">
              <Select name="language" value={form.language} onChange={onField}>
                <option value="es">Español</option>
                <option value="en">Inglés</option>
                <option value="fr">Francés</option>
                <option value="de">Alemán</option>
                <option value="it">Italiano</option>
                <option value="pt">Portugués</option>
              </Select>
            </Field>
          </div>
        </div>

        {/* Tipos de pregunta */}
        <div className="card mb">
          <div className="card-head">
            <h3>2 · Tipos de pregunta</h3>
            <span style={{ flex: 1 }} />
            <Button type="button" variant="subtle" size="sm" onClick={addType}>
              + Añadir tipo
            </Button>
          </div>
          <div className="card-body">
            {errors.types && <div className="field-error mb">{errors.types}</div>}
            {types.map((t, idx) => (
              <div
                key={idx}
                className="card"
                style={{ padding: 16, marginBottom: 14, background: "var(--c-surface-2)" }}
              >
                <div className="flex justify-between items-center mb wrap gap-sm">
                  <strong>Bloque {idx + 1}</strong>
                  {types.length > 1 && (
                    <Button
                      type="button"
                      variant="danger-ghost"
                      size="sm"
                      onClick={() => removeType(idx)}
                    >
                      Eliminar
                    </Button>
                  )}
                </div>
                <div className="row">
                  <Field label="Tipo">
                    <Select
                      value={t.type}
                      onChange={(e) => updateType(idx, { type: e.target.value })}
                    >
                      {QUESTION_TYPES.map((q) => (
                        <option key={q.value} value={q.value}>
                          {q.label}
                        </option>
                      ))}
                    </Select>
                  </Field>
                  <Field label="Nº preguntas">
                    <Input
                      type="number"
                      min={1}
                      max={200}
                      value={t.count}
                      onChange={(e) => updateType(idx, { count: e.target.value })}
                    />
                  </Field>
                </div>
                <div className="row">
                  <Field label="Puntuación">
                    <Input
                      type="number"
                      min={0}
                      step={0.5}
                      value={t.score}
                      onChange={(e) => updateType(idx, { score: e.target.value })}
                    />
                  </Field>
                  <Field label="Penalización">
                    <Input
                      type="number"
                      min={0}
                      step={0.25}
                      value={t.penalty}
                      onChange={(e) =>
                        updateType(idx, { penalty: e.target.value })
                      }
                    />
                  </Field>
                </div>
                {t.type === "multichoice" && (
                  <div className="row items-center">
                    <Field label="Nº de opciones">
                      <Input
                        type="number"
                        min={2}
                        max={8}
                        value={t.options_count}
                        onChange={(e) =>
                          updateType(idx, { options_count: e.target.value })
                        }
                      />
                    </Field>
                    <div style={{ paddingTop: 8 }}>
                      <Checkbox
                        label="Permitir varias respuestas correctas"
                        checked={t.multiple_correct}
                        onChange={(e) =>
                          updateType(idx, { multiple_correct: e.target.checked })
                        }
                      />
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Perfil de dificultad */}
        <div className="card mb">
          <div className="card-head">
            <h3>3 · Reparto por dificultad</h3>
            <span style={{ flex: 1 }} />
            <Badge variant={totalDifficulty > 0 ? "primary" : "danger"}>
              {totalDifficulty} preguntas
            </Badge>
          </div>
          <div className="card-body">
            {errors.difficulty && (
              <div className="field-error mb">{errors.difficulty}</div>
            )}
            <div className="grid grid-2">
              {DIFFICULTIES.map((d) => (
                <Field key={d.value} label={d.label}>
                  <Input
                    type="number"
                    min={0}
                    value={difficulty[d.value]}
                    onChange={(e) =>
                      setDifficulty((p) => ({ ...p, [d.value]: e.target.value }))
                    }
                  />
                </Field>
              ))}
            </div>
            <p className="field-hint">
              Indica cuántas preguntas quieres de cada nivel. La IA intentará
              respetar este reparto.
            </p>
          </div>
        </div>

        {/* Opciones */}
        <div className="card mb">
          <div className="card-head">
            <h3>4 · Opciones del examen</h3>
          </div>
          <div className="card-body flex" style={{ flexDirection: "column", gap: 14 }}>
            <Checkbox
              label="Barajar el orden de las preguntas"
              checked={settings.shuffle_questions}
              onChange={(e) =>
                setSettings((s) => ({ ...s, shuffle_questions: e.target.checked }))
              }
            />
            <Checkbox
              label="Barajar el orden de las respuestas"
              checked={settings.shuffle_answers}
              onChange={(e) =>
                setSettings((s) => ({ ...s, shuffle_answers: e.target.checked }))
              }
            />
            <Checkbox
              label="Incluir retroalimentación (feedback) en las preguntas"
              checked={settings.include_feedback}
              onChange={(e) =>
                setSettings((s) => ({ ...s, include_feedback: e.target.checked }))
              }
            />
          </div>
        </div>

        <div className="flex gap justify-between wrap mobile-stack mt">
          <Button type="button" variant="ghost" onClick={() => navigate("/")}>
            Cancelar
          </Button>
          <Button type="submit" size="lg" loading={saving}>
            Crear examen
          </Button>
        </div>
      </form>
    </div>
  );
}