// ─────────────────────────────────────────────────────────────────────
// ADD VEHICLE — shared UI primitives.
//
// These mirror the established selection pattern from the Upload Expense
// allocator (SelectRow · MarqueThumb · section label · guided search field)
// so Add Vehicle reads as the SAME system, not a new one. They are ported
// here verbatim (styling identical) rather than importing the whole receipt
// flow, whose data dependencies aren't needed on this screen.
// ─────────────────────────────────────────────────────────────────────

const { useState: useAvUi, useRef: useAvRef, useEffect: useAvEffect } = React;

// Tracked-mono section label — the signature divider above a list/field.
function AvLabel({ children, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, margin: '2px 0 9px' }}>
      <span style={{ fontFamily: T.mono, fontSize: 8.5, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: P.mute }}>{children}</span>
      {right}
    </div>
  );
}

// Marque monogram thumbnail — a quiet 1–2 letter code so a suggestion list
// stays light. Accepts an explicit code (canonical make) or a vehicle.
function AvMarque({ code, size = 'md' }) {
  const h = size === 'sm' ? 40 : 48;
  const w = size === 'sm' ? 32 : 38;
  return (
    <span style={{
      width: w, height: h, flexShrink: 0, border: `1px solid ${P.slate}`, background: P.ink,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: T.mono, fontSize: 11, fontWeight: 600, color: P.gold, letterSpacing: '0.04em',
    }}>{(code || '').toUpperCase()}</span>
  );
}

// One selection row — radio + thumb + title + sub + optional right slot.
// Gold inset rule marks the selected row (identical to the allocator).
function AvRow({ selected, onClick, thumb, title, sub, right, last, noRadio }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left', cursor: 'pointer', background: 'transparent',
      border: 'none', borderBottom: last ? 'none' : `1px solid ${P.slate}`,
      padding: '12px 13px', display: 'flex', alignItems: 'center', gap: 12,
      boxShadow: selected ? `inset 3px 0 0 ${P.gold}` : 'none',
    }}>
      {!noRadio && (
        <span style={{
          width: 18, height: 18, flexShrink: 0, borderRadius: 999,
          border: `1px solid ${selected ? P.gold : P.slate}`, background: selected ? P.gold : 'transparent',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {selected && <span style={{ width: 7, height: 7, borderRadius: 999, background: P.ink }} />}
        </span>
      )}
      {thumb}
      <span style={{ flex: 1, minWidth: 0 }}>
        <span style={{ display: 'block', fontFamily: T.display, fontSize: 14.5, fontWeight: 600, color: P.paper, lineHeight: 1.15, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</span>
        {sub}
      </span>
      {right}
    </button>
  );
}

// The guided search/entry field. Gold border while active, × to clear.
// Same geometry & behavior as the allocator's search field.
function AvSearchField({ value, onChange, placeholder, mono, inputRef, onFocus }) {
  const active = !!(value && value.trim());
  return (
    <div style={{ position: 'relative' }}>
      <input
        ref={inputRef}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onFocus={onFocus}
        placeholder={placeholder}
        style={{
          width: '100%', height: 46, boxSizing: 'border-box', background: P.ink,
          border: `1px solid ${active ? P.gold : P.slate}`, outline: 'none', color: P.paper,
          fontFamily: mono ? T.mono : T.body, fontSize: 13, padding: '0 38px 0 14px',
        }} />
      {active && (
        <button onClick={() => onChange('')} aria-label="Clear" style={{
          position: 'absolute', right: 6, top: 0, bottom: 0, width: 32, background: 'transparent',
          border: 'none', color: P.mute, cursor: 'pointer', fontFamily: T.mono, fontSize: 15,
        }}>×</button>
      )}
    </div>
  );
}

// Filled-value confirmation row — how a chosen make/model reads once picked.
// Thumb + value + a "Change" affordance that clears the selection.
function AvChosenRow({ thumb, value, sub, onChange }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12, padding: '11px 13px',
      background: '#171614', border: `1px solid ${P.slate}`, boxShadow: `inset 3px 0 0 ${P.gold}`,
    }}>
      {thumb}
      <span style={{ flex: 1, minWidth: 0 }}>
        <span style={{ display: 'block', fontFamily: T.display, fontSize: 15, fontWeight: 600, color: P.paper, lineHeight: 1.15, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{value}</span>
        {sub && <span style={{ display: 'block', fontFamily: T.mono, fontSize: 8, letterSpacing: '0.1em', textTransform: 'uppercase', color: P.mute, marginTop: 3 }}>{sub}</span>}
      </span>
      <button onClick={onChange} style={{
        flexShrink: 0, background: 'transparent', border: 'none', cursor: 'pointer',
        fontFamily: T.mono, fontSize: 9, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: P.gold,
      }}>Change</button>
    </div>
  );
}

Object.assign(window, { AvLabel, AvMarque, AvRow, AvSearchField, AvChosenRow });