/* Santos OS — shared primitives. Exposes components on window. */
const { useState } = React;
const T = window.T;

// ── Santos wordmark — orange "o" with a white Farmacia cross (brand mark) ─────
function Wordmark({ size = 22, color = '#fff', sub }) {
  const d = size*0.62;
  const disc = {
    display:'inline-flex', alignItems:'center', justifyContent:'center',
    background:T.secondary, borderRadius:'50%',
    width:d, height:d, margin:'0 0.5px', transform:`translateY(${size*0.04}px)`,
  };
  return (
    <div style={{display:'inline-flex', flexDirection:'column', alignItems:'flex-start'}}>
      <span style={{display:'inline-flex', alignItems:'center', fontFamily:T.font, fontWeight:800, fontSize:size, letterSpacing:'-0.02em', color, lineHeight:1}}>
        Sant<span style={disc}><svg width={d*0.64} height={d*0.64} viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="#fff" strokeWidth="3" strokeLinecap="round"/></svg></span>s
      </span>
      {sub && <span style={{fontSize:size*0.42, fontWeight:700, letterSpacing:3, color:'rgba(255,255,255,0.6)', marginTop:2}}>{sub}</span>}
    </div>
  );
}

// ── Tier badge ────────────────────────────────────────────────────────────────
function TierBadge({ tier, size = 'md', showLabel = true }) {
  const c = T.tiers[tier];
  const fs = size==='sm'?10:size==='lg'?14:12;
  const ic = size==='sm'?13:size==='lg'?19:15;
  const ph = size==='sm'?8:size==='lg'?13:10;
  const pv = size==='sm'?3:size==='lg'?5:4;
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap:4, background:c.bg, border:`1px solid ${c.border}`, borderRadius:999, padding:`${pv}px ${ph}px`, alignSelf:'flex-start'}}>
      <span style={{fontSize:ic}}>{c.icon}</span>
      {showLabel && <span style={{color:c.text, fontSize:fs, fontWeight:700, letterSpacing:0.5}}>{tier}</span>}
    </span>
  );
}

// ── Pill ──────────────────────────────────────────────────────────────────────
function Pill({ children, color = T.primary, bg, style }) {
  return <span style={{padding:'3px 9px', borderRadius:999, fontSize:10, fontWeight:700, color, background:bg||color+'1f', ...style}}>{children}</span>;
}

// ── Button ────────────────────────────────────────────────────────────────────
function Btn({ children, variant='primary', onClick, style, full }) {
  const base = {fontFamily:T.font, fontSize:14, fontWeight:700, borderRadius:12, padding:'13px 18px', border:'none', cursor:'pointer', display:'inline-flex', alignItems:'center', justifyContent:'center', gap:7, width:full?'100%':undefined, transition:'filter .12s, opacity .12s'};
  const v = {
    primary:{background:T.primary, color:'#fff', boxShadow:'0 3px 8px rgba(8,54,47,0.25)'},
    secondary:{background:T.secondary, color:'#fff'},
    outline:{background:'transparent', color:T.fg2, border:`1.5px solid ${T.border}`},
    ghost:{background:'rgba(74,124,114,0.12)', color:T.primary},
    danger:{background:'transparent', color:T.danger, border:`1.5px solid ${T.danger}`},
    success:{background:'#25D366', color:'#fff'},
  }[variant];
  return <button onClick={onClick} style={{...base, ...v, ...style}}
    onMouseDown={e=>e.currentTarget.style.opacity=0.82}
    onMouseUp={e=>e.currentTarget.style.opacity=1}
    onMouseLeave={e=>e.currentTarget.style.opacity=1}>{children}</button>;
}

// ── Section label ─────────────────────────────────────────────────────────────
function SectionLabel({ children, style }) {
  return <div style={{fontSize:11, fontWeight:700, color:T.fg2, letterSpacing:1, margin:'4px 0 10px', textTransform:'uppercase', ...style}}>{children}</div>;
}

// ── Card ──────────────────────────────────────────────────────────────────────
function Card({ children, style, onClick }) {
  return <div onClick={onClick} style={{background:T.surface, borderRadius:16, padding:16, boxShadow:'0 2px 8px rgba(8,54,47,0.07)', border:`1px solid ${T.border}`, ...style}}>{children}</div>;
}

