// Brother Bear — Home shell components.
// Shared building blocks for the in-app surface: paper background, top app
// bar, bottom tab bar, status pills, document cards, big numerals, chip rows,
// primary CTA. All ink-on-paper, hairline borders, 2px radii — no SaaS soft
// shadows or rounded cards. Tokens live in colors_and_type.css.

const BB = {
  inkBlack:   '#0A0A0A',
  inkSoft:    '#2A2620',
  inkFaint:   '#4A453C',
  paperBeige: '#E8DCC8',
  paperCream: '#F1E8D7',
  paperDeep:  '#D8C9B0',
  mutedOlive: '#686F51',
  oliveDeep:  '#4A5239',
  dustyBrown: '#8A7A65',
  brownSoft:  '#B0A28A',
  statusWarn: '#8A6A2C',
  statusStop: '#6B2A1E',
  lineSoft:   'rgba(10,10,10,0.18)',
  lineFaint:  'rgba(10,10,10,0.10)',
  fontSans:   '"Söhne", "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif',
  fontSerif:  '"Canela", "Fraunces", "Times New Roman", Georgia, serif',
  fontMono:   '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace',
};

// ─────────────────────────────────────────────────────────────
// PaperBg — the shared screen wrapper. Paper-beige + grain.
// Sits inside the iOS frame, extends behind the status bar
// notch, and reserves space for top app bar + tab bar.
// ─────────────────────────────────────────────────────────────
function PaperBg({ children }) {
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative',
      backgroundColor: BB.paperBeige,
      backgroundImage:
        'radial-gradient(rgba(138,122,101,0.08) 1px, transparent 1px),' +
        'radial-gradient(rgba(10,10,10,0.04) 1px, transparent 1px)',
      backgroundSize: '3px 3px, 7px 7px',
      backgroundPosition: '0 0, 1px 2px',
      fontFamily: BB.fontSans,
      color: BB.inkBlack,
      overflow: 'hidden',
    }}>
      {children}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// BBTopBar — letter-pressed top app bar. Title left (Söhne 22pt
