// Sold archive — header stats + table + gallery

const SoldPage = ({ showToast }) => {
  useLucide();
  const [view, setView] = React.useState('gallery');
  const [yearFilter, setYearFilter] = React.useState('all');

  const filtered = SITE_DATA.sold.filter(s => {
    if (yearFilter === 'all') return true;
    return (s.soldDate || '').startsWith(yearFilter);
  });

  const totals = SITE_DATA.careerTotals || {};

  return (
    <div className="page">
      <div className="page-head container">
        <span className="eyebrow">Closed transactions</span>
        <h1 style={{ marginTop: 14 }}>Sold properties</h1>
        <p className="lead">Two decades of negotiated outcomes across Metro Vancouver — houses, townhomes, and condos, from first homes to multi-million-dollar properties. A selection of recent sales is shown below.</p>
      </div>

      {/* Stats strip */}
      <section className="section-tight container">
        <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 'clamp(48px, 10vw, 140px)', padding: '32px 0', borderBottom: '1px solid var(--line)', textAlign: 'center' }}>
          <div>
            <span className="serif" style={{ fontSize: 'clamp(36px, 4vw, 56px)', display: 'block', fontWeight: 300 }}>{totals.homesSold}</span>
            <span className="eyebrow" style={{ display: 'block', marginTop: 6 }}>Homes sold</span>
          </div>
          <div>
            <span className="serif" style={{ fontSize: 'clamp(36px, 4vw, 56px)', display: 'block', fontWeight: 300 }}>{totals.combinedValue}</span>
            <span className="eyebrow" style={{ display: 'block', marginTop: 6 }}>Combined sale value</span>
          </div>
        </div>
      </section>

      <section className="section-tight container">
        <div className="filter-bar">
          <span className="filter-results">Showing {filtered.length} recent sales</span>
          <div className="view-toggle">
            <button className={view === 'gallery' ? 'active' : ''} onClick={() => setView('gallery')}>
              <Icon name="grid-3x3" size={14} /> Gallery
            </button>
            <button className={view === 'table' ? 'active' : ''} onClick={() => setView('table')}>
              <Icon name="list" size={14} /> Table
            </button>
          </div>
        </div>

        {view === 'gallery' && (
          <div className="sold-grid">
            {filtered.map(s => (
              <SoldTile key={s.id} item={s} onClick={() => showToast(s.daysOnMarket != null ? `${s.address} — sold ${formatFullPrice(s.soldPrice)} in ${s.daysOnMarket} days` : `${s.address} — sold ${formatFullPrice(s.soldPrice)}`)} />
            ))}
          </div>
        )}

        {view === 'table' && (
          <div className="sold-table">
            <div className="row head">
              <span>Property</span>
              <span>Neighbourhood</span>
              <span>Sold</span>
              <span>Specs</span>
              <span>DOM</span>
              <span>Date</span>
            </div>
            {filtered.map(s => {
              const overAsk = s.soldPrice - s.askPrice;
              const overAskPct = ((overAsk / s.askPrice) * 100).toFixed(1);
              return (
                <div className="row" key={s.id}>
                  <div className="addr">{s.address}<div style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 400 }}>{s.city}</div></div>
                  <span>{s.neighbourhood}</span>
                  <span>
                    <span className="price">{formatFullPrice(s.soldPrice)}</span>
                    {overAsk > 0 && <div className="over-ask">+{overAskPct}% over ask</div>}
                    {overAsk < 0 && <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{overAskPct}% under ask</div>}
                  </span>
                  <span style={{ fontSize: 13, color: 'var(--ink-2)' }}>{s.beds}bd · {s.baths}ba · {s.sqft.toLocaleString()} sf</span>
                  <span>{s.daysOnMarket != null ? s.daysOnMarket + 'd' : '—'}</span>
                  <span style={{ fontSize: 13, color: 'var(--ink-2)' }}>{s.soldDate ? new Date(s.soldDate).toLocaleDateString('en-CA', { month: 'short', year: 'numeric' }) : '—'}</span>
                </div>
              );
            })}
          </div>
        )}
      </section>
    </div>
  );
};
window.SoldPage = SoldPage;