/* Calm loaders for scripting + planning. window.ScriptingLoader, window.PlanningLoader */
const { useState: useStateL, useEffect: useEffectL } = React;

function StepRow({ label, status }) {
  const I = window.Icon;
  return (
    <div className={`flex items-center gap-3 transition-opacity duration-300 ${status==='pending'?'opacity-35':'opacity-100'}`}>
      <div className="w-6 h-6 rounded-full grid place-items-center shrink-0 transition-all"
        style={{ background: status==='done'?'rgba(47,163,124,.14)':status==='active'?'rgba(255,230,0,.12)':'#16161C',
          border:`1.5px solid ${status==='done'?'#2FA37C':status==='active'?'#FFE600':'#2C2C36'}` }}>
        {status==='done' ? <span className="text-success"><I.Check size={13}/></span>
          : status==='active' ? <span className="relative w-3 h-3"><span className="absolute inset-0 rounded-full border-2 border-transparent border-t-accent" style={{ animation:'spin .9s linear infinite' }}/></span>
          : <span className="w-1.5 h-1.5 rounded-full bg-faint"/>}
      </div>
      <span className={`text-[14px] ${status==='active'?'text-text font-medium':status==='done'?'text-muted':'text-faint'}`}>{label}</span>
      {status==='active' && <span className="ml-auto text-[11px] font-mono text-faint">working…</span>}
    </div>
  );
}

function GenericLoader({ title, sub, steps, stepMs=900 }) {
  const [active, setActive] = useStateL(0);
  useEffectL(()=>{ if(active>=steps.length) return; const t=setTimeout(()=>setActive(a=>a+1), stepMs); return ()=>clearTimeout(t); }, [active, steps.length, stepMs]);
  return (
    <div className="min-h-[60vh] lg:min-h-0 flex flex-col items-center justify-center py-12">
      <div className="w-full max-w-sm">
        <div className="flex flex-col items-center text-center mb-8 anim-floatup">
          <div className="relative w-14 h-14 rounded-2xl grid place-items-center bg-accent/10 mb-5">
            <span className="absolute inset-0 rounded-2xl" style={{ animation:'glowpulse 1.8s infinite' }}/>
            <window.Icon.Sparkles size={24} className="text-accent"/>
          </div>
          <h2 className="text-[20px] font-bold tracking-tight">{title}</h2>
          <p className="text-[13.5px] text-muted mt-1.5 leading-relaxed">{sub}</p>
        </div>
        <div className="flex flex-col gap-4 rounded-2xl bg-surface border border-border p-5">
          {steps.map((s,i)=>(
            <StepRow key={i} label={s} status={i<active?'done':i===active?'active':'pending'}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function ScriptingLoader({ K, voice }) {
  return <GenericLoader title="Writing your script…" sub={voice?'Listening, trimming the ramble, then writing it tight.':'Finding the angle, then writing it tight.'}
    steps={voice?K.SCRIPT_STEPS_VOICE:K.SCRIPT_STEPS_TYPE} stepMs={voice?1050:900}/>;
}
function PlanningLoader({ K }) {
  return <GenericLoader title="Designing your storyboard…" sub="Choosing the right visual for each beat — words or proof."
    steps={['Read the script','Split into beats','Pick a treatment per beat']} stepMs={900}/>;
}

window.ScriptingLoader = ScriptingLoader;
window.PlanningLoader = PlanningLoader;