/* AIWine CRM — Contacts (winery people) + Consumers (app members) */

function Contacts({ country }) {
  const store = window.UI.useStore();
  const { Badge, CTag, Search, Ic, rel } = window.UI;
  const [q, setQ] = React.useState('');
  const [sub, setSub] = React.useState('ALL');
  const [editId, setEditId] = React.useState(null);

  const rows = store.t('contacts').map((c) => ({ ...c, winery: store.get('wineries', c.wineryId) }))
    .filter((c) => c.winery && window.UI.inCountry(c.winery, country))
    .filter((c) => q === '' || c.name.toLowerCase().includes(q.toLowerCase()) || c.email.toLowerCase().includes(q.toLowerCase()) || c.winery.name.toLowerCase().includes(q.toLowerCase()))
    .filter((c) => sub === 'ALL' || (sub === 'YES' ? c.subscribed : !c.subscribed))
    .sort((a, b) => a.name.localeCompare(b.name));

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="label" style={{ marginBottom: 6 }}>{rows.length} people across {new Set(rows.map((r) => r.wineryId)).size} wineries</div>
          <h1 className="page-title">Contacts</h1>
        </div>
        <button className="btn btn-ghost" onClick={() => store.exportTableCSV('contacts')}><Ic name="download" w={15} /> Export CSV</button>
      </div>
      <div className="filters">
        <Search value={q} onChange={setQ} placeholder="Search name, email or winery…" />
        <window.UI.Seg options={[{ value: 'ALL', label: 'Everyone' }, { value: 'YES', label: 'Subscribed' }, { value: 'NO', label: 'Unsubscribed' }]} value={sub} onChange={setSub} />
      </div>
      <div className="tbl-wrap">
        <table className="tbl">
          <thead><tr><th>Name</th><th>Winery</th><th></th><th>Role</th><th>Email</th><th>Opt-in</th><th></th></tr></thead>
          <tbody>
            {rows.map((c) => (
              <tr key={c.id} className="rowlink" onClick={() => setEditId(c.id)}>
                <td className="main-cell" style={{ display: 'flex', alignItems: 'center', gap: 10 }}><window.UI.Avatar name={c.name} brass={!c.primary} />{c.name}{c.primary && <span className="badge badge-brass">Primary</span>}</td>
                <td onClick={(e) => e.stopPropagation()}><button className="btn-quiet" style={{ padding: 0, fontWeight: 600, color: 'var(--claret)', textAlign: 'left' }} onClick={() => window.go('wineries', c.wineryId)}>{c.winery.name}</button><div className="sub">{c.winery.region}</div></td>
                <td><CTag c={c.winery.country} /></td>
                <td>{c.role}</td>
                <td className="mono" style={{ fontSize: 11.5 }}>{c.email}</td>
                <td>{c.subscribed ? <Badge v="complete">Yes</Badge> : <Badge v="pending">No</Badge>}</td>
                <td onClick={(e) => e.stopPropagation()}><button className="btn-quiet" title="Edit contact" onClick={() => setEditId(c.id)}><Ic name="edit" w={14} c="var(--muted)" /></button></td>
              </tr>
            ))}
            {rows.length === 0 && <tr><td colSpan="7"><window.UI.Empty msg="No contacts match" /></td></tr>}
          </tbody>
        </table>
      </div>

      {editId && <window.EditContact id={editId} onClose={() => setEditId(null)} />}
    </div>
  );
}

