"use client";

import { useState, useCallback, useEffect } from "react";
import { motion, AnimatePresence, type PanInfo } from "framer-motion";
import { Info, ChevronUp, X } from "lucide-react";
import PreviewToolbar from "./PreviewToolbar";
import PreviewNavigation from "./PreviewNavigation";
import MetadataEditor from "./editors/MetadataEditor";
import VersionHistory from "./VersionHistory";
import { getPlugin } from "./plugins";
import type { FileData } from "@/types/files";
import toast from "react-hot-toast";

interface PreviewEngineProps {
  file: FileData | null;
  files?: FileData[];
  onClose: () => void;
  onNavigate?: (file: FileData) => void;
  /** Appelé après une modification (favori, version restaurée, sauvegarde) pour rafraîchir la liste parente */
  onChanged?: () => void;
}

function useCoarsePointer() {
  const [coarse, setCoarse] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia("(pointer: coarse)");
    const upd = () => setCoarse(mq.matches);
    upd();
    mq.addEventListener("change", upd);
    return () => mq.removeEventListener("change", upd);
  }, []);
  return coarse;
}

export default function PreviewEngine({ file, files = [], onClose, onNavigate, onChanged }: PreviewEngineProps) {
  const [fullscreen, setFullscreen] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [showInfo, setShowInfo] = useState(false);
  const [showMobileInfo, setShowMobileInfo] = useState(false);
  const [isFavorite, setIsFavorite] = useState(!!file?.metadata?.isFavorite);
  const [direction, setDirection] = useState(0);
  const coarse = useCoarsePointer();

  useEffect(() => { setIsFavorite(!!file?.metadata?.isFavorite); }, [file]);

  // Préchargement des images voisines
  useEffect(() => {
    if (!file || files.length < 2) return;
    const idx = files.findIndex((f) => f.id === file.id);
    if (idx === -1) return;
    [files[idx - 1], files[idx + 1]]
      .filter((f): f is FileData => !!f && f.mimeType.startsWith("image/"))
      .forEach((f) => { const img = new Image(); img.src = `/api/files/${f.id}/preview?w=2048`; });
  }, [file, files]);

  // Échap : quitter l'édition / le plein écran / fermer
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key !== "Escape") return;
      const t = e.target as HTMLElement | null;
      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
      if (isEditing) return;
      if (fullscreen) { setFullscreen(false); return; }
      onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [isEditing, fullscreen, onClose]);

  // Bloquer le défilement du fond en plein écran
  useEffect(() => {
    if (!fullscreen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, [fullscreen]);

  const handleSave = useCallback(
    async (data: Blob | string, asNewVersion?: boolean) => {
      if (!file) return;
      try {
        if (typeof data === "string") {
          const res = await fetch(`/api/files/${file.id}/content`, { method: "PUT", headers: { "Content-Type": "text/plain" }, body: data });
          if (!res.ok) throw new Error("Save failed");
          toast.success("Fichier sauvegardé");
        } else {
          const formData = new FormData();
          formData.append("file", data, file.name);
          if (asNewVersion) formData.append("asNewVersion", "true");
          const res = await fetch(`/api/files/${file.id}/save-edit`, { method: "POST", body: formData });
          if (!res.ok) throw new Error("Save failed");
          toast.success(asNewVersion ? "Nouvelle version créée" : "Fichier sauvegardé");
        }
        onChanged?.();
      } catch {
        toast.error("Erreur lors de la sauvegarde");
      }
    },
    [file, onChanged]
  );

  const handleToggleFavorite = useCallback(async () => {
    if (!file) return;
    try {
      const res = await fetch(`/api/files/${file.id}/favorite`, { method: "POST" });
      if (res.ok) {
        const meta = await res.json().catch(() => null);
        const fav = typeof meta?.isFavorite === "boolean" ? meta.isFavorite : !isFavorite;
        setIsFavorite(fav);
        toast.success(fav ? "Ajouté aux favoris" : "Retiré des favoris");
        onChanged?.();
      }
    } catch {
      toast.error("Erreur");
    }
  }, [file, isFavorite, onChanged]);

  if (!file) return null;

  const plugin = getPlugin(file.mimeType);
  const PluginComponent = plugin.component;
  const idx = files.findIndex((f) => f.id === file.id);
  const canSwipe = coarse && files.length > 1 && !!onNavigate && !isEditing;

  const navigateTo = (f: FileData, dir: number) => {
    setDirection(dir);
    setIsEditing(false);
    onNavigate?.(f);
  };

  const onSwipeEnd = (_: unknown, info: PanInfo) => {
    if (!canSwipe) return;
    const threshold = 70;
    if ((info.offset.x < -threshold || info.velocity.x < -500) && idx < files.length - 1) navigateTo(files[idx + 1], 1);
    else if ((info.offset.x > threshold || info.velocity.x > 500) && idx > 0) navigateTo(files[idx - 1], -1);
  };

  const infoPanel = (
    <>
      <MetadataEditor file={file} onUpdate={onChanged} />
      <VersionHistory fileId={file.id} onRestore={onChanged} />
    </>
  );

  return (
    <AnimatePresence>
      <motion.div
        key="preview-root"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.16 }}
        className={`flex flex-col bg-canvas transition-colors ${
          fullscreen ? "fixed inset-0 z-[60]" : "fixed inset-0 z-50 lg:relative lg:inset-auto lg:z-auto lg:h-full lg:w-full"
        }`}
        role="dialog"
        aria-label={`Aperçu : ${file.name}`}
      >
        <PreviewToolbar
          file={file}
          fullscreen={fullscreen}
          isEditing={isEditing}
          supportsEdit={!!plugin.supportsEdit}
          onClose={onClose}
          onToggleFullscreen={() => setFullscreen(!fullscreen)}
          onToggleEdit={() => setIsEditing(!isEditing)}
          onToggleFavorite={handleToggleFavorite}
          isFavorite={isFavorite}
          onToggleInfo={fullscreen ? () => setShowInfo(!showInfo) : undefined}
          infoOpen={showInfo}
          position={files.length > 1 && idx >= 0 ? { index: idx + 1, total: files.length } : undefined}
        />

        <div className="flex-1 flex overflow-hidden min-h-0">
          {/* Zone principale */}
          <div className="flex-1 relative overflow-hidden min-w-0">
            <AnimatePresence mode="wait" initial={false} custom={direction}>
              <motion.div
                key={file.id}
                custom={direction}
                initial={{ opacity: 0, x: direction * 40 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: direction * -40 }}
                transition={{ duration: 0.18, ease: [0.2, 0.8, 0.2, 1] }}
                className="absolute inset-0"
                drag={canSwipe ? "x" : false}
                dragConstraints={{ left: 0, right: 0 }}
                dragElastic={0.12}
                dragDirectionLock
                onDragEnd={onSwipeEnd}
              >
                <PluginComponent file={file} isEditing={isEditing} onSave={handleSave} fullscreen={fullscreen} />
              </motion.div>
            </AnimatePresence>

            {files.length > 1 && onNavigate && !isEditing && (
              <PreviewNavigation files={files} currentFile={file} onNavigate={(f) => navigateTo(f, files.indexOf(f) > idx ? 1 : -1)} />
            )}

            {/* Bouton fermer flottant (mobile plein écran, si la barre est masquée par un plugin) */}
            {fullscreen && (
              <button onClick={() => setFullscreen(false)} className="lg:hidden absolute top-3 right-3 z-20 w-10 h-10 rounded-full glass flex items-center justify-center text-gray-700 dark:text-gray-200" aria-label="Quitter le plein écran">
                <X className="w-5 h-5" />
              </button>
            )}
          </div>

          {/* Panneau infos desktop en plein écran */}
          <AnimatePresence initial={false}>
            {fullscreen && showInfo && (
              <motion.aside
                initial={{ width: 0, opacity: 0 }}
                animate={{ width: 320, opacity: 1 }}
                exit={{ width: 0, opacity: 0 }}
                transition={{ type: "spring", stiffness: 380, damping: 36 }}
                className="hidden lg:block shrink-0 overflow-hidden border-l border-line dark:border-white/[0.07] bg-surface dark:bg-canvas"
              >
                <div className="w-[320px] h-full overflow-auto">{infoPanel}</div>
              </motion.aside>
            )}
          </AnimatePresence>
        </div>

        {/* Mobile : bascule infos */}
        {!fullscreen && (
          <div className="lg:hidden border-t border-line dark:border-white/[0.07] bg-surface/80 dark:bg-canvas/80 backdrop-blur pb-safe shrink-0">
            <button
              onClick={() => setShowMobileInfo(!showMobileInfo)}
              className="w-full flex items-center justify-center gap-2 h-11 text-[13px] text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
              aria-expanded={showMobileInfo}
            >
              <Info className="w-4 h-4" />
              <span>{showMobileInfo ? "Masquer les infos" : "Infos, tags & versions"}</span>
              <ChevronUp className={`w-4 h-4 transition-transform ${showMobileInfo ? "rotate-180" : ""}`} />
            </button>
            <AnimatePresence initial={false}>
              {showMobileInfo && (
                <motion.div initial={{ height: 0 }} animate={{ height: "auto" }} exit={{ height: 0 }} transition={{ duration: 0.2 }} className="overflow-hidden">
                  <div className="max-h-[45dvh] overflow-auto border-t border-line dark:border-white/[0.07]">{infoPanel}</div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        )}

        {/* Desktop, panneau latéral (non plein écran) : infos sous l'aperçu */}
        {!fullscreen && (
          <div className="hidden lg:block border-t border-line dark:border-white/[0.07] overflow-auto max-h-[45%] shrink-0 bg-surface/60 dark:bg-transparent">
            {infoPanel}
          </div>
        )}
      </motion.div>
    </AnimatePresence>
  );
}