/* ============================================================
   3DAX — Admin · UGC Ads Studio (internal tool)
   - AI copy generator (hooks / captions / hashtags / guion)
   - Animated creative composer from product renders
   ============================================================ */
function AdminAds({ products }){
  const [sub, setSub] = useState("copy");
  return (
    <div className="adm__view">
      <div className="ads__tabs">
        <button className={sub==="copy"?"on":""} onClick={()=>setSub("copy")}>✍️ Copy con IA</button>
        <button className={sub==="creative"?"on":""} onClick={()=>setSub("creative")}>🎬 Creatividad animada</button>
      </div>
      {sub==="copy" ? <AdsCopy products={products} /> : <AdsCreative products={products} />}
    </div>
  );
}

/* ---------------- AI COPY ---------------- */
function AdsCopy({ products }){
  const [pid, setPid] = useState(products[0] ? products[0].id : "");
  const [platform, setPlatform] = useState("TikTok");
  const [angle, setAngle] = useState("Hook viral");
  const [tone, setTone] = useState("Fan otaku, divertido");
  const [busy, setBusy] = useState(false);
  const [res, setRes] = useState(null);
  const [err, setErr] = useState("");
  const [promptText, setPromptText] = useState("");
  const p = products.find(x=>x.id===pid);

  const buildPrompt = () => `Eres un copywriter experto en anuncios UGC para redes. Marca: 3DAX, deckbox (cajas para cartas) impresas en 3D y hechas a mano, estética anime/One Piece, premium pero divertida.
Producto: "${p?p.name:""}" (${p?p.franchise:""}) — ${p?p.blurb:""}. Precio ${p?'€'+p.price:''}.
Plataforma: ${platform}. Ángulo: ${angle}. Tono: ${tone}. Idioma: español.
Devuelve SOLO un JSON válido con esta forma exacta:
{"hooks":["3 a 5 hooks cortos y potentes para los primeros 2s"],"caption":"caption listo para publicar con 1-2 emojis","hashtags":["8-12 hashtags relevantes sin #, en minúscula"],"script":["guion UGC en 4-6 pasos de plano/acción + texto en pantalla"]}`;

  const generate = async () => {
    if(!p) return;
    setErr(""); setRes(null); setPromptText("");
    const prompt = buildPrompt();
    if(typeof window.claude === "undefined" || !window.claude.complete){
      setPromptText(prompt); // production fallback
      return;
    }
    setBusy(true);
    try{
      const out = await window.claude.complete(prompt);
      let data; 
      try{ data = JSON.parse(out.replace(/```json|```/g,"").trim()); }
      catch(e){ data = { caption: out }; }
      setRes(data);
    }catch(e){ setErr("No se pudo generar. Reintenta."); }
    setBusy(false);
  };

  const copy = (t) => navigator.clipboard && navigator.clipboard.writeText(t);

  return (
    <div className="ads">
      <div className="ads__form">
        <div className="ledit__grid">
          <label className="field"><span className="field__label">Producto</span>
            <select value={pid} onChange={e=>setPid(e.target.value)}>{products.map(x=><option key={x.id} value={x.id}>{x.name}</option>)}</select></label>
          <label className="field"><span className="field__label">Plataforma</span>
            <select value={platform} onChange={e=>setPlatform(e.target.value)}>
              <option>TikTok</option><option>Instagram Reels</option><option>Meta Ads</option><option>YouTube Shorts</option></select></label>
          <label className="field"><span className="field__label">Ángulo</span>
            <select value={angle} onChange={e=>setAngle(e.target.value)}>
              <option>Hook viral</option><option>Mostrar el detalle / relieve</option><option>Idea de regalo</option><option>Para coleccionistas</option><option>Unboxing / satisfacción</option><option>Antes vs. después (caja genérica)</option></select></label>
          <label className="field"><span className="field__label">Tono</span>
            <input value={tone} onChange={e=>setTone(e.target.value)} /></label>
        </div>
        <button className="btn btn-primary btn-lg" onClick={generate} disabled={busy}>
          {busy ? <span className="spin" /> : "✨ Generar copy"}
        </button>
      </div>

      {err && <div className="auth__err" style={{marginTop:16}}>{err}</div>}

      {promptText && (
        <div className="ads__fallback">
          <div className="ledit__label">window.claude no está disponible en producción</div>
          <p>Copia este prompt y pégalo en <strong>Claude.ai</strong> o ChatGPT para generar el copy:</p>
          <textarea readOnly value={promptText} rows="8" />
          <button className="btn btn-ghost" onClick={()=>copy(promptText)}>Copiar prompt</button>
        </div>
      )}

      {res && (
        <div className="ads__res">
          {res.hooks && <div className="ads__block"><div className="ads__bh">Hooks <button onClick={()=>copy(res.hooks.join("\n"))}>copiar</button></div>
            {res.hooks.map((h,i)=><div className="ads__hook" key={i}>{h}</div>)}</div>}
          {res.caption && <div className="ads__block"><div className="ads__bh">Caption <button onClick={()=>copy(res.caption)}>copiar</button></div>
            <p className="ads__cap">{res.caption}</p></div>}
          {res.hashtags && <div className="ads__block"><div className="ads__bh">Hashtags <button onClick={()=>copy(res.hashtags.map(t=>"#"+t).join(" "))}>copiar</button></div>
            <div className="ads__tags">{res.hashtags.map((t,i)=><span key={i}>#{t}</span>)}</div></div>}
          {res.script && <div className="ads__block"><div className="ads__bh">Guion UGC <button onClick={()=>copy(res.script.join("\n"))}>copiar</button></div>
            <ol className="ads__script">{res.script.map((s,i)=><li key={i}>{s}</li>)}</ol></div>}
        </div>
      )}
    </div>
  );
}

/* ---------------- ANIMATED CREATIVE ---------------- */
function AdsCreative({ products }){
  const withImgs = products.filter(p=>p.images && p.images.length);
  const [pid, setPid] = useState(withImgs[0] ? withImgs[0].id : (products[0]&&products[0].id));
  const [format, setFormat] = useState("9:16");
  const [motion, setMotion] = useState("float");
  const [frames, setFrames] = useState([0]);
  const [headline, setHeadline] = useState("Tu mazo merece esto");
  const [cta, setCta] = useState("3daxstudio.com");
  const [bg, setBg] = useState("cream");
  const [seqIdx, setSeqIdx] = useState(0);
  const p = products.find(x=>x.id===pid) || withImgs[0];
  const imgs = (p && p.images) || [];

  useEffect(()=>{ setFrames([0]); setSeqIdx(0); }, [pid]);
  useEffect(()=>{
    if(motion!=="seq" || frames.length<2) return;
    const t = setInterval(()=>setSeqIdx(i=>(i+1)%frames.length), 900);
    return ()=>clearInterval(t);
  }, [motion, frames]);

  const ratio = format==="9:16" ? 16/9 : format==="1:1" ? 1 : format==="4:5" ? 5/4 : 16/9;
  const W = 300, H = Math.round(W*ratio);
  const toggleFrame = (i) => setFrames(f => f.includes(i) ? (f.length>1?f.filter(x=>x!==i):f) : [...f,i]);
  const activeImg = motion==="seq" ? imgs[frames[seqIdx]] : imgs[frames[0]];

  const bgStyles = {
    cream:"radial-gradient(120% 90% at 50% 10%, #fff7e8, #f3dfba)",
    amber:"linear-gradient(160deg, #f6e7c8, #e0a64e)",
    terra:"linear-gradient(160deg, #a8341c, #5e1a0d)",
    dark:"radial-gradient(120% 90% at 50% 10%, #2c1a10, #140c08)",
  };
  const darkText = bg==="terra" || bg==="dark";

  return (
    <div className="ads ads--creative">
      <div className="ads__cfg">
        <label className="field"><span className="field__label">Producto</span>
          <select value={pid} onChange={e=>setPid(e.target.value)}>{products.map(x=><option key={x.id} value={x.id}>{x.name}</option>)}</select></label>

        {imgs.length>0 && <div className="ads__frames">
          <span className="field__label">Fotogramas (multi para secuencia)</span>
          <div className="ads__framerow">{imgs.map((im,i)=>(
            <button key={i} className={"ads__frame"+(frames.includes(i)?" on":"")} onClick={()=>toggleFrame(i)}><img src={im} alt="" /></button>
          ))}</div>
        </div>}

        <div className="ledit__grid">
          <label className="field"><span className="field__label">Formato</span>
            <select value={format} onChange={e=>setFormat(e.target.value)}><option>9:16</option><option>1:1</option><option>4:5</option></select></label>
          <label className="field"><span className="field__label">Movimiento</span>
            <select value={motion} onChange={e=>setMotion(e.target.value)}>
              <option value="float">Flotar</option><option value="zoom">Zoom detalle</option><option value="rise">Reveal (sube)</option><option value="seq">Secuencia (abrir/cerrar)</option></select></label>
        </div>
        <div className="ledit__grid">
          <label className="field"><span className="field__label">Titular</span><input value={headline} onChange={e=>setHeadline(e.target.value)} /></label>
          <label className="field"><span className="field__label">CTA</span><input value={cta} onChange={e=>setCta(e.target.value)} /></label>
        </div>
        <div className="field"><span className="field__label">Fondo</span>
          <div className="ads__bgs">{[["cream","Crema"],["amber","Ámbar"],["terra","Terracota"],["dark","Oscuro"]].map(([k,l])=>(
            <button key={k} className={"ads__bg"+(bg===k?" on":"")} onClick={()=>setBg(k)} style={{background:bgStyles[k]}} title={l}/>))}</div></div>
        <p className="ads__hint">▸ Pulsa <strong>play</strong> y graba la pantalla (o el visor de tu móvil) para tu Reel/TikTok. Para exportar vídeo real más adelante podemos integrar render a MP4.</p>
      </div>

      <div className="ads__stage">
        <div className={"adcanvas adcanvas--"+motion} style={{ width:W, height:H, background:bgStyles[bg] }}>
          <div className="adcanvas__grain"></div>
          {activeImg && <img className="adcanvas__prod" src={activeImg} alt="" />}
          <div className={"adcanvas__txt"+(darkText?" on-dark":"")}>
            <div className="adcanvas__head">{headline}</div>
            <div className="adcanvas__cta">{cta} →</div>
          </div>
          <div className="adcanvas__brand">3<span>D</span>AX</div>
        </div>
        <div className="ads__fmt">{format} · {motion}</div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminAds, AdsCopy, AdsCreative });