// Factor Activo — bottom tab bar + screen shell

const TABS = [
  { id: 'balance',  label: 'Balance',    icon: 'wallet' },
  { id: 'contracts',label: 'Contratos',  icon: 'docs' },
  { id: 'dates',    label: 'Agenda',     icon: 'cal' },
  { id: 'settings', label: 'Ajustes',    icon: 'gear' },
];

function TabBar({ active, onChange }) {
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      paddingBottom: 28,
      background: 'linear-gradient(to top, #ffffff 60%, rgba(255,255,255,0))',
      paddingTop: 14,
      zIndex: 30,
    }}>
      <div style={{
        margin: '0 16px',
        background: '#ffffff',
        borderRadius: 24,
        boxShadow: '0 1px 2px rgba(10,22,40,.04), 0 10px 30px rgba(10,22,40,.08), 0 0 0 1px rgba(10,22,40,.04)',
        padding: '10px 8px',
        display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      }}>
        {TABS.map(t => {
          const on = active === t.id;
          return (
            <button key={t.id} onClick={() => onChange(t.id)}
              style={{
                background: 'none', border: 'none', padding: '6px 10px',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                cursor: 'pointer', flex: 1, position: 'relative',
                transition: 'transform .15s',
              }}>
              <div style={{
                width: 44, height: 28,
                borderRadius: 14,
                background: on ? FA.skySoft : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'background .2s',
              }}>
                <Icon name={t.icon} size={20} color={on ? FA.blue : FA.muted} strokeWidth={on ? 2.1 : 1.7}/>
              </div>
              <span style={{
                fontFamily: FA.sans, fontSize: 10.5, fontWeight: on ? 600 : 500,
                color: on ? FA.blue : FA.muted, letterSpacing: 0.2,
              }}>{t.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// Top header — brand + notification bell w/ badge
function AppHeader({ onBell, unread = 0, theme = 'light' }) {
  const onDark = theme === 'hero';
  const fg = onDark ? '#ffffff' : FA.ink;
  const sub = onDark ? 'rgba(255,255,255,0.72)' : FA.muted;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '10px 20px 14px', position: 'relative', zIndex: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 32, height: 32, borderRadius: 9,
          background: onDark ? 'rgba(255,255,255,0.18)' : FA.heroGrad,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: onDark ? 'inset 0 0 0 1px rgba(255,255,255,0.25)' : '0 4px 12px rgba(37,99,235,0.28)',
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
            <path d="M5 19V7l6-3 6 3v4" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M8 13h10v8H8z" stroke="#fff" strokeWidth="2" strokeLinejoin="round"/>
            <path d="M13 17h3" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
          </svg>
        </div>
        <div>
          <div style={{ fontFamily: FA.sans, fontSize: 15, fontWeight: 650, color: fg, letterSpacing: -0.2, lineHeight: 1 }}>
            Factor <span style={{ fontWeight: 400, opacity: 0.75 }}>Activo</span>
          </div>
          <div style={{ fontFamily: FA.sans, fontSize: 11, color: sub, marginTop: 2 }}>Buenos días, Camila</div>
        </div>
      </div>
      <button onClick={onBell} style={{
        background: onDark ? 'rgba(255,255,255,0.15)' : FA.bgSoft,
        border: 'none', width: 38, height: 38, borderRadius: 12,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer', position: 'relative',
      }}>
        <Icon name="bell" size={19} color={fg} strokeWidth={1.8}/>
        {unread > 0 && (
          <span style={{
            position: 'absolute', top: 8, right: 8,
            width: 8, height: 8, borderRadius: 4, background: FA.danger,
            boxShadow: `0 0 0 2px ${onDark ? 'rgba(255,255,255,0.15)' : FA.bgSoft}`,
          }}/>
        )}
      </button>
    </div>
  );
}

// Plain-card wrapper
function Card({ children, style = {}, pad = 18 }) {
  return (
    <div style={{
      background: '#fff',
      borderRadius: 18,
      padding: pad,
      boxShadow: '0 1px 2px rgba(10,22,40,.03), 0 4px 18px rgba(10,22,40,.05)',
      border: '1px solid rgba(10,22,40,.04)',
      ...style,
    }}>{children}</div>
  );
}

Object.assign(window, { TABS, TabBar, AppHeader, Card });