"use client";
import ResourceLink from "@/components/ui/ResourceLink";
import { useConfirmDialog } from "@/components/ui/useConfirmDialog";
import SystemAlert from "@/components/ui/SystemAlert";
import { useState, type FormEvent } from "react";
import { useFormDraft } from "./useFormDraft";
import { type CourseSession, type DidacticMaterial, materialSchema } from "@/lib/aula/schema";
import {
  ActionButton,
  Field,
  FileUpload,
  Panel,
  SelectField,
  TextField,
  fileHref,
} from "./EditorUI";
export default function MaterialEditor({
  draftKey,
  aulaId,
  initial,
  videos,
  onSave,
  onCancel,
}: {
  draftKey: string;
  aulaId: number;
  initial: DidacticMaterial;
  videos: CourseSession[];
  onSave: (material: DidacticMaterial) => void;
  onCancel: () => void;
}) {
  const { ask, confirmationDialog } = useConfirmDialog();
  const draft = useFormDraft(draftKey, initial, materialSchema);
  const material = draft.value;
  const setMaterial = draft.update;
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const patch = (data: Partial<DidacticMaterial>) => setMaterial((m) => ({ ...m, ...data }));
  function save(event: FormEvent) {
    event.preventDefault();
    const parsed = materialSchema.safeParse(material);
    if (!parsed.success || !material.archivoUrl) {
      setError("Completa los campos y carga el archivo del material.");
      return;
    }
    draft.clear();
    onSave(parsed.data);
  }
  return (
    <Panel title="Editar material didáctico">
      {confirmationDialog}
      <form onSubmit={save} className="space-y-5">
        {draft.recovery && (
          <SystemAlert
            status="warning"
            title="Hay cambios sin aplicar"
            action={
              <>
                <ActionButton onClick={draft.restore}>Recuperar formulario</ActionButton>
                <ActionButton
                  onClick={async () => {
                    if (
                      await ask({
                        title: "¿Descartar la copia del formulario?",
                        description:
                          "Se eliminará esta copia de recuperación. Los cambios del formulario abierto se conservan.",
                        confirmLabel: "Descartar copia",
                        status: "warning",
                      })
                    )
                      draft.clear();
                  }}
                >
                  Descartar copia
                </ActionButton>
              </>
            }
          >
            {"Hay cambios sin aplicar de este material."}
          </SystemAlert>
        )}
        <Field
          label="Título del material"
          required
          maxLength={255}
          value={material.titulo}
          onChange={(e) => patch({ titulo: e.target.value })}
        />
        <TextField
          label="Descripción"
          value={material.descripcion ?? ""}
          onChange={(e) => patch({ descripcion: e.target.value })}
        />
        <Field
          label="Categoría"
          required
          maxLength={100}
          list="material-categories"
          value={material.categoria}
          onChange={(e) => patch({ categoria: e.target.value })}
        />
        <datalist id="material-categories">
          <option>Manual Técnico</option>
          <option>Presentación</option>
          <option>Lectura complementaria</option>
          <option>Guía de práctica</option>
        </datalist>
        <SelectField
          label="Videoclase vinculada"
          value={material.claseVinculadaId ?? ""}
          onChange={(e) => patch({ claseVinculadaId: e.target.value })}
        >
          <option value="">Sin vincular</option>
          {videos.map((v) => (
            <option key={v.id} value={v.id}>
              {v.titulo}
            </option>
          ))}
        </SelectField>
        {material.archivoUrl && (
          <ResourceLink
            url={fileHref(aulaId, material.archivoUrl)}
            title={material.titulo || material.archivoNombre}
            filename={material.archivoNombre}
            className="block break-words text-sm text-[#9d2449] underline"
          >
            {material.archivoNombre} · {material.tamano}
          </ResourceLink>
        )}
        <FileUpload
          aulaId={aulaId}
          category="material"
          label="Seleccionar o arrastrar material"
          onBusy={setBusy}
          onUploaded={(file) =>
            patch({
              archivoUrl: file.url,
              archivoNombre: file.filename,
              tamano: `${(file.size / 1048576).toFixed(2)} MB`,
            })
          }
        />
        {error && (
          <SystemAlert status="danger" title="Revisa la información">
            {error}
          </SystemAlert>
        )}
        <div className="flex flex-wrap gap-3">
          <ActionButton type="submit" primary disabled={busy}>
            Aplicar cambios
          </ActionButton>
          <ActionButton
            onClick={() => {
              draft.clear();
              onCancel();
            }}
            disabled={busy}
          >
            Cancelar
          </ActionButton>
        </div>
      </form>
    </Panel>
  );
}