"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button, Modal } from "@heroui/react";
import { cargarTareas } from "@/app/actions/tareas";
import ResourceLink from "@/components/ui/ResourceLink";
import SystemAlert from "@/components/ui/SystemAlert";
import { TextField, SelectField } from "./aula/EditorUI";
type Data = Awaited<ReturnType<typeof cargarTareas>>;
export default function TaskDialog({
  aulaId,
  taskId,
  label = "Ponerme al día",
  className,
}: {
  aulaId: number;
  taskId?: string;
  label?: string;
  className?: string;
}) {
  const router = useRouter();
  const [open, setOpen] = useState(false),
    [data, setData] = useState<Data>(),
    [selected, setSelected] = useState(taskId ?? ""),
    [busy, setBusy] = useState(false),
    [error, setError] = useState(""),
    [success, setSuccess] = useState(false);
  async function load() {
    setData(undefined);
    setError("");
    try {
      setData(await cargarTareas(aulaId));
    } catch {
      setError("No fue posible cargar las tareas.");
    }
  }
  const task = data?.tasks?.find((t) => t.id === selected) ?? data?.tasks?.[0];
  const index = data?.taskIds?.indexOf(task?.id ?? "") ?? -1;
  const submission = index >= 0 ? data?.entregas?.[index] : undefined;
  return (
    <Modal
      isOpen={open}
      onOpenChange={(v) => {
        if (!busy) setOpen(v);
      }}
    >
      <Button
        className={className ?? "max-w-full truncate rounded-full"}
        variant="secondary"
        size="sm"
        onPress={() => {
          setOpen(true);
          setSuccess(false);
          void load();
        }}
      >
        {label}
      </Button>
      <Modal.Backdrop>
        <Modal.Container>
          <Modal.Dialog className="w-full max-w-2xl">
            <Modal.CloseTrigger />
            <Modal.Header>
              <Modal.Heading>Mis tareas</Modal.Heading>
            </Modal.Header>
            <Modal.Body className="space-y-5">
              {!data && !error && (
                <SystemAlert status="accent" title="Consultando tareas" loading />
              )}
              {(error || data?.error) && (
                <SystemAlert status="danger" title="No se pudo completar">
                  {error || data?.error}
                </SystemAlert>
              )}
              {success && (
                <SystemAlert status="success" title="Tarea entregada">
                  Tu instructor ya puede revisarla.
                </SystemAlert>
              )}
              {data?.tasks && (
                <>
                  <SelectField
                    label="Tarea"
                    value={task?.id ?? ""}
                    onChange={(e) => {
                      setSelected(e.target.value);
                      setSuccess(false);
                    }}
                  >
                    {data.tasks.map((t) => (
                      <option key={t.id} value={t.id}>
                        {t.titulo}
                      </option>
                    ))}
                  </SelectField>
                  {!task ? (
                    <p>No hay tareas asignadas.</p>
                  ) : (
                    <section className="space-y-4">
                      <h2 className="text-lg font-semibold">{task.titulo}</h2>
                      <p className="whitespace-pre-wrap text-sm text-zinc-600">
                        {task.instrucciones}
                      </p>
                      <p className="text-xs text-zinc-500">
                        {task.puntos ?? 100} puntos{task.formato ? " · " + task.formato : ""}
                        {task.fechaEntrega
                          ? " · Entrega: " +
                            new Date(task.fechaEntrega).toLocaleString("es-MX", {
                              timeZone: "America/Mexico_City",
                            })
                          : ""}
                      </p>
                      {task.vencida && (
                        <SystemAlert status="warning" title="Fecha de entrega vencida">
                          Puedes entregar; quedará registrada la fecha real.
                        </SystemAlert>
                      )}
                      {task.guiaUrl && (
                        <ResourceLink
                          url={task.guiaUrl}
                          filename={task.guiaNombre}
                          title="Ver guía de la tarea"
                        />
                      )}
                      {submission && (
                        <div className="space-y-3 rounded-xl border border-zinc-200 p-4">
                          <p className="font-medium">
                            {submission.status === "calificada"
                              ? "Calificada"
                              : submission.status === "requiere_correccion"
                                ? "Requiere corrección"
                                : "Entregada · En revisión"}
                          </p>
                          <ResourceLink
                            url={submission.url}
                            filename={submission.fileName}
                            title={submission.fileName}
                          />
                          <p className="whitespace-pre-wrap text-sm">{submission.comment}</p>
                          {submission.grade !== undefined && (
                            <p className="text-sm">
                              Calificación: {submission.grade} / {submission.maxPoints}
                            </p>
                          )}
                          {submission.feedback && (
                            <SystemAlert title="Comentarios del instructor">
                              {submission.feedback}
                            </SystemAlert>
                          )}
                        </div>
                      )}
                      {!task.disponible ? (
                        <SystemAlert title="Tarea aún no disponible" />
                      ) : (
                        submission?.status !== "calificada" && (
                          <form
                            key={task.id}
                            className="space-y-4"
                            onSubmit={async (e) => {
                              e.preventDefault();
                              const form = e.currentTarget;
                              const body = new FormData(form);
                              setBusy(true);
                              setError("");
                              try {
                                const response = await fetch(
                                  `/api/aulas/${aulaId}/tareas/${encodeURIComponent(task.id)}/entrega`,
                                  { method: "POST", body },
                                );
                                const result = await response.json();
                                if (!response.ok) throw Error(result.error);
                                setSuccess(true);
                                await load();
                                router.refresh();
                              } catch (e) {
                                setError(e instanceof Error ? e.message : "No se pudo entregar.");
                              } finally {
                                setBusy(false);
                              }
                            }}
                          >
                            <label className="block space-y-2 text-sm">
                              <span>Evidencia · PDF, Word, ZIP o JPG/PNG · Máximo 15 MB</span>
                              <input
                                className="block w-full rounded-xl border border-zinc-200 p-3 text-sm"
                                name="file"
                                type="file"
                                accept=".pdf,.doc,.docx,.zip,.jpg,.jpeg,.png"
                                required
                                disabled={busy}
                              />
                            </label>
                            <TextField
                              label="Comentario para tu instructor"
                              name="comment"
                              maxLength={10000}
                              disabled={busy}
                            />
                            <Button
                              className="rounded-full"
                              type="submit"
                              variant="primary"
                              isDisabled={busy}
                            >
                              {busy
                                ? "Enviando…"
                                : submission
                                  ? "Reemplazar entrega"
                                  : "Entregar tarea"}
                            </Button>
                          </form>
                        )
                      )}
                    </section>
                  )}
                </>
              )}
            </Modal.Body>
          </Modal.Dialog>
        </Modal.Container>
      </Modal.Backdrop>
    </Modal>
  );
}