const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

/* Shared waveform */
const WAVE_BARS = Array.from({length:54}, (_,i)=> 0.25 + 0.75*Math.abs(Math.sin(i*0.7)*Math.cos(i*0.31)) );
function Waveform({ playing, progress }){
  return (
    <div className="wave">
      {WAVE_BARS.map((h,i)=>(
        <i key={i} className={ (i/WAVE_BARS.length)<=progress ? 'on':'' }
          style={{height:`${h*100}%`}}/>
      ))}
    </div>
  );
}

function usePlayer(){
  const [playing,setPlaying] = useStateB(false);
  const [progress,setProgress] = useStateB(0);
  const raf = useRefB(null);
  useEffectB(()=>{
    if(playing){
      let last = performance.now();
      const tick = (t)=>{
        const dt = (t-last)/1000; last=t;
        setProgress(p=>{ const n=p+dt/22; if(n>=1){ setPlaying(false); return 0;} return n; });
        raf.current = requestAnimationFrame(tick);
      };
      raf.current = requestAnimationFrame(tick);
    }
    return ()=> cancelAnimationFrame(raf.current);
  },[playing]);
  return { playing, progress, toggle:()=>setPlaying(p=>!p) };
}

/* ---------- Step 4: Audio ---------- */
function StepAudio({ data, set }){
  const I = window.Icons;
  const T = window.T;
  const player = usePlayer();
  const [generating,setGenerating] = useStateB(false);

  const mode = data.audioMode; // 'upload' | 'ai'
  const hasAudio = data.audioReady;

  const fakeUpload = ()=>{
    set({ audioReady:true, audioName:'summer_promo_spot.mp3', audioLen:'0:30', audioSource:T('camp.audio.uploadedFile') });
  };
  const generate = ()=>{
    if(!data.script.trim() || !data.voice) return;
    setGenerating(true);
    setTimeout(()=>{
      setGenerating(false);
      const v = window.VOICES.find(x=>x.id===data.voice);
      set({ audioReady:true, audioName:`ai_spot_${v.name.toLowerCase()}.mp3`, audioLen:data.adLen, audioSource:`${T('camp.audio.aiVoice')} · ${v.name}` });
    }, 2200);
  };

  const draftScript = ()=>{
    const name = data.name || (window.i18n && window.i18n.lang==='es' ? 'su negocio' : 'your business');
    set({ script: T('camp.audio.draftText').split('{name}').join(name) });
  };

  return (
    <div className="card step-fade">
      <div className="step-head">
        <div className="eyebrow">{T('camp.eyebrow.s4')}</div>
        <h2>{T('camp.audio.title')}</h2>
        <p>{T('camp.audio.sub')}</p>
      </div>

      <div className="tabs">
        <button className={"tab"+(mode==='ai'?' active':'')} onClick={()=>{set({audioMode:'ai',audioReady:false});}}>
          <I.sparkle w={17}/> {T('camp.audio.tabAI')}
        </button>
        <button className={"tab"+(mode==='upload'?' active':'')} onClick={()=>{set({audioMode:'upload',audioReady:false});}}>
          <I.upload w={17}/> {T('camp.audio.tabUpload')}
        </button>
      </div>

      {mode==='upload' && !hasAudio && (
        <div className="dropzone" onClick={fakeUpload}>
          <div className="dz-ic"><I.upload w={26}/></div>
          <h4>{T('camp.audio.drop')}</h4>
          <p>{T('camp.audio.dropOr')} <span className="browse">{T('camp.audio.browse')}</span> {T('camp.audio.dropMeta')}</p>
        </div>
      )}

      {mode==='ai' && !hasAudio && (
        <div className="step-fade">
          <div className="field">
            <label style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <span>{T('camp.audio.scriptLabel')} <span className="hint">{T('camp.audio.scriptHint')}</span></span>
              <span className="vchip" style={{cursor:'pointer',display:'inline-flex',gap:5,alignItems:'center'}} onClick={draftScript}>
                <I.sparkle w={12}/> {T('camp.audio.draftAI')}
              </span>
            </label>
            <textarea className="input" rows={4} style={{resize:'vertical',lineHeight:1.55}}
              placeholder={T('camp.audio.scriptPh')}
              value={data.script} onChange={e=>set({script:e.target.value})}/>
            <div className="tiny" style={{marginTop:6,textAlign:'right'}}>{data.script.trim().split(/\s+/).filter(Boolean).length} {T('camp.audio.words')} · ~{Math.max(1,Math.round(data.script.trim().split(/\s+/).filter(Boolean).length/2.6))}{T('camp.audio.sread')}</div>
          </div>

          <div className="field">
            <label>{T('camp.audio.spotLength')}</label>
            <div className="chips">
              {['0:15','0:30','0:60'].map(l=>(
                <button key={l} className={"chip"+(data.adLen===l?' sel':'')} onClick={()=>set({adLen:l})}>
                  {data.adLen===l && <I.checkSm/>}{l.replace('0:','')}s
                </button>
              ))}
            </div>
          </div>

          <div className="field" style={{marginBottom:18}}>
            <label>{T('camp.audio.chooseVoice')}</label>
            <div className="opt-grid cols2">
              {window.getVoices().map(v=>(
                <VoiceRow key={v.id} v={v} sel={data.voice===v.id} onSel={()=>set({voice:v.id})}/>
              ))}
            </div>
          </div>

          <button className="gen-btn" disabled={!data.script.trim()||!data.voice||generating} onClick={generate}>
            {generating ? <><I.refresh w={18} className="spin"/> {T('camp.audio.generating')}</> : <><I.sparkle w={18}/> {T('camp.audio.genBtn')}</>}
          </button>
        </div>
      )}

      {hasAudio && (
        <div className="step-fade">
          <div className="audio-player">
            <button className="play-btn" onClick={player.toggle}>{player.playing?<I.pause/>:<I.play/>}</button>
            <Waveform playing={player.playing} progress={player.progress}/>
            <div className="audio-meta">
              <b>{data.audioName}</b>
              <span>{data.audioSource} · {data.audioLen}</span>
            </div>
          </div>
          <div style={{display:'flex',gap:10,marginTop:14}}>
            <button className="btn btn-ghost" onClick={()=>{set({audioReady:false});}}>
              <I.refresh w={16}/> {mode==='ai'?T('camp.audio.regen'):T('camp.audio.replace')}
            </button>
            <div className="tiny" style={{marginLeft:'auto',display:'flex',alignItems:'center',gap:7}}>
              <I.check w={15} style={{color:'var(--green-3)'}}/> {T('camp.audio.ready')}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function VoiceRow({ v, sel, onSel }){
  const I = window.Icons;
  const player = usePlayer();
  return (
    <div className={"voice"+(sel?' sel':'')} onClick={onSel}>
      <button className="vplay" onClick={(e)=>{e.stopPropagation();player.toggle();}}>
        {player.playing?<I.pause w={15}/>:<I.play w={15}/>}
      </button>
      <div>
        <div className="vname">{v.name}</div>
        <div className="vmeta">{v.meta}</div>
      </div>
      <span className="vlang">{v.lang}</span>
    </div>
  );
}

/* ---------- Step 5: Schedule ---------- */
function StepSchedule({ data, set }){
  const I = window.Icons;
  const T = window.T;
  const monthName = (m)=> T('camp.month.'+m);
  const [view,setView] = useStateB({ y:2026, m:5 }); // June 2026
  const pkg = window.getPackages().find(p=>p.id===data.pkg);
  const duration = 30;

  const first = new Date(view.y, view.m, 1).getDay();
  const days = new Date(view.y, view.m+1, 0).getDate();
  const prevDays = new Date(view.y, view.m, 0).getDate();
  const cells = [];
  for(let i=first-1;i>=0;i--) cells.push({d:prevDays-i, muted:true});
  for(let d=1;d<=days;d++) cells.push({d, muted:false});
  while(cells.length%7!==0) cells.push({d:cells.length-(first+days)+1, muted:true});

  const startKey = data.startDate; // 'YYYY-M-D'
  const setStart = (d)=>{ set({ startDate:`${view.y}-${view.m}-${d}` }); };

  const startObj = startKey ? (()=>{ const [y,m,d]=startKey.split('-').map(Number); return new Date(y,m,d); })() : null;
  const endObj = startObj ? new Date(startObj.getTime()+ (duration-1)*864e5) : null;

  const dayState = (cell)=>{
    if(cell.muted || !startObj) return '';
    const cur = new Date(view.y, view.m, cell.d);
    const s = startObj.setHours(0,0,0,0), e = endObj.setHours(0,0,0,0), c = cur.setHours(0,0,0,0);
    if(c===s && c===e) return 'single';
    if(c===s) return 'start';
    if(c===e) return 'end';
    if(c>s && c<e) return 'inrange';
    return '';
  };

  const fmtDate = (o)=> o ? `${monthName(o.getMonth()).slice(0,3)} ${o.getDate()}, ${o.getFullYear()}` : '—';

  return (
    <div className="card step-fade">
      <div className="step-head">
        <div className="eyebrow">{T('camp.eyebrow.s5')}</div>
        <h2>{T('camp.sched.title')}</h2>
        <p>{T('camp.sched.sub1')} {pkg?pkg.name:''} {T('camp.sched.sub2')} {duration} {T('camp.sched.sub3')}</p>
      </div>

      <div className="row2" style={{alignItems:'start'}}>
        <div className="cal">
          <div className="cal-head">
            <b>{monthName(view.m)} {view.y}</b>
            <div className="cal-nav">
              <button onClick={()=>setView(v=>({y:v.m===0?v.y-1:v.y, m:v.m===0?11:v.m-1}))}><I.arrowL w={15}/></button>
              <button onClick={()=>setView(v=>({y:v.m===11?v.y+1:v.y, m:v.m===11?0:v.m+1}))}><I.arrowR w={15}/></button>
            </div>
          </div>
          <div className="cal-grid">
            {(window.i18n&&window.i18n.lang==='es'?['D','L','M','M','J','V','S']:['S','M','T','W','T','F','S']).map((d,i)=><div key={i} className="cal-dow">{d}</div>)}
            {cells.map((c,i)=>(
              <div key={i} className={"cal-day "+(c.muted?'muted ':'')+dayState(c)}
                onClick={()=>!c.muted && setStart(c.d)}>{c.d}</div>
            ))}
          </div>
        </div>

        <div>
          <div className="field">
            <label>{T('camp.sched.dates')}</label>
            <div style={{display:'flex',gap:10}}>
              <div style={{flex:1,background:'var(--panel-2)',border:'1px solid var(--border-2)',borderRadius:12,padding:'12px 14px'}}>
                <div className="tiny">{T('camp.sched.start')}</div>
                <div style={{fontWeight:700,fontSize:14,marginTop:2}}>{fmtDate(startObj)}</div>
              </div>
              <div style={{flex:1,background:'var(--panel-2)',border:'1px solid var(--border-2)',borderRadius:12,padding:'12px 14px'}}>
                <div className="tiny">{T('camp.sched.end')}</div>
                <div style={{fontWeight:700,fontSize:14,marginTop:2}}>{fmtDate(endObj)}</div>
              </div>
            </div>
          </div>

          <div className="field" style={{marginBottom:0}}>
            <label>{T('camp.sched.airing')} <span className="hint">{T('camp.sched.airingHint')}</span></label>
            <div style={{display:'flex',flexDirection:'column',gap:9}}>
              {window.getDayparts().map(dp=>{
                const on = data.dayparts.includes(dp.id);
                return (
                  <div key={dp.id} className={"station"+(on?' sel':'')} style={{border:'1.5px solid '+(on?'var(--violet)':'var(--border-2)'),borderRadius:12,borderTop:'1.5px solid '+(on?'var(--violet)':'var(--border-2)')}}
                    onClick={()=>set({dayparts: on?data.dayparts.filter(x=>x!==dp.id):[...data.dayparts,dp.id]})}>
                    <div className="cbx">{on && <I.checkSm/>}</div>
                    <div style={{flex:1}}>
                      <div className="st-name">{dp.name}</div>
                      <div className="st-meta">{dp.time}</div>
                    </div>
                    {dp.mult>1 && <span className="vchip">{T('camp.sched.peak')}</span>}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StepAudio, StepSchedule, Waveform, usePlayer });