/* global React, Icons, Badge, Btn, Pill, Meter, Score, Stat, Eyebrow */
const { useState } = React;

/* =========================================================================
   GEAR LAB — review listing + scorecard
   ========================================================================= */

const GEAR = [
  { id: 1, name: 'DJI Osmo Pocket 3', cat: 'Camera',  tier: 'Pro', price: 519, score: 9.1, rel: 9.4, heat: 8.0, batt: 8.6, ease: 9.2, irl: 9.5, badge: 'tested', date: 'May 12 ’26' },
  { id: 2, name: 'Sony ZV-1F',         cat: 'Camera',  tier: 'Mid', price: 449, score: 8.2, rel: 8.0, heat: 6.5, batt: 7.0, ease: 8.4, irl: 8.0, badge: null, date: 'Apr 28 ’26' },
  { id: 3, name: 'GoPro Hero 13',       cat: 'Camera',  tier: 'Mid', price: 399, score: 8.8, rel: 9.0, heat: 7.4, batt: 7.2, ease: 8.9, irl: 9.2, badge: 'tested', date: 'May 06 ’26' },
  { id: 4, name: 'Rode Wireless GO 3',  cat: 'Audio',   tier: 'Pro', price: 349, score: 9.0, rel: 9.5, heat: 9.6, batt: 8.4, ease: 9.0, irl: 9.4, badge: 'tested', date: 'Apr 22 ’26' },
  { id: 5, name: 'DJI Mic 2',           cat: 'Audio',   tier: 'Mid', price: 349, score: 8.7, rel: 8.8, heat: 9.2, batt: 8.0, ease: 9.4, irl: 9.0, badge: null, date: 'May 02 ’26' },
  { id: 6, name: 'Peplink MAX BR1 5G',  cat: 'Router',  tier: 'Pro', price: 1499,score: 9.4, rel: 9.6, heat: 7.0, batt: 6.4, ease: 7.0, irl: 9.7, badge: 'tested', date: 'May 09 ’26' },
  { id: 7, name: 'LiveU Solo Pro',      cat: 'Router',  tier: 'Pro', price: 1499,score: 9.2, rel: 9.3, heat: 6.8, batt: 6.0, ease: 8.5, irl: 9.5, badge: 'updated', date: 'May 10 ’26' },
  { id: 8, name: 'GL.iNet Brume 2',     cat: 'Router',  tier: 'Budget',price: 159,score: 7.6, rel: 7.5, heat: 8.0, batt: 7.6, ease: 6.5, irl: 7.4, badge: null, date: 'Apr 14 ’26' },
  { id: 9, name: 'Omnicharge Omni 20+', cat: 'Power',   tier: 'Pro', price: 199, score: 8.8, rel: 9.0, heat: 8.4, batt: 9.6, ease: 9.0, irl: 9.0, badge: 'tested', date: 'Apr 30 ’26' },
  { id: 10, name: 'Anker 737 PowerCore', cat: 'Power',  tier: 'Mid', price: 149, score: 9.1, rel: 9.2, heat: 8.6, batt: 9.5, ease: 9.4, irl: 8.8, badge: 'updated', date: 'May 04 ’26' },
  { id: 11, name: 'Gunrun Mark V backpack', cat: 'Pack', tier: 'Pro', price: 749, score: 9.6, rel: 9.7, heat: 9.0, batt: 9.0, ease: 8.8, irl: 9.8, badge: 'tested', date: 'May 08 ’26' },
  { id: 12, name: 'DJI RS 4',           cat: 'Gimbal',  tier: 'Pro', price: 599, score: 8.9, rel: 9.0, heat: 8.5, batt: 7.6, ease: 8.0, irl: 8.4, badge: null, date: 'Apr 19 ’26' },
];

const CATEGORIES = ['All', 'Camera', 'Audio', 'Router', 'Power', 'Pack', 'Gimbal'];
const TIERS = ['All', 'Budget', 'Mid', 'Pro'];

