// Proto shell — header, section tabs, bottom nav.
// All chrome that lives outside the active screen.

const { useState, useMemo, useEffect, useRef } = React;

// Concours palette pulled from the design system.
const P = DIRECTIONS.concours.palette;
const T = DIRECTIONS.concours.type;

// ─────────────────────────────────────────────────────────────────────
// HEADER — vehicle context (back · nickname · menu)
// ─────────────────────────────────────────────────────────────────────

function ProtoHeader({ vehicle }) {
  return (
    <div style={{
      padding: '10px 18px 12px',
      background: P.ink,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: `1px solid ${P.graphite}`,
    }}>
      <button style={{
        background: 'transparent', border: 'none', padding: 6,
        color: P.paper, cursor: 'pointer',
        display: 'flex', alignItems: 'center', gap: 6,
      }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M19 12H5M5 12l6-6M5 12l6 6" />
        </svg>
        <span style={{
          fontFamily: T.mono, fontSize: 9, letterSpacing: '0.2em',
          textTransform: 'uppercase', color: P.mute,
        }}>GARAGE</span>
      </button>

      <div style={{ textAlign: 'center', flex: 1 }}>
        <div style={{
          fontFamily: T.mono, fontSize: 8, letterSpacing: '0.24em',
          textTransform: 'uppercase', color: P.gold,
        }}>
          {vehicle.year} · {vehicle.make.toUpperCase()}
        </div>
        <div style={{
          fontFamily: T.display, fontWeight: 600, fontSize: 14,
          letterSpacing: '0.08em', color: P.paper, marginTop: 1,
        }}>
          "{vehicle.nickname.toUpperCase()}"
        </div>
      </div>

      <button style={{
        background: 'transparent', border: 'none', padding: 6,
        color: P.paper, cursor: 'pointer',
      }}>
        <Icon name="share" size={18} color={P.paper} strokeWidth={1.6} />
      </button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// SECTION TABS — horizontal scroll, sticky under header
// ─────────────────────────────────────────────────────────────────────

function ProtoSectionTabs({ active, onChange }) {
  return (
    <div className="proto-scroll" style={{
      background: P.ink,
      borderBottom: `1px solid ${P.graphite}`,
      overflowX: 'auto', overflowY: 'hidden',
      flex: '0 0 auto',
    }}>
      <div style={{ display: 'flex', padding: '0 14px', gap: 4, minWidth: 'max-content' }}>
        {SECTIONS.map(s => {
          const on = s.id === active;
          return (
            <button key={s.id}
              onClick={() => onChange(s.id)}
              style={{
                background: 'transparent', border: 'none', padding: '14px 10px 12px',
                cursor: 'pointer',
                position: 'relative', flex: '0 0 auto',
                fontFamily: T.mono, fontSize: 10, fontWeight: 600,
                letterSpacing: '0.2em', textTransform: 'uppercase',
                color: on ? P.paper : P.mute,
                transition: 'color .15s',
              }}>
              {s.label}
              <div style={{
                position: 'absolute', left: 10, right: 10, bottom: 6,
                height: 2,
                background: on ? P.gold : 'transparent',
                transition: 'background .15s',
              }} />
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// BOTTOM NAV — app-level 5 tabs
// ─────────────────────────────────────────────────────────────────────

function ProtoBottomNav() {
  // Static — represents the broader app. In the prototype we live inside
  // "Garage" since we're viewing a specific vehicle.
  const items = [
    { icon: 'garage',      label: 'Garage',   on: true  },
    { icon: 'hammer',      label: 'Auctions', on: false },
    { icon: 'compass',     label: 'Explore',  on: false },
    { icon: 'archive',     label: 'Archive',  on: false },
    { icon: 'certificate', label: 'Vault',    on: false },
  ];
  return (
    <div style={{
      background: P.ink,
      borderTop: `1px solid ${P.graphite}`,
      padding: '10px 0 6px',
      display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
      flex: '0 0 auto',
    }}>
      {items.map(i => (
        <button key={i.label} style={{
          background: 'transparent', border: 'none', padding: 4, cursor: 'pointer',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
        }}>
          <Icon name={i.icon} size={20} color={i.on ? P.paper : P.mute}
            strokeWidth={i.on ? 1.8 : 1.4} />
          <div style={{
            fontFamily: T.mono, fontSize: 7, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: i.on ? P.paper : P.mute,
          }}>{i.label}</div>
          {i.on && <div style={{
            width: 4, height: 4, background: P.gold, marginTop: 1,
          }} />}
        </button>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// SHARED PRIMITIVES — used across screens
// ─────────────────────────────────────────────────────────────────────

// Editorial section opener.
function ScreenIntro({ eyebrow, title, sub, right }) {
  return (
    <div style={{
      padding: '22px 22px 18px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
    }}>
      <div>
        <Eyebrow color={P.gold}>{eyebrow}</Eyebrow>
        <div style={{
          fontFamily: T.display, fontSize: 38, fontWeight: 700,
          lineHeight: 0.92, letterSpacing: '-0.015em',
          color: P.paper, marginTop: 8,
        }}>{title}</div>
        {sub && <div style={{
          fontFamily: T.body, fontSize: 12, color: P.mute, marginTop: 8,
          maxWidth: 260, lineHeight: 1.45,
        }}>{sub}</div>}
      </div>
      {right}
    </div>
  );
}

// Editorial rule label.
function RowRule({ children }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10, padding: '0 22px',
    }}>
      <div style={{
        fontFamily: T.mono, fontSize: 9, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: P.mute, whiteSpace: 'nowrap',
      }}>{children}</div>
      <div style={{ flex: 1, height: 1, background: P.graphite }} />
    </div>
  );
}

// Card on the ink ground — graphite fill, gold rule.
function InkCard({ children, accent = false, padding = 18, style = {}, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: P.graphite,
      borderLeft: accent ? `2px solid ${P.gold}` : '2px solid transparent',
      padding,
      cursor: onClick ? 'pointer' : 'default',
      ...style,
    }}>{children}</div>
  );
}

// Status chip
function StatusChip({ label, on = false, severity }) {
  const map = {
    soon:  { bg: P.signal,   fg: P.paper },
    watch: { bg: P.gold,     fg: P.ink   },
    ok:    { bg: P.graphite, fg: P.paper },
  };
  const c = on ? { bg: P.paper, fg: P.ink } : (map[severity] || map.ok);
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 10px',
      background: c.bg, color: c.fg,
      fontFamily: T.mono, fontSize: 9, fontWeight: 600,
      letterSpacing: '0.18em', textTransform: 'uppercase',
    }}>{label}</span>
  );
}

// Spec strip (key / value pairs in a row)
function SpecStrip({ items, cols, dark = true }) {
  const c = dark ? P.paper : P.ink;
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: `repeat(${cols || items.length}, 1fr)`,
      gap: 14, padding: '14px 22px',
      borderTop: `1px solid ${dark ? P.graphite : P.line}`,
      borderBottom: `1px solid ${dark ? P.graphite : P.line}`,
    }}>
      {items.map((it, i) => (
        <div key={i}>
          <Eyebrow color={dark ? P.mute : P.slate}>{it.label}</Eyebrow>
          <div style={{
            fontFamily: T.display, fontSize: 15, fontWeight: 600,
            marginTop: 4, color: c, letterSpacing: '-0.005em',
          }}>{it.value}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  P, T,
  ProtoHeader, ProtoSectionTabs, ProtoBottomNav,
  ScreenIntro, RowRule, InkCard, StatusChip, SpecStrip,
});