"use client";
import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
import { useRouter } from "next/navigation";
import { Button, Modal, Spinner } from "@heroui/react";
import { ChevronLeft, ChevronRight, FileText, X } from "lucide-react";
import { cargarEntrega, calificarEntrega } from "@/app/actions/tareas";
import type { PublicSubmission } from "@/lib/aula/submission-schema";
import { useConfirmDialog } from "@/components/ui/useConfirmDialog";
import SystemAlert from "@/components/ui/SystemAlert";
import { Field, TextField } from "./aula/EditorUI";
const PdfViewer = dynamic(() => import("@/components/ui/PdfViewer"), {
  ssr: false,
  loading: () => (
    <div className="flex h-full items-center justify-center">
      <Spinner aria-label="Cargando visor" />
    </div>
  ),
});

export default function SubmissionReviewDialog({
  aulaId,
  id,
  autoOpen = false,
  onDismiss,
  position,
  total,
  onPrevious,
  onNext,
  onSaved,
}: {
  position?: number;
  total?: number;
  onPrevious?: () => void;
  onNext?: () => void;
  onSaved?: () => void;
  aulaId: number;
  id: string;
  autoOpen?: boolean;
  onDismiss?: () => void;
}) {
  const router = useRouter();
  const { ask, confirmationDialog } = useConfirmDialog();
  const [open, setOpen] = useState(autoOpen);
  const [detailsOpen, setDetailsOpen] = useState(false);
  const [submission, setSubmission] = useState<PublicSubmission>();
  const [grade, setGrade] = useState("0");
  const [feedback, setFeedback] = useState("");
  const [correction, setCorrection] = useState(false);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);
  useEffect(() => {
    if (!autoOpen) return;
    let active = true;
    cargarEntrega(aulaId, id)
      .then((result) => {
        if (active) {
          setSubmission(result.entrega);
          setGrade(String(result.entrega?.grade ?? 0));
          setFeedback(result.entrega?.feedback ?? "");
          setCorrection(result.entrega?.status === "requiere_correccion");
          setError(result.error ?? "");
        }
      })
      .catch(() => {
        if (active) setError("No fue posible consultar la entrega.");
      });
    return () => {
      active = false;
    };
  }, [aulaId, id, autoOpen]);
  function close() {
    if (!busy) {
      setDetailsOpen(false);
      setOpen(false);
      onDismiss?.();
    }
  }
  async function navigate(action?: () => void) {
    if (!action || busy) return;
    const changed =
      submission &&
      (grade !== String(submission.grade ?? 0) ||
        feedback !== (submission.feedback ?? "") ||
        correction !== (submission.status === "requiere_correccion"));
    if (
      changed &&
      !(await ask({
        title: "¿Cambiar de entrega sin guardar?",
        description: "Se descartarán los cambios de la revisión actual.",
        confirmLabel: "Descartar revisión",
        status: "warning",
      }))
    )
      return;
    action();
  }
  const review = submission && (
    <div className="space-y-5">
      <div>
        <h2 className="font-semibold">{submission.alumno}</h2>
        <p className="mt-1 text-xs text-zinc-500">
          Entregada el{" "}
          {new Date(submission.submittedAt).toLocaleString("es-MX", {
            timeZone: "America/Mexico_City",
          })}
        </p>
      </div>
      {submission.comment && (
        <div>
          <h3 className="text-xs font-medium text-zinc-500">Comentario del alumno</h3>
          <p className="mt-2 whitespace-pre-wrap break-words text-sm">{submission.comment}</p>
        </div>
      )}
      {error && (
        <SystemAlert status="danger" title="No se guardó la revisión">
          {error}
        </SystemAlert>
      )}
      {submission.status === "calificada" ? (
        <div className="space-y-4">
          <div>
            <h3 className="text-xs font-medium text-zinc-500">Calificación</h3>
            <p className="mt-1 text-xl font-semibold">
              {submission.grade ?? "—"} / {submission.maxPoints}
            </p>
          </div>
          {submission.feedback && (
            <div>
              <h3 className="text-xs font-medium text-zinc-500">Retroalimentación</h3>
              <p className="mt-2 whitespace-pre-wrap text-sm">{submission.feedback}</p>
            </div>
          )}
        </div>
      ) : (
        <form
          className="space-y-4"
          onSubmit={async (e) => {
            e.preventDefault();
            setBusy(true);
            setError("");
            try {
              const result = await calificarEntrega(
                aulaId,
                id,
                submission.revision,
                Number(grade),
                feedback,
                correction,
              );
              if (result.error) setError(result.error);
              else {
                setDetailsOpen(false);
                if (onSaved) onSaved();
                else {
                  setOpen(false);
                  onDismiss?.();
                }
                router.refresh();
              }
            } catch {
              setError("No se guardó la revisión. Vuelve a intentarlo.");
            } finally {
              setBusy(false);
            }
          }}
        >
          <Field
            label={`Calificación (0–${submission.maxPoints})`}
            name="grade"
            type="number"
            min={0}
            max={submission.maxPoints}
            step="0.01"
            value={grade}
            onChange={(e) => setGrade(e.target.value)}
            required
            disabled={busy}
          />
          <TextField
            label="Comentarios y retroalimentación"
            name="feedback"
            value={feedback}
            onChange={(e) => setFeedback(e.target.value)}
            maxLength={10000}
            disabled={busy}
          />
          <label className="flex items-start gap-2 text-sm">
            <input
              className="mt-1"
              type="checkbox"
              checked={correction}
              onChange={(e) => setCorrection(e.target.checked)}
              disabled={busy}
            />
            Solicitar corrección y permitir nueva entrega
          </label>
          <Button className="w-full rounded-full" variant="primary" type="submit" isDisabled={busy}>
            {busy ? "Guardando…" : onNext ? "Guardar y siguiente" : "Guardar revisión"}
          </Button>
        </form>
      )}
    </div>
  );
  return (
    <>
      {confirmationDialog}
      <Modal
        isOpen={open}
        onOpenChange={(value) => {
          if (!value) close();
          else setOpen(true);
        }}
      >
        <Button
          className={autoOpen ? "hidden" : undefined}
          variant="secondary"
          size="sm"
          onPress={async () => {
            setOpen(true);
            setDetailsOpen(false);
            setSubmission(undefined);
            setError("");
            try {
              const result = await cargarEntrega(aulaId, id);
              setSubmission(result.entrega);
              setGrade(String(result.entrega?.grade ?? 0));
              setFeedback(result.entrega?.feedback ?? "");
              setCorrection(result.entrega?.status === "requiere_correccion");
              setError(result.error ?? "");
            } catch {
              setError("No fue posible consultar la entrega.");
            }
          }}
        >
          Revisar entrega
        </Button>
        <Modal.Backdrop>
          <Modal.Container size="full" className="p-0">
            <Modal.Dialog className="flex h-dvh max-h-dvh w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none p-0">
              <Modal.Header className="flex shrink-0 flex-row items-center justify-between gap-3 border-b border-zinc-200 px-4 py-3">
                <div className="min-w-0">
                  <Modal.Heading className="truncate text-base">
                    {submission?.titulo ?? "Revisar entrega"}
                  </Modal.Heading>
                  <p className="truncate text-xs text-zinc-500">
                    {submission?.fileName ?? "Consultando documento…"}
                  </p>
                </div>
                <div className="flex shrink-0 flex-wrap items-center gap-2">
                  {position !== undefined && (
                    <div className="flex items-center gap-1">
                      <Button
                        variant="secondary"
                        isIconOnly
                        size="sm"
                        className="rounded-full"
                        aria-label="Entrega anterior"
                        isDisabled={!onPrevious || busy}
                        onPress={() => navigate(onPrevious)}
                      >
                        <ChevronLeft className="size-4" />
                      </Button>
                      <span className="text-xs text-zinc-500 tabular-nums">
                        {position} / {total}
                      </span>
                      <Button
                        variant="secondary"
                        isIconOnly
                        size="sm"
                        className="rounded-full"
                        aria-label="Siguiente entrega"
                        isDisabled={!onNext || busy}
                        onPress={() => navigate(onNext)}
                      >
                        <ChevronRight className="size-4" />
                      </Button>
                    </div>
                  )}
                  {submission && (
                    <Modal
                      isOpen={detailsOpen}
                      onOpenChange={(value) => {
                        if (!busy) setDetailsOpen(value);
                      }}
                    >
                      <Button
                        className="lg:hidden rounded-full"
                        variant="secondary"
                        size="sm"
                        onPress={() => setDetailsOpen(true)}
                      >
                        <FileText className="size-4" />
                        {submission.status === "calificada" ? "Ver detalles" : "Calificar"}
                      </Button>
                      <Modal.Backdrop>
                        <Modal.Container>
                          <Modal.Dialog className="w-full max-w-md">
                            <Modal.CloseTrigger />
                            <Modal.Header>
                              <Modal.Heading>Datos y calificación</Modal.Heading>
                            </Modal.Header>
                            <Modal.Body>{review}</Modal.Body>
                          </Modal.Dialog>
                        </Modal.Container>
                      </Modal.Backdrop>
                    </Modal>
                  )}
                  <Button
                    className="rounded-full"
                    variant="secondary"
                    isIconOnly
                    aria-label="Cerrar revisión"
                    onPress={close}
                    isDisabled={busy}
                  >
                    <X className="size-4" />
                  </Button>
                </div>
              </Modal.Header>
              <Modal.Body className="grid min-h-0 flex-1 grid-cols-1 gap-0 overflow-hidden p-0 lg:grid-cols-[minmax(0,1fr)_360px]">
                <div className="min-h-0 min-w-0 bg-zinc-100">
                  {!submission ? (
                    <div className="p-5">
                      <SystemAlert
                        status={error ? "danger" : "accent"}
                        title={error || "Consultando entrega"}
                        loading={!error}
                      />
                    </div>
                  ) : /\.pdf$/i.test(submission.fileName) ? (
                    <PdfViewer
                      embedded
                      url={submission.url}
                      title={submission.fileName}
                      onClose={close}
                    />
                  ) : /\.(png|jpe?g)$/i.test(submission.fileName) ? (
                    <div className="flex h-full items-center justify-center overflow-auto p-4">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={submission.url}
                        alt={submission.fileName}
                        className="max-h-full max-w-full object-contain"
                      />
                    </div>
                  ) : (
                    <div className="flex h-full flex-col items-center justify-center gap-4 p-6 text-center">
                      <FileText className="size-12 text-zinc-400" />
                      <p className="text-sm text-zinc-600">Este formato no tiene vista previa.</p>
                      <a
                        href={submission.url}
                        className="text-sm text-[#9d2449] underline underline-offset-4"
                      >
                        Descargar archivo para revisarlo
                      </a>
                    </div>
                  )}
                </div>
                <aside
                  aria-label="Datos y calificación de la entrega"
                  className="hidden min-h-0 overflow-y-auto border-l border-zinc-200 bg-white p-5 lg:block"
                >
                  {review}
                </aside>
              </Modal.Body>
            </Modal.Dialog>
          </Modal.Container>
        </Modal.Backdrop>
      </Modal>
    </>
  );
}