// Shared components for ResDri driver app.
// All RTL-aware. Theme via CSS vars.

// ────────────────────────────────────────────────────────────
// Iconography — single inline SVG factory. Solid for active, outline otherwise.
// ────────────────────────────────────────────────────────────
function Icon({ name, size = 22, color = 'currentColor', strokeWidth = 2 }) {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const fillProps = { width: size, height: size, viewBox: '0 0 24 24', fill: color };
  switch (name) {
    case 'phone':
      return <svg {...fillProps}><path d="M19.6 14.2c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.1-1.3-.5-2.5-1.6-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.5-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5C12 8.7 11.3 7.2 11 6.6c-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1-1.1 2.5s1.1 3 1.3 3.2c.2.2 2.2 3.4 5.4 4.8.8.3 1.4.5 1.8.7.8.3 1.5.2 2 .1.6-.1 1.8-.7 2.1-1.5.3-.7.3-1.4.2-1.5 0-.1-.3-.2-.6-.4z"/></svg>;
    case 'message':
      return <svg {...fillProps}><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>;
    case 'chev-left':
      return <svg {...props}><polyline points="15 18 9 12 15 6"/></svg>;
    case 'chev-right':
      return <svg {...props}><polyline points="9 18 15 12 9 6"/></svg>;
    case 'chev-down':
      return <svg {...props}><polyline points="6 9 12 15 18 9"/></svg>;
    case 'chev-up':
      return <svg {...props}><polyline points="18 15 12 9 6 15"/></svg>;
    case 'close':
      return <svg {...props}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;
    case 'check':
      return <svg {...props}><polyline points="20 6 9 17 4 12"/></svg>;
    case 'check-circle':
      return <svg {...fillProps}><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-1.1 14.2L6.7 12l1.4-1.4 2.8 2.8 5.4-5.4L17.7 9.4l-6.8 6.8z"/></svg>;
    case 'list':
      return <svg {...props}><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="4" cy="6" r="1" fill={color}/><circle cx="4" cy="12" r="1" fill={color}/><circle cx="4" cy="18" r="1" fill={color}/></svg>;
    case 'map':
      return <svg {...props}><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/><line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/></svg>;
    case 'nav':
      return <svg {...fillProps}><path d="M3 11l18-7-7 18-2-8z"/></svg>;
    case 'walk':
      return <svg {...fillProps}><circle cx="13" cy="4" r="2"/><path d="M14 6h-3l-2 6 3 1 1 3 2-2-1-3 2-2v-3z"/></svg>;
    case 'shop':
      return <svg {...fillProps}><path d="M21 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2L2 11v2h1v6a2 2 0 002 2h14a2 2 0 002-2v-6h1v-2l-1-2zM5 19v-6h14v6H5z"/></svg>;
    case 'package':
      return <svg {...fillProps}><path d="M21 7L12 2 3 7v10l9 5 9-5V7zM12 4.2L17.8 7.5 12 10.8 6.2 7.5 12 4.2z"/></svg>;
    case 'food':
      return <svg {...fillProps}><path d="M8.1 14L4 18.1 5.9 20 10 15.9 8.1 14zm6.8-2.4c1.9.8 4.4.4 6.1-1.3 2-2 2.4-5 .9-6.5s-4.5-1.2-6.5.9c-1.7 1.7-2.2 4.1-1.3 6.1L3.4 21.5l1.4 1.4L21 6.4 19.6 5 14.9 11.6z"/></svg>;
    case 'cart':
      return <svg {...fillProps}><path d="M7 18a2 2 0 100 4 2 2 0 000-4zM1 2v2h2l3.6 7.6L5.3 14a2 2 0 001.7 3h12v-2H7.4l-.2-.5 1-1.5h6.4a2 2 0 001.8-1.1l3.6-6.5L18.3 5H5.2L4.3 3H1zm16 16a2 2 0 100 4 2 2 0 000-4z"/></svg>;
    case 'bike':
      return <svg {...fillProps}><circle cx="5" cy="17" r="3"/><circle cx="19" cy="17" r="3"/><path d="M12 5l-1 2h3l2 4h-5l-2-3-3 3v3h2v-1l2-1 3 4h3v-2l-2-3h2l-1-2 1-3h-3z"/></svg>;
    case 'wallet':
      return <svg {...fillProps}><path d="M21 7H5V5h14V3H5a2 2 0 00-2 2v14a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2zm-3 8a2 2 0 110-4 2 2 0 010 4z"/></svg>;
    case 'shekel':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M6 4v16h2V6h3a2 2 0 012 2v8h2V8a4 4 0 00-4-4H6zm10 4v8a2 2 0 01-2 2h-3V8H9v12h5a4 4 0 004-4V8h-2z"/></svg>;
    case 'whatsapp':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M17.4 14.4c-.3-.2-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.9-2.1c-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1-1.1 2.5s1.1 2.9 1.3 3.1c.2.2 2.2 3.4 5.4 4.7.8.3 1.4.5 1.8.7.8.3 1.5.2 2 .1.6-.1 1.7-.7 2-1.4.3-.7.3-1.3.2-1.4 0-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>;
    case 'lock':
      return <svg {...fillProps}><path d="M18 8h-1V6a5 5 0 00-10 0v2H6a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V10a2 2 0 00-2-2zM9 6a3 3 0 016 0v2H9V6z"/></svg>;
    case 'pin':
      return <svg {...fillProps}><path d="M12 2a8 8 0 00-8 8c0 5.4 8 12 8 12s8-6.6 8-12a8 8 0 00-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z"/></svg>;
    case 'camera':
      return <svg {...fillProps}><path d="M20 5h-3.2L15 3H9L7.2 5H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V7a2 2 0 00-2-2zM12 18a5 5 0 110-10 5 5 0 010 10z"/></svg>;
    case 'volume':
      return <svg {...fillProps}><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 00-2.5-4v8c1.5-.8 2.5-2.3 2.5-4zM14 3.2v2c2.9.9 5 3.6 5 6.8s-2.1 5.9-5 6.8v2c4-1 7-4.6 7-8.8s-3-7.8-7-8.8z"/></svg>;
    case 'clock':
      return <svg {...fillProps}><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"/></svg>;
    case 'arrow-right':
      return <svg {...props}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>;
    case 'arrow-left':
      return <svg {...props}><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 19"/></svg>;
    case 'gear':
      return <svg {...fillProps}><path d="M19.4 13c0-.3.1-.7.1-1s0-.7-.1-1l2-1.6c.2-.1.2-.4.1-.6l-1.9-3.3c-.1-.2-.4-.3-.6-.2l-2.4 1c-.5-.4-1-.7-1.6-1L14.5 3c0-.3-.2-.4-.4-.4h-4c-.2 0-.4.1-.5.4l-.4 2.4c-.6.2-1.1.5-1.6.9l-2.4-1c-.2 0-.4 0-.6.3l-2 3.3c-.1.2-.1.5.1.6l2 1.6c0 .4-.1.7-.1 1s0 .7.1 1l-2 1.6c-.2.2-.2.4-.1.6l1.9 3.3c.1.2.4.3.6.2l2.4-1c.5.4 1 .7 1.6 1l.4 2.5c.1.2.3.4.5.4h4c.2 0 .4-.1.5-.4l.3-2.5c.6-.2 1.1-.5 1.6-1l2.4 1c.2.1.5 0 .6-.2l2-3.4c.1-.2 0-.4-.1-.6l-2-1.5zM12 15.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z"/></svg>;
    case 'bell':
      return <svg {...fillProps}><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.1-1.6-5.6-4.5-6.3V4a1.5 1.5 0 00-3 0v.7C7.6 5.4 6 7.9 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>;
    default:
      return <svg {...props}><circle cx="12" cy="12" r="9"/></svg>;
  }
}

