"use client";

import { useEffect, useState, useCallback } from "react";
import { Folder, FolderOpen, Home, ChevronRight, ChevronDown, Search } from "lucide-react";
import Modal from "../ui/Modal";
import Button from "../ui/Button";

interface TreeFolder {
  id: string;
  name: string;
  children?: TreeFolder[];
  _count?: { files: number };
}

interface MoveModalProps {
  isOpen: boolean;
  onClose: () => void;
  /** Appelée avec "root" ou l'id du dossier cible. */
  onSelect: (folderId: string) => void;
  /** Dossier (et son sous-arbre) à masquer — pour le déplacement d'un dossier. */
  excludeId?: string;
  title?: string;
  itemName?: string;
  /** Emplacement actuel (désactivé dans la liste) */
  currentFolderId?: string | null;
}

function matches(node: TreeFolder, q: string): boolean {
  if (!q) return true;
  if (node.name.toLowerCase().includes(q)) return true;
  return (node.children ?? []).some((c) => matches(c, q));
}

export default function MoveModal({
  isOpen,
  onClose,
  onSelect,
  excludeId,
  title = "Déplacer vers",
  itemName,
  currentFolderId,
}: MoveModalProps) {
  const [tree, setTree] = useState<TreeFolder[]>([]);
  const [expanded, setExpanded] = useState<Set<string>>(new Set());
  const [loading, setLoading] = useState(false);
  const [query, setQuery] = useState("");
  const [chosen, setChosen] = useState<string | null>(null);

  useEffect(() => {
    if (!isOpen) return;
    setLoading(true);
    setQuery("");
    setChosen(null);
    fetch("/api/folders?tree=true")
      .then((r) => (r.ok ? r.json() : []))
      .then((data) => {
        const t: TreeFolder[] = Array.isArray(data) ? data : [];
        setTree(t);
        setExpanded(new Set(t.filter((n) => n.children?.length).map((n) => n.id)));
      })
      .catch(() => setTree([]))
      .finally(() => setLoading(false));
  }, [isOpen]);

  const toggle = useCallback((id: string) => {
    setExpanded((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  }, []);

  const q = query.trim().toLowerCase();
  const current = currentFolderId ?? undefined;

  function renderNode(node: TreeFolder, depth: number): React.ReactNode {
    if (node.id === excludeId) return null;
    if (!matches(node, q)) return null;
    const kids = node.children ?? [];
    const hasKids = kids.length > 0;
    const isOpen = q ? true : expanded.has(node.id);
    const isCurrent = node.id === current;
    const isChosen = node.id === chosen;
    return (
      <div key={node.id}>
        <div
          className={`flex items-center gap-1 rounded-xl transition-colors ${isChosen ? "bg-blue-500/10 ring-1 ring-blue-500/30" : "hover:bg-gray-100 dark:hover:bg-white/5"}`}
          style={{ paddingLeft: depth * 16 }}
        >
          <button
            type="button"
            onClick={() => hasKids && toggle(node.id)}
            className="w-7 h-10 flex items-center justify-center shrink-0 text-gray-400"
            tabIndex={hasKids ? 0 : -1}
            aria-label={hasKids ? (isOpen ? "Replier" : "Déplier") : undefined}
          >
            {hasKids ? (isOpen ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />) : null}
          </button>
          <button
            type="button"
            disabled={isCurrent}
            onClick={() => setChosen(node.id)}
            onDoubleClick={() => !isCurrent && onSelect(node.id)}
            className={`flex items-center gap-2 flex-1 min-w-0 h-10 pr-2 text-sm text-left rounded-r-xl ${isCurrent ? "text-gray-400 cursor-not-allowed" : "text-gray-700 dark:text-gray-200"}`}
          >
            {isOpen && hasKids ? <FolderOpen className="w-4 h-4 text-blue-500 shrink-0" /> : <Folder className="w-4 h-4 text-blue-400 shrink-0" />}
            <span className="truncate flex-1">{node.name}</span>
            {isCurrent && <span className="text-[10px] uppercase tracking-wider text-gray-400">actuel</span>}
            {!isCurrent && node._count?.files ? <span className="text-[11px] text-gray-400 tabular-nums">{node._count.files}</span> : null}
          </button>
        </div>
        {hasKids && isOpen && <div className="border-l border-line dark:border-white/[0.07] ml-[13px]">{kids.map((c) => renderNode(c, depth + 1))}</div>}
      </div>
    );
  }

  const rootIsCurrent = current === "root" || current === null;

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={title}
      description={itemName ? `Choisissez la destination de « ${itemName} »` : undefined}
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>Annuler</Button>
          <Button variant="accent" disabled={!chosen} onClick={() => chosen && onSelect(chosen)}>Déplacer ici</Button>
        </>
      }
    >
      <div className="relative mb-3">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Filtrer les dossiers…"
          className="field pl-9"
        />
      </div>
      <div className="space-y-0.5 max-h-[48vh] overflow-y-auto -mx-1 px-1">
        <button
          type="button"
          disabled={rootIsCurrent}
          onClick={() => setChosen("root")}
          onDoubleClick={() => !rootIsCurrent && onSelect("root")}
          className={`flex items-center gap-2 w-full px-2 h-10 text-sm font-medium rounded-xl transition-colors ${
            chosen === "root" ? "bg-blue-500/10 ring-1 ring-blue-500/30 text-gray-900 dark:text-white" : rootIsCurrent ? "text-gray-400 cursor-not-allowed" : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/5"
          }`}
        >
          <Home className="w-4 h-4 text-gray-500 shrink-0" />
          <span className="flex-1 text-left">Racine (Fichiers)</span>
          {rootIsCurrent && <span className="text-[10px] uppercase tracking-wider text-gray-400">actuel</span>}
        </button>
        {loading ? (
          <div className="space-y-2 p-2">
            {[0, 1, 2].map((i) => <div key={i} className="h-9 rounded-xl bg-gray-100 dark:bg-white/5 animate-pulse" />)}
          </div>
        ) : (
          tree.map((n) => renderNode(n, 0))
        )}
        {!loading && q && tree.every((n) => !matches(n, q)) && (
          <p className="px-2 py-4 text-sm text-gray-400 text-center">Aucun dossier ne correspond</p>
        )}
      </div>
    </Modal>
  );
}