// bold), mono meta right (e.g. TUE · MAY 12 · 12 NEW), bottom
// hairline divider. Optional back chevron.
// ─────────────────────────────────────────────────────────────
function BBTopBar({ title, meta, back = false, onBack }) {
  return (
    <div style={{
      position: 'absolute', top: 'var(--bb-safe-top, 54px)', left: 0, right: 0,
      height: 64, padding: '0 24px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: `1px solid ${BB.inkBlack}`,
      background: 'transparent',
      zIndex: 5,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {back && (
          <button onClick={onBack} aria-label="Back" style={{
            border: 'none', background: 'transparent', padding: 0, margin: 0,
            cursor: onBack ? 'pointer' : 'default',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            width: 24, height: 24, marginLeft: -4,
          }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M10 2L4 8l6 6" stroke={BB.inkBlack} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        )}
        <div style={{
          fontFamily: BB.fontSans, fontWeight: 700, fontSize: 22,
          letterSpacing: '-0.02em', lineHeight: 1.05, color: BB.inkBlack,
        }}>{title}</div>
      </div>
      {meta && (
        <div style={{
          fontFamily: BB.fontMono, fontSize: 10, fontWeight: 500,
          letterSpacing: '0.08em', color: BB.inkFaint,
          textTransform: 'uppercase',
        }}>{meta}</div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ScreenScroll — content area between top bar and tab bar.
// Paper background already applied by PaperBg; this just gives
// scroll + horizontal padding.
// ─────────────────────────────────────────────────────────────
function ScreenScroll({ children, pad = 24 }) {
  return (
    <div style={{
      position: 'absolute',
      top: 'calc(var(--bb-safe-top, 54px) + 64px)',
      bottom: 'calc(60px + var(--bb-safe-bottom, 28px))',
      left: 0, right: 0,
      overflow: 'auto',
      padding: `20px ${pad}px 32px`,
    }}>{children}</div>
  );
}

// ─────────────────────────────────────────────────────────────
// BBTabBar — bottom navigation. 4 tabs. Hairline on top.
// Paper-cream surface for slight elevation. Active tab gets
// ink-black icon + label and a small ink square indicator above.
// ─────────────────────────────────────────────────────────────
function BBTabBar({ active = 'inbox', onTabChange }) {
  const tabs = [
    { id: 'inbox',    label: 'INBOX',    icon: TabIconInbox },
    { id: 'deals',    label: 'DEALS',    icon: TabIconDeals },
    { id: 'earnings', label: 'EARNINGS', icon: TabIconEarnings },
    { id: 'account',  label: 'ACCOUNT',  icon: TabIconAccount },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      height: 'calc(60px + var(--bb-safe-bottom, 28px))',
      paddingBottom: 'var(--bb-safe-bottom, 28px)',
      background: BB.paperCream,
      borderTop: `1px solid ${BB.inkBlack}`,
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
      zIndex: 6,
    }}>
      {tabs.map((t) => {
        const isActive = t.id === active;
        const c = isActive ? BB.inkBlack : BB.inkFaint;
        const Icon = t.icon;
        return (
          <button key={t.id}
            onClick={() => onTabChange && onTabChange(t.id)}
            disabled={!onTabChange}
            style={{
              border: 'none', background: 'transparent', padding: 0, margin: 0,
              cursor: onTabChange ? 'pointer' : 'default',
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              justifyContent: 'flex-start', paddingTop: 12, gap: 6,
              position: 'relative', WebkitTapHighlightColor: 'transparent',
              fontFamily: 'inherit',
            }}>
            {/* postal indicator above active tab */}
            <div style={{
              position: 'absolute', top: 4, left: '50%',
              transform: 'translateX(-50%)',
              width: 4, height: 4,
              background: isActive ? BB.inkBlack : 'transparent',
            }} />
            <Icon color={c} />
            <div style={{
              fontFamily: BB.fontSans, fontWeight: 700, fontSize: 9,
              letterSpacing: '0.18em', color: c,
            }}>{t.label}</div>
          </button>
        );
      })}
    </div>
  );
}

// Tab icons — stroke-only, square corners, deliberately analog
function TabIconInbox({ color }) {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M2 4h16v12H2z" stroke={color} strokeWidth="1.4"/>
      <path d="M2 4l8 6 8-6" stroke={color} strokeWidth="1.4" strokeLinejoin="round"/>
    </svg>
  );
}
function TabIconDeals({ color }) {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M3 3h11l3 3v11H3z" stroke={color} strokeWidth="1.4" strokeLinejoin="round"/>
      <path d="M14 3v3h3" stroke={color} strokeWidth="1.4" strokeLinejoin="round"/>
      <path d="M6 9h8M6 12h8M6 15h5" stroke={color} strokeWidth="1.2" strokeLinecap="round"/>
    </svg>
  );
}
function TabIconEarnings({ color }) {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <rect x="2.5" y="5" width="15" height="11" stroke={color} strokeWidth="1.4"/>
      <circle cx="10" cy="10.5" r="2.4" stroke={color} strokeWidth="1.4"/>
      <path d="M5 5V3.5M15 5V3.5" stroke={color} strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  );
}
function TabIconAccount({ color }) {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="7" r="3" stroke={color} strokeWidth="1.4"/>
      <path d="M3 17c1.5-3.5 4-5 7-5s5.5 1.5 7 5" stroke={color} strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// StatusPill — short uppercase status. Hairline border, 2px
// radius, +0.18em tracking. kind: awaiting | drafting | replied
// | closed | approved | active.
// ─────────────────────────────────────────────────────────────
function StatusPill({ kind = 'drafting', children }) {
  const styles = {
    awaiting: { fg: BB.statusWarn, bg: 'transparent', bd: BB.statusWarn },
    drafting: { fg: BB.inkBlack, bg: 'transparent', bd: BB.inkBlack },
    replied:  { fg: BB.oliveDeep, bg: 'transparent', bd: BB.oliveDeep },
    approved: { fg: BB.paperCream, bg: BB.oliveDeep, bd: BB.oliveDeep },
    active:   { fg: BB.paperBeige, bg: BB.inkBlack, bd: BB.inkBlack },
    closed:   { fg: BB.inkFaint, bg: 'transparent', bd: BB.lineSoft },
  };
  const s = styles[kind] || styles.drafting;
  return (
    <span style={{
      display: 'inline-block', padding: '3px 8px',
      border: `1px solid ${s.bd}`, color: s.fg, background: s.bg,
      fontFamily: BB.fontSans, fontSize: 9, fontWeight: 700,
      letterSpacing: '0.18em', textTransform: 'uppercase',
      lineHeight: 1.2, borderRadius: 2, whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

// ─────────────────────────────────────────────────────────────
// Eyebrow — uppercase 11pt label.
// ─────────────────────────────────────────────────────────────
function Eyebrow({ children, color = BB.inkFaint, mt = 0, mb = 8 }) {
  return (
    <div style={{
      fontFamily: BB.fontSans, fontWeight: 600, fontSize: 11,
      letterSpacing: '0.22em', textTransform: 'uppercase', color,
      marginTop: mt, marginBottom: mb,
    }}>{children}</div>
  );
}

// ─────────────────────────────────────────────────────────────
// MonoLabel — JetBrains Mono small caps for codes/dates/IDs.
// ─────────────────────────────────────────────────────────────
function MonoLabel({ children, size = 10, color = BB.inkFaint, tracking = 0.08 }) {
  return (
    <span style={{
      fontFamily: BB.fontMono, fontSize: size, fontWeight: 500,
      letterSpacing: `${tracking}em`, color, textTransform: 'uppercase',
    }}>{children}</span>
  );
}

// ─────────────────────────────────────────────────────────────
// DocCard — paper-cream document card with hairline border.
// ─────────────────────────────────────────────────────────────
function DocCard({ children, pad = '20px 22px', mt = 0, mb = 0, bg = BB.paperCream, border = BB.inkBlack }) {
  return (
    <div style={{
      background: bg,
      border: `1px solid ${border}`, borderRadius: 2,
      padding: pad, marginTop: mt, marginBottom: mb,
    }}>{children}</div>
  );
}

// ─────────────────────────────────────────────────────────────
// BigNumeral — Canela 56pt + small mono unit. Used for floor /
// fee / take-home moments.
// ─────────────────────────────────────────────────────────────
function BigNumeral({ value, unit = 'EUR', size = 56, color = BB.inkBlack }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline', gap: 10,
      lineHeight: 1, marginTop: 4, marginBottom: 6,
    }}>
      <span style={{
        fontFamily: BB.fontSerif, fontWeight: 400, fontSize: size,
        letterSpacing: '-0.005em', color,
      }}>{value}</span>
      <MonoLabel size={11} tracking={0.1}>{unit}</MonoLabel>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ChipRow — horizontal scrolling filter chip row. Selected chip
// is ink-on-beige reverse, unselected is ink-on-paper hairline.
// ─────────────────────────────────────────────────────────────
function ChipRow({ options, selected, onSelect, mb = 16 }) {
  return (
    <div style={{
      display: 'flex', gap: 8, marginBottom: mb,
      overflowX: 'auto', overflowY: 'hidden',
      paddingBottom: 4,
    }}>
      {options.map((opt) => {
        const isSel = opt === selected;
        return (
          <button key={opt}
            onClick={() => onSelect && onSelect(opt)}
            disabled={!onSelect}
            style={{
              flexShrink: 0,
              padding: '7px 13px', borderRadius: 2,
              border: `1px solid ${BB.inkBlack}`,
              background: isSel ? BB.inkBlack : 'transparent',
              color: isSel ? BB.paperBeige : BB.inkBlack,
              fontFamily: BB.fontSans, fontWeight: 600, fontSize: 11,
              letterSpacing: '0.04em',
              display: 'inline-flex', alignItems: 'center', gap: 6,
              cursor: onSelect ? 'pointer' : 'default',
              WebkitTapHighlightColor: 'transparent',
            }}>
            {isSel && <span style={{ fontSize: 9, marginRight: 1 }}>✓</span>}
            {opt}
          </button>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PrimaryButton — full-width ink-black with paper-beige label.
// ─────────────────────────────────────────────────────────────
function PrimaryButton({ label, code, arrow = true, mt = 16, onClick, disabled = false }) {
  return (
    <button onClick={onClick} disabled={disabled || !onClick} style={{
      width: '100%', textAlign: 'left',
      background: BB.inkBlack, color: BB.paperBeige,
      border: `1px solid ${BB.inkBlack}`, borderRadius: 2,
      padding: '16px 18px', marginTop: mt,
      display: 'grid', gridTemplateColumns: '32px 1fr 18px',
      alignItems: 'center', gap: 8,
      cursor: (onClick && !disabled) ? 'pointer' : 'default',
      opacity: disabled ? 0.4 : 1,
      fontFamily: 'inherit',
      WebkitTapHighlightColor: 'transparent',
    }}>
      <span style={{
        fontFamily: BB.fontMono, fontSize: 10, fontWeight: 500,
        letterSpacing: '0.08em', color: BB.paperBeige, opacity: 0.55,
      }}>{code || ''}</span>
      <span style={{
        textAlign: 'center',
        fontFamily: BB.fontSans, fontWeight: 700, fontSize: 12,
        letterSpacing: '0.22em', textTransform: 'uppercase',
      }}>{label}</span>
      {arrow ? (
        <svg width="16" height="10" viewBox="0 0 16 10" fill="none" style={{ justifySelf: 'end' }}>
          <path d="M1 5h13m0 0L10 1m4 4l-4 4" stroke={BB.paperBeige} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ) : <span />}
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// HairlineRule — full-width ink-black hairline. mt/mb in px.
// ─────────────────────────────────────────────────────────────
function Rule({ mt = 0, mb = 0, color = BB.inkBlack }) {
  return <div style={{ height: 1, background: color, marginTop: mt, marginBottom: mb }} />;
}

Object.assign(window, {
  BB, PaperBg, BBTopBar, BBTabBar, ScreenScroll,
  StatusPill, Eyebrow, MonoLabel, DocCard, BigNumeral, ChipRow,
  PrimaryButton, Rule,
});