/* AIWine CRM — Wineries list */
function Wineries({ country }) {
  const store = window.UI.useStore();
  const { Badge, CTag, Score, Search, Ic, rel, inCountry, Field, toast } = window.UI;
  const [q, setQ] = React.useState('');
  const [region, setRegion] = React.useState('ALL');
  const [tier, setTier] = React.useState('ALL');
  const [status, setStatus] = React.useState('ALL');
  const [adding, setAdding] = React.useState(false);

  const all = store.t('wineries').filter((w) => inCountry(w, country));
  const regions = ['ALL'].concat([...new Set(all.map((w) => w.region))].sort());
  const rows = all.filter((w) =>
    (q === '' || w.name.toLowerCase().includes(q.toLowerCase()) || w.region.toLowerCase().includes(q.toLowerCase())) &&
    (region === 'ALL' || w.region === region) &&
    (tier === 'ALL' || w.tier === tier) &&
    (status === 'ALL' || w.status === status)
  ).sort((a, b) => a.name.localeCompare(b.name));

  const wineCount = (id) => store.t('wines').filter((v) => v.wineryId === id).length;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="label" style={{ marginBottom: 6 }}>{all.length} wineries · {all.filter((w) => w.status === 'active').length} active</div>
          <h1 className="page-title">Wineries</h1>
        </div>
        <button className="btn btn-primary" onClick={() => setAdding(true)}><Ic name="plus" w={15} /> Add winery</button>
      </div>

      <div className="filters">
        <Search value={q} onChange={setQ} placeholder="Search name or region…" />
        <select className="select" style={{ width: 170 }} value={region} onChange={(e) => setRegion(e.target.value)}>
          {regions.map((r) => <option key={r} value={r}>{r === 'ALL' ? 'All regions' : r}</option>)}
        </select>
        <select className="select" style={{ width: 140 }} value={tier} onChange={(e) => setTier(e.target.value)}>
          <option value="ALL">All tiers</option><option value="prospect">Prospect</option><option value="listed">Listed</option><option value="partner">Partner</option><option value="founding">Founding</option>
        </select>
        <select className="select" style={{ width: 150 }} value={status} onChange={(e) => setStatus(e.target.value)}>
          <option value="ALL">All statuses</option><option value="active">Active</option><option value="onboarding">Onboarding</option><option value="stale">Stale</option><option value="prospect">Prospect</option><option value="churned">Churned (archived)</option>
        </select>
        <button className="btn btn-ghost btn-sm" onClick={() => store.exportTableCSV('wineries')}><Ic name="download" w={14} /> CSV</button>
      </div>

      <div className="tbl-wrap">
        <table className="tbl">
          <thead><tr><th>Winery</th><th></th><th>Tier</th><th>Status</th><th>Completeness</th><th>Engagement</th><th>Wines</th><th>Last upload</th></tr></thead>
          <tbody>
            {rows.map((w) => (
              <tr key={w.id} className="rowlink" onClick={() => window.go('wineries', w.id)}>
                <td className="main-cell">{w.name}<div className="sub">{w.region}</div></td>
                <td><CTag c={w.country} /></td>
                <td><Badge v={w.tier}>{window.UI.TIER_LABEL[w.tier]}</Badge></td>
                <td><Badge v={w.status} dot /></td>
                <td><Score v={w.completeness} /></td>
                <td><Score v={w.engagement} /></td>
                <td className="num">{wineCount(w.id)}</td>
                <td className="num" style={{ color: w.status === 'stale' ? 'var(--claret)' : 'var(--ink-soft)' }}>{rel(w.lastUpload)}</td>
              </tr>
            ))}
            {rows.length === 0 && <tr><td colSpan="8"><window.UI.Empty msg="No wineries match those filters" /></td></tr>}
          </tbody>
        </table>
      </div>

      {adding && <AddWinery onClose={() => setAdding(false)} defaultCountry={country === 'AU' ? 'AU' : 'NZ'} />}
    </div>
  );
}

function AddWinery({ onClose, defaultCountry }) {
  const store = window.UI.useStore();
  const { Field, toast } = window.UI;
  const [f, setF] = React.useState({ name: '', country: defaultCountry, region: '', email: '', phone: '', website: '', tier: 'prospect' });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const save = async () => {
    if (!f.name.trim() || !f.region.trim()) { toast('Name and region are required'); return; }
    let row;
    try {
      row = await store.insert('wineries', { ...f, name: f.name.trim(), slug: f.name.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-'), status: f.tier === 'prospect' ? 'prospect' : 'onboarding', completeness: 0, engagement: 0, enrichment: 'pending', lastUpload: null, uploadCount: 0, owner: store.user ? store.user.name : '' });
    } catch (err) { toast(err.message); return; }
    store.audit('Added winery ' + row.name, 'winery');
    store.logActivity('signup', row.name + ' added to the CRM (' + row.country + ')', { page: 'wineries', id: row.id });
    toast('Winery added');
    onClose();
    window.go('wineries', row.id);
  };
  return (
    <window.UI.Modal title="Add winery" sub="New relationship" onClose={onClose}
      foot={<React.Fragment><button className="btn btn-ghost" onClick={onClose}>Cancel</button><button className="btn btn-primary" onClick={save}>Add winery</button></React.Fragment>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Field label="Winery name"><input className="input" value={f.name} onChange={set('name')} autoFocus /></Field>
        <div className="grid-2">
          <Field label="Market">
            <select className="select" value={f.country} onChange={set('country')}><option value="NZ">New Zealand</option><option value="AU">Australia</option></select>
          </Field>
          <Field label="Region"><input className="input" value={f.region} onChange={set('region')} placeholder={f.country === 'NZ' ? 'e.g. Martinborough' : 'e.g. Barossa Valley'} /></Field>
        </div>
        <div className="grid-2">
          <Field label="Email"><input className="input" value={f.email} onChange={set('email')} /></Field>
          <Field label="Phone"><input className="input" value={f.phone} onChange={set('phone')} /></Field>
        </div>
        <div className="grid-2">
          <Field label="Website"><input className="input" value={f.website} onChange={set('website')} /></Field>
          <Field label="Tier">
            <select className="select" value={f.tier} onChange={set('tier')}><option value="prospect">Prospect</option><option value="listed">Listed</option><option value="partner">Partner</option><option value="founding">Founding</option></select>
          </Field>
        </div>
      </div>
    </window.UI.Modal>
  );
}

window.Wineries = Wineries;