const { useState, useEffect, useRef } = React;

function Logo({size=36, tile='#121418', letter='#fff'}){
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <rect x="1" y="1" width="38" height="38" rx="11" fill={tile}/>
      <text x="20" y="20" textAnchor="middle" dominantBaseline="central"
        fontFamily="'Plus Jakarta Sans',sans-serif" fontWeight="800" fontSize="23" fill={letter}>R</text>
    </svg>
  );
}

function Sidebar(){
  const I = window.Icons;
  const T = window.T;
  // 'Dashboard' stays in English (label, no key); the rest reuse keys from the other screens.
  // hrefs are relative to campaign/ (the wizard lives in campaign/). Same look as before: <a> styled
  // exactly like the old <div> (.nav-item now resets text-decoration). 'Create Campaign' = active (here).
  const nav = [
    { ic:'grid', label:'Dashboard', href:'../Dashboard.html' },
    { ic:'megaphone', k:'dash.nav.myCampaigns', href:'../mis-campanas.html' },
    { ic:'plus', k:'dash.nav.create', active:true, href:'crear-campana.html' },
    { ic:'box', k:'nav.packages', href:'../paquetes.html' },
    { ic:'card', k:'dash.nav.billing', href:'../facturacion.html' },
    { ic:'music', k:'demo.audioLibrary', href:'../biblioteca-audio.html' },
    { ic:'chart', k:'demo.reports', href:'../reportes.html' },
    { ic:'user', k:'dash.nav.profile', href:'../mi-perfil.html' },
    { ic:'help', k:'dash.nav.support', href:'../soporte.html' },
  ];
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-logo"><Logo/></div>
        <div className="brand-name">Radio<span className="g">Ads</span> <span className="num">360</span></div>
      </div>
      <nav className="nav">
        {nav.map(({ic,k,label,active,href})=>{
          const Cmp = I[ic];
          return (
            <a key={ic} href={href} className={"nav-item"+(active?" active":"")}>
              <Cmp/><span>{k?T(k):label}</span>
            </a>
          );
        })}
      </nav>
      <div className="nav-spacer"></div>
      <div className="side-card">
        <div className="rk"><window.Icons.rocket w={20} sw={1.8}/></div>
        <h4>{T('camp.side.title')}</h4>
        <p>{T('dash.sideCard.sub')}</p>
        <button>{T('dash.nav.create')}</button>
      </div>
    </aside>
  );
}

function LangToggle(){
  const I = window.Icons;
  const cur = window.i18n ? window.i18n.lang : 'en';
  return (
    <div className="lang">
      <span className="glb"><I.globe w={16}/></span>
      <button className={cur==='en'?'on':''} onClick={()=>window.setLang('en')}>EN</button>
      <button className={cur==='es'?'on':''} onClick={()=>window.setLang('es')}>ES</button>
    </div>
  );
}

function Topbar(){
  const I = window.Icons;
  const T = window.T;
  return (
    <header className="topbar">
      <div className="tb-left">
        <h1>{T('dash.nav.create')}</h1>
        <p>{T('camp.topbarSub')}</p>
      </div>
      <div className="tb-right">
        <LangToggle/>
        <div className="balance">
          <div>
            <div className="lbl">{T('dash.balance.label')}</div>
            <div className="amt">$250.00</div>
          </div>
          <button><I.plus w={14} sw={2.6}/>{T('dash.balance.add')}</button>
        </div>
        <div className="user">
          <div className="avatar"><I.user w={20}/></div>
          <div>
            <div className="u-name">{T('nav.account')}</div>
          </div>
          <I.chevD w={16}/>
        </div>
      </div>
    </header>
  );
}

const STEPS = [
  { id:0, labelKey:'camp.step.basics', icon:'doc' },
  { id:1, labelKey:'camp.step.package', icon:'box' },
  { id:2, labelKey:'camp.step.stations', icon:'radio' },
  { id:3, labelKey:'camp.step.audio', icon:'music' },
  { id:4, labelKey:'camp.step.schedule', icon:'cal' },
  { id:5, labelKey:'camp.step.review', icon:'card' },
];

function Stepper({current}){
  const I = window.Icons;
  const T = window.T;
  return (
    <div className="stepper">
      {STEPS.map((s,i)=>(
        <React.Fragment key={s.id}>
          <div className={"step-node "+(i<current?'done':i===current?'active':'')}>
            <div className="step-dot">
              {i<current ? <I.checkSm/> : (()=>{ const C=I[s.icon]; return <C w={18}/>; })()}
            </div>
            <div className="step-label">{T(s.labelKey)}</div>
          </div>
          {i<STEPS.length-1 && (
            <div className="step-bar">
              <i style={{transform:`scaleX(${i<current?1:0})`}}/>
            </div>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, Stepper, Logo, STEPS });