"use client";

import { useRouter } from "next/navigation";
import { motion } from "framer-motion";
import { Folder, FolderOpen, MoreVertical, Pencil, Trash2, FolderInput, ChevronRight, Share2, Download } from "lucide-react";
import { useState, useRef, useEffect, memo } from "react";
import toast from "react-hot-toast";
import Modal from "../ui/Modal";
import Button from "../ui/Button";
import SharedBadge from "../ui/SharedBadge";
import MoveModal from "../files/MoveModal";
import ShareModal from "../files/ShareModal";
import { DND_FOLDER, handleInternalDrop, hasInternalDrag, notifyFoldersChanged, readFolderId, setDragGhost } from "../files/dnd";

interface FolderData {
  id: string;
  name: string;
  parentId?: string | null;
  sharedSpaceId?: string | null;
  _count?: { files: number; children: number };
}

interface FolderCardProps {
  folder: FolderData;
  onRefresh: () => void;
  viewMode: "grid" | "list";
  /** Navigation personnalisée (espaces partagés) */
  onOpen?: (folder: FolderData) => void;
  focusable?: boolean;
}

function FolderCardInner({ folder, onRefresh, viewMode, onOpen, focusable }: FolderCardProps) {
  const router = useRouter();
  const [showMenu, setShowMenu] = useState(false);
  const [renameModal, setRenameModal] = useState(false);
  const [deleteModal, setDeleteModal] = useState(false);
  const [moveModal, setMoveModal] = useState(false);
  const [shareModal, setShareModal] = useState(false);
  const [newName, setNewName] = useState(folder.name);
  const [loading, setLoading] = useState(false);
  const [dragOver, setDragOver] = useState(false);
  const [dragging, setDragging] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const overCount = useRef(0);

  useEffect(() => {
    if (!showMenu) return;
    function handleClick(e: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setShowMenu(false);
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, [showMenu]);

  const open = () => (onOpen ? onOpen(folder) : router.push(`/dashboard/folder/${folder.id}`));

  const handleMove = async (targetFolderId: string) => {
    try {
      const res = await fetch(`/api/folders/${folder.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ parentId: targetFolderId }),
      });
      if (res.ok) {
        toast.success("Dossier déplacé");
        notifyFoldersChanged();
        onRefresh();
      } else {
        const d = await res.json().catch(() => ({}));
        toast.error(d.error || "Déplacement impossible");
      }
    } catch {
      toast.error("Erreur");
    }
    setMoveModal(false);
  };

  const handleRename = async () => {
    if (!newName.trim()) return;
    setLoading(true);
    try {
      const res = await fetch(`/api/folders/${folder.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: newName.trim() }),
      });
      if (res.ok) {
        toast.success("Dossier renommé");
        notifyFoldersChanged();
        onRefresh();
      } else toast.error("Renommage impossible");
    } catch {
      toast.error("Erreur");
    } finally {
      setLoading(false);
      setRenameModal(false);
    }
  };

  const handleDelete = async () => {
    setLoading(true);
    try {
      const res = await fetch(`/api/folders/${folder.id}`, { method: "DELETE" });
      if (res.ok) {
        toast.success("Dossier supprimé");
        notifyFoldersChanged();
        onRefresh();
      } else toast.error("Suppression impossible");
    } catch {
      toast.error("Erreur");
    } finally {
      setLoading(false);
      setDeleteModal(false);
    }
  };

  /* ---- DnD : source ---- */
  const onDragStart = (e: React.DragEvent) => {
    e.dataTransfer.setData(DND_FOLDER, folder.id);
    e.dataTransfer.setData("text/plain", folder.name);
    e.dataTransfer.effectAllowed = "move";
    setDragGhost(e, `📁 ${folder.name}`);
    setDragging(true);
  };

  /* ---- DnD : cible ---- */
  const acceptable = (e: React.DragEvent) => hasInternalDrag(e.dataTransfer) && !dragging;
  const onDragEnter = (e: React.DragEvent) => {
    if (!acceptable(e)) return;
    e.preventDefault();
    overCount.current++;
    setDragOver(true);
  };
  const onDragOver = (e: React.DragEvent) => {
    if (!acceptable(e)) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
  };
  const onDragLeave = (e: React.DragEvent) => {
    if (!acceptable(e)) return;
    overCount.current = Math.max(0, overCount.current - 1);
    if (overCount.current === 0) setDragOver(false);
  };
  const onDrop = async (e: React.DragEvent) => {
    if (!acceptable(e)) return;
    e.preventDefault();
    e.stopPropagation();
    overCount.current = 0;
    setDragOver(false);
    if (readFolderId(e.dataTransfer) === folder.id) return;
    const moved = await handleInternalDrop(e.dataTransfer, folder.id);
    if (moved) onRefresh();
  };

  const dndProps = {
    draggable: true,
    onDragStart,
    onDragEnd: () => setDragging(false),
    onDragEnter,
    onDragOver,
    onDragLeave,
    onDrop,
    "data-folder-id": folder.id,
    tabIndex: focusable ? 0 : -1,
    onKeyDown: (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); open(); } },
  } as const;

  const menuItems = [
    { icon: Download, label: "Télécharger en ZIP", onClick: () => window.open(`/api/folders/${folder.id}/download`, "_blank") },
    { icon: Share2, label: "Partager…", onClick: () => setShareModal(true) },
    { icon: Pencil, label: "Renommer…", onClick: () => setRenameModal(true) },
    { icon: FolderInput, label: "Déplacer vers…", onClick: () => setMoveModal(true) },
    { icon: Trash2, label: "Supprimer", onClick: () => setDeleteModal(true), danger: true },
  ];

  const Menu = () =>
    showMenu ? (
      <motion.div
        initial={{ opacity: 0, scale: 0.96, y: -4 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        transition={{ duration: 0.14 }}
        className="absolute right-0 top-full mt-1.5 w-52 glass rounded-2xl shadow-pop z-50 p-1.5"
        role="menu"
      >
        {menuItems.map((it, i) => (
          <div key={it.label}>
            {i === menuItems.length - 1 && <div className="my-1 border-t border-line dark:border-white/10" />}
            <button
              role="menuitem"
              onClick={(e) => { e.stopPropagation(); it.onClick(); setShowMenu(false); }}
              className={`flex items-center gap-2.5 w-full px-3 h-10 sm:h-9 rounded-xl text-[13px] transition-colors ${
                it.danger ? "text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10" : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/[0.08]"
              }`}
            >
              <it.icon className={`w-4 h-4 ${it.danger ? "" : "text-gray-400"}`} /> {it.label}
            </button>
          </div>
        ))}
      </motion.div>
    ) : null;

  const modals = (
    <>
      <Modal isOpen={renameModal} onClose={() => setRenameModal(false)} title="Renommer le dossier">
        <input type="text" value={newName} onChange={(e) => setNewName(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleRename()} className="field mb-4" autoFocus onFocus={(e) => e.currentTarget.select()} />
        <div className="flex gap-2 justify-end">
          <Button variant="ghost" onClick={() => setRenameModal(false)}>Annuler</Button>
          <Button variant="accent" onClick={handleRename} loading={loading} disabled={!newName.trim() || newName.trim() === folder.name}>Renommer</Button>
        </div>
      </Modal>
      <Modal isOpen={deleteModal} onClose={() => setDeleteModal(false)} title="Supprimer le dossier">
        <p className="text-gray-600 dark:text-gray-300 text-sm mb-5">
          Supprimer <strong className="text-gray-900 dark:text-white">{folder.name}</strong>
          {folder._count ? <> ({folder._count.files} fichier{folder._count.files !== 1 ? "s" : ""}, {folder._count.children} sous-dossier{folder._count.children !== 1 ? "s" : ""})</> : null} ?
          Les fichiers qu'il contient seront placés dans la corbeille et restaurables pendant 30 jours.
        </p>
        <div className="flex gap-2 justify-end">
          <Button variant="ghost" onClick={() => setDeleteModal(false)}>Annuler</Button>
          <Button variant="danger" onClick={handleDelete} loading={loading}><Trash2 className="w-4 h-4" /> Supprimer</Button>
        </div>
      </Modal>
      <MoveModal isOpen={moveModal} onClose={() => setMoveModal(false)} onSelect={handleMove} excludeId={folder.id} itemName={folder.name} currentFolderId={folder.parentId ?? "root"} />
      <ShareModal isOpen={shareModal} onClose={() => setShareModal(false)} target={{ type: "folder", id: folder.id, name: folder.name }} />
    </>
  );

  const count = folder._count;
  const countLabel = count ? [count.files ? `${count.files} fich.` : null, count.children ? `${count.children} doss.` : null].filter(Boolean).join(" · ") || "Vide" : "";

  /* ================= LISTE ================= */
  if (viewMode === "list") {
    return (
      <>
        <div
          {...dndProps}
          className={`group relative flex items-center gap-3 px-3 density-row cursor-pointer select-none transition-colors outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 ${
            dragOver ? "drop-target" : "hover:bg-gray-50 dark:hover:bg-white/[0.04]"
          } ${dragging ? "opacity-40" : ""}`}
          onClick={open}
          role="option"
          aria-selected={false}
        >
          <div className="w-8 h-8 shrink-0 flex items-center justify-center rounded-lg bg-blue-500/10">
            {dragOver ? <FolderOpen className="w-[18px] h-[18px] text-blue-500" /> : <Folder className="w-[18px] h-[18px] text-blue-500 fill-blue-500/20" />}
          </div>
          <div className="flex-1 min-w-0 flex items-center gap-2">
            <span className="text-[13.5px] font-medium text-gray-800 dark:text-gray-100 truncate">{folder.name}</span>
            {folder.sharedSpaceId && <SharedBadge />}
          </div>
          <span className="hidden lg:block w-24 shrink-0 text-[12px] text-gray-400">Dossier</span>
          <span className="hidden sm:block w-24 shrink-0 text-right text-[12.5px] text-gray-500 dark:text-gray-400 tabular-nums truncate">{countLabel}</span>
          <span className="hidden md:flex w-28 shrink-0 justify-end text-gray-300 dark:text-gray-600"><ChevronRight className="w-4 h-4" /></span>
          <div className="relative shrink-0 w-10 flex justify-end" ref={menuRef}>
            <button
              onClick={(e) => { e.stopPropagation(); setShowMenu(!showMenu); }}
              className={`w-9 h-9 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-800 dark:hover:text-white hover:bg-gray-200/60 dark:hover:bg-white/10 transition-all ${showMenu ? "opacity-100" : "sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100"}`}
              aria-label="Actions du dossier"
            >
              <MoreVertical className="w-4 h-4" />
            </button>
            <Menu />
          </div>
        </div>
        {modals}
      </>
    );
  }

  /* ================= GRILLE ================= */
  return (
    <>
      <div
        {...dndProps}
        className={`group relative card card-hover rounded-2xl p-3 cursor-pointer select-none min-h-[68px] outline-none animate-scale-in focus-visible:ring-2 focus-visible:ring-blue-500 ${
          dragOver ? "drop-target" : ""
        } ${dragging ? "opacity-40" : ""} ${showMenu ? "z-30" : ""}`}
        onClick={open}
      >
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center shrink-0 transition-transform group-hover:scale-105">
            {dragOver ? <FolderOpen className="w-5 h-5 text-blue-500" /> : <Folder className="w-5 h-5 text-blue-500 fill-blue-500/20" />}
          </div>
          <div className="flex-1 min-w-0 pr-7">
            <div className="flex items-center gap-1.5 min-w-0">
              <p className="text-[13.5px] font-medium text-gray-800 dark:text-gray-100 truncate">{folder.name}</p>
              {folder.sharedSpaceId && <SharedBadge />}
            </div>
            {count && <p className="text-[11.5px] text-gray-500 dark:text-gray-400 mt-0.5 truncate">{countLabel}</p>}
          </div>
        </div>
        <div className="absolute top-1.5 right-1.5" ref={menuRef}>
          <button
            onClick={(e) => { e.stopPropagation(); setShowMenu(!showMenu); }}
            className={`w-9 h-9 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-800 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 transition-all ${showMenu ? "opacity-100" : "sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100"}`}
            aria-label="Actions du dossier"
          >
            <MoreVertical className="w-4 h-4" />
          </button>
          <Menu />
        </div>
      </div>
      {modals}
    </>
  );
}

const FolderCard = memo(FolderCardInner);
export default FolderCard;