const { useState: useStateC } = React;

function selectionSummary(data){
  const pkg = window.getPackages().find(p=>p.id===data.pkg);
  const byId = window.STATIONS_BY_ID || {};   // flat lookup built when stations.json loaded (in step 3)
  const stations = [];
  const markets = new Set();
  let reach = 0;
  Object.keys(data.stations||{}).forEach(id=>{
    if(!data.stations[id]) return;
    const s = byId[id];                        // unknown/old id -> skipped (no crash)
    if(s){ stations.push(s); markets.add(`${s.city}, ${s.state}`); reach += (s.reach||0); }
  });
  const goal = window.getGoals().find(g=>g.id===data.goal);
  const voice = window.getVoices().find(v=>v.id===data.voice);
  return { pkg, stations, markets:[...markets], reach, goal, voice };
}

/* ---------- Step 6: Review & Pay ---------- */
function StepReview({ data, set }){
  const I = window.Icons;
  const T = window.T;
  const [, setTick] = useStateC(0);
  // ensure station details are loaded so the summary can resolve the selection (defensive; normally loaded in step 3)
  React.useEffect(()=>{ if(!window.STATIONS_BY_ID) window.loadStations().then(()=> setTick(t=>t+1)); }, []);
  const { pkg, stations, markets, reach, goal } = selectionSummary(data);
  const base = pkg && pkg.price!=null ? pkg.price : 0;
  const fee = +(base*0.03).toFixed(2);
  const subtotal = base;
  const total = +(base+fee).toFixed(2);
  const useBalance = data.payMethod==='balance';
  const balance = 250;
  const balanceApplied = useBalance ? Math.min(balance,total) : 0;
  const due = +(total-balanceApplied).toFixed(2);

  const dpNames = window.getDayparts().filter(d=>data.dayparts.includes(d.id)).map(d=>d.name).join(', ');

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

      <div className="row2" style={{alignItems:'start',gap:24}}>
        {/* left: summary */}
        <div>
          <div style={{fontSize:13,fontWeight:700,marginBottom:11,color:'#9298a6'}}>{T('camp.review.summary')}</div>
          <div className="summary">
            <div className="srow"><div className="sl"><I.doc w={16}/>{T('camp.review.campaign')}</div><div className="sv">{data.name||T('camp.review.untitled')}<small>{data.category?T('camp.cat.'+data.category):'—'}</small></div></div>
            <div className="srow"><div className="sl"><I.target w={16}/>{T('camp.review.goal')}</div><div className="sv">{goal?goal.name:'—'}</div></div>
            <div className="srow"><div className="sl"><I.box w={16}/>{T('camp.review.package')}</div><div className="sv">{pkg?pkg.name:'—'}<small>{pkg?pkg.spots.toLocaleString():0} {T('camp.spots')} · 30 {T('camp.days')}</small></div></div>
            <div className="srow"><div className="sl"><I.pin w={16}/>{T('camp.review.markets')}</div><div className="sv">{markets.length} {markets.length===1?T('camp.market.one'):T('camp.market.many')}<small>{markets.join(' · ')||'—'}</small></div></div>
            <div className="srow"><div className="sl"><I.radio w={16}/>{T('camp.tally.stations')}</div><div className="sv">{stations.length} {T('camp.stations.word')}<small>{reach?window.fmtNum(reach)+' '+T('demo.weeklyReach'):'—'}</small></div></div>
            <div className="srow"><div className="sl"><I.music w={16}/>{T('camp.review.adAudio')}</div><div className="sv">{data.audioReady?data.audioName:T('camp.review.notSet')}<small>{data.audioReady?data.audioSource:'—'}</small></div></div>
            <div className="srow"><div className="sl"><I.clock w={16}/>{T('camp.review.airing')}</div><div className="sv">{dpNames||'—'}</div></div>
          </div>
        </div>

        {/* right: payment */}
        <div className="pay-card">
          <div className="pay-toggle">
            <div className={"pay-opt"+(data.payMethod==='card'?' sel':'')} onClick={()=>set({payMethod:'card'})}>
              <div className="po-ic"><I.card w={18}/></div>
              <div><b>{T('camp.pay.card')}</b><span style={{display:'block'}}>•••• 4242</span></div>
            </div>
            <div className={"pay-opt"+(data.payMethod==='balance'?' sel':'')} onClick={()=>set({payMethod:'balance'})}>
              <div className="po-ic"><I.wallet w={18}/></div>
              <div><b>{T('camp.pay.balance')}</b><span style={{display:'block'}}>$250.00</span></div>
            </div>
          </div>

          {data.payMethod==='card' && (
            <div className="step-fade">
              <div className="card-visual">
                <div className="cv-top">
                  <div className="chip-ic"></div>
                  <window.Logo size={26} tile="#16a34a" letter="#fff"/>
                </div>
                <div className="cv-num">{data.cardNum||'4242  4242  4242  4242'}</div>
                <div className="cv-bot">
                  <div>{T('camp.pay.holder')}<b>{data.cardName||'JOHN SMITH'}</b></div>
                  <div>{T('camp.pay.expires')}<b>{data.cardExp||'08 / 28'}</b></div>
                </div>
              </div>
              <div className="field" style={{marginBottom:14}}>
                <label>{T('camp.pay.cardNum')}</label>
                <input className="input" placeholder="1234 5678 9012 3456" value={data.cardNum}
                  onChange={e=>set({cardNum:e.target.value})}/>
              </div>
              <div className="row2">
                <div className="field" style={{marginBottom:14}}>
                  <label>{T('camp.pay.expiry')}</label>
                  <input className="input" placeholder="MM / YY" value={data.cardExp} onChange={e=>set({cardExp:e.target.value})}/>
                </div>
                <div className="field" style={{marginBottom:14}}>
                  <label>{T('camp.pay.cvc')}</label>
                  <input className="input" placeholder="123" value={data.cardCvc} onChange={e=>set({cardCvc:e.target.value})}/>
                </div>
              </div>
            </div>
          )}

          <div className="totals">
            <div className="trow"><span>{pkg?pkg.name:''} {T('camp.review.packageWord')}</span><b>{window.fmtMoney(subtotal)}</b></div>
            <div className="trow"><span>{T('camp.pay.fee')}</span><b>{window.fmtMoney(fee)}</b></div>
            {useBalance && <div className="trow"><span>{T('camp.pay.accountBalance')}</span><b style={{color:'var(--green-3)'}}>−{window.fmtMoney(balanceApplied)}</b></div>}
            <div className="trow grand"><span>{T('camp.pay.totalDue')}</span><b>{window.fmtMoney(due)}</b></div>
          </div>

          <div className="tiny" style={{display:'flex',gap:7,alignItems:'center',justifyContent:'center'}}>
            <I.lock w={13}/> {T('camp.pay.secured')}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Step 7: Confirmation ---------- */
function StepConfirm({ data, onDash, onNew }){
  const I = window.Icons;
  const T = window.T;
  const [, setTick] = useStateC(0);
  React.useEffect(()=>{ if(!window.STATIONS_BY_ID) window.loadStations().then(()=> setTick(t=>t+1)); }, []);
  const { pkg, stations, markets, reach } = selectionSummary(data);
  return (
    <div className="card step-fade">
      <div className="confirm">
        <div className="succ"><I.check w={42}/></div>
        <h2>{T('camp.confirm.title')}</h2>
        <p>{T('camp.confirm.body1')} <b style={{color:'var(--ink)'}}>{data.name||(window.i18n&&window.i18n.lang==='es'?'su campaña':'your campaign')}</b> {T('camp.confirm.body2')}</p>

        <div className="recap">
          <div className="ri"><span>{T('camp.tally.stations')}</span><b>{stations.length}</b></div>
          <div className="ri"><span>{T('demo.weeklyReach')}</span><b style={{color:'var(--violet-3)'}}>{reach?window.fmtNum(reach):'—'}</b></div>
          <div className="ri"><span>{T('camp.tally.markets')}</span><b>{markets.length}</b></div>
        </div>

        <div className="confirm-actions">
          <button className="btn btn-ghost btn-lg" onClick={onNew}>{T('camp.confirm.another')}</button>
          <button className="btn btn-primary btn-lg" onClick={onDash}>{T('camp.confirm.goDash')} <I.arrowR/></button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StepReview, StepConfirm, selectionSummary });