// ────────────────────────────────────────────────────────────
// Vehicle icon (used in order cards + chips)
// ────────────────────────────────────────────────────────────
function VehicleIcon({ kind = 'car', size = 18, color = 'currentColor' }) {
  if (kind === 'bike' || kind === 'motorbike') {
    return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M19 7h-3.8l-2-3H10v2h2l1.5 2.3L11 11h-2a3 3 0 00-3 3v1H3v2h3v1a3 3 0 003 3 3 3 0 003-3v-1h2v-2H9a1 1 0 010-2h3l3-3 2 3H16a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003-3 3 3 0 00-3-3h2l1.5 2H21V9a2 2 0 00-2-2z"/></svg>;
  }
  if (kind === 'bicycle') {
    return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><circle cx="5" cy="17" r="3" fill="none" stroke={color} strokeWidth="1.8"/><circle cx="19" cy="17" r="3" fill="none" stroke={color} strokeWidth="1.8"/><path d="M9 17l3-7h-2l1-3h3l3 7" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>;
  }
  // car (default)
  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M18.9 7.1A2 2 0 0017 6H7a2 2 0 00-1.9 1.1L3 13v8a1 1 0 001 1h2a1 1 0 001-1v-1h10v1a1 1 0 001 1h2a1 1 0 001-1v-8l-2.1-5.9zM7 17a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm10 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3zM5 12l1.5-4.5h11L19 12H5z"/></svg>;
}

