const { SidebarNav, Callout, Select } = window.MIS;

function curBtn(active){
  return { border:"none", padding:"6px 14px", fontWeight:700, cursor:"pointer", fontFamily:"var(--font-mono)",
    background: active ? "var(--mis-blue-600)" : "var(--surface-page)", color: active ? "#fff" : "var(--text-muted)" };
}

function AppShell({view,setView,children}){
  const { t, lang, setLang, cur, setCur } = useUI();
  const [biz,setBiz]=React.useState('Verde Ciclico S.A.');
  return (
    <div style={{display:'flex',flexDirection:'column',height:'100vh',background:'var(--surface-sunken)'}}>
      <Callout tone="demo" label={t('demoLabel')} action={<a href="#">{t('demoAction')}</a>} style={{borderRadius:0,borderLeft:0,borderBottom:'1px solid var(--mis-amber-200)'}}>
        {t('demoText')}
      </Callout>
      <div style={{display:'flex',flex:1,minHeight:0}}>
        <SidebarNav active={view} onSelect={setView}
          header={<div style={{display:'flex',flexDirection:'column',gap:6}}>
            <span style={{font:'var(--type-body)',fontWeight:'var(--weight-bold)',color:'var(--text-inverse)'}}>El Conta</span>
            <span style={{fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',letterSpacing:'var(--tracking-wide)',textTransform:'uppercase',color:'var(--mis-gray-500)'}}>{t('tag')}</span>
          </div>}
          items={[
            {id:'inicio',label:t('nav.inicio')},
            {id:'mov',label:t('nav.mov'),count:3},
            {id:'concil',label:t('nav.concil')},
            {id:'factura',label:t('nav.factura')},
            {id:'inv',label:t('nav.inv')},
            {id:'planilla',label:t('nav.planilla'),count:6},
            {id:'cobros',label:t('nav.cobros')},
            {id:'activos',label:t('nav.activos')},
            {id:'reportes',label:t('nav.reportes')},
            {id:'eeff',label:t('nav.eeff')},
            {id:'impuestos',label:t('nav.impuestos'),count:1},
            {id:'cpi',label:t('nav.cpi'),count:6},
            {id:'servicios',label:t('nav.servicios')},
            {id:'config',label:t('nav.config')}
          ]}
          footer={<div style={{display:'flex',flexDirection:'column',gap:6,fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',color:'var(--mis-gray-500)'}}>
            <span>{t('footData')}</span><span>myintelligentsystem.com</span>
          </div>}/>
        <div style={{flex:1,minWidth:0,display:'flex',flexDirection:'column',overflow:'hidden'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:'var(--space-3)',padding:'var(--space-3) var(--space-8)',borderBottom:'1px solid var(--border-subtle)',background:'var(--surface-page)'}}>
            <div style={{display:'flex',alignItems:'center',gap:'var(--space-2)'}}>
              <span style={{font:'var(--type-small)',color:'var(--text-muted)'}}>{t('biz.switch')}</span>
              <Select value={biz} onChange={(e)=>setBiz(e.target.value)}
                options={['Verde Ciclico S.A.','Panaderia La Espiga','Taller Mecanico Rodriguez']}/>
            </div>
            <div style={{display:'flex',alignItems:'center',gap:'var(--space-3)'}}>
              <div style={{display:'inline-flex',border:'1px solid var(--border-default)',borderRadius:'var(--radius-pill)',overflow:'hidden'}}>
                <button onClick={()=>setCur('CRC')} style={curBtn(cur==='CRC')}>₡</button>
                <button onClick={()=>setCur('USD')} style={curBtn(cur==='USD')}>$</button>
              </div>
              <Select value={lang} onChange={(e)=>setLang(e.target.value)}
                options={[{value:'es',label:'Espanol'},{value:'en',label:'English'},{value:'pt',label:'Portugues'},{value:'fr',label:'Francais'}]}/>
            </div>
          </div>
          <main style={{flex:1,minWidth:0,overflow:'auto',padding:'var(--space-8)'}}>{children}</main>
        </div>
      </div>
    </div>
  );
}

function ViewHeader({title,lede,actions}){
  return (
    <header style={{display:'flex',alignItems:'flex-end',gap:'var(--space-6)',marginBottom:'var(--space-6)',flexWrap:'wrap'}}>
      <div style={{flex:'1 1 320px'}}>
        <h1 style={{font:'var(--type-h2)',fontSize:'var(--text-2xl)',letterSpacing:'var(--tracking-tight)'}}>{title}</h1>
        {lede&&<p style={{font:'var(--type-body)',margin:'var(--space-2) 0 0',color:'var(--text-muted)',maxWidth:'var(--measure)'}}>{lede}</p>}
      </div>
      <div style={{display:'flex',gap:'var(--space-2)'}}>{actions}</div>
    </header>
  );
}
Object.assign(window,{AppShell,ViewHeader});