import { useRouter } from "@tanstack/react-router";
import { useSupabaseAuth } from "@/auth/supabase";
import { useState, useEffect, useCallback } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Input } from "@/components/ui/input";
import {
  CarreraCombobox,
  FacultadCombobox,
} from "@/components/users/procedencia-combobox";
import { Button } from "@/components/ui/button";
import { postAPI } from "@/lib/api";
import { supabase } from "@/auth/supabase";
import { DetailDialog } from "@/components/archivos/DetailDialog";
import type { RefRow } from "@/types/RefRow";

// ————————————————————————————————————————————————————————————————
// Utils
// ————————————————————————————————————————————————————————————————
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  return debouncedValue;
}

function fileExt(title?: string) {
  const m = (title || "").match(/\.([a-z0-9]{2,5})$/i);
  return m ? m[1].toLowerCase() : "file";
}

function extIcon(ext: string) {
  // Usa íconos de lucide si ya los tienes en tu stack; si no, fallback a emojis
  const map: Record<string, string> = {
    pdf: "📄",
    doc: "📝",
    docx: "📝",
    xls: "📊",
    xlsx: "📊",
    csv: "📑",
    ppt: "🖼️",
    pptx: "🖼️",
    txt: "📃",
    md: "🗒️",
    json: "{ }",
  };
  return map[ext] || "📁";
}

