// Huddle — custom top header (replaces iOS nav) and bottom tab bar

function HuddleHeader({ title, subtitle, onAdd }) {
  return (
    <div style={{
      paddingTop: 10,
      paddingBottom: 14,
      paddingLeft: 20,
      paddingRight: 16,
      background: C.cream,
      display: 'flex',
      alignItems: 'flex-end',
      justifyContent: 'space-between',
      gap: 12,
    }}>
      <div style={{ minWidth: 0 }}>
        {subtitle && (
          <div style={{
            fontFamily: '"DM Sans", system-ui',
            fontSize: 12.5,
            fontWeight: 600,
            color: C.inkMuted,
            letterSpacing: 0.6,
            textTransform: 'uppercase',
            marginBottom: 2,
          }}>{subtitle}</div>
        )}
        <div style={{
          fontFamily: '"Instrument Serif", Georgia, serif',
          fontSize: 38,
          fontWeight: 400,
          color: C.navy,
          letterSpacing: -0.8,
          lineHeight: 1,
          fontStyle: 'italic',
        }}>{title}</div>
      </div>
      {onAdd && (
        <button onClick={onAdd} style={{
          width: 46, height: 46, borderRadius: 23,
          background: C.navy, color: C.cream,
          border: 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer',
          boxShadow: '0 4px 12px rgba(30,42,74,0.22)',
          flexShrink: 0,
          padding: 0,
        }}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
            <path d="M9 2v14M2 9h14" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
          </svg>
        </button>
      )}
    </div>
  );
}

// Group header bar (sits above the main title, shows which huddle)
function GroupBar({ group, members }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: 'calc(env(safe-area-inset-top, 12px) + 18px) 20px 0',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8,
          background: C.coralSoft,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 15,
        }}>{group.emoji}</div>
        <div style={{
          fontFamily: '"DM Sans", system-ui',
          fontSize: 14, fontWeight: 600, color: C.navy,
          letterSpacing: -0.2,
        }}>{group.name}</div>
      </div>
      <AvatarStack users={members.slice(0,5)} size={22} max={4}/>
    </div>
  );
}

// ───── Bottom tab bar ─────
function TabBar({ active, onTab }) {
  const tabs = [
    { id: 'feed',  label: 'Feed',  icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <rect x="3" y="4" width="16" height="3" rx="1.5" stroke="currentColor" strokeWidth="1.8"/>
        <rect x="3" y="10" width="16" height="3" rx="1.5" stroke="currentColor" strokeWidth="1.8"/>
        <rect x="3" y="16" width="16" height="3" rx="1.5" stroke="currentColor" strokeWidth="1.8"/>
      </svg>
    )},
    { id: 'board', label: 'Board', icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <rect x="3" y="3" width="7" height="9" rx="1.8" stroke="currentColor" strokeWidth="1.8"/>
        <rect x="12" y="3" width="7" height="5" rx="1.8" stroke="currentColor" strokeWidth="1.8"/>
        <rect x="3" y="14" width="7" height="5" rx="1.8" stroke="currentColor" strokeWidth="1.8"/>
        <rect x="12" y="10" width="7" height="9" rx="1.8" stroke="currentColor" strokeWidth="1.8"/>
      </svg>
    )},
    { id: 'add',   label: 'Add',   isPrimary: true, icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <path d="M11 4v14M4 11h14" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>
      </svg>
    )},
    { id: 'cal',   label: 'Calendar', icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <rect x="3" y="5" width="16" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.8"/>
        <path d="M3 9h16" stroke="currentColor" strokeWidth="1.8"/>
        <path d="M7 3v4M15 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
      </svg>
    )},
    { id: 'me',    label: 'You',   icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <circle cx="11" cy="8" r="4" stroke="currentColor" strokeWidth="1.8"/>
        <path d="M3 19c1.5-4 5-6 8-6s6.5 2 8 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
      </svg>
    )},
  ];

  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      paddingTop: 10, paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 16px)',
      background: `linear-gradient(to top, ${C.cream} 60%, rgba(251,246,238,0))`,
      display: 'flex', justifyContent: 'center',
      zIndex: 40,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center',
        background: C.white,
        borderRadius: 999,
        padding: 6,
        boxShadow: '0 8px 24px rgba(30,42,74,0.12), 0 2px 6px rgba(30,42,74,0.06)',
        gap: 2,
      }}>
        {tabs.map(t => {
          const isActive = active === t.id;
          if (t.isPrimary) {
            return (
              <button key={t.id} onClick={() => onTab(t.id)} style={{
                width: 48, height: 48, borderRadius: 24,
                background: C.coral, color: C.white,
                border: 'none', cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 4px 12px rgba(255,107,91,0.42)',
                margin: '0 2px',
                padding: 0,
              }}>{t.icon}</button>
            );
          }
          return (
            <button key={t.id} onClick={() => onTab(t.id)} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              gap: 2,
              padding: '8px 12px',
              minWidth: 56,
              background: 'transparent', border: 'none', cursor: 'pointer',
              color: isActive ? C.navy : C.inkMuted,
              fontFamily: '"DM Sans", system-ui',
              fontSize: 10.5, fontWeight: 600,
              letterSpacing: 0.1,
            }}>
              {t.icon}
              <span>{t.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { HuddleHeader, GroupBar, TabBar });