"use client";
import { ArrowDown, ArrowUp, ArrowRight, Pencil, Plus, Trash2 } from "lucide-react";
import { useConfirmDialog } from "@/components/ui/useConfirmDialog";
import { useState } from "react";
import { createEditorId } from "@/lib/aula/client-id";
import type { CourseDocument, CourseModule } from "@/lib/aula/schema";
import { ActionButton, Field, Panel, TextField } from "./EditorUI";

export default function ModuleManager({
  course,
  onChange,
  onSelect,
}: {
  course: CourseDocument;
  onChange: (course: CourseDocument) => void;
  onSelect: (id: string) => void;
}) {
  const { ask, confirmationDialog } = useConfirmDialog();
  const [editing, setEditing] = useState<{
    id: string;
    titulo: string;
    descripcion: string;
  } | null>(null);
  function patch(id: string, changes: Partial<CourseModule>) {
    onChange({
      ...course,
      modulos: course.modulos.map((m) => (m.id === id ? { ...m, ...changes } : m)),
    });
  }
  function move(index: number, offset: number) {
    const modules = [...course.modulos];
    [modules[index], modules[index + offset]] = [modules[index + offset], modules[index]];
    onChange({ ...course, modulos: modules });
  }
  return (
    <Panel
      title="Gestión de módulos"
      action={
        <ActionButton
          primary
          disabled={course.modulos.length >= 100 || !!editing}
          onClick={() => {
            const id = createEditorId();
            const titulo = `Módulo ${course.modulos.length + 1}`;
            setEditing({ id, titulo, descripcion: "" });
            onChange({
              ...course,
              modulos: [
                ...course.modulos,
                {
                  id,
                  titulo,
                  descripcion: "",
                  componentes: { ...course.componentes },
                },
              ],
            });
          }}
        >
          <Plus className="size-4" />
          Nuevo módulo
        </ActionButton>
      }
    >
      {confirmationDialog}
      <p className="mb-5 text-sm text-zinc-500">
        Organiza el curso por módulos. En cada módulo puedes gestionar sus componentes, videoclases,
        materiales, tareas, evaluaciones y cronología.
      </p>
      <div className="grid gap-4 lg:grid-cols-2">
        {course.modulos.map((module, index) => {
          const sessions = course.sesiones.filter((s) => s.moduloId === module.id);
          return (
            <article
              key={module.id}
              className="flex flex-col gap-4 rounded-2xl border border-zinc-200 bg-white p-5"
            >
              <div className="flex items-center justify-between gap-2">
                <span className="text-xs font-medium text-[#9d2449]">Módulo {index + 1}</span>
                <div className="flex gap-1">
                  <ActionButton
                    aria-label={`Subir ${module.titulo}`}
                    disabled={index === 0}
                    onClick={() => move(index, -1)}
                  >
                    <ArrowUp className="size-4" />
                  </ActionButton>
                  <ActionButton
                    aria-label={`Bajar ${module.titulo}`}
                    disabled={index === course.modulos.length - 1}
                    onClick={() => move(index, 1)}
                  >
                    <ArrowDown className="size-4" />
                  </ActionButton>
                  <ActionButton
                    aria-label={`Eliminar ${module.titulo}`}
                    onClick={async () => {
                      if (
                        !(await ask({
                          title: `¿Eliminar «${module.titulo}»?`,
                          description:
                            "Se eliminará el módulo junto con sus videoclases, materiales, tareas y evaluaciones. El contenido ya no estará disponible en el curso.",
                          confirmLabel: "Eliminar módulo",
                        }))
                      )
                        return;
                      onChange({
                        ...course,
                        modulos: course.modulos.filter((m) => m.id !== module.id),
                        sesiones: course.sesiones.filter((s) => s.moduloId !== module.id),
                        materiales: course.materiales.filter((m) => m.moduloId !== module.id),
                      });
                      if (editing?.id === module.id) setEditing(null);
                    }}
                  >
                    <Trash2 className="size-4" />
                  </ActionButton>
                </div>
              </div>
              {editing?.id === module.id ? (
                <form
                  className="space-y-4"
                  onSubmit={(event) => {
                    event.preventDefault();
                    if (!editing.titulo.trim()) return;
                    patch(module.id, {
                      titulo: editing.titulo.trim(),
                      descripcion: editing.descripcion,
                    });
                    setEditing(null);
                  }}
                >
                  <Field
                    label="Nombre del módulo"
                    autoFocus
                    required
                    maxLength={255}
                    value={editing.titulo}
                    onChange={(e) => setEditing({ ...editing, titulo: e.target.value })}
                  />
                  <TextField
                    label="Descripción del módulo"
                    maxLength={20000}
                    value={editing.descripcion}
                    onChange={(e) => setEditing({ ...editing, descripcion: e.target.value })}
                  />
                  <div className="flex flex-wrap gap-2">
                    <ActionButton primary type="submit" disabled={!editing.titulo.trim()}>
                      Guardar módulo
                    </ActionButton>
                    <ActionButton onClick={() => setEditing(null)}>Cancelar</ActionButton>
                  </div>
                </form>
              ) : (
                <div className="space-y-2">
                  <h3 className="break-words text-lg font-semibold text-zinc-900">
                    {module.titulo}
                  </h3>
                  {module.descripcion && (
                    <p className="whitespace-pre-wrap break-words text-sm leading-relaxed text-zinc-500">
                      {module.descripcion}
                    </p>
                  )}
                </div>
              )}
              <p className="text-xs text-zinc-500">
                {sessions.filter((s) => s.tipo === "video").length} videos ·{" "}
                {sessions.filter((s) => s.tipo === "tarea").length} tareas ·{" "}
                {course.materiales.filter((m) => m.moduloId === module.id).length} materiales
              </p>
              {editing?.id !== module.id && (
                <div className="mt-auto flex flex-wrap gap-2 border-t border-zinc-100 pt-4">
                  <ActionButton
                    disabled={!!editing}
                    onClick={() =>
                      setEditing({
                        id: module.id,
                        titulo: module.titulo,
                        descripcion: module.descripcion,
                      })
                    }
                  >
                    <Pencil className="size-4" />
                    Editar
                  </ActionButton>
                  <ActionButton primary disabled={!!editing} onClick={() => onSelect(module.id)}>
                    Gestionar componentes
                    <ArrowRight className="size-4" />
                  </ActionButton>
                </div>
              )}
            </article>
          );
        })}
      </div>
      {!course.modulos.length && (
        <p className="py-5 text-sm text-zinc-500">Crea el primer módulo para agregar contenido.</p>
      )}
    </Panel>
  );
}