import React, { useState, useRef } from "react";
import htmlToImage from "html-to-image";
import download from "downloadjs";

// OPTCG — Générateur de cartes (Prototype)
// - Composant React autonome (export default)
// - Utilise un template SVG original pour la carte
// - Appelle une API /api/generate-image (mock) pour générer l'illustration IA
// - Permet l'édition simple des stats et l'export PNG
// - Tailwind classes pour le style (optionnel)

export default function CardGenerator() {
  const [name, setName] = useState("Capitaine Shiro");
  const [rarity, setRarity] = useState("Rare");
  const [cardType, setCardType] = useState("Character");
  const [color, setColor] = useState("red");
  const [cost, setCost] = useState(2);
  const [power, setPower] = useState(5000);
  const [effect, setEffect] = useState("Quand cette carte attaque, tu peux piocher 1 carte.");
  const [status, setStatus] = useState("Prêt");
  const [artUrl, setArtUrl] = useState(null);
  const [isGenerating, setIsGenerating] = useState(false);
  const previewRef = useRef(null);

  // Simule un appel backend pour générer une image IA
  async function generateArt() {
    setIsGenerating(true);
    setStatus("Génération en cours...");

    try {
      // Ici tu appelleras ton endpoint réel (OpenAI / SDXL / autre)
      // Ex : const res = await fetch('/api/generate-image', { method: 'POST', body: JSON.stringify({ prompt }) })
      // Pour la démo on utilise une image placeholder via picsum

      await new Promise((r) => setTimeout(r, 1400)); // simule latence
      const seed = Math.floor(Math.random() * 1000);
      const url = `https://picsum.photos/seed/op${seed}/800/1000`;
      setArtUrl(url);
      setStatus("Image générée (placeholder)");
    } catch (err) {
      console.error(err);
      setStatus("Erreur lors de la génération");
    } finally {
      setIsGenerating(false);
    }
  }

  async function exportCard() {
    if (!previewRef.current) return;
    setStatus("Préparation export...");
    try {
      const dataUrl = await htmlToImage.toPng(previewRef.current, { width: 1024, height: 1280, cacheBust: true });
      download(dataUrl, `${name.replace(/\s+/g, '_')}_card.png`);
      setStatus("Exporté !");
    } catch (err) {
      console.error(err);
      setStatus("Erreur export");
    }
  }

  // Prompt builder simple (à envoyer à l'API image réelle)
  function buildPrompt() {
    return `${name}, original shonen pirate character, dynamic pose, dramatic lighting, vivid colors, high detail, ${cardType} card art, no copyrighted characters, anime-inspired style`;
  }

  return (
    <div className="p-6 min-h-screen bg-slate-900 text-slate-100">
      <div className="max-w-6xl mx-auto grid grid-cols-3 gap-6">
        <div className="col-span-1 space-y-4">
          <h1 className="text-2xl font-bold">Générateur de cartes — Prototype</h1>

          <div className="space-y-2">
            <label className="text-sm text-slate-300">Nom</label>
            <input value={name} onChange={(e) => setName(e.target.value)} className="w-full rounded p-2 bg-slate-800" />

            <label className="text-sm text-slate-300 mt-2">Rareté</label>
            <select value={rarity} onChange={(e) => setRarity(e.target.value)} className="w-full rounded p-2 bg-slate-800">
              <option>Common</option>
              <option>Rare</option>
              <option>Super Rare</option>
              <option>Secret</option>
            </select>

            <label className="text-sm text-slate-300 mt-2">Type de carte</label>
            <select value={cardType} onChange={(e) => setCardType(e.target.value)} className="w-full rounded p-2 bg-slate-800">
              <option>Leader</option>
              <option>Character</option>
              <option>Event</option>
              <option>Stage</option>
            </select>

            <label className="text-sm text-slate-300 mt-2">Couleur</label>
            <div className="flex gap-2 mt-1">
              {['red','green','blue','yellow','black','purple'].map((c) => (
                <button key={c} onClick={() => setColor(c)} className={`px-3 py-1 rounded ${color===c? 'ring-2 ring-offset-2 ring-indigo-400':''}`}>
                  {c}
                </button>
              ))}
            </div>

            <div className="grid grid-cols-2 gap-2 mt-4">
              <div>
                <label className="text-sm text-slate-300">Coût</label>
                <input type="number" value={cost} onChange={(e) => setCost(Number(e.target.value))} className="w-full rounded p-2 bg-slate-800" />
              </div>
              <div>
                <label className="text-sm text-slate-300">Power</label>
                <input type="number" value={power} onChange={(e) => setPower(Number(e.target.value))} className="w-full rounded p-2 bg-slate-800" />
              </div>
            </div>

            <label className="text-sm text-slate-300 mt-2">Effet</label>
            <textarea value={effect} onChange={(e) => setEffect(e.target.value)} rows={4} className="w-full rounded p-2 bg-slate-800" />

            <div className="flex gap-2 mt-3">
              <button onClick={generateArt} disabled={isGenerating} className="flex-1 py-2 rounded bg-indigo-600 hover:bg-indigo-500">Générer l'Illustration</button>
              <button onClick={exportCard} className="flex-1 py-2 rounded bg-emerald-600 hover:bg-emerald-500">Exporter PNG</button>
            </div>

            <div className="text-xs text-slate-400 mt-2">Prompt (extrait): {buildPrompt()}</div>
            <div className="text-xs text-slate-400 mt-1">Statut: {status}</div>
          </div>
        </div>

        <div className="col-span-2">
          <div className="flex gap-4">
            <div className="bg-slate-800 rounded p-3 w-1/2">
              <h3 className="font-semibold mb-2">Preview Carte (template SVG)</h3>

              <div ref={previewRef} className="w-full mx-auto" style={{width: 512, background: '#0b1220', padding: 12, borderRadius: 12}}>
                {/* Carte SVG originale (100% custom) */}
                <svg width="488" height="704" viewBox="0 0 488 704" xmlns="http://www.w3.org/2000/svg">
                  <defs>
                    <linearGradient id="g1" x1="0" x2="1">
                      <stop offset="0%" stopColor="#0f172a" />
                      <stop offset="100%" stopColor="#071024" />
                    </linearGradient>
                  </defs>

                  <rect x="0" y="0" width="488" height="704" rx="20" fill="url(#g1)" stroke="#111827" strokeWidth="4" />

                  {/* Top bar */}
                  <rect x="12" y="12" width="464" height="96" rx="12" fill={color === 'red' ? '#8b0000' : color === 'blue' ? '#003366' : color === 'green' ? '#0b6623' : color === 'yellow' ? '#7a5a00' : color === 'purple' ? '#4b0082' : '#333'} />
                  <text x="30" y="62" fill="#fff" fontSize="20" fontWeight="700">{name}</text>
                  <text x="400" y="62" fill="#fff" fontSize="14" textAnchor="end">{rarity}</text>

                  {/* Art container */}
                  <clipPath id="artClip"><rect x="24" y="120" width="440" height="360" rx="8" /></clipPath>
                  <rect x="24" y="120" width="440" height="360" rx="8" fill="#0f172a" />
                  {artUrl ? (
                    // eslint-disable-next-line jsx-a11y/img-redundant-alt
                    <image href={artUrl} x="24" y="120" width="440" height="360" preserveAspectRatio="xMidYMid slice" clipPath="url(#artClip)" />
                  ) : (
                    <g>
                      <rect x="64" y="160" width="360" height="280" rx="6" fill="#0b1220" />
                      <text x="252" y="300" fill="#94a3b8" fontSize="14" textAnchor="middle">Artwork placeholder</text>
                    </g>
                  )}

                  {/* Stats area */}
                  <rect x="24" y="490" width="440" height="172" rx="8" fill="#071024" />
                  <text x="48" y="530" fill="#cbd5e1" fontSize="16">Type: {cardType}</text>
                  <text x="48" y="560" fill="#cbd5e1" fontSize="16">Coût: {cost}  •  Power: {power}</text>

                  {/* Effect box */}
                  <foreignObject x="36" y="586" width="416" height="70">
                    <div xmlns="http://www.w3.org/1999/xhtml" style={{fontSize: 14, color:'#cbd5e1', padding: '6px', lineHeight: '1.1'}}>{effect}</div>
                  </foreignObject>

                  {/* Footer icons */}
                  <circle cx="436" cy="636" r="20" fill="#111827" stroke="#222" />
                  <text x="436" y="641" fontSize="12" textAnchor="middle" fill="#cbd5e1">{cost}</text>

                </svg>
              </div>

            </div>

            <div className="bg-slate-800 rounded p-3 w-1/2">
              <h3 className="font-semibold mb-2">Détails & Edits</h3>
              <div className="text-sm text-slate-300">Illustration</div>
              {artUrl ? (
                <img src={artUrl} alt="art preview" className="w-full rounded mt-2" />
              ) : (
                <div className="mt-2 text-xs text-slate-500">Aucune illustration générée</div>
              )}

              <div className="mt-3">
                <label className="text-xs text-slate-300">Ajuster le nom</label>
                <input value={name} onChange={(e) => setName(e.target.value)} className="w-full rounded p-2 bg-slate-900 mt-1" />
              </div>

              <div className="mt-3">
                <label className="text-xs text-slate-300">Ajuster l'effet</label>
                <textarea value={effect} onChange={(e) => setEffect(e.target.value)} rows={3} className="w-full rounded p-2 bg-slate-900 mt-1" />
              </div>

            </div>
          </div>

        </div>
      </div>

      <footer className="mt-6 text-sm text-slate-500">Prototype — n'utilise pas d'artworks officiels. Toujours afficher la mention "fan-made" sur la page finale.</footer>
    </div>
  );
}