// ── Phone shell ───────────────────────────────────────────────────────────────
function Phone({ children }) {
  return (
    <div style={{width:390, height:844, background:'#000', borderRadius:46, padding:10, boxShadow:'0 30px 80px rgba(8,54,47,0.35), 0 8px 24px rgba(0,0,0,0.25)', position:'relative'}}>
      <div style={{width:'100%', height:'100%', borderRadius:38, overflow:'hidden', background:T.bg, position:'relative', display:'flex', flexDirection:'column'}}>
        {/* status bar */}
        <div style={{position:'absolute', top:0, left:0, right:0, height:44, zIndex:50, display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 26px', pointerEvents:'none'}}>
          <span style={{fontSize:13, fontWeight:700, color:'var(--sbcolor,#fff)', fontFamily:T.font}}>9:41</span>
          <div style={{position:'absolute', left:'50%', transform:'translateX(-50%)', top:9, width:108, height:26, background:'#000', borderRadius:14}}></div>
          <span style={{fontSize:12, color:'var(--sbcolor,#fff)', letterSpacing:1}}>● ● ●  ▆</span>
        </div>
        {children}
      </div>
    </div>
  );
}

// ── Tab bar ───────────────────────────────────────────────────────────────────
const TABS = [
  {key:'inicio', icon:'⌂', label:'Inicio'},
  {key:'alertas', icon:'◉', label:'Alertas', badge:3},
  {key:'clientes', icon:'★', label:'Clientes', badge:2},
  {key:'almacen', icon:'▢', label:'Almacén'},
  {key:'analitica', icon:'↗', label:'Analítica'},
];
function TabBar({ active, onChange, perms }) {
  const visible = TABS.filter(t => {
    if (t.key==='alertas') return perms.alerts;
    if (t.key==='clientes') return perms.customers;
    if (t.key==='analitica') return perms.analytics;
    return true;
  });
  return (
    <div style={{display:'flex', background:T.surface, borderTop:`1px solid ${T.border}`, paddingBottom:22, paddingTop:9, boxShadow:'0 -2px 10px rgba(8,54,47,0.06)', zIndex:40}}>
      {visible.map(t => {
        const on = active===t.key;
        return (
          <button key={t.key} onClick={()=>onChange(t.key)} style={{flex:1, background:'none', border:'none', cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', gap:2, padding:0}}>
            <div style={{position:'relative'}}>
              <span style={{fontSize:22, opacity:on?1:0.45, filter:on?'none':'grayscale(0.3)'}}>{t.icon}</span>
              {t.badge && <span style={{position:'absolute', top:-4, right:-9, background:T.secondary, color:'#fff', fontSize:9, fontWeight:800, borderRadius:8, minWidth:16, height:16, display:'flex', alignItems:'center', justifyContent:'center', padding:'0 3px'}}>{t.badge}</span>}
            </div>
            <span style={{fontSize:10, fontWeight:700, color:on?T.primary:T.fg3}}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// ── Green app header (used across tabs) ───────────────────────────────────────
function AppHeader({ user, onLogout }) {
  const greet = (() => { const h=new Date().getHours(); return h<12?'Buenos días':h<18?'Buenas tardes':'Buenas noches'; })();
  const initials = user.name.split(' ').map(w=>w[0]).slice(0,2).join('');
  return (
    <div style={{background:T.primary, padding:'52px 18px 22px', display:'flex', alignItems:'center', gap:12}}>
      <Wordmark size={22} sub="FARMACIA" />
      <div style={{flex:1, marginLeft:4}}>
        <div style={{fontSize:15, fontWeight:700, color:'#fff'}}>{greet}, {user.name.split(' ')[0]}</div>
        <div style={{fontSize:11, color:'rgba(255,255,255,0.7)'}}>{user.sucursal.split('—')[0].trim()}</div>
      </div>
      <button onClick={onLogout} title="Cerrar sesión" style={{width:40, height:40, borderRadius:20, background:T.secondary, border:'none', color:'#fff', fontSize:14, fontWeight:800, cursor:'pointer'}}>{initials}</button>
    </div>
  );
}

Object.assign(window, { Wordmark, TierBadge, Pill, Btn, SectionLabel, Card, Phone, TabBar, AppHeader });