// Buyer portal — sidebar + topbar shell
const { Seal, Icon, IconButton, Badge } = window.FF;

function PortalShell({ view, onView, children }) {
  const nav = [
    { k: 'lots', label: 'Lots', icon: 'package' },
    { k: 'orders', label: 'Orders', icon: 'truck', count: 4 },
    { k: 'quote', label: 'Request a quote', icon: 'hand-coins' },
    { k: 'documents', label: 'Documents', icon: 'file-text' },
    { k: 'traceability', label: 'Traceability', icon: 'qr-code' },
    { k: 'growers', label: 'Growers', icon: 'users' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '248px 1fr', minHeight: '100vh' }}>
      <aside className="ff-on-ink" style={{ background: 'var(--ff-ink)', padding: 'var(--space-5) var(--space-4)', display: 'flex', flexDirection: 'column', gap: 'var(--space-7)' }}>
        <div style={{ padding: '0 var(--space-2)' }}>
          <Seal size={36} colour="paper" lockup tagline="Buyer portal" assetBase="../../" />
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {nav.map((n) => {
            const on = n.k === view;
            return (
              <button
                key={n.k}
                onClick={() => onView && onView(n.k)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 10, width: '100%',
                  padding: '10px 12px', border: 'none', cursor: 'pointer', textAlign: 'left',
                  borderRadius: 'var(--radius-sm)',
                  background: on ? 'rgba(247,242,232,0.1)' : 'transparent',
                  color: on ? 'var(--ff-paper)' : 'rgba(247,242,232,0.72)',
                  font: 'var(--type-body-sm)', fontSize: 15, fontWeight: on ? 600 : 400,
                  boxShadow: on ? 'inset 2px 0 0 0 var(--ff-pepper)' : 'none',
                }}
              >
                <Icon name={n.icon} size={18} />
                {n.label}
                {n.count ? <span style={{ marginLeft: 'auto', font: 'var(--type-mono)', fontSize: 12, color: 'rgba(247,242,232,0.6)' }}>{n.count}</span> : null}
              </button>
            );
          })}
        </nav>
        <div style={{ marginTop: 'auto', padding: 'var(--space-4)', border: '1px solid rgba(247,242,232,0.16)', borderRadius: 'var(--radius-md)' }}>
          <span style={{ font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(247,242,232,0.5)' }}>Harvest 2026</span>
          <p style={{ margin: '8px 0 10px', font: 'var(--type-body-sm)', fontSize: 13, color: 'rgba(247,242,232,0.72)' }}>
            Red pepper sorting finishes 22 August.
          </p>
          <Badge tone="ink" size="sm" style={{ background: 'rgba(247,242,232,0.12)', color: 'var(--ff-paper)' }}>On schedule</Badge>
        </div>
      </aside>
      <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <header
          style={{
            position: 'sticky', top: 0, zIndex: 30, display: 'flex', alignItems: 'center', gap: 'var(--space-4)',
            height: 64, padding: '0 var(--space-7)',
            background: 'rgba(247,242,232,0.9)', backdropFilter: 'var(--blur-sticky)',
            borderBottom: '1px solid var(--border-hairline)',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, maxWidth: 420, padding: '0 12px', height: 36, border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-card)', color: 'var(--text-meta)' }}>
            <Icon name="search" size={16} />
            <span style={{ font: 'var(--type-body-sm)' }}>Search lots, orders, documents</span>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
            <IconButton icon="languages" label="Language" variant="ghost" />
            <IconButton icon="download" label="Export" variant="outline" />
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingLeft: 'var(--space-4)', borderLeft: '1px solid var(--border-hairline)' }}>
              <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, borderRadius: '50%', background: 'var(--ff-khaki-tint)', border: '1px solid var(--border-hairline)', font: 'var(--type-label)', color: 'var(--text-strong)' }}>ME</span>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <span style={{ font: 'var(--type-body-sm)', fontSize: 13, fontWeight: 600, color: 'var(--text-strong)' }}>Maison Épices</span>
                <span style={{ font: 'var(--type-meta)', color: 'var(--text-meta)' }}>Lyon · FR</span>
              </div>
            </div>
          </div>
        </header>
        <main style={{ flex: 1, padding: 'var(--space-7)', maxWidth: 'var(--container-wide)', width: '100%' }}>{children}</main>
      </div>
    </div>
  );
}
window.PortalShell = PortalShell;