"use client";

import {
  FileText, Image, Video, Music, FileCode, FileSpreadsheet, File, Archive, MoreVertical, Star, Download, Check, type LucideIcon,
} from "lucide-react";
import { formatFileSize, getFileIcon } from "@/lib/utils";
import { useState, useRef, useEffect, memo } from "react";
import FileActions from "./FileActions";
import type { FileData } from "@/types/files";
import { DND_FILES, setDragGhost } from "./dnd";

interface FileCardProps {
  file: FileData;
  onPreview: (file: FileData) => void;
  onRefresh: () => void;
  viewMode: "grid" | "list";
  /** Sélection (explorateur) */
  selected?: boolean;
  selectMode?: boolean;
  onToggleSelect?: (file: FileData, e: React.MouseEvent) => void;
  /** Ids à emporter dans le glisser (sélection multiple) */
  dragIds?: string[];
  /** Menu contextuel : géré par le parent (position souris) */
  onContextMenu?: (file: FileData, e: React.MouseEvent) => void;
  /** Navigation clavier (roving tabindex) */
  focusable?: boolean;
  onFocusItem?: (file: FileData) => void;
  /** Colonnes de la vue liste rendues par le parent (sticky header aligné) */
  dense?: boolean;
}

const iconMap: Record<string, LucideIcon> = {
  image: Image, video: Video, audio: Music, pdf: FileText, code: FileCode, spreadsheet: FileSpreadsheet,
  archive: Archive, document: FileText, file: File, presentation: FileText,
};

const iconColorMap: Record<string, string> = {
  image: "text-emerald-500", video: "text-purple-500", audio: "text-pink-500", pdf: "text-rose-500", code: "text-amber-500",
  spreadsheet: "text-green-600", archive: "text-orange-500", document: "text-blue-500", presentation: "text-orange-500", file: "text-gray-400",
};

const bgTintMap: Record<string, string> = {
  image: "bg-emerald-50 dark:bg-emerald-950/30", video: "bg-purple-50 dark:bg-purple-950/30", audio: "bg-pink-50 dark:bg-pink-950/30",
  pdf: "bg-rose-50 dark:bg-rose-950/30", code: "bg-amber-50 dark:bg-amber-950/30", spreadsheet: "bg-green-50 dark:bg-green-950/30",
  archive: "bg-orange-50 dark:bg-orange-950/30", document: "bg-blue-50 dark:bg-blue-950/30", presentation: "bg-orange-50 dark:bg-orange-950/30",
  file: "bg-gray-50 dark:bg-white/[0.03]",
};

const typeLabel: Record<string, string> = {
  image: "Image", video: "Vidéo", audio: "Audio", pdf: "PDF", code: "Code", spreadsheet: "Tableur", archive: "Archive",
  document: "Document", presentation: "Présentation", file: "Fichier",
};

export function formatRelativeDate(dateStr: string): string {
  const now = Date.now();
  const then = new Date(dateStr).getTime();
  const diff = now - then;
  const minutes = Math.floor(diff / 60000);
  const hours = Math.floor(diff / 3600000);
  const days = Math.floor(diff / 86400000);
  const months = Math.floor(days / 30);
  if (minutes < 1) return "à l'instant";
  if (minutes < 60) return `il y a ${minutes} min`;
  if (hours < 24) return `il y a ${hours} h`;
  if (days < 30) return `il y a ${days} j`;
  if (months < 12) return `il y a ${months} mois`;
  return new Date(dateStr).toLocaleDateString("fr-CA", { year: "numeric", month: "short" });
}

function extOf(name: string): string {
  const i = name.lastIndexOf(".");
  return i > 0 ? name.slice(i + 1).toUpperCase().slice(0, 5) : "";
}

