/* Result screen + ProModal + ErrorCard. window.Result, window.ProModal, window.ErrorCard */
const { useState: useStateR } = React;

function ProModal({ onClose }) {
  const I = window.Icon;
  const feats = [['No watermark','Clean exports, your brand only'],['4K export','Crisp 2160×3840 MP4s'],['Custom brand','Your colors & fonts in every reel'],['Priority render','Skip the queue']];
  return (
    <div className="fixed inset-0 z-[60] grid place-items-end sm:place-items-center p-0 sm:p-6" style={{ background:'rgba(5,5,7,.7)', backdropFilter:'blur(6px)' }} onClick={onClose}>
      <div className="w-full sm:max-w-sm rounded-t-3xl sm:rounded-3xl bg-raised border border-borders p-6 pb-8 sm:pb-6 anim-sheetup mb-safe" onClick={e=>e.stopPropagation()}>
        <div className="flex items-start justify-between mb-4">
          <div className="w-11 h-11 rounded-xl grid place-items-center bg-accent/15 text-accent"><I.Crown size={22}/></div>
          <button onClick={onClose} className="text-faint hover:text-text p-1 -mr-1 -mt-1"><I.X size={18}/></button>
        </div>
        <div className="flex items-center gap-2 mb-1.5">
          <h3 className="text-[20px] font-bold tracking-tight">Kinetic Pro</h3>
          <span className="text-[10px] font-semibold uppercase tracking-wide px-2 py-1 rounded-full bg-success/15 text-success">Free during beta</span>
        </div>
        <p className="text-[13.5px] text-muted leading-relaxed mb-4">Everything’s unlocked while we’re in beta. <span className="text-faint">$12/mo later — no card now.</span></p>
        <div className="flex flex-col gap-2.5 mb-5">
          {feats.map((f,i)=>(
            <div key={i} className="flex items-start gap-3">
              <span className="w-5 h-5 rounded-full grid place-items-center bg-accent/15 text-accent shrink-0 mt-0.5"><I.Check size={12}/></span>
              <div className="min-w-0"><div className="text-[13.5px] font-medium">{f[0]}</div><div className="text-[12px] text-muted">{f[1]}</div></div>
            </div>
          ))}
        </div>
        <button onClick={onClose} className="w-full rounded-xl py-3.5 bg-accent text-black font-semibold text-[14.5px] active:scale-[.99] transition-transform">Keep creating — free</button>
      </div>
    </div>
  );
}
window.ProModal = ProModal;

function ReRenderBar({ label, onGo }) {
  const I = window.Icon;
  return (
    <button onClick={onGo} className="anim-floatup w-full mt-2.5 rounded-xl py-2.5 flex items-center justify-center gap-2 text-[13px] font-semibold bg-accent/[0.08] border border-accent/30 text-accent hover:bg-accent/[0.14] transition-colors">
      <I.Refresh size={14}/> {label} <span className="font-normal opacity-70">· free</span>
    </button>
  );
}

