"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState, useCallback, useRef } from "react";
import { Folder, FolderOpen, ChevronRight } from "lucide-react";
import { FOLDERS_CHANGED_EVENT, handleInternalDrop, hasInternalDrag, readFolderId } from "../files/dnd";

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

interface FolderTreeProps {
  onNavigate?: () => void;
}

const EXPANDED_KEY = "spb-tree-expanded";

export default function FolderTree({ onNavigate }: FolderTreeProps) {
  const pathname = usePathname();
  const [tree, setTree] = useState<TreeFolder[]>([]);
  const [expanded, setExpanded] = useState<Set<string>>(new Set());
  const [dragOverId, setDragOverId] = useState<string | null>(null);
  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  const load = useCallback(() => {
    fetch("/api/folders?tree=true")
      .then((r) => (r.ok ? r.json() : []))
      .then((d) => setTree(Array.isArray(d) ? d : []))
      .catch(() => {});
  }, []);

  useEffect(() => {
    load();
    try {
      const saved = JSON.parse(localStorage.getItem(EXPANDED_KEY) || "[]");
      if (Array.isArray(saved)) setExpanded(new Set(saved));
    } catch {}
    window.addEventListener(FOLDERS_CHANGED_EVENT, load);
    return () => window.removeEventListener(FOLDERS_CHANGED_EVENT, load);
  }, [load]);

  // Déplier automatiquement le chemin du dossier courant
  useEffect(() => {
    const m = pathname.match(/^\/dashboard\/folder\/([^/]+)/);
    if (!m || tree.length === 0) return;
    const target = m[1];
    const path: string[] = [];
    const find = (nodes: TreeFolder[], acc: string[]): boolean => {
      for (const n of nodes) {
        if (n.id === target) { path.push(...acc); return true; }
        if (n.children?.length && find(n.children, [...acc, n.id])) return true;
      }
      return false;
    };
    find(tree, []);
    if (path.length) setExpanded((prev) => new Set([...Array.from(prev), ...path]));
  }, [pathname, tree]);

  const toggle = useCallback((id: string) => {
    setExpanded((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      try { localStorage.setItem(EXPANDED_KEY, JSON.stringify(Array.from(next))); } catch {}
      return next;
    });
  }, []);

  const clearHover = () => {
    if (hoverTimer.current) { clearTimeout(hoverTimer.current); hoverTimer.current = null; }
  };

  function renderNode(node: TreeFolder, depth: number): React.ReactNode {
    const kids = node.children ?? [];
    const hasKids = kids.length > 0;
    const isOpen = expanded.has(node.id);
    const active = pathname === `/dashboard/folder/${node.id}`;
    const over = dragOverId === node.id;

    return (
      <div key={node.id} className="relative">
        {depth > 0 && <span className="absolute top-0 bottom-0 border-l border-line dark:border-white/[0.08]" style={{ left: 10 + (depth - 1) * 14 }} aria-hidden />}
        <div
          className={`relative flex items-center rounded-lg transition-colors ${
            over ? "drop-target" : active ? "bg-blue-500/10 dark:bg-blue-400/10" : "hover:bg-gray-100/80 dark:hover:bg-white/[0.05]"
          }`}
          style={{ paddingLeft: 2 + depth * 14 }}
          onDragEnter={(e) => {
            if (!hasInternalDrag(e.dataTransfer)) return;
            e.preventDefault();
            setDragOverId(node.id);
            clearHover();
            if (hasKids && !isOpen) hoverTimer.current = setTimeout(() => setExpanded((p) => new Set([...Array.from(p), node.id])), 600);
          }}
          onDragOver={(e) => {
            if (!hasInternalDrag(e.dataTransfer)) return;
            e.preventDefault();
            e.dataTransfer.dropEffect = "move";
            if (dragOverId !== node.id) setDragOverId(node.id);
          }}
          onDragLeave={(e) => {
            const next = e.relatedTarget as Node | null;
            if (next && e.currentTarget.contains(next)) return;
            clearHover();
            setDragOverId((cur) => (cur === node.id ? null : cur));
          }}
          onDrop={async (e) => {
            if (!hasInternalDrag(e.dataTransfer)) return;
            e.preventDefault();
            e.stopPropagation();
            clearHover();
            setDragOverId(null);
            if (readFolderId(e.dataTransfer) === node.id) return;
            const moved = await handleInternalDrop(e.dataTransfer, node.id);
            if (moved) {
              window.dispatchEvent(new Event(FOLDERS_CHANGED_EVENT));
              window.dispatchEvent(new Event("spb:files-changed"));
            }
          }}
        >
          <button
            onClick={() => hasKids && toggle(node.id)}
            className={`w-5 h-8 flex items-center justify-center shrink-0 text-gray-400 rounded ${hasKids ? "hover:text-gray-700 dark:hover:text-gray-200" : "pointer-events-none"}`}
            tabIndex={hasKids ? 0 : -1}
            aria-label={hasKids ? (isOpen ? "Replier" : "Déplier") : undefined}
          >
            {hasKids && <ChevronRight className={`w-3.5 h-3.5 transition-transform duration-200 ${isOpen ? "rotate-90" : ""}`} />}
          </button>
          <Link
            href={`/dashboard/folder/${node.id}`}
            onClick={onNavigate}
            className={`flex items-center gap-2 flex-1 min-w-0 h-8 pr-2 text-[13px] transition-colors ${
              active ? "text-blue-700 dark:text-blue-300 font-medium" : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
            }`}
          >
            {(isOpen && hasKids) || over ? (
              <FolderOpen className="w-4 h-4 text-blue-500 shrink-0" />
            ) : (
              <Folder className={`w-4 h-4 shrink-0 ${active ? "text-blue-500 fill-blue-500/20" : "text-blue-400"}`} />
            )}
            <span className="truncate flex-1">{node.name}</span>
            {node._count?.files ? <span className="text-[10.5px] text-gray-400 dark:text-gray-600 tabular-nums">{node._count.files}</span> : null}
          </Link>
        </div>
        {hasKids && isOpen && <div>{kids.map((c) => renderNode(c, depth + 1))}</div>}
      </div>
    );
  }

  if (tree.length === 0) return <p className="px-3 py-2 text-[12px] text-gray-400">Aucun dossier</p>;

  // Regroupement des racines par espace partagé (dossiers personnels d'abord)
  const groups = new Map<string, { label: string | null; nodes: TreeFolder[] }>();
  for (const n of tree) {
    const key = n.sharedSpace?.id ?? "__perso";
    if (!groups.has(key)) groups.set(key, { label: n.sharedSpace?.name ?? null, nodes: [] });
    groups.get(key)!.nodes.push(n);
  }
  const ordered = Array.from(groups.entries()).sort(([a, ga], [b, gb]) => (a === "__perso" ? -1 : b === "__perso" ? 1 : (ga.label ?? "").localeCompare(gb.label ?? "", "fr")));
  if (ordered.length <= 1) return <div className="space-y-px">{tree.map((n) => renderNode(n, 0))}</div>;
  return (
    <div className="space-y-1">
      {ordered.map(([key, g]) => (
        <div key={key}>
          <div className="px-3 pt-2 pb-1 text-[10.5px] font-semibold uppercase tracking-[0.1em] text-gray-400 dark:text-gray-500 truncate" title={g.label ?? "Mes dossiers"}>{g.label ?? "Mes dossiers"}</div>
          <div className="space-y-px">{g.nodes.map((n) => renderNode(n, 0))}</div>
        </div>
      ))}
    </div>
  );
}