"use client";

import { useState } from "react";
import { Share2, Download, Eye, Link2, Copy, Check, Folder } from "lucide-react";
import toast from "react-hot-toast";
import Modal from "../ui/Modal";
import Button from "../ui/Button";

export interface ShareTarget {
  type: "file" | "folder";
  id: string;
  name: string;
}

interface ShareModalProps {
  isOpen: boolean;
  onClose: () => void;
  target: ShareTarget;
}

export async function copyToClipboard(text: string): Promise<boolean> {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    const textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.style.position = "fixed";
    textarea.style.opacity = "0";
    document.body.appendChild(textarea);
    textarea.select();
    try {
      document.execCommand("copy");
      return true;
    } catch {
      return false;
    } finally {
      document.body.removeChild(textarea);
    }
  }
}

/** Création d'un lien de partage public (fichier ou dossier complet). */
export default function ShareModal({ isOpen, onClose, target }: ShareModalProps) {
  const [password, setPassword] = useState("");
  const [expiry, setExpiry] = useState("");
  const [mode, setMode] = useState<"DOWNLOAD" | "PREVIEW">("DOWNLOAD");
  const [loading, setLoading] = useState(false);
  const [link, setLink] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);

  const close = () => { setLink(null); setPassword(""); setExpiry(""); onClose(); };

  const create = async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/shares", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          [target.type === "folder" ? "folderId" : "fileId"]: target.id,
          password: password || undefined,
          expiresAt: expiry ? new Date(expiry).toISOString() : undefined,
          mode,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok) {
        const url = `${window.location.origin}/shared/${data.token}`;
        setLink(url);
        const ok = await copyToClipboard(url);
        toast.success(ok ? "Lien copié dans le presse-papiers" : "Lien de partage créé");
      } else {
        toast.error(data.error || "Erreur lors du partage");
      }
    } catch (err) {
      toast.error("Erreur réseau : " + (err as Error).message);
    } finally {
      setLoading(false);
    }
  };

  const isFolder = target.type === "folder";

  return (
    <Modal isOpen={isOpen} onClose={close} title={isFolder ? "Partager le dossier" : "Partager"} description={target.name}>
      {link ? (
        <div className="space-y-4">
          <div className="flex items-center gap-2 text-sm text-emerald-600 dark:text-emerald-400 font-medium">
            <Check className="w-4 h-4" /> Lien de partage créé
          </div>
          <div className="flex items-center gap-2">
            <div className="relative flex-1">
              <Link2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <input type="text" value={link} readOnly className="field pl-9 text-xs font-mono" onClick={(e) => (e.target as HTMLInputElement).select()} />
            </div>
            <Button
              size="sm"
              variant={copied ? "secondary" : "accent"}
              onClick={async () => { await copyToClipboard(link); setCopied(true); toast.success("Lien copié"); setTimeout(() => setCopied(false), 1500); }}
            >
              {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
              {copied ? "Copié" : "Copier"}
            </Button>
          </div>
          {isFolder && (
            <p className="text-[12.5px] text-gray-500 dark:text-gray-400 flex items-start gap-2">
              <Folder className="w-4 h-4 shrink-0 mt-0.5 text-blue-500" />
              Les visiteurs verront le contenu du dossier et de ses sous-dossiers (fichiers ajoutés plus tard inclus) et pourront tout télécharger en ZIP.
            </p>
          )}
          <Button variant="ghost" onClick={close} className="w-full">Fermer</Button>
        </div>
      ) : (
        <div className="space-y-4">
          <div>
            <label className="text-xs font-medium text-gray-500 dark:text-gray-400 block mb-1.5">Mode</label>
            <div className="grid grid-cols-2 gap-2">
              {([["DOWNLOAD", "Téléchargement", Download], ["PREVIEW", "Aperçu seulement", Eye]] as const).map(([v, label, Icon]) => (
                <button
                  key={v}
                  type="button"
                  onClick={() => setMode(v)}
                  className={`flex items-center gap-2 px-3 h-11 rounded-xl border text-sm transition-colors ${
                    mode === v
                      ? "border-blue-500 bg-blue-500/10 text-blue-700 dark:text-blue-300 font-medium"
                      : "border-line dark:border-white/10 text-gray-600 dark:text-gray-300 hover:border-gray-300 dark:hover:border-white/20"
                  }`}
                >
                  <Icon className="w-4 h-4" /> {label}
                </button>
              ))}
            </div>
          </div>
          <div>
            <label className="text-xs font-medium text-gray-500 dark:text-gray-400 block mb-1.5">Mot de passe (optionnel)</label>
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Laisser vide pour aucun mot de passe" className="field" autoComplete="new-password" />
          </div>
          <div>
            <label className="text-xs font-medium text-gray-500 dark:text-gray-400 block mb-1.5">Expiration (optionnel)</label>
            <input type="datetime-local" value={expiry} onChange={(e) => setExpiry(e.target.value)} className="field" min={new Date(Date.now() + 60000).toISOString().slice(0, 16)} />
          </div>
          <div className="flex gap-2 justify-end pt-1">
            <Button variant="ghost" onClick={close}>Annuler</Button>
            <Button variant="accent" onClick={create} loading={loading}><Share2 className="w-4 h-4" /> Créer le lien</Button>
          </div>
        </div>
      )}
    </Modal>
  );
}