"use client";

import Link from "next/link";
import { ChangeEvent, DragEvent, useEffect, useMemo, useState } from "react";
import { api, DocumentItem, Job, Source, Subject, Week } from "@/lib/api";
import { Shell } from "@/components/Shell";
import { Button, Card, ConfirmDialog, StatusBadge } from "@/components/ui";

type PendingDelete =
  | { type: "document"; item: DocumentItem }
  | { type: "source"; item: Source };

export default function WeekPage({ params }: { params: { subjectId: string; weekNumber: string } }) {
  const subjectId = Number(params.subjectId);
  const weekNumber = Number(params.weekNumber);
  const [subject, setSubject] = useState<Subject | null>(null);
  const [week, setWeek] = useState<Week | null>(null);
  const [sources, setSources] = useState<Source[]>([]);
  const [jobs, setJobs] = useState<Job[]>([]);
  const [documents, setDocuments] = useState<DocumentItem[]>([]);
  const [pdfMethod, setPdfMethod] = useState<"standard" | "mistral_ocr">("standard");
  const [pageMode, setPageMode] = useState<"all" | "ranges">("all");
  const [pageRanges, setPageRanges] = useState("");
  const [pendingFiles, setPendingFiles] = useState<File[]>([]);
  const [uploading, setUploading] = useState(false);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [reprocessingId, setReprocessingId] = useState<number | null>(null);
  const [pendingDelete, setPendingDelete] = useState<PendingDelete | null>(null);
  const [dragActive, setDragActive] = useState(false);
  const [error, setError] = useState("");

  const activeJobs = useMemo(() => jobs.some((job) => ["queued", "processing"].includes(job.status)), [jobs]);
  const pendingPdfCount = useMemo(() => pendingFiles.filter(isPdfFile).length, [pendingFiles]);

  async function load() {
    const [subjectData, weekData, sourceList, jobList, documentList] = await Promise.all([
      api.subject(subjectId), api.week(subjectId, weekNumber), api.sources(subjectId, weekNumber), api.jobs(subjectId, weekNumber), api.documents(subjectId, weekNumber),
    ]);
    setSubject(subjectData); setWeek(weekData); setSources(sourceList); setJobs(jobList); setDocuments(documentList);
  }

  useEffect(() => { load().catch((err) => setError(err.message)); }, [subjectId, weekNumber]);
  useEffect(() => {
    if (!activeJobs) return;
    const timer = window.setInterval(() => load().catch((err) => setError(err.message)), 2500);
    return () => window.clearInterval(timer);
  }, [activeJobs]);

  async function uploadFileList(files: File[]) {
    if (!files.length) return;
    setUploading(true); setError("");
    try {
      const ranges = pageMode === "ranges" ? pageRanges : undefined;
      for (const file of files) await api.upload(subjectId, weekNumber, file, pdfMethod === "mistral_ocr", ranges);
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : "No se pudo subir archivo");
    } finally {
      setUploading(false);
      setDragActive(false);
    }
  }

  function isPdfFile(file: File) {
    return file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
  }

  async function prepareFiles(files: File[]) {
    if (!files.length) return;
    setError("");
    setDragActive(false);
    if (files.some(isPdfFile)) {
      setPendingFiles(files);
      return;
    }
    await uploadFileList(files);
  }

  async function confirmPendingUpload() {
    const files = pendingFiles;
    setPendingFiles([]);
    await uploadFileList(files);
  }

  async function uploadFiles(event: ChangeEvent<HTMLInputElement>) {
    const files = Array.from(event.target.files || []);
    try {
      await prepareFiles(files);
    } finally {
      event.target.value = "";
    }
  }

  function handleDrag(event: DragEvent<HTMLDivElement>) {
    event.preventDefault();
    event.stopPropagation();
    if (uploading) return;
    if (event.type === "dragenter" || event.type === "dragover") setDragActive(true);
    if (event.type === "dragleave") setDragActive(false);
  }

  async function handleDrop(event: DragEvent<HTMLDivElement>) {
    event.preventDefault();
    event.stopPropagation();
    if (uploading) return;
    const files = Array.from(event.dataTransfer.files || []);
    await prepareFiles(files);
  }

  async function deleteDocument(document: DocumentItem) {
    setDeletingId(`document-${document.id}`); setError("");
    try {
      await api.deleteDocument(document.id);
      await load();
      setPendingDelete(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : "No se pudo eliminar el documento");
    } finally {
      setDeletingId(null);
    }
  }

  async function deleteSource(source: Source) {
    setDeletingId(`source-${source.id}`); setError("");
    try {
      await api.deleteSource(source.id);
      await load();
      setPendingDelete(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : "No se pudo eliminar la fuente");
    } finally {
      setDeletingId(null);
    }
  }

  async function reprocessSource(source: Source) {
    setReprocessingId(source.id); setError("");
    try {
      const ranges = source.source_type === "pdf" && pageMode === "ranges" ? pageRanges : undefined;
      await api.reprocessSource(source.id, source.source_type === "pdf" && pdfMethod === "mistral_ocr", ranges);
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : "No se pudo reprocesar la fuente");
    } finally {
      setReprocessingId(null);
    }
  }

  function formatFileSize(size?: number | null) {
    if (!size) return "tamano pendiente";
    if (size < 1024 * 1024) return `${Math.round(size / 1024)} KB`;
    return `${(size / (1024 * 1024)).toFixed(1)} MB`;
  }

  function sourceProcessingLabel(source: Source) {
    if (source.document_id) return `Genero: ${source.document_title}`;
    if (["queued", "processing"].includes(source.status)) return "Procesamiento en curso";
    if (source.status === "failed") return "Fallo el procesamiento";
    return "Sin Markdown generado";
  }

  function confirmPendingDelete() {
    if (!pendingDelete) return;
    if (pendingDelete.type === "document") void deleteDocument(pendingDelete.item);
    if (pendingDelete.type === "source") void deleteSource(pendingDelete.item);
  }

  const deleteDialog = pendingDelete ? {
    title: pendingDelete.type === "document" ? "Eliminar Markdown procesado" : "Eliminar fuente",
    description: pendingDelete.type === "document"
      ? `Se eliminara el archivo Markdown "${pendingDelete.item.title}". La fuente original quedara disponible.`
      : `Se eliminara la fuente "${pendingDelete.item.original_name}" junto con sus trabajos y Markdown procesado asociado.`,
  } : null;

  return (
    <Shell>
      <Link href={`/subjects/${subjectId}`} className="text-sm text-blue-300">Volver a {subject?.name || "materia"}</Link>
      <div className="mt-4 grid gap-6 lg:grid-cols-[1fr_380px]">
        <section className="space-y-6">
          <div>
            <h1 className="text-4xl font-bold">Semana {weekNumber}</h1>
            <p className="mt-2 text-slate-400">{week?.title || "Sube fuentes y genera Markdown procesado."}</p>
          </div>
          {error && <Card className="border-red-500/30 bg-red-500/10 text-red-200">{error}</Card>}

          <Card>
            <div className="flex flex-wrap items-center justify-between gap-4">
              <div>
                <h2 className="text-xl font-semibold">Subir archivos</h2>
                <p className="mt-1 text-sm text-slate-400">PDF, DOCX, TXT, Markdown, audio y video.</p>
              </div>
              <label className="cursor-pointer rounded-xl bg-blue-600 px-4 py-2 font-medium hover:bg-blue-500">
                {uploading ? "Subiendo..." : "Seleccionar archivos"}
                <input className="hidden" type="file" multiple onChange={uploadFiles} disabled={uploading} />
              </label>
            </div>
            <div
              className={`mt-5 rounded-2xl border-2 border-dashed p-8 text-center transition ${dragActive ? "border-blue-400 bg-blue-500/15" : "border-white/15 bg-slate-950/50 hover:border-blue-400/50"} ${uploading ? "opacity-70" : ""}`}
              onDragEnter={handleDrag}
              onDragOver={handleDrag}
              onDragLeave={handleDrag}
              onDrop={handleDrop}
            >
              <div className="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-blue-500/15 text-2xl">↑</div>
              <p className="mt-4 font-medium">Arrastra archivos aqui</p>
              <p className="mt-2 text-sm text-slate-400">Puedes soltar varios archivos a la vez. Se procesaran en esta semana.</p>
              <p className="mt-3 text-xs text-slate-500">Soporta PDF, DOCX, TXT, Markdown, audio y video.</p>
              {uploading && <p className="mt-4 text-sm text-blue-300">Subiendo archivos...</p>}
            </div>
            {pendingFiles.length > 0 && (
              <div className="mt-5 rounded-2xl border border-blue-400/40 bg-blue-500/10 p-4">
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <h3 className="font-medium">Configurar PDFs antes de subir</h3>
                    <p className="mt-1 text-sm text-slate-300">
                      Detecte {pendingPdfCount} PDF en {pendingFiles.length} archivo(s). Elige como procesarlos antes de continuar.
                    </p>
                  </div>
                  <button className="rounded-lg border border-white/10 px-3 py-1.5 text-sm hover:bg-white/10" type="button" onClick={() => setPendingFiles([])}>Cancelar</button>
                </div>
                <div className="mt-4 grid gap-4 md:grid-cols-2">
                  <div>
                    <label className="text-sm font-medium text-slate-300">Metodo de procesamiento</label>
                    <select
                      className="mt-2 w-full rounded-xl border border-white/10 bg-slate-900 px-3 py-2 text-sm outline-none ring-blue-500/30 focus:ring-4"
                      value={pdfMethod}
                      onChange={(event) => setPdfMethod(event.target.value as "standard" | "mistral_ocr")}
                    >
                      <option value="standard">Extraccion estandar de texto</option>
                      <option value="mistral_ocr">Mistral OCR (IA)</option>
                    </select>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-slate-300">Paginas a procesar</label>
                    <select
                      className="mt-2 w-full rounded-xl border border-white/10 bg-slate-900 px-3 py-2 text-sm outline-none ring-blue-500/30 focus:ring-4"
                      value={pageMode}
                      onChange={(event) => setPageMode(event.target.value as "all" | "ranges")}
                    >
                      <option value="all">Todas las paginas</option>
                      <option value="ranges">Rangos especificos</option>
                    </select>
                  </div>
                </div>
                {pageMode === "ranges" && (
                  <div className="mt-4">
                    <label className="text-sm font-medium text-slate-300">Rangos</label>
                    <input
                      className="mt-2 w-full rounded-xl border border-white/10 bg-slate-900 px-3 py-2 text-sm outline-none ring-blue-500/30 focus:ring-4"
                      value={pageRanges}
                      onChange={(event) => setPageRanges(event.target.value)}
                      placeholder="Ej: 1-5, 8, 10-12"
                    />
                    <p className="mt-2 text-xs text-slate-500">Separa paginas o rangos con comas. Esta seleccion se aplicara a los PDFs pendientes.</p>
                  </div>
                )}
                <div className="mt-4 flex flex-wrap gap-2">
                  <Button onClick={confirmPendingUpload} disabled={uploading || (pageMode === "ranges" && !pageRanges.trim())}>
                    {uploading ? "Subiendo..." : "Procesar y subir archivos"}
                  </Button>
                  <p className="self-center text-xs text-slate-400">Los archivos que no sean PDF se subiran junto con esta tanda.</p>
                </div>
              </div>
            )}
          </Card>

          <Card>
            <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
              <h2 className="text-xl font-semibold">Documentos Markdown</h2>
              <div className="flex flex-wrap gap-2">
                <a className="rounded-xl border border-white/10 px-3 py-2 text-sm hover:bg-white/10" href={api.exportWeekUrl(subjectId, weekNumber)}>Exportar semana (.md unico)</a>
                <a className="rounded-xl border border-white/10 px-3 py-2 text-sm hover:bg-white/10" href={api.exportWeekZipUrl(subjectId, weekNumber)}>Exportar documentos separados (.zip)</a>
              </div>
            </div>
            <div className="space-y-3">
              {documents.map((doc) => (
                <div key={doc.id} className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-white/10 p-4 hover:bg-white/5">
                  <Link href={`/documents/${doc.id}`} className="min-w-0 flex-1">
                    <div className="font-medium">{doc.title}</div>
                    <div className="mt-1 text-xs text-slate-400">Fuente: {doc.source_original_name || `#${doc.source_id}`}</div>
                    <div className="mt-1 truncate text-xs text-slate-500">{doc.markdown_path}</div>
                  </Link>
                  <Button
                    className="bg-red-600 px-3 py-1.5 text-sm hover:bg-red-500"
                    disabled={deletingId === `document-${doc.id}`}
                    onClick={() => setPendingDelete({ type: "document", item: doc })}
                  >
                    {deletingId === `document-${doc.id}` ? "Eliminando..." : "Eliminar"}
                  </Button>
                </div>
              ))}
              {documents.length === 0 && <p className="text-slate-400">Aun no hay documentos procesados.</p>}
            </div>
          </Card>
        </section>

        <aside className="space-y-4">
          <Card>
            <h2 className="text-lg font-semibold">Trabajos</h2>
            <div className="mt-4 space-y-3">
              {jobs.map((job) => <div key={job.id} className="rounded-xl bg-slate-900 p-3 text-sm"><div className="flex justify-between"><span>#{job.id}</span><StatusBadge status={job.status} /></div><p className="mt-2 text-slate-400">{job.message}</p></div>)}
              {jobs.length === 0 && <p className="text-sm text-slate-400">Sin trabajos.</p>}
            </div>
          </Card>
          <Card>
            <h2 className="text-lg font-semibold">Fuentes</h2>
            <div className="mt-4 space-y-3">
              {sources.map((source) => {
                const busy = ["queued", "processing"].includes(source.status);
                return (
                  <div key={source.id} className="rounded-xl bg-slate-900 p-3 text-sm">
                    <div className="flex items-start justify-between gap-2"><span className="truncate">{source.original_name}</span><StatusBadge status={source.status} /></div>
                    <div className="mt-2 space-y-1 text-xs text-slate-500">
                      <p className={source.document_id ? "text-emerald-300" : source.status === "failed" ? "text-red-300" : "text-amber-300"}>{sourceProcessingLabel(source)}</p>
                      <p>{source.source_type} · {formatFileSize(source.file_size)}{source.processor ? ` · ${source.processor}` : ""}</p>
                      {source.sha256 && <p className="truncate">sha256: {source.sha256.slice(0, 12)}...</p>}
                      {source.page_ranges && <p>paginas: {source.page_ranges}</p>}
                    </div>
                    <div className="mt-3 flex flex-wrap justify-end gap-2">
                      {source.document_id && <Link className="rounded-lg border border-emerald-500/30 px-2 py-1 text-xs text-emerald-200 hover:bg-emerald-500/10" href={`/documents/${source.document_id}`}>Ver Markdown</Link>}
                      <button className="rounded-lg border border-white/10 px-2 py-1 text-xs text-slate-200 hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50" disabled={busy || reprocessingId === source.id} onClick={() => reprocessSource(source)}>{reprocessingId === source.id ? "En cola..." : "Reprocesar"}</button>
                      <button className="rounded-lg border border-red-500/30 px-2 py-1 text-xs text-red-200 hover:bg-red-500/10 disabled:cursor-not-allowed disabled:opacity-50" disabled={deletingId === `source-${source.id}` || busy} onClick={() => setPendingDelete({ type: "source", item: source })}>{deletingId === `source-${source.id}` ? "Eliminando..." : "Eliminar"}</button>
                    </div>
                  </div>
                );
              })}
              {sources.length === 0 && <p className="text-sm text-slate-400">Sin fuentes.</p>}
            </div>
          </Card>
        </aside>
      </div>
      <ConfirmDialog
        open={Boolean(deleteDialog)}
        title={deleteDialog?.title || "Confirmar accion"}
        description={deleteDialog?.description || ""}
        confirmLabel="Eliminar"
        loading={Boolean(deletingId)}
        onConfirm={confirmPendingDelete}
        onCancel={() => setPendingDelete(null)}
      />
    </Shell>
  );
}