function FileCardInner({
  file, onPreview, onRefresh, viewMode, selected = false, selectMode = false, onToggleSelect, dragIds, onContextMenu, focusable, onFocusItem,
}: FileCardProps) {
  const [showActions, setShowActions] = useState(false);
  const [dragging, setDragging] = useState(false);
  const [favBusy, setFavBusy] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  const iconType = getFileIcon(file.mimeType);
  const Icon = iconMap[iconType] || File;
  const iconColor = iconColorMap[iconType] || "text-gray-400";
  const bgTint = bgTintMap[iconType] || "bg-gray-50 dark:bg-white/[0.03]";
  const isImage = file.mimeType.startsWith("image/");
  const isFavorite = !!file.metadata?.isFavorite;
  const tags = file.tags ?? [];

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

  const onDragStart = (e: React.DragEvent) => {
    const ids = dragIds && dragIds.length && dragIds.includes(file.id) ? dragIds : [file.id];
    e.dataTransfer.setData(DND_FILES, JSON.stringify(ids));
    e.dataTransfer.setData("text/plain", file.name);
    e.dataTransfer.effectAllowed = "move";
    setDragGhost(e, ids.length > 1 ? `${ids.length} fichiers` : file.name);
    setDragging(true);
  };
  const onDragEnd = () => setDragging(false);

  const toggleFav = async (e: React.MouseEvent) => {
    e.stopPropagation();
    if (favBusy) return;
    setFavBusy(true);
    try {
      await fetch(`/api/files/${file.id}/favorite`, { method: "POST" });
      onRefresh();
    } catch {}
    setFavBusy(false);
  };

  const handleClick = (e: React.MouseEvent) => {
    if (selectMode || e.metaKey || e.ctrlKey || e.shiftKey) {
      onToggleSelect?.(file, e);
      return;
    }
    onPreview(file);
  };

  const handleKey = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") { e.preventDefault(); onPreview(file); }
    else if (e.key === " ") { e.preventDefault(); onToggleSelect?.(file, e as unknown as React.MouseEvent); }
  };

  const ctx = (e: React.MouseEvent) => {
    if (!onContextMenu) return;
    e.preventDefault();
    e.stopPropagation();
    onContextMenu(file, e);
  };

  const commonProps = {
    draggable: true,
    onDragStart,
    onDragEnd,
    onContextMenu: ctx,
    tabIndex: focusable ? 0 : -1,
    onFocus: () => onFocusItem?.(file),
    onKeyDown: handleKey,
    "data-file-id": file.id,
    role: "option",
    "aria-selected": selected,
  } as const;

  const Checkbox = ({ className = "" }: { className?: string }) => (
    <button
      type="button"
      aria-label={selected ? "Désélectionner" : "Sélectionner"}
      onClick={(e) => { e.stopPropagation(); onToggleSelect?.(file, e); }}
      className={`w-5 h-5 rounded-md border flex items-center justify-center transition-all ${
        selected
          ? "bg-blue-500 border-blue-500 text-white shadow-[0_0_0_3px_rgb(var(--accent-500)/.2)]"
          : "border-gray-300 dark:border-white/25 bg-white/80 dark:bg-black/40 text-transparent hover:border-blue-400"
      } ${className}`}
    >
      <Check className="w-3.5 h-3.5" strokeWidth={3} />
    </button>
  );

  /* ================= LISTE ================= */
  if (viewMode === "list") {
    return (
      <div
        {...commonProps}
        className={`group relative flex items-center gap-3 px-3 density-row cursor-pointer select-none transition-colors outline-none ${
          selected ? "bg-blue-500/10 dark:bg-blue-400/10" : "hover:bg-gray-50 dark:hover:bg-white/[0.04]"
        } ${dragging ? "opacity-40" : ""} focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500`}
        onClick={handleClick}
        onDoubleClick={() => onPreview(file)}
      >
        {/* Case + icône */}
        <div className="w-8 h-8 shrink-0 relative flex items-center justify-center">
          <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${bgTint} transition-opacity ${selectMode || selected ? "opacity-0" : "group-hover:opacity-0"}`}>
            {isImage ? (
              <img src={`/api/files/${file.id}/preview?w=200`} alt="" className="w-8 h-8 rounded-lg object-cover" loading="lazy" decoding="async" draggable={false} />
            ) : (
              <Icon className={`w-4 h-4 ${iconColor}`} />
            )}
          </div>
          <div className={`absolute inset-0 flex items-center justify-center transition-opacity ${selectMode || selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}>
            <Checkbox />
          </div>
        </div>

        {/* Nom */}
        <div className="flex-1 min-w-0 flex items-center gap-2">
          <span className="text-[13.5px] text-gray-800 dark:text-gray-100 truncate">{file.name}</span>
          {isFavorite && <Star className="w-3.5 h-3.5 text-amber-400 fill-amber-400 shrink-0" />}
          {tags.length > 0 && (
            <span className="hidden sm:flex items-center gap-1 shrink-0">
              {tags.slice(0, 3).map(({ tag }) => (
                <span key={tag.id} className="w-2 h-2 rounded-full ring-1 ring-black/5 dark:ring-white/10" style={{ backgroundColor: tag.color }} title={tag.name} />
              ))}
              {tags.length > 3 && <span className="text-[10px] text-gray-400">+{tags.length - 3}</span>}
            </span>
          )}
        </div>

        {/* Type */}
        <span className="hidden lg:block w-24 shrink-0 text-[12px] text-gray-400 truncate">{extOf(file.name) || typeLabel[iconType]}</span>
        {/* Taille */}
        <span className="hidden sm:block w-24 shrink-0 text-right text-[13px] text-gray-500 dark:text-gray-400 tabular-nums">{formatFileSize(file.size)}</span>
        {/* Date */}
        <span className="hidden md:block w-28 shrink-0 text-right text-[12px] text-gray-400 tabular-nums" title={new Date(file.updatedAt || file.createdAt).toLocaleString("fr-CA")}>
          {formatRelativeDate(file.updatedAt || file.createdAt)}
        </span>

        {/* Actions */}
        <div className="relative shrink-0 w-10 flex justify-end" ref={menuRef}>
          <button
            onClick={(e) => { e.stopPropagation(); setShowActions(!showActions); }}
            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 ${showActions ? "opacity-100" : "sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100"}`}
            aria-label="Actions"
          >
            <MoreVertical className="w-4 h-4" />
          </button>
          {showActions && <FileActions file={file} onClose={() => setShowActions(false)} onRefresh={onRefresh} onPreview={() => onPreview(file)} />}
        </div>
      </div>
    );
  }

  /* ================= GRILLE ================= */
  return (
    <div
      {...commonProps}
      className={`group relative card card-hover rounded-2xl overflow-hidden cursor-pointer select-none outline-none animate-scale-in focus-visible:ring-2 focus-visible:ring-blue-500 ${
        selected ? "ring-2 ring-blue-500 border-transparent" : ""
      } ${dragging ? "opacity-40" : ""} ${showActions ? "z-30" : ""}`}
      onClick={handleClick}
    >
      {/* Vignette */}
      <div className={`aspect-square flex items-center justify-center overflow-hidden ${isImage ? "bg-gray-100 dark:bg-white/5" : bgTint}`}>
        {isImage ? (
          <img
            src={`/api/files/${file.id}/preview?w=400`}
            alt={file.name}
            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
            loading="lazy"
            decoding="async"
            draggable={false}
          />
        ) : (
          <div className="flex flex-col items-center gap-1.5">
            <Icon className={`w-10 h-10 ${iconColor}`} strokeWidth={1.6} />
            {extOf(file.name) && <span className={`text-[10px] font-semibold tracking-wider ${iconColor} opacity-80`}>{extOf(file.name)}</span>}
          </div>
        )}
        {/* Voile hover */}
        <div className="absolute inset-x-0 top-0 h-14 bg-gradient-to-b from-black/35 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
      </div>

      {/* Case (haut gauche) */}
      <div className={`absolute top-2 left-2 z-10 transition-opacity ${selectMode || selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}>
        <Checkbox />
      </div>

      {/* Favori (haut gauche, quand pas de case) */}
      {isFavorite && !selectMode && !selected && (
        <div className="absolute top-2 left-2 z-[5] group-hover:opacity-0 transition-opacity">
          <Star className="w-4 h-4 text-amber-400 fill-amber-400 drop-shadow" />
        </div>
      )}

      {/* Actions rapides (haut droite) */}
      <div className={`absolute top-1.5 right-1.5 z-20 flex items-center gap-0.5 transition-opacity ${showActions ? "opacity-100" : "sm:opacity-0 sm:group-hover:opacity-100"}`} ref={menuRef}>
        <button
          onClick={toggleFav}
          className="hidden sm:flex w-8 h-8 items-center justify-center rounded-lg bg-white/85 dark:bg-black/55 backdrop-blur text-gray-600 dark:text-gray-200 hover:text-amber-500 transition-colors"
          aria-label={isFavorite ? "Retirer des favoris" : "Ajouter aux favoris"}
        >
          <Star className={`w-4 h-4 ${isFavorite ? "text-amber-400 fill-amber-400" : ""}`} />
        </button>
        <button
          onClick={(e) => { e.stopPropagation(); window.open(`/api/files/${file.id}/download`, "_blank"); }}
          className="hidden sm:flex w-8 h-8 items-center justify-center rounded-lg bg-white/85 dark:bg-black/55 backdrop-blur text-gray-600 dark:text-gray-200 hover:text-blue-600 transition-colors"
          aria-label="Télécharger"
        >
          <Download className="w-4 h-4" />
        </button>
        <div className="relative">
          <button
            onClick={(e) => { e.stopPropagation(); setShowActions(!showActions); }}
            className="w-9 h-9 sm:w-8 sm:h-8 flex items-center justify-center rounded-lg bg-white/85 dark:bg-black/55 backdrop-blur text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white transition-colors"
            aria-label="Actions"
          >
            <MoreVertical className="w-4 h-4" />
          </button>
          {showActions && <FileActions file={file} onClose={() => setShowActions(false)} onRefresh={onRefresh} onPreview={() => onPreview(file)} />}
        </div>
      </div>

      {/* Infos */}
      <div className="p-2.5">
        <p className="text-[13px] leading-tight text-gray-800 dark:text-gray-100 truncate font-medium" title={file.name}>{file.name}</p>
        <p className="text-[11px] text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-1 tabular-nums">
          <span>{formatFileSize(file.size)}</span>
          <span className="text-gray-300 dark:text-gray-600">·</span>
          <span className="truncate">{formatRelativeDate(file.updatedAt || file.createdAt)}</span>
        </p>
        {tags.length > 0 && (
          <div className="flex items-center gap-1 mt-1.5 flex-wrap">
            {tags.slice(0, 4).map(({ tag }) => (
              <span key={tag.id} className="w-2.5 h-2.5 rounded-full shrink-0 ring-1 ring-black/5 dark:ring-white/10" style={{ backgroundColor: tag.color }} title={tag.name} />
            ))}
            {tags.length > 4 && <span className="text-[10px] text-gray-400 leading-none">+{tags.length - 4}</span>}
          </div>
        )}
      </div>
    </div>
  );
}

const FileCard = memo(FileCardInner);
export default FileCard;