// GS Car — Shared components

const StatusBar = ({ time = '9:41', dark = false }) => (
  <div className="status-bar" style={{ color: dark ? '#fff' : 'var(--ink-0)' }}>
    <div>{time}</div>
    <div className="status-bar-right">
      <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor">
        <rect x="0" y="6" width="3" height="5" rx="0.5" />
        <rect x="4.5" y="4" width="3" height="7" rx="0.5" />
        <rect x="9" y="2" width="3" height="9" rx="0.5" />
        <rect x="13.5" y="0" width="3" height="11" rx="0.5" />
      </svg>
      <svg width="15" height="11" viewBox="0 0 15 11" fill="none" stroke="currentColor" strokeWidth="1.2">
        <path d="M1 4.5C2.8 3 5 2 7.5 2s4.7 1 6.5 2.5M3 6.8C4.3 5.8 5.8 5.2 7.5 5.2s3.2.6 4.5 1.6M5 9c.7-.5 1.5-.8 2.5-.8s1.8.3 2.5.8" />
      </svg>
      <svg width="25" height="12" viewBox="0 0 25 12" fill="none">
        <rect x="0.5" y="0.5" width="21" height="11" rx="3" stroke="currentColor" opacity="0.5" />
        <rect x="2" y="2" width="17" height="8" rx="1.5" fill="currentColor" />
        <rect x="22.5" y="4" width="1.5" height="4" rx="0.5" fill="currentColor" opacity="0.5" />
      </svg>
    </div>
  </div>
);

const TabBar = ({ active, onChange, order }) => {
  const tabs = {
    feed: { label: '發現', icon: 'Sparkle', Icon: Icons.Sparkle },
    market: { label: '市場', icon: 'Car', Icon: Icons.Car },
    map: { label: '地圖', icon: 'Map', Icon: Icons.Map },
    inbox: { label: 'Inbox', icon: 'Chat', Icon: Icons.Chat },
    profile: { label: '我的', icon: 'User', Icon: Icons.User },
  };
  const tabOrder = order || ['feed', 'market', 'map', 'inbox', 'profile'];
  return (
    <div className="tab-bar">
      {tabOrder.map(key => {
        const t = tabs[key];
        const isActive = active === key;
        return (
          <button key={key} className={`tab-item ${isActive ? 'active' : ''}`} onClick={() => onChange(key)}>
            <t.Icon size={22} fill={isActive} />
            <span>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
};

const Avatar = ({ name, size = 36, gradient }) => {
  const colors = [
    'linear-gradient(135deg, #e10a17, #7a0a10)',
    'linear-gradient(135deg, #4a9eff, #1a3a8a)',
    'linear-gradient(135deg, #c9a96a, #6a4a1a)',
    'linear-gradient(135deg, #2dbb6e, #0a6a3a)',
    'linear-gradient(135deg, #a83232, #4a0a1a)',
    'linear-gradient(135deg, #6a4ac2, #2a1a6a)',
  ];
  const idx = (name || 'X').charCodeAt(0) % colors.length;
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: gradient || colors[idx],
      display: 'grid', placeItems: 'center',
      fontSize: size * 0.36, fontWeight: 700, color: '#fff',
      letterSpacing: '0.02em', flexShrink: 0,
    }}>{name}</div>
  );
};

const CarHero = ({ listing, height = 260 }) => (
  <div style={{
    height,
    background: `radial-gradient(ellipse at 50% 60%, ${listing.color} 0%, #0a0a0e 75%)`,
    position: 'relative',
    display: 'grid', placeItems: 'center',
    overflow: 'hidden',
  }}>
    {/* Reflection floor */}
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, height: '40%',
      background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.6))',
    }} />
    {/* Car silhouette */}
    <svg width="80%" height="50%" viewBox="0 0 400 140" style={{ position: 'relative', zIndex: 2 }}>
      <defs>
        <linearGradient id={`g-${listing.id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={listing.color} stopOpacity="0.9" />
          <stop offset="1" stopColor="#000" stopOpacity="0.95" />
        </linearGradient>
      </defs>
      {/* Body */}
      <path d="M30,95 Q50,55 110,45 L150,30 Q200,22 250,30 L290,45 Q350,55 370,95 L380,110 L370,120 L30,120 L20,110 Z"
        fill={`url(#g-${listing.id})`} stroke="rgba(255,255,255,0.08)" strokeWidth="0.5" />
      {/* Windows */}
      <path d="M120,55 L155,38 Q200,32 245,38 L280,55 L260,75 L140,75 Z" fill="rgba(255,255,255,0.05)" />
      {/* Highlight */}
      <path d="M50,90 L350,90" stroke={listing.accent} strokeWidth="1.5" opacity="0.6" />
      {/* Wheels */}
      <circle cx="100" cy="115" r="20" fill="#08080a" stroke="rgba(255,255,255,0.15)" strokeWidth="1" />
      <circle cx="100" cy="115" r="11" fill="#1a1a22" />
      <circle cx="300" cy="115" r="20" fill="#08080a" stroke="rgba(255,255,255,0.15)" strokeWidth="1" />
      <circle cx="300" cy="115" r="11" fill="#1a1a22" />
      {/* Headlight */}
      <ellipse cx="365" cy="85" rx="8" ry="3" fill={listing.accent} opacity="0.9" />
      <ellipse cx="365" cy="85" rx="14" ry="5" fill={listing.accent} opacity="0.3" />
    </svg>
    {/* Lens flare */}
    <div style={{
      position: 'absolute', top: '30%', right: '15%',
      width: 80, height: 80,
      background: `radial-gradient(circle, ${listing.accent}, transparent 70%)`,
      filter: 'blur(20px)',
    }} />
    <div className="ph-tag" style={{
      position: 'absolute', top: 12, left: 12,
      fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.15em',
      color: 'var(--ink-3)', textTransform: 'uppercase',
      background: 'rgba(0,0,0,0.5)', padding: '4px 8px', borderRadius: 4,
    }}>{listing.tag} · placeholder</div>
  </div>
);

const Price = ({ value, size = 18, accent = false }) => (
  <span style={{
    fontSize: size, fontWeight: 700,
    letterSpacing: '-0.02em',
    color: accent ? 'var(--accent-bright)' : 'var(--ink-0)',
    fontVariantNumeric: 'tabular-nums',
  }}>
    HK${value.toLocaleString()}
  </span>
);

const VerifiedDot = ({ size = 14, color = 'var(--blue)' }) => (
  <span style={{ display: 'inline-flex', color, marginLeft: 4 }}>
    <Icons.Verified size={size} />
  </span>
);

const Stars = ({ rating, size = 12 }) => (
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, color: 'var(--gold)' }}>
    <Icons.Star size={size} />
    <span style={{ fontSize: size, fontWeight: 600, color: 'var(--ink-0)' }}>{rating.toFixed(1)}</span>
  </span>
);

window.StatusBar = StatusBar;
window.TabBar = TabBar;
window.Avatar = Avatar;
window.CarHero = CarHero;
window.Price = Price;
window.VerifiedDot = VerifiedDot;
window.Stars = Stars;