// HomeHub shared primitives: TabBar, Toggle, Chip, Sheet, etc.

const TABS = [
  { id: 'home', label: 'Home', icon: 'home' },
  { id: 'map', label: 'Map', icon: 'map' },
  { id: 'lists', label: 'Board', icon: 'grid' },
  { id: 'calendar', label: 'Calendar', icon: 'calendar' },
  { id: 'settings', label: 'More', icon: 'moreHoriz' },
];

function TabBar({ active, onChange, iconVariant = 'duotone', notifCount = 0, onNotifClick }) {
  return (
    <div className="hh-tabbar">
      <div className="hh-tabbar-main">
        {TABS.map(t => (
          <button key={t.id} className="hh-tab press" data-active={active === t.id}
            onClick={() => onChange(t.id)}>
            <Icon name={t.icon} size={22} variant={active === t.id ? (iconVariant === 'outline' ? 'outline' : 'filled') : (iconVariant === 'filled' ? 'filled' : 'outline')} />
            <span>{t.label}</span>
          </button>
        ))}
      </div>
      <button className="hh-tabbar-bell press" onClick={onNotifClick} style={{ position: 'relative' }}>
        <Icon name="bell" size={20} variant={notifCount > 0 ? 'filled' : 'outline'} color={notifCount > 0 ? '#fff' : 'var(--hh-ink-soft)'}/>
        {notifCount > 0 && (
          <span style={{
            position: 'absolute', top: -2, right: -2,
            minWidth: 16, height: 16, borderRadius: 999,
            background: '#d44', color: '#fff',
            fontSize: 9, fontWeight: 700,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: '0 3px',
            border: '2px solid var(--hh-bg)',
          }}>{notifCount > 9 ? '9+' : notifCount}</span>
        )}
      </button>
    </div>
  );
}

function Toggle({ on, onChange }) {
  return <button className="hh-toggle press" data-on={on} onClick={(e) => { e.stopPropagation(); onChange(!on); }} />;
}

function Chip({ children, active, onClick, color }) {
  return (
    <button className="hh-pill press" onClick={onClick}
      style={{
        background: active ? (color || 'var(--hh-ink)') : 'var(--hh-surface-2)',
        color: active ? '#fff' : 'var(--hh-ink-soft)',
        borderColor: active ? (color || 'var(--hh-ink)') : 'var(--hh-line-soft)',
      }}>
      {children}
    </button>
  );
}

function TopBar({ title, subtitle, leading, trailing }) {
  return (
    <div style={{ padding: '18px 20px 10px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12 }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        {subtitle && <div style={{ fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--hh-ink-mute)', marginBottom: 2 }}>{subtitle}</div>}
        <div className="hh-serif" style={{ fontSize: 30, fontWeight: 400, lineHeight: 1.05, color: 'var(--hh-ink)', letterSpacing: '-0.01em' }}>{title}</div>
      </div>
      {trailing}
    </div>
  );
}

function Sheet({ open, onClose, title, children, height = '80%', presentation = 'sheet', width = 'min(720px, calc(100vw - 24px))' }) {
  if (!open) return null;
  const isModal = presentation === 'modal';
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 100 }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(20,15,10,0.35)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', animation: 'hh-fade .2s' }} />
      <div style={isModal ? {
        position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
        width, maxWidth: width, height: 'min(82vh, 760px)',
        background: 'var(--hh-bg)', borderRadius: 28,
        display: 'flex', flexDirection: 'column',
        boxShadow: '0 24px 64px rgba(0,0,0,0.22)',
        border: '1px solid var(--hh-line-soft)',
        animation: 'hh-fade .2s',
        overflow: 'hidden',
      } : {
        position: 'absolute', left: 0, right: 0, bottom: 0, height,
        background: 'var(--hh-bg)', borderRadius: '24px 24px 0 0',
        display: 'flex', flexDirection: 'column',
        animation: 'hh-slide .25s cubic-bezier(.3,.9,.3,1)',
        boxShadow: '0 -10px 40px rgba(0,0,0,0.2)',
      }}>
        {!isModal && (
          <div style={{ padding: '10px 0 4px', display: 'flex', justifyContent: 'center' }}>
            <div style={{ width: 40, height: 4, borderRadius: 2, background: 'var(--hh-line)' }} />
          </div>
        )}
        <div style={{ padding: '8px 20px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div className="hh-serif" style={{ fontSize: 22 }}>{title}</div>
          <button onClick={onClose} className="press" style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--hh-surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="close" size={18} />
          </button>
        </div>
        <div className="hh-scroll" style={{ flex: 1, overflow: 'auto' }}>{children}</div>
      </div>
    </div>
  );
}

// Avatar
function Avatar({ name, color, size = 32 }) {
  const initials = name.slice(0, 2).toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: color, color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--hh-font)', fontSize: size * 0.42, fontWeight: 500,
      flexShrink: 0, letterSpacing: '0.02em',
      boxShadow: '0 0 0 2px var(--hh-bg)',
    }}>{initials}</div>
  );
}

// Ambient stat stripe (used on dashboard)
function AmbientStrip({ items }) {
  return (
    <div style={{ display: 'flex', gap: 10, padding: '0 20px', marginBottom: 14 }}>
      {items.map((it, i) => (
        <div key={i} className="hh-card" style={{ flex: 1, padding: '10px 12px', borderRadius: 14 }}>
          <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--hh-ink-mute)' }}>{it.label}</div>
          <div className="hh-numeric" style={{ fontSize: 20, marginTop: 2 }}>{it.value}<span style={{ fontSize: 11, color: 'var(--hh-ink-mute)', marginLeft: 2 }}>{it.unit}</span></div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { TabBar, Toggle, Chip, TopBar, Sheet, Avatar, AmbientStrip, TABS });