const GearLabPage = () => {
  const [cat, setCat] = useState('All');
  const [tier, setTier] = useState('All');
  const [sort, setSort] = useState('score');

  const filtered = GEAR
    .filter(g => cat === 'All' || g.cat === cat)
    .filter(g => tier === 'All' || g.tier === tier)
    .sort((a, b) => {
      if (sort === 'score') return b.score - a.score;
      if (sort === 'price') return a.price - b.price;
      if (sort === 'name')  return a.name.localeCompare(b.name);
      return 0;
    });

  const featured = filtered[0];

  return (
    <div className="page-fade">
      {/* HEADER */}
      <section style={{ padding: '40px 0 24px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between" style={{ alignItems: 'flex-end' }}>
            <div style={{ maxWidth: '70%' }}>
              <Eyebrow>Reviews · Lab-tested · 184 items</Eyebrow>
              <h1 className="mt-3" style={{ fontSize: 56 }}>The Gear Lab.</h1>
              <p className="lede mt-3" style={{ maxWidth: '60ch' }}>
                Every piece scored on the same six axes: reliability, heat, battery impact,
                setup difficulty, price-to-value, and IRL suitability. Affiliates disclosed
                on every line. Rankings never paid for.
              </p>
            </div>
            <div className="col gap-2" style={{ alignItems: 'flex-end' }}>
              <div className="row gap-2">
                <Badge kind="tested" dot>Lab tested</Badge>
                <Badge kind="updated">Weekly</Badge>
              </div>
              <LastVerified date="2026-05-12" />
            </div>
          </div>
        </div>
      </section>

      {/* FILTER BAR */}
      <section style={{ position: 'sticky', top: 60, zIndex: 30, background: 'rgba(10,10,12,0.92)', backdropFilter: 'blur(14px)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between" style={{ padding: '14px 0' }}>
            <div className="row gap-3">
              <div>
                <div className="mono fs-12 text-fg4 mb-2" style={{ letterSpacing: '0.1em', textTransform: 'uppercase' }}>Category</div>
                <div className="row gap-1 wrap">
                  {CATEGORIES.map(c => <Pill key={c} on={cat === c} onClick={() => setCat(c)}>{c}</Pill>)}
                </div>
              </div>
              <div style={{ width: 1, height: 40, background: 'var(--line)', marginTop: 12 }} />
              <div>
                <div className="mono fs-12 text-fg4 mb-2" style={{ letterSpacing: '0.1em', textTransform: 'uppercase' }}>Tier</div>
                <div className="row gap-1">
                  {TIERS.map(t => <Pill key={t} on={tier === t} onClick={() => setTier(t)}>{t}</Pill>)}
                </div>
              </div>
            </div>
            <div className="row gap-2">
              <div className="row gap-1" style={{ fontSize: 12.5 }}>
                <span className="text-fg4 mono fs-12">SORT</span>
                <button className={`pill ${sort === 'score' ? 'is-on' : ''}`} onClick={() => setSort('score')}>Score</button>
                <button className={`pill ${sort === 'price' ? 'is-on' : ''}`} onClick={() => setSort('price')}>Price</button>
                <button className={`pill ${sort === 'name' ? 'is-on' : ''}`} onClick={() => setSort('name')}>A-Z</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURED SCORECARD */}
      {featured && (
        <section style={{ padding: '32px 0' }}>
          <div className="container">
            <div className="card" style={{ overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', alignItems: 'stretch' }}>
                <div className="grid-bg" style={{
                  padding: 36, borderRight: '1px solid var(--line)',
                  background: 'radial-gradient(400px 240px at 80% 100%, var(--accent-faint), transparent), var(--bg-1)',
                  position: 'relative',
                }}>
                  <div className="row gap-2 mb-4">
                    <Badge kind="tested" dot>Lab pick</Badge>
                    <Badge kind="updated">Updated {featured.date}</Badge>
                    <span className="mono fs-12 text-fg4">/ {featured.cat.toUpperCase()}</span>
                  </div>
                  <h2 style={{ fontSize: 40 }}>{featured.name}</h2>
                  <p className="text-fg2 mt-3" style={{ maxWidth: '42ch' }}>
                    Best-in-class for what it does. We ran it through 18 lab cycles and 9
                    in-the-wild test logs. Notes below — not marketing copy.
                  </p>
                  <div className="row gap-3 mt-5">
                    {/* "Read full review" lands when MDX reviews ship in Phase 4.
                        For now: scroll to the comparison table on the same page. */}
                    <Btn kind="primary" onClick={() => document.querySelector('.tbl')?.scrollIntoView({ behavior: 'smooth' })}>
                      See full scorecard<Icons.arrow size={14} />
                    </Btn>
                    <Btn kind="ghost" href="mailto:hello@livestreamers.org?subject=Affiliate%20disclosure">View affiliate disclosure</Btn>
                  </div>
                  {/* product placeholder */}
                  <div style={{
                    position: 'absolute', right: 28, top: 28,
                    width: 140, height: 140, borderRadius: 12,
                    background: 'var(--bg-2)', border: '1px solid var(--line-3)',
                    display: 'grid', placeItems: 'center',
                  }}>
                    <span style={{ color: 'var(--accent)' }}><Icons.camera size={48} sw={1.2} /></span>
                  </div>
                </div>

                <div style={{ padding: 32, background: 'var(--bg-1)' }}>
                  <div className="row between mb-4">
                    <div className="stat-label">Lab scorecard</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 32, color: 'var(--accent)', letterSpacing: '-0.02em' }}>
                      {featured.score}<span style={{ fontSize: 16, color: 'var(--fg-4)' }}> / 10</span>
                    </div>
                  </div>
                  <div className="col gap-3">
                    {[
                      ['Reliability', featured.rel],
                      ['Heat under load', featured.heat],
                      ['Battery impact', featured.batt],
                      ['Setup difficulty', featured.ease],
                      ['IRL suitability', featured.irl],
                    ].map(([k, v]) => (
                      <div key={k}>
                        <div className="row between mb-1">
                          <span className="fs-13 text-fg2">{k}</span>
                          <span className="mono fs-12" style={{ color: 'var(--fg)' }}>{v.toFixed(1)}</span>
                        </div>
                        <Meter value={v * 10} tone={v >= 8 ? '' : v >= 6.5 ? 'warn' : 'bad'} />
                      </div>
                    ))}
                  </div>
                  <div className="row between mt-5" style={{ paddingTop: 16, borderTop: '1px solid var(--line)' }}>
                    <div>
                      <div className="stat-label">Street price</div>
                      <div className="mono" style={{ fontSize: 22, marginTop: 4 }}>${featured.price}</div>
                    </div>
                    <div>
                      <div className="stat-label">Test cycles</div>
                      <div className="mono" style={{ fontSize: 22, marginTop: 4 }}>18</div>
                    </div>
                    <div>
                      <div className="stat-label">For</div>
                      <div style={{ fontSize: 14, marginTop: 4 }}>{featured.tier}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* COMPARISON TABLE */}
      <section style={{ padding: '24px 0 80px' }}>
        <div className="container">
          <div className="row between mb-4">
            <Eyebrow>All {filtered.length} results</Eyebrow>
            {/* View toggle (Table / Cards) hidden until Phase 2 implements the
                cards layout — was a dead toggle before. */}
          </div>

          <div className="card" style={{ overflow: 'hidden' }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ width: 36 }}></th>
                  <th>Product</th>
                  <th>Category</th>
                  <th>Reliability</th>
                  <th>IRL</th>
                  <th>Battery</th>
                  <th style={{ textAlign: 'right' }}>Price</th>
                  <th style={{ textAlign: 'right', width: 100 }}>Score</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((g, i) => (
                  <tr key={g.id}>
                    <td><span className="mono fs-12 text-fg4">{(i + 1).toString().padStart(2, '0')}</span></td>
                    <td>
                      <div className="row gap-3">
                        <div style={{
                          width: 36, height: 36, borderRadius: 4,
                          background: 'var(--bg-2)', border: '1px solid var(--line-2)',
                          display: 'grid', placeItems: 'center',
                          color: 'var(--fg-3)',
                        }}>
                          {g.cat === 'Camera' && <Icons.camera size={16} />}
                          {g.cat === 'Audio' && <Icons.mic size={16} />}
                          {g.cat === 'Router' && <Icons.router size={16} />}
                          {g.cat === 'Power' && <Icons.battery size={16} />}
                          {g.cat === 'Pack' && <Icons.backpack size={16} />}
                          {g.cat === 'Gimbal' && <Icons.tool size={16} />}
                        </div>
                        <div>
                          <div style={{ fontWeight: 500 }}>{g.name}</div>
                          <div className="row gap-2 mt-1">
                            {g.badge && <Badge kind={g.badge}>{g.badge === 'tested' ? 'Tested' : 'Updated'}</Badge>}
                            <span className="mono fs-12 text-fg4">{g.date.toUpperCase()}</span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td><span className="text-fg2">{g.cat} · <span className="text-fg4">{g.tier}</span></span></td>
                    <td style={{ minWidth: 110 }}>
                      <div className="row gap-2">
                        <Meter value={g.rel * 10} tone={g.rel >= 8 ? '' : g.rel >= 7 ? 'warn' : 'bad'} />
                        <span className="num text-fg3" style={{ width: 32 }}>{g.rel.toFixed(1)}</span>
                      </div>
                    </td>
                    <td style={{ minWidth: 110 }}>
                      <div className="row gap-2">
                        <Meter value={g.irl * 10} tone={g.irl >= 8 ? '' : g.irl >= 7 ? 'warn' : 'bad'} />
                        <span className="num text-fg3" style={{ width: 32 }}>{g.irl.toFixed(1)}</span>
                      </div>
                    </td>
                    <td><span className="num text-fg2">{g.batt.toFixed(1)}</span></td>
                    <td className="num" style={{ textAlign: 'right' }}>${g.price.toLocaleString()}</td>
                    <td style={{ textAlign: 'right' }}><Score value={g.score} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="row between mt-4 mono fs-12 text-fg4">
            <span>SHOWING 1–{filtered.length} OF {filtered.length}</span>
            <span>AFFILIATE DISCLOSURE → ALL LINKS / NO PAID PLACEMENT</span>
          </div>
        </div>
      </section>
    </div>
  );
};

window.GearLabPage = GearLabPage;