function Consumers({ country, focusId }) {
  const store = window.UI.useStore();
  const { Badge, CTag, Search, Ic, rel, money, fmtDate, KV } = window.UI;
  const [q, setQ] = React.useState('');
  const [plan, setPlan] = React.useState('ALL');
  const [open, setOpen] = React.useState(focusId || null);

  React.useEffect(() => { if (focusId) setOpen(focusId); }, [focusId]);

  const rows = store.t('consumers').filter((c) => window.UI.inCountry(c, country))
    .filter((c) => q === '' || c.name.toLowerCase().includes(q.toLowerCase()) || c.email.toLowerCase().includes(q.toLowerCase()))
    .filter((c) => plan === 'ALL' || c.plan === plan)
    .sort((a, b) => b.lastActive.localeCompare(a.lastActive));
  const sel = open ? store.get('consumers', open) : null;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="label" style={{ marginBottom: 6 }}>{rows.length} members · {rows.filter((c) => c.plan === 'premium').length} premium</div>
          <h1 className="page-title">Consumers</h1>
        </div>
        <button className="btn btn-ghost" onClick={() => store.exportTableCSV('consumers')}><Ic name="download" w={15} /> Export CSV</button>
      </div>
      <div className="filters">
        <Search value={q} onChange={setQ} placeholder="Search name or email…" />
        <window.UI.Seg options={[{ value: 'ALL', label: 'All plans' }, { value: 'premium', label: 'Premium' }, { value: 'taster', label: 'Taster' }]} value={plan} onChange={setPlan} />
      </div>
      <div className="tbl-wrap">
        <table className="tbl">
          <thead><tr><th>Member</th><th></th><th>Plan</th><th>Scans</th><th>Tastings</th><th>Orders</th><th>LTV</th><th>Last active</th></tr></thead>
          <tbody>
            {rows.map((c) => (
              <tr key={c.id} className="rowlink" onClick={() => setOpen(c.id)}>
                <td className="main-cell" style={{ display: 'flex', alignItems: 'center', gap: 10 }}><window.UI.Avatar name={c.name} brass={c.plan !== 'premium'} />{c.name}<div className="sub mono" style={{ fontSize: 10.5 }}>{c.email}</div></td>
                <td><CTag c={c.country} /></td>
                <td><Badge v={c.plan}>{c.plan === 'premium' ? 'Premium' : 'Taster'}</Badge></td>
                <td className="num">{c.scans}</td>
                <td className="num">{c.tastings}</td>
                <td className="num">{c.orders}</td>
                <td className="num">{money(c.ltv, c.country)}</td>
                <td className="num">{rel(c.lastActive)}</td>
              </tr>
            ))}
            {rows.length === 0 && <tr><td colSpan="8"><window.UI.Empty msg="No consumers match" /></td></tr>}
          </tbody>
        </table>
      </div>

      {sel && (
        <window.UI.Drawer title={sel.name} sub={'Consumer · ' + window.CRM_CONFIG.BRANDS[sel.country].domain} onClose={() => { setOpen(null); if (focusId) window.go('consumers'); }}
          foot={<React.Fragment>
            {sel.plan === 'taster'
              ? <button className="btn btn-primary" onClick={() => { store.update('consumers', sel.id, { plan: 'premium', renewsAt: new Date(Date.now() + 365 * 86400000).toISOString() }); store.audit('Upgraded ' + sel.name + ' to premium', 'consumer'); window.UI.toast('Upgraded to Premium'); }}>Upgrade to Premium</button>
              : <button className="btn btn-danger" onClick={() => { store.update('consumers', sel.id, { plan: 'taster', renewsAt: null }); store.audit('Downgraded ' + sel.name + ' to taster', 'consumer'); window.UI.toast('Moved to Taster'); }}>Cancel Premium</button>}
          </React.Fragment>}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{ display: 'flex', gap: 10 }}>
              <Badge v={sel.plan}>{sel.plan === 'premium' ? 'Premium member' : 'Taster (free)'}</Badge>
              {sel.subscribed ? <Badge v="complete">Email opt-in</Badge> : <Badge v="pending">Unsubscribed</Badge>}
            </div>
            <div className="grid-3" style={{ gap: 10 }}>
              <MiniStat label="Scans" v={sel.scans} />
              <MiniStat label="Tastings" v={sel.tastings} />
              <MiniStat label="Orders" v={sel.orders} />
            </div>
            <KV rows={[
              ['Email', sel.email], ['Market', window.CRM_CONFIG.BRANDS[sel.country].domain],
              ['Lifetime value', money(sel.ltv, sel.country)],
              ['Joined', fmtDate(sel.joined)], ['Last active', rel(sel.lastActive)],
              ['Renews', sel.renewsAt ? fmtDate(sel.renewsAt) : '—'],
            ]} />
            <div className="card card-pad" style={{ background: 'var(--card-2)' }}>
              <div className="label" style={{ marginBottom: 8 }}>App engagement</div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
                {sel.scans > 60 ? 'Heavy scanner — a power user building a serious taste profile.' : sel.scans > 20 ? 'Regular user — scans most weeks and logs tastings.' : 'Early days — a welcome-series nudge could lift engagement.'}
                {sel.plan === 'taster' && sel.scans > 40 ? ' Strong upgrade candidate.' : ''}
              </div>
            </div>
          </div>
        </window.UI.Drawer>
      )}
    </div>
  );
}

function MiniStat({ label, v }) {
  return (
    <div className="card card-pad" style={{ textAlign: 'center', padding: '12px 8px' }}>
      <div className="serif" style={{ fontSize: 26, fontWeight: 500 }}>{v}</div>
      <div className="label" style={{ fontSize: 9 }}>{label}</div>
    </div>
  );
}

Object.assign(window, { Contacts, Consumers, MiniStat });