// ————————————————————————————————————————————————————————————————
// Componente principal
// ————————————————————————————————————————————————————————————————
export function CreatePlanDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
}) {
  const router = useRouter();
  const auth = useSupabaseAuth();
  const role = auth.claims?.role;

  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState<string | null>(null);

  const [facultadId, setFacultadId] = useState(auth.claims?.facultad_id ?? "");
  const [carreraId, setCarreraId] = useState(auth.claims?.carrera_id ?? "");
  const [nivel, setNivel] = useState("");
  const [prompt, setPrompt] = useState(
    "Genera un plan de estudios claro y realista: "
  );

  const [dbFiles, setDbFiles] = useState<
    {
      id: string;
      titulo: string;
      s3_file_path: string;
      fecha_subida?: string;
      tags?: string[];
    }[]
  >([]);
  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
  const [lastSelectedIndex, setLastSelectedIndex] = useState<number | null>(
    null
  );
  const [searchTerm, setSearchTerm] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;
  const debouncedSearchTerm = useDebounce(searchTerm, 300);
  const totalPages = Math.ceil(dbFiles.length / itemsPerPage);

  const [previewRow, setPreviewRow] = useState<RefRow | null>(null);

  const lockFacultad =
    role === "secretario_academico" || role === "jefe_carrera";
  const lockCarrera = role === "jefe_carrera";

  useEffect(() => {
    async function fetchDbFiles() {
      try {
        const { data, error } = await supabase
          .from("documentos")
          .select("documentos_id, titulo_archivo, fecha_subida, tags")
          .ilike("titulo_archivo", `%${debouncedSearchTerm}%`)
          .range(
            (currentPage - 1) * itemsPerPage,
            currentPage * itemsPerPage - 1
          );

        if (error) {
          console.error("Error fetching files from database:", error);
          return;
        }

        setDbFiles(
          (data || []).map((file: any) => ({
            id: file.documentos_id,
            titulo: file.titulo_archivo,
            s3_file_path: `prueba-referencias/documento_${file.documentos_id}.pdf`,
            fecha_subida: file.fecha_subida,
            tags: file.tags || [],
          }))
        );
      } catch (err) {
        console.error("Unexpected error fetching files:", err);
      }
    }

    if (open) fetchDbFiles();
  }, [open, debouncedSearchTerm, currentPage]);

  const isSelected = useCallback(
    (path: string) => selectedFiles.includes(path),
    [selectedFiles]
  );

  const toggleSelected = useCallback((id: string) => {
    setSelectedFiles((prev) =>
      prev.includes(id) ? prev.filter((p) => p !== id) : [...prev, id]
    );
  }, []);

  const replaceSelection = useCallback((id: string) => {
    setSelectedFiles([id]);
  }, []);

  const rangeSelect = useCallback(
    (start: number, end: number) => {
      const [s, e] = start < end ? [start, end] : [end, start];
      const ids = dbFiles.slice(s, e + 1).map((f) => f.id);
      setSelectedFiles((prev) => Array.from(new Set([...prev, ...ids])));
    },
    [dbFiles]
  );

  const handleCardClick = useCallback(
    (e: React.MouseEvent, index: number, file: { id: string }) => {
      const id = file.id;

      if (e.shiftKey && lastSelectedIndex !== null) {
        rangeSelect(lastSelectedIndex, index);
      } else if (e.metaKey || e.ctrlKey) {
        toggleSelected(id);
        setLastSelectedIndex(index);
      } else {
        if (isSelected(id) && selectedFiles.length === 1) {
          // si ya es el único seleccionado, des-selecciona
          setSelectedFiles([]);
          setLastSelectedIndex(null);
        } else {
          replaceSelection(id);
          setLastSelectedIndex(index);
        }
      }
    },
    [
      isSelected,
      lastSelectedIndex,
      rangeSelect,
      replaceSelection,
      selectedFiles.length,
      toggleSelected,
    ]
  );

  const clearSelection = () => {
    setSelectedFiles([]);
    setLastSelectedIndex(null);
  };

  async function crearConIA() {
    setErr(null);
    if (!carreraId) {
      setErr("Selecciona una carrera.");
      return;
    }
    setSaving(true);
    try {

      const {
        data: { session },
      } = await supabase.auth.getSession();
      const token = session?.access_token;

      const { data, error } = await supabase.functions.invoke(
        "crear-plan-estudios",
        {
          headers: { Authorization: `Bearer ${token}` },
          body: {
            carreraId,
            prompt_usuario: prompt,
            insert: true,
            archivos_a_usar: [],
          },
        }
      );
      if (error) throw error;

      const res = JSON.parse(data as string);

      const newId =
        (res as any)?.id || (res as any)?.plan?.id || (res as any)?.data?.id;
      if (newId) {
        onOpenChange(false);
        router.invalidate();
        router.navigate({ to: "/plan/$planId", params: { planId: newId } });
      } else {
        onOpenChange(false);
        router.invalidate();
      }
    } catch (e: any) {
      setErr(
        typeof e?.message === "string" ? e.message : "Error al generar el plan."
      );
    } finally {
      setSaving(false);
    }
  }

  // ————————————————————————————————————————————————————————————————
  // Render
  // ————————————————————————————————————————————————————————————————
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="min-w-[65vw] max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="font-mono">
            Nuevo plan de estudios (IA)
          </DialogTitle>
        </DialogHeader>

        <div className="grid gap-4 md:grid-cols-2">
          <div className="md:col-span-2 space-y-1">
            <Label>Prompt</Label>
            <Textarea
              value={prompt}
              onChange={(e) => setPrompt(e.target.value)}
              className="min-h-[120px]"
              placeholder="Describe cómo debe ser el plan…"
            />
          </div>

          <div className="space-y-1">
            <Label>Nivel (opcional)</Label>
            <Input value={nivel} onChange={(e) => setNivel(e.target.value)} />
          </div>

          <div className="space-y-1">
            <Label>Facultad</Label>
            <FacultadCombobox
              value={facultadId}
              onChange={(id) => {
                setFacultadId(id);
                setCarreraId("");
              }}
              disabled={lockFacultad}
              placeholder="Elige una facultad…"
            />
          </div>

          <div className="md:col-span-2 space-y-1">
            <Label>Carrera *</Label>
            <CarreraCombobox
              facultadId={facultadId}
              value={carreraId}
              onChange={setCarreraId}
              disabled={!facultadId || lockCarrera}
              placeholder={
                facultadId
                  ? "Elige una carrera…"
                  : "Selecciona una facultad primero"
              }
            />
          </div>

          <div className="md:col-span-2 space-y-1">
            <Label>Buscar archivos</Label>
            <Input
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Buscar por título..."
            />
          </div>

          {/* Toolbar de selección */}
          <div className="md:col-span-2 flex flex-wrap items-center justify-between gap-3">
            <div className="text-sm text-neutral-600">
              {selectedFiles.length > 0 ? (
                <span>
                  {selectedFiles.length} seleccionado
                  {selectedFiles.length > 1 ? "s" : ""}
                  <button
                    className="ml-3 underline hover:no-underline"
                    onClick={clearSelection}
                  >
                    Limpiar
                  </button>
                </span>
              ) : (
                <span>
                  Tip: ⇧ para seleccionar rango, ⌘/Ctrl para múltiples.
                </span>
              )}
            </div>
          </div>

          {/* Grid de archivos con selección tipo file manager */}
          <div className="md:col-span-2 space-y-1">
            <Label>Archivos de referencia (opcional)</Label>
            <div
              role="grid"
              className="grid gap-4 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
            >
              {dbFiles.map((file, index) => {
                const ext = fileExt(file.titulo);
                const selected = isSelected(file.id);
                console.log(file);

                return (
                  <div
                    key={file.id}
                    role="gridcell"
                    aria-selected={selected}
                    onClick={(e) => handleCardClick(e, index, file)}
                    onDoubleClick={(e) => {
                      e.stopPropagation();
                      setPreviewRow({
                        documentos_id: file.id,
                        created_by: "unknown",
                        s3_file_path: file.s3_file_path,
                        titulo_archivo: file.titulo,
                        descripcion: "Previsualización del archivo",
                        tipo_contenido: "PDF",
                        interno: true,
                        procesado: true,
                        fuente_autoridad: "",
                        fecha_subida: file.fecha_subida ?? null,
                        tags: file.tags ?? null,
                        instrucciones: "",
                      });
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault();
                        handleCardClick(e as any, index, file);
                      }
                    }}
                    className={[
                      "group relative rounded-2xl border bg-white p-4 text-left shadow-sm transition",
                      "hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
                      selected
                        ? "border-blue-500 ring-2 ring-blue-500 shadow-md"
                        : "border-neutral-200 hover:border-neutral-300",
                    ].join(" ")}
                  >
                    {/* Outline animado tipo file manager */}
                    <span
                      className={[
                        "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500",
                        "opacity-0 group-aria-selected:opacity-100 group-focus:opacity-100 transition-opacity",
                      ].join(" ")}
                    />

                    <div className="flex items-start gap-3">
                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border bg-neutral-50">
                        <span className="text-lg" aria-hidden>
                          {extIcon(ext)}
                        </span>
                      </div>
                      <div className="min-w-0 flex-1">
                        <h3
                          className="font-semibold text-sm md:text-base truncate"
                          title={file.titulo}
                        >
                          {file.titulo}
                        </h3>
                        {file.fecha_subida ? (
                          <p className="text-xs text-neutral-600">
                            {new Date(file.fecha_subida).toLocaleDateString()}
                          </p>
                        ) : (
                          <p className="text-xs text-neutral-500">
                            Fecha desconocida
                          </p>
                        )}

                        {file.tags && file.tags.length > 0 && (
                          <div className="mt-2 flex flex-wrap gap-1.5">
                            {file.tags.map((tag, i) => (
                              <span
                                key={i}
                                className="text-[10px] px-2 py-0.5 bg-neutral-100 text-neutral-700 rounded-full"
                              >
                                #{tag}
                              </span>
                            ))}
                          </div>
                        )}
                      </div>
                    </div>

                    {/* Acciones on-hover */}
                    <div className="absolute right-3 top-3 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={(e) => {
                          e.stopPropagation();
                          setPreviewRow({
                            documentos_id: file.id,
                            created_by: "unknown",
                            s3_file_path: file.s3_file_path,
                            titulo_archivo: file.titulo,
                            descripcion: "Previsualización del archivo",
                            tipo_contenido: "PDF",
                            interno: true,
                            procesado: true,
                            fuente_autoridad: "",
                            fecha_subida: file.fecha_subida ?? null,
                            tags: file.tags ?? null,
                            instrucciones: "",
                          });
                        }}
                      >
                        Previsualizar
                      </Button>
                    </div>

                    {/* Footer compacto */}
                    <div className="mt-4 flex items-center justify-between text-xs text-neutral-600">
                      <span className="truncate">{ext.toUpperCase()}</span>
                      {selected ? (
                        <span className="font-medium">Seleccionado</span>
                      ) : (
                        <span className="opacity-60">
                          Click para seleccionar
                        </span>
                      )}
                    </div>
                  </div>
                );
              })}

              {dbFiles.length === 0 && (
                <p className="text-sm text-neutral-500">
                  No se encontraron archivos.
                </p>
              )}
            </div>

            {/* Paginación mejorada */}
            {dbFiles.length > itemsPerPage && (
              <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
                <div className="text-sm text-neutral-700">
                  Página {currentPage} de {totalPages}
                </div>
                <div className="flex items-center gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    disabled={currentPage === 1}
                    onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
                  >
                    Anterior
                  </Button>
                  <Input
                    className="h-8 w-16 text-center"
                    value={currentPage}
                    onChange={(e) => {
                      const v = parseInt(e.target.value || "1", 10);
                      if (!isNaN(v))
                        setCurrentPage(Math.min(Math.max(v, 1), totalPages));
                    }}
                  />
                  <Button
                    variant="outline"
                    size="sm"
                    disabled={currentPage === totalPages}
                    onClick={() =>
                      setCurrentPage((p) => Math.min(p + 1, totalPages))
                    }
                  >
                    Siguiente
                  </Button>
                </div>
              </div>
            )}
          </div>
        </div>

        {err && <div className="text-sm text-red-600">{err}</div>}

        <DialogFooter className="flex flex-col-reverse sm:flex-row gap-2">
          <Button
            variant="outline"
            className="w-full sm:w-auto"
            onClick={() => onOpenChange(false)}
          >
            Cancelar
          </Button>
          <Button
            className="w-full sm:w-auto"
            onClick={crearConIA}
            disabled={saving}
          >
            {saving ? "Generando…" : "Generar y crear"}
          </Button>
        </DialogFooter>
      </DialogContent>

      {previewRow && (
        <DetailDialog row={previewRow} onClose={() => setPreviewRow(null)} />
      )}
    </Dialog>
  );
}