/* global React */
function MarketplacePage({ go, onBuy }) {
  const [filter, setFilter] = React.useState('all');
  const [sort, setSort] = React.useState('popular');
  const [search, setSearch] = React.useState('');
  const [, setTick] = React.useState(0);
  const [createOpen, setCreateOpen] = React.useState(false);
  const isAdmin = window.__effAdminMode;

  // Re-render when admin changes EAs from Firestore
  React.useEffect(() => {
    const handler = () => setTick(t => t + 1);
    window.addEventListener('eff_eas_changed', handler);
    window.addEventListener('eff_admin_changed', handler);
    return () => {
      window.removeEventListener('eff_eas_changed', handler);
      window.removeEventListener('eff_admin_changed', handler);
    };
  }, []);

  const allEAs = window.EAReports?.effectiveList?.() || window.EA_LIST || [];

  let filtered = allEAs.filter(ea => {
    if (search && !ea.name.toLowerCase().includes(search.toLowerCase()) && !ea.strategy.toLowerCase().includes(search.toLowerCase())) return false;
    if (filter === 'all') return true;
    if (filter === 'lowrisk') return ea.risk < 5;
    if (filter === 'highprofit') return ea.pf > 2;
    if (filter === 'scalp') return ea.strategy.toLowerCase().includes('scalp');
    return true;
  });
  if (sort === 'popular') filtered.sort((a, b) => b.users - a.users);
  if (sort === 'price-asc') filtered.sort((a, b) => a.price - b.price);
  if (sort === 'price-desc') filtered.sort((a, b) => b.price - a.price);
  if (sort === 'winrate') filtered.sort((a, b) => b.winRate - a.winRate);
  if (sort === 'pf') filtered.sort((a, b) => b.pf - a.pf);

  return (
    <div>
      <section style={{ padding: '48px 0 32px' }}>
        <div className="container">
          <div className="flex-between" style={{ flexWrap: 'wrap', gap: 16 }}>
            <div>
              <EditableText id="marketplace.eyebrow" tag="span" className="eyebrow">MARKETPLACE </EditableText>
              <h1 className="mt-4" style={{ fontSize: 56, lineHeight: 1 }}><EditableText id="marketplace.title.l1" tag="span">Expert </EditableText><span className="gradient-text"><EditableText id="marketplace.title.l2" tag="span">Advisors</EditableText></span></h1>
              <EditableText id="marketplace.desc" tag="p" className="mt-4 text-muted" style={{ maxWidth: 600, fontSize: 16 }}>
                Each system is backtested on 5+ years for every tick based on real ticks data. Strategies, parameters, and drawdown profiles are fully disclosed — 
              </EditableText>
            </div>
            {isAdmin && (
              <button className="btn btn-magenta btn-sheen btn-lg" onClick={() => setCreateOpen(true)}>
                + Add New EA (admin)
              </button>
            )}
          </div>
        </div>
      </section>

      {/* Filters */}
      <section style={{ padding: '0 0 24px' }}>
        <div className="container">
          <div className="panel panel-padded">
            <div className="flex-between" style={{ flexWrap: 'wrap', gap: 16 }}>
              <div className="flex gap-3" style={{ flex: 1, minWidth: 280 }}>
                <input className="input" placeholder="// Search by name, strategy, pair..." value={search} onChange={e => setSearch(e.target.value)} style={{ flex: 1 }}/>
              </div>
              <div className="flex gap-2">
                {[
                  { id: 'all', label: 'All' },
                  { id: 'lowrisk', label: 'Low Risk' },
                  { id: 'highprofit', label: 'High PF' },
                  { id: 'scalp', label: 'Scalping' },
                ].map(f => (
                  <button key={f.id} className={`btn btn-sm ${filter === f.id ? 'btn-primary' : 'btn-ghost'}`} onClick={() => setFilter(f.id)}>{f.label}</button>
                ))}
              </div>
              <select className="input" value={sort} onChange={e => setSort(e.target.value)} style={{ width: 200 }}>
                <option value="popular">Sort: Popular</option>
                <option value="price-asc">Price: Low → High</option>
                <option value="price-desc">Price: High → Low</option>
                <option value="winrate">Win Rate</option>
                <option value="pf">Profit Factor</option>
              </select>
            </div>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section style={{ padding: '0 0 80px' }}>
        <div className="container">
          <div className="grid grid-3">
            {filtered.map(ea => <EACard key={ea.id} ea={ea} go={go} onBuy={onBuy}/>)}
            {isAdmin && (
              <div className="panel" style={{ padding: 20, border: '1px dashed rgba(255,45,170,0.4)', background: 'rgba(255,45,170,0.04)', display: 'grid', placeItems: 'center', cursor: 'pointer', minHeight: 320 }} onClick={() => setCreateOpen(true)}>
                <div className="text-center">
                  <div style={{ fontSize: 48, color: 'var(--magenta)', lineHeight: 1 }}>+</div>
                  <div className="font-mono mt-3" style={{ color: 'var(--magenta)', letterSpacing: '0.15em', fontSize: 11 }}>ADD NEW EA</div>
                  <div className="text-xs text-muted mt-2">Admin only</div>
                </div>
              </div>
            )}
          </div>
          {filtered.length === 0 && (
            <div className="panel panel-padded-lg text-center">
              <div className="text-muted font-mono">// NO MATCH FOUND</div>
            </div>
          )}
        </div>
      </section>

      {createOpen && isAdmin && (
        <EAEditor ea={null} isNew={true} onClose={() => setCreateOpen(false)}/>
      )}
    </div>
  );
}

window.MarketplacePage = MarketplacePage;