// assets/screen_stores.jsx
function ScreenStores({ go }) {
  const [search, setSearch] = React.useState('');
  const [platform, setPlatform] = React.useState('all');
  const [plan, setPlan] = React.useState('all');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [paymentFilter, setPaymentFilter] = React.useState('all');
  const [sortBy, setSortBy] = React.useState('revenue');
  const [sortDir, setSortDir] = React.useState('desc');
  const [page, setPage] = React.useState(1);
  const [limit, setLimit] = React.useState(20);

  const filtered = STORES.filter(s => {
    if (search) {
      const q = search.toLowerCase();
      if (!s.name.toLowerCase().includes(q) && !s.store_domain.toLowerCase().includes(q) && !s.merchant_name.toLowerCase().includes(q) && !s.merchant_id.toLowerCase().includes(q)) return false;
    }
    if (platform !== 'all' && s.platform !== platform) return false;
    if (plan !== 'all') {
      if (plan === 'none' && s.plan) return false;
      else if (plan !== 'none' && s.plan !== plan) return false;
    }
    if (statusFilter === 'active' && s.subscription_status !== 'active') return false;
    if (statusFilter === 'inactive' && s.subscription_status === 'active') return false;
    if (paymentFilter === 'paid' && !s.is_paid) return false;
    if (paymentFilter === 'unpaid' && s.is_paid) return false;
    return true;
  });
  const dir = sortDir === 'asc' ? 1 : -1;
  const sorted = [...filtered].sort((a, b) => {
    if (sortBy === 'revenue') return (a.revenue_cents - b.revenue_cents) * dir;
    if (sortBy === 'name') return a.name.localeCompare(b.name) * dir;
    if (sortBy === 'platform') return a.platform.localeCompare(b.platform) * dir;
    if (sortBy === 'created_at') return (a.created_at - b.created_at) * dir;
    return 0;
  });
  const totalPages = Math.max(1, Math.ceil(sorted.length / limit));
  const pageItems = sorted.slice((page - 1) * limit, page * limit);

  const SH = ({ id, label, alignRight }) => (
    <th className={alignRight ? 'num' : ''} onClick={() => { if (sortBy === id) setSortDir(d => d === 'asc' ? 'desc' : 'asc'); else { setSortBy(id); setSortDir('desc'); } }} style={{ cursor: 'pointer' }}>
      {label} {sortBy === id && <Icon name={sortDir === 'asc' ? 'arrowUp' : 'arrowDown'} size={10} className="text-accent" style={{ verticalAlign: 'middle' }} />}
    </th>
  );

  const platBadge = (s) => (
    <Badge kind="neutral">
      <span style={{ width: 6, height: 6, background: s.platform_color, borderRadius: '50%' }} />
      {s.platform}
    </Badge>
  );
  const planBadge = (s) => {
    if (!s.plan) return <Badge kind="neutral">No subscription</Badge>;
    const map = { max: 'accent', pro: 'info', basic: 'neutral', free: 'neutral' };
    return <Badge kind={map[s.plan] || 'neutral'}>{s.plan[0].toUpperCase() + s.plan.slice(1)}</Badge>;
  };

  return (
    <div className="page">
      <div className="page-head">
        <h1>Stores</h1>
        <span className="page-sub">{filtered.length.toLocaleString()} of {STORES.length.toLocaleString()}</span>
        <div className="page-actions">
          <button className="btn"><Icon name="download" size={12} /> Export</button>
        </div>
      </div>

      {/* Summary cards */}
      <div className="grid cols-4" style={{ marginBottom: 14 }}>
        <KpiCard label="Total stores" value={KPI.active_stores} icon="package" />
        <KpiCard label="Merchants" value={KPI.merchants_distinct} icon="user" />
        <KpiCard label="Active subscriptions" value={KPI.subs_active} icon="check2" />
        <KpiCard label="MRR" value={fmtMoneyCompact(KPI.mrr_cents)} icon="cost" />
      </div>

      {/* Filter bar */}
      <div className="card" style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', gap: 8, padding: 10, flexWrap: 'wrap', alignItems: 'center' }}>
          <div style={{ position: 'relative', flex: 1, minWidth: 240, maxWidth: 360 }}>
            <Icon name="search" size={12} style={{ position: 'absolute', left: 8, top: 7, color: 'var(--text-tertiary)' }} />
            <input className="input" style={{ paddingLeft: 26 }} placeholder="name / domain / merchant id" value={search} onChange={e => { setSearch(e.target.value); setPage(1); }} />
          </div>
          <select className="select" style={{ width: 'auto' }} value={platform} onChange={e => { setPlatform(e.target.value); setPage(1); }}>
            <option value="all">All platforms</option>
            {PLATFORMS.map(p => <option key={p.name} value={p.name}>{p.name}</option>)}
          </select>
          <select className="select" style={{ width: 'auto' }} value={plan} onChange={e => { setPlan(e.target.value); setPage(1); }}>
            <option value="all">All plans</option>
            <option value="free">free</option>
            <option value="basic">basic</option>
            <option value="pro">pro</option>
            <option value="max">max</option>
            <option value="none">no sub</option>
          </select>
          <select className="select" style={{ width: 'auto' }} value={statusFilter} onChange={e => { setStatusFilter(e.target.value); setPage(1); }}>
            <option value="all">All status</option>
            <option value="active">active</option>
            <option value="inactive">inactive</option>
          </select>
          <select className="select" style={{ width: 'auto' }} value={paymentFilter} onChange={e => { setPaymentFilter(e.target.value); setPage(1); }}>
            <option value="all">Paid + unpaid</option>
            <option value="paid">paid</option>
            <option value="unpaid">unpaid</option>
          </select>
          <span style={{ flex: 1 }} />
          <span className="dim fs-11">Rows:</span>
          <div className="segmented">
            {[10, 20, 50, 100].map(n => <button key={n} className={limit === n ? 'active' : ''} onClick={() => { setLimit(n); setPage(1); }}>{n}</button>)}
          </div>
        </div>
      </div>

      {/* Table */}
      <div className="card">
        <div className="table-wrap" style={{ maxHeight: 'calc(100vh - 380px)' }}>
          <table className="tbl">
            <thead>
              <tr>
                <SH id="name" label="Store" />
                <th>Owner</th>
                <th>Merchant</th>
                <SH id="platform" label="Platform" />
                <th className="num">Orders</th>
                <SH id="revenue" label="Revenue" alignRight />
                <SH id="created_at" label="Created" />
                <th>Last order</th>
                <th>Plan</th>
                <th className="num">Projects</th>
                <th style={{ width: 28 }}></th>
              </tr>
            </thead>
            <tbody>
              {pageItems.map(s => (
                <tr key={s.id} className="clickable" onClick={() => go('/stores/' + s.id)}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ width: 24, height: 24, borderRadius: 4, background: 'linear-gradient(135deg, ' + s.platform_color + ', var(--bg-active))', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600, color: 'var(--text-primary)', flexShrink: 0 }}>
                        {s.name.split(' ').slice(0, 2).map(w => w[0]).join('').toUpperCase()}
                      </div>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ color: 'var(--text-primary)', fontWeight: 500 }}>{s.name}</div>
                        <div className="dim mono fs-11">{s.store_domain}</div>
                      </div>
                    </div>
                  </td>
                  <td className="dim2"><Mono>{s.owner_username}</Mono><br/><span className="dim mono fs-11">{s.owner_email}</span></td>
                  <td className="dim2">{s.merchant_name}</td>
                  <td>{platBadge(s)}</td>
                  <td className="num">
                    <Mono>{s.total_orders.toLocaleString()}</Mono>
                    {s.total_orders > 0 && <div className="dim mono fs-11">{(s.fulfill_rate * 100).toFixed(0)}% fulfill</div>}
                  </td>
                  <td className="num">
                    <Mono style={{ color: 'var(--success)', fontWeight: 600 }}>{fmtMoneyCompact(s.revenue_cents)}</Mono>
                    {s.total_orders > 0 && <div className="dim mono fs-11">AOV {fmtMoney(s.aov_cents)}</div>}
                  </td>
                  <td className="dim"><Mono>{fmtDate(s.created_at)}</Mono></td>
                  <td className="dim">
                    {s.last_order_at ? <><Mono>{fmtDate(s.last_order_at)}</Mono><div className="dim mono fs-11">{formatRel(s.last_order_at)}</div></> : '—'}
                  </td>
                  <td>{planBadge(s)}</td>
                  <td className="num dim"><Mono>{s.project_count}</Mono></td>
                  <td><Icon name="chevron" size={12} className="dim" /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="pagination">
          <span className="dim fs-12">{(page - 1) * limit + 1}–{Math.min(page * limit, sorted.length)} of {sorted.length.toLocaleString()}</span>
          <span className="spacer" />
          <button className="btn sm" disabled={page === 1} onClick={() => setPage(p => Math.max(1, p - 1))}><Icon name="chevron" size={12} style={{ transform: 'rotate(180deg)' }} /> Prev</button>
          <span className="dim fs-12"><Mono>{page} / {totalPages}</Mono></span>
          <button className="btn sm" disabled={page === totalPages} onClick={() => setPage(p => Math.min(totalPages, p + 1))}>Next <Icon name="chevron" size={12} /></button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenStores });