/* Script Review — editable AI script + structure legend + rewrite. window.ScriptReview */
const { useState: useStateSR, useRef: useRefSR, useEffect: useEffectSR } = React;

function ScriptReview({ K, script, setScript, onRewrite, rewriting }) {
  const I = window.Icon;
  const taRef = useRefSR(null);
  useEffectSR(()=>{ if(taRef.current){ taRef.current.style.height='auto'; taRef.current.style.height=taRef.current.scrollHeight+'px'; } }, [script]);

  const toneCls = { accent:'text-accent bg-accent/10 border-accent/25', default:'text-muted bg-hi border-border', success:'text-success bg-success/10 border-success/25' };

  return (
    <div className="flex flex-col gap-6">
      <div className="anim-floatup">
        <div className="flex items-center gap-2 text-[11px] font-semibold tracking-[0.14em] text-muted uppercase mb-2">
          <I.FileText size={13}/> Your script
        </div>
        <h1 className="text-[24px] sm:text-[27px] leading-[1.08] font-bold tracking-tight">Here’s your script. <span className="text-muted">Tweak anything.</span></h1>
        <p className="text-[13.5px] text-muted mt-2 leading-relaxed">First line is your hook — it earns the scroll. Edit freely, or rewrite the whole thing.</p>
      </div>

      {/* legend */}
      <div className="anim-floatup flex flex-wrap gap-2" style={{ animationDelay:'.04s' }}>
        {K.STRUCTURE.map((st,i)=>(
          <span key={i} className={`inline-flex items-center gap-1.5 text-[12px] px-2.5 py-1.5 rounded-lg border ${toneCls[st.tone]}`}>
            <span className="font-semibold">{st.role}</span><span className="opacity-60">·</span><span className="opacity-80">{st.desc}</span>
          </span>
        ))}
      </div>

      {/* editable script */}
      <div className="anim-floatup rounded-2xl bg-surface border border-border overflow-hidden" style={{ animationDelay:'.08s' }}>
        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
          <span className="text-[12px] font-mono text-faint flex items-center gap-2"><I.Pencil size={13}/> editable</span>
          <button onClick={onRewrite} disabled={rewriting}
            className={`flex items-center gap-1.5 text-[12px] font-medium px-3 py-1.5 rounded-lg transition-all ${rewriting?'bg-hi text-faint':'bg-hi text-muted hover:text-text'}`}>
            {rewriting ? <><span className="w-3 h-3 rounded-full border-2 border-transparent border-t-accent inline-block" style={{ animation:'spin .8s linear infinite' }}/> Rewriting…</> : <><I.Refresh size={13}/> Rewrite</>}
          </button>
        </div>
        <div className="relative">
          <textarea ref={taRef} value={script} onChange={e=>setScript(e.target.value)} spellCheck={false}
            className="w-full bg-transparent resize-none outline-none px-4 py-4 text-[16px] sm:text-[17px] leading-[1.7] text-text/90"/>
          {rewriting && <div className="absolute inset-0 bg-surface/60 backdrop-blur-[1px]"/>}
        </div>
      </div>

      <p className="anim-floatup text-[12px] text-faint flex items-center gap-1.5 px-1" style={{ animationDelay:'.12s' }}>
        <I.Sparkles size={12}/> Next: Kinetic plans a scene for each beat — text or a graphic.
      </p>
    </div>
  );
}

window.ScriptReview = ScriptReview;