// ────────────────────────────────────────────────────────────
// Vertical icon — colored chip
// ────────────────────────────────────────────────────────────
function VerticalChip({ kind = 'food', size = 36 }) {
  const colors = {
    food:    { bg: '#FEE2E2', fg: '#E11D48' },
    parcel:  { bg: '#DBEAFE', fg: '#2563EB' },
    grocery: { bg: '#DCFCE7', fg: '#16A34A' },
  };
  const c = colors[kind];
  const iconName = { food: 'food', parcel: 'package', grocery: 'cart' }[kind];
  return (
    <div style={{
      width: size, height: size, borderRadius: 12,
      background: c.bg, display: 'grid', placeItems: 'center', flexShrink: 0,
    }}>
      <Icon name={iconName} size={Math.round(size * 0.55)} color={c.fg} />
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Big Number — used for payout / cash / etc. 3 sizes.
// Always LTR, tabular, with ₪ glyph in proper position.
// ────────────────────────────────────────────────────────────
function BigNumber({ value, size = 'md', currency = '₪', accent = false, color, weight = 800 }) {
  const sizes = {
    sm: { num: 24, sym: 16, gap: 3 },
    md: { num: 40, sym: 22, gap: 4 },
    lg: { num: 64, sym: 32, gap: 6 },
    xl: { num: 96, sym: 44, gap: 8 },
  };
  const s = sizes[size] || sizes.md;
  const c = color || (accent ? 'var(--accent)' : 'var(--text)');
  return (
    <span className="num" style={{
      display: 'inline-flex', alignItems: 'baseline', gap: s.gap,
      color: c, fontWeight: weight, lineHeight: 1,
      letterSpacing: size === 'xl' ? '-0.03em' : '-0.02em',
    }}>
      <span style={{ fontSize: s.sym, fontWeight: 600, opacity: 0.85 }}>{currency}</span>
      <span style={{ fontSize: s.num }}>{value}</span>
    </span>
  );
}

// ────────────────────────────────────────────────────────────
// Status pill
// ────────────────────────────────────────────────────────────
function StatusPill({ tone = 'neutral', children }) {
  const tones = {
    neutral: { bg: 'var(--surface-2)', fg: 'var(--text-2)', bd: 'var(--line)' },
    success: { bg: 'color-mix(in oklch, var(--success) 14%, transparent)', fg: 'var(--success)', bd: 'color-mix(in oklch, var(--success) 30%, transparent)' },
    warning: { bg: 'color-mix(in oklch, var(--warning) 14%, transparent)', fg: 'var(--warning)', bd: 'color-mix(in oklch, var(--warning) 30%, transparent)' },
    danger:  { bg: 'color-mix(in oklch, var(--danger) 14%, transparent)',  fg: 'var(--danger)',  bd: 'color-mix(in oklch, var(--danger) 30%, transparent)' },
    primary: { bg: 'color-mix(in oklch, var(--primary) 14%, transparent)', fg: 'var(--primary)', bd: 'color-mix(in oklch, var(--primary) 30%, transparent)' },
    accent:  { bg: 'color-mix(in oklch, var(--accent) 18%, transparent)',  fg: 'var(--accent-700)', bd: 'color-mix(in oklch, var(--accent) 40%, transparent)' },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '3px 8px', borderRadius: 999,
      fontSize: 11, fontWeight: 700,
      background: t.bg, color: t.fg, border: `1px solid ${t.bd}`,
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

// ────────────────────────────────────────────────────────────
// Order card — new scannable, action-oriented variant.
// Layout (RTL):
//   [VerticalIcon] [Business · pickup→dropoff with distance · time/efficiency]  [payout BIG + bonus]
//   [قبول inline button]
// Optional `featured` adds a teal highlight + "أفضل خيار" ribbon.
// ────────────────────────────────────────────────────────────
function OrderCard({ order, onClick, onAccept, compatible = true, featured = false }) {
  const verticalLabel = { food: 'طعام', parcel: 'طرد', grocery: 'بقالة' }[order.kind];
  const totalPay = order.payout + (order.bonus || 0);
  const perKm = (totalPay / Math.max(0.5, order.distance)).toFixed(0);

  return (
    <div className="tap" onClick={onClick} style={{
      position: 'relative',
      background: 'var(--surface)',
      borderRadius: 'var(--card-r)',
      padding: 'var(--pad-card)',
      border: featured
        ? '2px solid var(--primary)'
        : '1px solid var(--line)',
      display: 'flex', flexDirection: 'column', gap: 10,
      boxShadow: featured
        ? '0 8px 24px color-mix(in oklch, var(--primary) 20%, transparent)'
        : '0 1px 0 rgba(0,0,0,0.02)',
    }}>
      {/* Featured ribbon */}
      {featured && (
        <div style={{
          position: 'absolute', top: -10, insetInlineStart: 12,
          background: 'var(--primary)', color: '#fff',
          fontSize: 10, fontWeight: 800, letterSpacing: '0.04em',
          padding: '3px 8px', borderRadius: 6,
          textTransform: 'uppercase',
          boxShadow: '0 4px 10px color-mix(in oklch, var(--primary) 30%, transparent)',
        }}>أفضل خيار</div>
      )}

      {/* HEADER ROW: business + payout (no third column) */}
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
        <VerticalChip kind={order.kind} size={36} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontSize: 16, fontWeight: 800, color: 'var(--text)', lineHeight: 1.15,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>{order.business}</div>
          <div style={{
            fontSize: 12, color: 'var(--text-2)', marginTop: 3,
            display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap',
          }}>
            <span>{verticalLabel}</span>
            <span style={{ color: 'var(--text-3)' }}>·</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
              <Icon name="clock" size={12} />
              ~<span className="num">{order.eta}</span> د
            </span>
            <span style={{ color: 'var(--text-3)' }}>·</span>
            <span><span className="num">{order.distance.toFixed(1)}</span> كم</span>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4, flexShrink: 0 }}>
          <BigNumber value={totalPay} size="sm" weight={900} accent={featured} />
          <span className="num" style={{
            fontSize: 10, fontWeight: 700, color: 'var(--text-3)',
          }}>₪{perKm}/كم</span>
        </div>
      </div>

      {/* ROUTE — two stacked rows: pickup (from your location), dropoff (from restaurant) */}
      <div style={{
        background: 'var(--surface-2)',
        borderRadius: 12, padding: '10px 12px',
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        {/* Pickup row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 10, height: 10, borderRadius: 3, background: 'var(--primary)', flexShrink: 0 }} />
          <div style={{
            flex: 1, minWidth: 0, fontSize: 13, color: 'var(--text)', fontWeight: 600,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>{order.pickup}</div>
          <span style={{
            fontSize: 11, fontWeight: 800, color: 'var(--text-2)',
            background: 'var(--surface)',
            border: '1px solid var(--line)',
            padding: '3px 8px', borderRadius: 999,
            display: 'inline-flex', alignItems: 'center', gap: 4,
            whiteSpace: 'nowrap', flexShrink: 0,
          }}>
            <span className="num">{order.toPickup?.toFixed(1) ?? '—'}</span>
            <span style={{ color: 'var(--text-3)' }}>كم من موقعك</span>
          </span>
        </div>
        {/* Connector */}
        <div style={{
          marginInlineStart: 4, height: 8, width: 2,
          background: 'var(--line-strong)', borderRadius: 1,
        }} />
        {/* Dropoff row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--danger)', flexShrink: 0 }} />
          <div style={{
            flex: 1, minWidth: 0, fontSize: 13, color: 'var(--text)', fontWeight: 600,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>{order.dropoff}</div>
          <span style={{
            fontSize: 11, fontWeight: 800, color: 'var(--text-2)',
            background: 'var(--surface)',
            border: '1px solid var(--line)',
            padding: '3px 8px', borderRadius: 999,
            display: 'inline-flex', alignItems: 'center', gap: 4,
            whiteSpace: 'nowrap', flexShrink: 0,
          }}>
            <span className="num">{order.toDropoff?.toFixed(1) ?? '—'}</span>
            <span style={{ color: 'var(--text-3)' }}>كم من المتجر</span>
          </span>
        </div>
      </div>

      {/* BOTTOM ROW: bonus + accept button */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
          {order.bonus > 0 && (
            <span style={{
              fontSize: 11, fontWeight: 800, color: 'var(--accent-700)',
              background: 'color-mix(in oklch, var(--accent) 20%, transparent)',
              padding: '3px 8px', borderRadius: 999,
              display: 'inline-flex', alignItems: 'center', gap: 3,
              whiteSpace: 'nowrap',
            }}>
              <span className="num">+₪{order.bonus}</span>
              <span>مكافأة</span>
            </span>
          )}
          {!compatible && <StatusPill tone="warning">غير متوافق</StatusPill>}
          {order.notes && (
            <span style={{
              fontSize: 11, color: 'var(--text-2)',
              display: 'inline-flex', alignItems: 'center', gap: 4,
            }}>
              <Icon name="message" size={12} color="var(--text-3)" />
              ملاحظة
            </span>
          )}
        </div>
        <button className="tap" onClick={(e) => { e.stopPropagation(); onAccept ? onAccept() : onClick && onClick(); }} style={{
          height: 40, padding: '0 18px', borderRadius: 12,
          background: featured ? 'var(--primary)' : 'var(--surface-2)',
          color: featured ? '#fff' : 'var(--text)',
          border: featured ? 'none' : '1.5px solid var(--line-strong)',
          fontFamily: 'inherit', fontWeight: 800, fontSize: 14,
          display: 'flex', alignItems: 'center', gap: 6,
          boxShadow: featured ? '0 4px 12px color-mix(in oklch, var(--primary) 30%, transparent)' : 'none',
          flexShrink: 0,
        }}>
          <Icon name="check" size={16} strokeWidth={3} color={featured ? '#fff' : 'var(--text)'} />
          <span>قبول</span>
        </button>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Action sheet — bottom anchored, used for active-order next-step.
// ────────────────────────────────────────────────────────────
function ActionSheet({ children, padding = 16 }) {
  return (
    <div style={{
      position: 'absolute', insetInline: 0, bottom: 0,
      background: 'var(--surface)',
      borderTopLeftRadius: 24, borderTopRightRadius: 24,
      boxShadow: '0 -8px 30px rgba(0,0,0,0.10), 0 -1px 0 var(--line)',
      padding,
      paddingBottom: padding + 12,
      zIndex: 20,
    }}>
      <div style={{
        width: 40, height: 4, borderRadius: 2,
        background: 'var(--line-strong)', margin: '0 auto 12px',
      }} />
      {children}
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Big primary action button — glove-friendly, 56dp+
// ────────────────────────────────────────────────────────────
function PrimaryButton({ children, onClick, tone = 'primary', size = 'lg', disabled = false, leadingIcon, fullWidth = true }) {
  const tones = {
    primary: { bg: 'var(--primary)', fg: '#fff', sh: '0 6px 20px color-mix(in oklch, var(--primary) 28%, transparent)' },
    success: { bg: 'var(--success)', fg: '#fff', sh: '0 6px 20px rgba(22,163,74,0.30)' },
    danger:  { bg: 'var(--danger)',  fg: '#fff', sh: '0 6px 20px rgba(220,38,38,0.30)' },
    accent:  { bg: 'var(--accent)',  fg: '#1A1300', sh: '0 6px 20px rgba(245,158,11,0.30)' },
    ghost:   { bg: 'var(--surface-2)', fg: 'var(--text)', sh: 'none', bd: '1px solid var(--line)' },
    outline: { bg: 'transparent', fg: 'var(--text)', sh: 'none', bd: '1.5px solid var(--line-strong)' },
  };
  const t = tones[tone] || tones.primary;
  const h = size === 'lg' ? 60 : size === 'md' ? 52 : 44;
  return (
    <button className="tap" disabled={disabled} onClick={onClick} style={{
      height: h, borderRadius: 16, border: t.bd || 'none',
      background: disabled ? 'var(--line)' : t.bg, color: disabled ? 'var(--text-3)' : t.fg,
      fontFamily: 'inherit', fontSize: 17, fontWeight: 800,
      width: fullWidth ? '100%' : 'auto',
      padding: '0 22px',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      boxShadow: disabled ? 'none' : t.sh,
      cursor: disabled ? 'not-allowed' : 'pointer',
    }}>
      {leadingIcon && <Icon name={leadingIcon} size={22} />}
      <span>{children}</span>
    </button>
  );
}

// ────────────────────────────────────────────────────────────
// "Go online" lever toggle — custom, big
// ────────────────────────────────────────────────────────────
function OnlineLever({ online, onToggle }) {
  return (
    <button className="tap" onClick={onToggle} style={{
      width: '100%', height: 64, borderRadius: 20,
      background: online ? 'var(--success)' : 'var(--surface)',
      color: online ? '#fff' : 'var(--text)',
      border: online ? 'none' : '1.5px solid var(--line-strong)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 6px 0 22px',
      fontFamily: 'inherit', fontWeight: 800, fontSize: 17,
      boxShadow: online ? '0 8px 22px rgba(22,163,74,0.30)' : '0 1px 0 rgba(0,0,0,0.03)',
      cursor: 'pointer',
    }}>
      <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{
          position: 'relative', display: 'inline-block',
          width: 10, height: 10, borderRadius: 999,
          background: online ? '#fff' : 'var(--text-3)',
          color: online ? '#fff' : 'transparent',
        }} className={online ? 'pulse-ring' : ''} />
        {online ? 'متاح للطلبات' : 'الانتقال للحالة المتاحة'}
      </span>
      <span style={{
        width: 52, height: 52, borderRadius: 14,
        background: online ? 'rgba(255,255,255,0.18)' : 'var(--primary)',
        color: '#fff',
        display: 'grid', placeItems: 'center',
      }}>
        <Icon name={online ? 'check' : 'arrow-left'} size={24} />
      </span>
    </button>
  );
}

// ────────────────────────────────────────────────────────────
// Slide-to-confirm — deliberate destructive/important action
// ────────────────────────────────────────────────────────────
function SlideToConfirm({ label = 'اسحب للتأكيد', onConfirm, color = 'var(--success)', icon = 'check' }) {
  const trackRef = React.useRef(null);
  const [x, setX] = React.useState(0);
  const [done, setDone] = React.useState(false);
  const draggingRef = React.useRef(false);
  const startXRef = React.useRef(0);
  const startPosRef = React.useRef(0);

  const onStart = (e) => {
    if (done) return;
    draggingRef.current = true;
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    startXRef.current = clientX;
    startPosRef.current = x;
  };
  const onMove = (e) => {
    if (!draggingRef.current || done) return;
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const track = trackRef.current;
    if (!track) return;
    const trackW = track.clientWidth;
    const maxX = trackW - 64; // thumb width + 8 padding
    // RTL: thumb starts on the right (x=maxX initially via CSS), user drags it LEFT.
    // We track displacement positively.
    let delta = startXRef.current - clientX; // positive when moving left
    let nx = startPosRef.current + delta;
    nx = Math.max(0, Math.min(maxX, nx));
    setX(nx);
    if (nx >= maxX - 4) {
      setDone(true);
      draggingRef.current = false;
      setTimeout(() => onConfirm && onConfirm(), 200);
    }
  };
  const onEnd = () => {
    if (!draggingRef.current) return;
    draggingRef.current = false;
    if (!done) setX(0);
  };

  React.useEffect(() => {
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onEnd);
    window.addEventListener('touchmove', onMove, { passive: false });
    window.addEventListener('touchend', onEnd);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onEnd);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('touchend', onEnd);
    };
  });

  // In RTL, "right" is the leading side. The thumb starts on the right and travels left.
  return (
    <div ref={trackRef} className="slide-track" style={{
      background: done ? color : `color-mix(in oklch, ${color} 14%, transparent)`,
      borderColor: `color-mix(in oklch, ${color} 28%, transparent)`,
      transition: done ? 'background 0.2s' : 'none',
    }}>
      {/* Filled trail */}
      <div style={{
        position: 'absolute', top: 0, bottom: 0, right: 0,
        width: 60 + x, background: `color-mix(in oklch, ${color} 22%, transparent)`,
        transition: draggingRef.current ? 'none' : 'width 0.18s ease',
      }} />
      {/* Label */}
      <div style={{
        position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
        fontWeight: 800, color: done ? '#fff' : `color-mix(in oklch, ${color} 80%, var(--text))`,
        fontSize: 17, letterSpacing: '-0.01em',
        opacity: done ? 1 : (1 - x / 200),
      }}>{done ? 'تم' : label}</div>
      {/* Thumb — starts on the right (RTL leading), drags left */}
      <div
        className="slide-thumb"
        onMouseDown={onStart}
        onTouchStart={onStart}
        style={{
          right: 4 + x,
          background: color,
          boxShadow: `0 6px 20px color-mix(in oklch, ${color} 35%, transparent)`,
          transition: draggingRef.current ? 'none' : 'right 0.18s ease',
        }}
      >
        <Icon name={done ? 'check' : icon} size={26} color="#fff" />
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Top "Today's earnings" summary bar (sits above map)
// ────────────────────────────────────────────────────────────
function EarningsHeader({ today = 142, orders = 4, rating = 4.8 }) {
  return (
    <div style={{
      background: 'var(--surface)',
      borderRadius: 20,
      border: '1px solid var(--line)',
      padding: '12px 14px',
      display: 'flex', alignItems: 'stretch', justifyContent: 'space-between',
      gap: 12,
      boxShadow: '0 6px 18px rgba(15,23,42,0.08)',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0, whiteSpace: 'nowrap' }}>
        <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-2)' }}>أرباح اليوم</span>
        <BigNumber value={today} size="sm" weight={800} />
      </div>
      <div style={{ width: 1, background: 'var(--line)' }} />
      <div style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'nowrap' }}>
        <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-2)' }}>طلبات</span>
        <span className="num" style={{ fontSize: 22, fontWeight: 800, color: 'var(--text)' }}>{orders}</span>
      </div>
      <div style={{ width: 1, background: 'var(--line)' }} />
      <div style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'nowrap' }}>
        <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-2)' }}>التقييم</span>
        <span style={{ fontSize: 22, fontWeight: 800, color: 'var(--text)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <span className="num">{rating}</span>
          <span style={{ color: 'var(--accent)', fontSize: 18 }}>★</span>
        </span>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// "Connecting" radar — used on incoming alert. Calm, dispatch-radio vibe.
// ────────────────────────────────────────────────────────────
function RadarPulse({ size = 180, color = 'var(--primary)' }) {
  const wave = (delay) => (
    <span key={delay} style={{
      position: 'absolute', inset: 0, borderRadius: '50%',
      border: `2px solid ${color}`,
      animation: `radar-soft 2.4s ease-out ${delay}s infinite`,
    }} />
  );
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      {[0, 0.6, 1.2].map(wave)}
    </div>
  );
}

Object.assign(window, {
  Icon, VehicleIcon, VerticalChip,
  BigNumber, StatusPill,
  OrderCard, ActionSheet, PrimaryButton,
  OnlineLever, SlideToConfirm,
  EarningsHeader, RadarPulse,
});
