// GS Car — Marketplace, Listing Detail, Upload+Pay screens

const ScreenMarketplace = ({ onOpenListing, onOpenUpload }) => {
  const [filter, setFilter] = React.useState('全部');
  const filters = ['全部', '豪華車', 'EV', '改裝車', 'JDM', '德系', 'AMG / M', '香港'];
  const featured = DATA.listings.filter(l => l.featured);
  const others = DATA.listings.filter(l => !l.featured);

  return (
    <div className="screen screen-enter">
      <StatusBar />
      <div className="nav-bar">
        <div>
          <div className="meta" style={{ fontSize: 10 }}>香港 · 觀塘</div>
          <div className="nav-title">市場</div>
        </div>
        <div className="nav-icons" style={{ gap: 8 }}>
          <button style={{
            display: 'flex', alignItems: 'center', gap: 6,
            background: 'var(--bg-2)', border: '0.5px solid var(--line)',
            borderRadius: 10, padding: '8px 12px',
            fontSize: 12, color: 'var(--ink-2)', fontWeight: 500,
          }}>
            <Icons.Search size={13} />
            <span>搜尋</span>
          </button>
          <button onClick={onOpenUpload} style={{
            display: 'flex', alignItems: 'center', gap: 6,
            background: 'var(--accent)', borderRadius: 10, padding: '8px 12px',
            fontSize: 12, color: '#fff', fontWeight: 600,
          }}>
            <Icons.Plus size={13} />
            <span>上架</span>
          </button>
        </div>
      </div>

      <div style={{ padding: '0 20px 8px', display: 'flex', gap: 8 }} className="hscroll">
        {filters.map(f => (
          <button key={f} className={`chip ${filter === f ? 'active' : ''}`} onClick={() => setFilter(f)}>{f}</button>
        ))}
      </div>

      <div className="scroll" style={{ padding: '8px 20px 100px' }}>
        {/* Featured strip */}
        <div style={{ marginTop: 8, marginBottom: 20 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-0)', letterSpacing: '0.04em', textTransform: 'uppercase', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ color: 'var(--accent)' }}>●</span><span>精選車盤</span>
            </div>
            <span className="meta">本周</span>
          </div>
          <div className="hscroll" style={{ display: 'flex', gap: 12, margin: '0 -20px', padding: '0 20px' }}>
            {featured.map(l => (
              <div key={l.id} onClick={() => onOpenListing(l)} style={{
                minWidth: 280, background: 'var(--bg-1)', borderRadius: 18,
                border: '1px solid var(--line)', overflow: 'hidden', cursor: 'pointer',
              }}>
                <CarHero listing={l} height={140} />
                <div style={{ padding: '12px 14px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em' }}>{l.make}</div>
                    <Price value={l.price} size={14} accent />
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 2 }}>{l.model} · {l.year}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* List */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {others.map(l => (
            <ListingRow key={l.id} listing={l} onClick={() => onOpenListing(l)} />
          ))}
        </div>
      </div>
    </div>
  );
};

const ListingRow = ({ listing, onClick }) => (
  <div onClick={onClick} style={{
    display: 'flex', gap: 12,
    background: 'var(--bg-1)', borderRadius: 16,
    border: '1px solid var(--line-soft)',
    padding: 10, cursor: 'pointer',
  }}>
    <div style={{ width: 110, height: 110, borderRadius: 12, overflow: 'hidden', flexShrink: 0 }}>
      <CarHero listing={listing} height={110} />
    </div>
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '2px 0', minWidth: 0 }}>
      <div>
        <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>
          {listing.year} {listing.make} {listing.model}
        </div>
        <div style={{ fontSize: 11, color: 'var(--ink-2)', marginTop: 3, display: 'flex', gap: 6 }}>
          <span>{(listing.mileage / 1000).toFixed(1)}k km</span>
          <span style={{ color: 'var(--ink-4)' }}>·</span>
          <span>{listing.district}</span>
          <span style={{ color: 'var(--ink-4)' }}>·</span>
          <span>{listing.photos} 相</span>
        </div>
      </div>
      {/* Seller mini-row */}
      {listing.seller && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '5px 0',
          borderTop: '0.5px dashed var(--line-soft)',
          borderBottom: '0.5px dashed var(--line-soft)',
          margin: '4px 0',
        }}>
          <Avatar name={listing.seller.avatar} size={18} />
          <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--ink-1)', display: 'flex', alignItems: 'center' }}>
            {listing.seller.name}
            {listing.seller.verified && <VerifiedDot size={9} color="var(--accent)" />}
          </span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 2, marginLeft: 'auto' }}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="var(--gold)" stroke="none">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
            </svg>
            <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--ink-1)' }}>{listing.seller.rating}</span>
            <span style={{ fontSize: 9, color: 'var(--ink-3)' }}>· {listing.seller.deals || 24} 單</span>
          </span>
        </div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Price value={listing.price} size={16} accent />
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 10, color: 'var(--ink-3)' }}>
          <Icons.Heart size={12} />
          <span>{listing.views}</span>
        </div>
      </div>
    </div>
  </div>
);