function Result({ K, scenes, gen, style, styleId, setStyleId, onSelectHook, onReRender, onDownload, onEditStoryboard, onMakeAnother, onOpenPro }) {
  const I = window.Icon;
  const [copied, setCopied] = useStateR(false);
  const [shared, setShared] = useStateR(false);
  const [pendingHook, setPendingHook] = useStateR(null);
  const [pendingStyle, setPendingStyle] = useStateR(null);

  const copy = () => { navigator.clipboard?.writeText(K.CAPTION+'\n\n'+K.HASHTAGS.join(' ')).catch(()=>{}); setCopied(true); setTimeout(()=>setCopied(false),1800); };

  const pickHook = (i) => { if (i===gen.selectedHook){ setPendingHook(null); return; } onSelectHook(i); setPendingHook(i); };
  const pickStyle = (id) => { if (id===styleId){ setPendingStyle(null); return; } setStyleId(id); setPendingStyle(id); };

  return (
    <div className="flex flex-col gap-6">
      <div className="anim-floatup flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="flex items-center gap-2 text-[11px] font-semibold tracking-[0.14em] text-success uppercase mb-1.5 whitespace-nowrap"><I.Check size={13}/> Reel ready</div>
          <h1 className="text-[23px] sm:text-[26px] font-bold tracking-tight leading-none">Talk it. <span className="text-muted">Watched it move.</span></h1>
          <div className="text-[12px] text-faint mt-1.5 font-mono">9:16 · 0:09 · {K.STYLES.find(s=>s.id===styleId).name}</div>
        </div>
        <button onClick={onMakeAnother} className="shrink-0 flex items-center gap-1.5 text-[13px] font-medium px-3 py-2 rounded-xl bg-surface border border-border text-muted hover:text-text hover:border-borders transition-colors"><I.Plus size={15}/> New</button>
      </div>

      {/* HOOK */}
      <div className="anim-floatup" style={{ animationDelay:'.04s' }}>
        <div className="flex items-baseline justify-between mb-2.5">
          <h2 className="text-[14px] font-semibold">Hook</h2>
          <span className="text-[11px] font-mono text-faint whitespace-nowrap">{K.HOOKS.length} options</span>
        </div>
        <div className="flex flex-col gap-2">
          {K.HOOKS.map((h,i)=><window.VariantCard key={i} hook={h} selected={gen.selectedHook===i} onClick={()=>pickHook(i)}/>)}
        </div>
        {pendingHook!=null && <ReRenderBar label="Re-render with this hook" onGo={()=>{ setPendingHook(null); onReRender(); }}/>}
      </div>

      {/* STYLE */}
      <div className="anim-floatup" style={{ animationDelay:'.06s' }}>
        <div className="flex items-baseline justify-between mb-2.5">
          <h2 className="text-[14px] font-semibold">Style</h2>
          <span className="text-[11px] text-faint whitespace-nowrap">swap is free</span>
        </div>
        <div className="grid grid-cols-5 gap-2">
          {K.STYLES.map(s=>{ const sel=s.id===styleId;
            return (
              <button key={s.id} onClick={()=>pickStyle(s.id)} className={`rounded-xl p-1.5 border transition-all ${sel?'border-accent bg-accent/[0.06]':'border-border hover:border-borders bg-surface'}`}>
                <window.StyleSwatch s={s}/>
                <div className={`text-[10px] font-medium mt-1 text-center truncate ${sel?'text-text':'text-muted'}`}>{s.name}</div>
              </button>
            ); })}
        </div>
        {pendingStyle!=null && <ReRenderBar label={`Re-render in ${K.STYLES.find(s=>s.id===pendingStyle).name}`} onGo={()=>{ setPendingStyle(null); onReRender(); }}/>}
      </div>

      {/* edit storyboard */}
      <button onClick={onEditStoryboard} className="anim-floatup flex items-center justify-between rounded-xl bg-surface border border-border px-3.5 py-3 hover:border-borders transition-colors" style={{ animationDelay:'.08s' }}>
        <span className="flex items-center gap-2.5 text-[13.5px] font-medium"><I.Layers size={16} className="text-muted"/> Edit storyboard <span className="text-faint font-normal">· {scenes.length} scenes</span></span>
        <I.ChevronRight size={16} className="text-faint"/>
      </button>

      {/* caption */}
      <div className="anim-floatup rounded-2xl bg-surface border border-border overflow-hidden" style={{ animationDelay:'.1s' }}>
        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
          <h2 className="text-[14px] font-semibold flex items-center gap-2"><I.FileText size={15} className="text-muted"/> Caption</h2>
          <button onClick={copy} className={`flex items-center gap-1.5 text-[12px] font-medium px-3 py-1.5 rounded-lg transition-all ${copied?'bg-success/15 text-success':'bg-hi text-muted hover:text-text'}`}>
            {copied ? <><I.Check size={13}/> Copied</> : <><I.Copy size={13}/> Copy</>}
          </button>
        </div>
        <div className="px-4 py-3.5">
          <p className="text-[14px] leading-relaxed whitespace-pre-line text-text/90">{K.CAPTION}</p>
          <div className="flex flex-wrap gap-x-2 gap-y-1 mt-3">{K.HASHTAGS.map((h,i)=><span key={i} className="text-[12.5px] text-accent/90">{h}</span>)}</div>
        </div>
      </div>

      {/* export */}
      <div className="anim-floatup flex flex-col gap-3" style={{ animationDelay:'.12s' }}>
        <button onClick={onDownload} className="group w-full rounded-2xl py-3.5 px-5 flex items-center justify-center gap-2.5 text-[15px] font-semibold bg-accent text-black hover:brightness-105 active:scale-[.99] transition-all shadow-[0_8px_30px_-8px_rgba(255,230,0,.4)]">
          <I.Download size={17}/> Download reel <span className="font-normal text-[12px] opacity-60">MP4 · 1080×1920</span>
        </button>
        <div className="flex items-center justify-between rounded-xl bg-surface border border-border px-3.5 py-2.5 gap-2">
          <div className="flex items-center gap-2.5 text-[12.5px] text-muted min-w-0"><span className="w-6 h-6 rounded-lg grid place-items-center bg-hi shrink-0">◆</span><span className="truncate">Free export adds a watermark</span></div>
          <button onClick={onOpenPro} className="flex items-center gap-1.5 shrink-0 text-[12px] font-semibold px-2.5 py-1.5 rounded-lg border border-accent/40 text-accent hover:bg-accent/10 transition-colors"><I.Crown size={13}/> Remove</button>
        </div>
        <div className="flex gap-3">
          <button onClick={onMakeAnother} className="flex-1 rounded-xl py-2.5 flex items-center justify-center gap-2 text-[13.5px] font-medium bg-surface border border-border text-muted hover:text-text hover:border-borders transition-colors"><I.Refresh size={15}/> Make another</button>
          <button onClick={()=>{ setShared(true); setTimeout(()=>setShared(false),1800); }} className="flex-1 rounded-xl py-2.5 flex items-center justify-center gap-2 text-[13.5px] font-medium bg-surface border border-border text-muted hover:text-text hover:border-borders transition-colors">
            {shared ? <><I.Check size={15} className="text-success"/> Copied</> : <><I.Share size={15}/> Share</>}
          </button>
        </div>
      </div>
    </div>
  );
}
window.Result = Result;