const ScreenListingDetail = ({ listing, onBack, onContact, onSign }) => {
  const [tab, setTab] = React.useState('detail');
  return (
    <div className="screen screen-enter">
      <StatusBar dark />
      <div style={{
        position: 'absolute', top: 50, left: 0, right: 0,
        display: 'flex', justifyContent: 'space-between', padding: '8px 20px', zIndex: 10,
      }}>
        <button className="icon-btn" onClick={onBack} style={{ background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(20px)' }}>
          <Icons.Back size={20} />
        </button>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="icon-btn" style={{ background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(20px)' }}><Icons.Bookmark size={16} /></button>
          <button className="icon-btn" style={{ background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(20px)' }}><Icons.Share size={16} /></button>
        </div>
      </div>

      <div className="scroll">
        <div style={{ position: 'relative' }}>
          <CarHero listing={listing} height={340} />
          <div style={{
            position: 'absolute', bottom: 16, left: 16,
            display: 'flex', gap: 6,
          }}>
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} style={{
                width: i === 0 ? 18 : 6, height: 6, borderRadius: 3,
                background: i === 0 ? 'var(--ink-0)' : 'rgba(255,255,255,0.4)',
                transition: 'all 0.2s',
              }} />
            ))}
          </div>
          <div style={{
            position: 'absolute', bottom: 16, right: 16,
            background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(10px)',
            padding: '4px 10px', borderRadius: 12,
            display: 'flex', alignItems: 'center', gap: 4,
            fontSize: 11, color: '#fff',
          }}>
            <Icons.Camera size={11} /> 1 / {listing.photos}
          </div>
        </div>

        <div style={{ padding: '20px 20px 0' }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
            <span className="badge badge-verified">已驗證</span>
            <span className="badge badge-active">出售中</span>
            {listing.featured && <span className="badge badge-gold">精選</span>}
          </div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
            {listing.year} {listing.make}
          </div>
          <div style={{ fontSize: 16, color: 'var(--ink-1)', marginTop: 2 }}>{listing.model}</div>
          <div style={{ marginTop: 14, paddingBottom: 16, borderBottom: '0.5px solid var(--line)' }}>
            <Price value={listing.price} size={28} accent />
            <span style={{ fontSize: 12, color: 'var(--ink-3)', marginLeft: 8 }}>含驗車證明</span>
          </div>

          {/* Stats */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginTop: 16 }}>
            {[
              { label: '里數', value: `${(listing.mileage / 1000).toFixed(1)}k`, unit: 'km' },
              { label: '年份', value: listing.year, unit: '' },
              { label: '地區', value: listing.district, unit: '' },
              { label: '車況', value: '極佳', unit: '' },
            ].map(s => (
              <div key={s.label} style={{ background: 'var(--bg-2)', borderRadius: 12, padding: '12px 8px', textAlign: 'center' }}>
                <div style={{ fontSize: 9, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{s.label}</div>
                <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4, letterSpacing: '-0.01em' }}>{s.value}<span style={{ fontSize: 10, color: 'var(--ink-3)', fontWeight: 500 }}> {s.unit}</span></div>
              </div>
            ))}
          </div>

          {/* Specs */}
          <div style={{ marginTop: 20 }}>
            <div className="meta" style={{ marginBottom: 10 }}>規格</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {listing.specs.map((s, i) => (
                <div key={i} style={{
                  fontSize: 12, padding: '10px 12px',
                  background: 'var(--bg-2)', borderRadius: 8,
                  color: 'var(--ink-1)',
                  borderLeft: '2px solid var(--accent)',
                }}>{s}</div>
              ))}
            </div>
          </div>

          {/* Seller */}
          <div style={{
            marginTop: 20, padding: 14,
            background: 'var(--bg-1)', borderRadius: 14,
            border: '1px solid var(--line)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <Avatar name={listing.seller.avatar} size={44} />
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', fontSize: 14, fontWeight: 600 }}>
                {listing.seller.name}
                {listing.seller.verified && <VerifiedDot size={13} color="var(--accent)" />}
              </div>
              <div style={{ fontSize: 11, color: 'var(--ink-2)', marginTop: 2, display: 'flex', alignItems: 'center', gap: 6 }}>
                <Stars rating={listing.seller.rating} size={11} />
                <span>· 私人賣家 · 上載 {listing.posted}</span>
              </div>
            </div>
            <button className="icon-btn"><Icons.Phone size={14} /></button>
          </div>

          {/* Description */}
          <div style={{ marginTop: 20 }}>
            <div className="meta" style={{ marginBottom: 8 }}>賣家描述</div>
            <p style={{ fontSize: 13, color: 'var(--ink-1)', lineHeight: 1.6 }}>
              一手車主、原廠保養紀錄齊全。M Performance 排氣系統 + Carbon Fiber 內裝套件已升級。
              非吸煙車、無事故、即可過戶。可安排 pre-purchase inspection，歡迎誠意買家面睇實車。
            </p>
          </div>

          {/* Contract section */}
          <div style={{
            marginTop: 24, padding: 16,
            background: 'linear-gradient(135deg, rgba(225,10,23,0.08), rgba(225,10,23,0.02))',
            borderRadius: 14, border: '1px solid rgba(225,10,23,0.2)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
              <Icons.Doc size={18} />
              <div style={{ fontSize: 13, fontWeight: 700 }}>傾掂價即場簽約</div>
            </div>
            <div style={{ fontSize: 11, color: 'var(--ink-2)', lineHeight: 1.5 }}>
              In-app PencilKit 簽名 · 即時生成 PDF 合約 · 符合《電子交易條例》
            </div>
            <button onClick={onSign} className="btn-secondary" style={{ marginTop: 12, padding: '10px 14px', fontSize: 13 }}>
              預覽合約模板 →
            </button>
          </div>
        </div>
        <div style={{ height: 100 }} />
      </div>

      {/* Bottom action bar */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '14px 20px 32px',
        background: 'rgba(8,8,10,0.95)', backdropFilter: 'blur(20px)',
        borderTop: '0.5px solid var(--line)',
        display: 'flex', gap: 10,
      }}>
        <button className="btn-secondary" style={{ flex: 0, padding: '14px 18px' }}>
          <Icons.Heart size={18} />
        </button>
        <button onClick={onContact} className="btn-primary" style={{ flex: 1 }}>
          <Icons.Chat size={16} /> 聯絡賣家
        </button>
      </div>
    </div>
  );
};

window.ScreenMarketplace = ScreenMarketplace;
window.ScreenListingDetail = ScreenListingDetail;