function ErrorCard({ onRetry, onBack, message }) {
  const I = window.Icon;
  return (
    <div className="min-h-[55vh] lg:min-h-0 flex flex-col items-center justify-center text-center px-4 py-12 anim-floatup">
      <div className="w-14 h-14 rounded-2xl grid place-items-center bg-alert/12 text-alert mb-5"><I.Alert size={26}/></div>
      <h2 className="text-[20px] font-bold mb-2">Render hit a snag</h2>
      <p className="text-[14px] text-muted leading-relaxed max-w-xs mb-1">Your script, scenes and hook are all saved — give it another go.</p>
      <p className="text-[12px] font-mono text-faint mb-6 max-w-sm break-words">{message || 'something went wrong'}</p>
      <div className="flex flex-col-reverse sm:flex-row gap-3 w-full max-w-xs">
        <button onClick={onBack} className="flex-1 px-4 py-3 rounded-xl bg-surface border border-border text-muted hover:text-text text-[13.5px] font-medium transition-colors">Back to storyboard</button>
        <button onClick={onRetry} className="flex-1 px-5 py-3 rounded-xl bg-accent text-black text-[13.5px] font-semibold flex items-center justify-center gap-2 hover:brightness-105 transition-all"><I.Refresh size={15}/> Retry render</button>
      </div>
    </div>
  );
}
window.ErrorCard = ErrorCard;