// Administration page — user management via Edge Functions, data fixes via Supabase
const { useState: useStateAD, useEffect: useEffectAD, useMemo: useMemoAD } = React;

function SplitInput({ value, unit, onValueChange, onUnitChange, gross }) {
  const v = value === '' || value == null ? '' : String(value);
  const grossNum = (() => {
    if (gross === '' || gross == null) return null;
    const n = Number(String(gross).replace(/[$,\s%]/g, ''));
    return isNaN(n) ? null : n;
  })();
  const numeric = (() => {
    if (v === '') return null;
    const n = Number(v.replace(/[$,\s%]/g, ''));
    return isNaN(n) ? null : n;
  })();
  let preview = '';
  if (numeric != null && unit === '%' && grossNum) {
    preview = '≈ $' + ((numeric / 100) * grossNum).toLocaleString('en-US', { maximumFractionDigits: 0 });
  } else if (numeric != null && unit === '%' && !grossNum) {
    preview = 'Enter gross commission first';
  }
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'stretch', border: '1px solid var(--rule)', borderRadius: 6, overflow: 'hidden', background: 'var(--surface, #fff)' }}>
        <input type="text" inputMode="decimal" value={v} onChange={e => onValueChange(e.target.value)} placeholder="0"
          style={{ flex: 1, minWidth: 0, border: 'none', outline: 'none', padding: '8px 10px', fontFamily: 'var(--font-mono)', fontSize: 13, background: 'transparent', color: 'inherit' }} />
        <div style={{ display: 'flex', borderLeft: '1px solid var(--rule)' }}>
          {['$', '%'].map(u => (
            <button key={u} type="button" onClick={() => onUnitChange(u)}
              style={{ width: 32, border: 'none', borderLeft: u === '%' ? '1px solid var(--rule)' : 'none', background: unit === u ? 'var(--ink-1, #1a1a1a)' : 'transparent', color: unit === u ? '#fff' : 'var(--ink-3)', fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}
            >{u}</button>
          ))}
        </div>
      </div>
      {preview && <div style={{ marginTop: 4, fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{preview}</div>}
    </div>
  );
}

function AdminView({ clients = [], authedUser, onApplyEdit }) {
  const [users, setUsers] = useStateAD([]);
  const [usersLoading, setUsersLoading] = useStateAD(true);
  const [adminEmail, setAdminEmail] = useStateAD('');
  const [monthlyDay, setMonthlyDay] = useStateAD(1);
  const [notifyOnSubmit, setNotifyOnSubmit] = useStateAD(true);
  const [showAdd, setShowAdd] = useStateAD(false);
  const [draft, setDraft] = useStateAD({ name: '', email: '', license_number: '', passcode: '' });
  const [flash, setFlash] = useStateAD(null);
  const [fixTarget, setFixTarget] = useStateAD(null);
  const [fixDraft, setFixDraft] = useStateAD({});

  const db = window._supabase;

  // ── Load users from Supabase ──────────────────────────────────────────────
  useEffectAD(() => {
    loadUsers();
    loadSettings();
  }, []);

  async function loadUsers() {
    setUsersLoading(true);
    const { data } = await db.from('users_public').select('*').order('name');
    if (data) setUsers(data);
    setUsersLoading(false);
  }

  async function loadSettings() {
    const { data } = await db.from('settings').select('*').eq('id', 1).maybeSingle();
    if (data) {
      setAdminEmail(data.admin_email || '');
      setMonthlyDay(data.monthly_stats_day || 1);
      setNotifyOnSubmit(data.notify_on_submit !== false);
    }
  }

  async function saveSettings() {
    await db.from('settings').update({
      admin_email: adminEmail,
      monthly_stats_day: monthlyDay,
      notify_on_submit: notifyOnSubmit,
    }).eq('id', 1);
    toast('Settings saved');
  }

  // ── Call admin-users Edge Function ────────────────────────────────────────
  async function adminCall(body) {
    const { data: { session } } = await db.auth.getSession();
    const resp = await fetch(window.SUPABASE_URL + '/functions/v1/admin-users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'apikey': window.SUPABASE_ANON_KEY,
        'authorization': 'Bearer ' + session.access_token,
      },
      body: JSON.stringify(body),
    });
    const data = await resp.json();
    if (!resp.ok) throw new Error(data.error || 'Request failed');
    return data;
  }

  function toast(msg) {
    setFlash(msg);
    setTimeout(() => setFlash(null), 2200);
  }

  async function addUser() {
    if (!draft.name || !draft.email || !draft.passcode) { toast('Fill in name, email, and code'); return; }
    try {
      await adminCall({
        action: 'add',
        name: draft.name,
        email: draft.email,
        license_number: draft.license_number || null,
        newCode: draft.passcode,
      });
      setDraft({ name: '', email: '', license_number: '', passcode: '' });
      setShowAdd(false);
      toast(`Added ${draft.name}`);
      loadUsers();
    } catch (e) {
      toast(e.message);
    }
  }

  async function updateUser(user, patch) {
    try {
      await adminCall({ action: 'update', id: user.id, ...patch });
      loadUsers();
    } catch (e) {
      toast(e.message);
    }
  }

  async function deleteUser(user) {
    if (!confirm(`Remove ${user.name}? Their historical client data will stay in the tracker.`)) return;
    try {
      await adminCall({ action: 'delete', id: user.id });
      toast(`Removed ${user.name}`);
      loadUsers();
    } catch (e) {
      toast(e.message);
    }
  }

  async function resetPasscode(user) {
    const newCode = prompt(`Set a new 4-digit code for ${user.name}:`);
    if (!newCode) return;
    if (!/^\d{4}$/.test(newCode)) { toast('Code must be exactly 4 digits'); return; }
    try {
      await adminCall({ action: 'update', id: user.id, newCode });
      toast(`Code updated for ${user.name}`);
    } catch (e) {
      toast(e.message);
    }
  }

  // ── Needs Review ──────────────────────────────────────────────────────────
  const reviewItems = useMemoAD(() => {
    const items = [];
    for (const c of clients) {
      const status = (c.status || '').toUpperCase();
      const isClosedOrPending = status === 'CLOSED' || status === 'PENDING';
      const issues = [];
      if (!status) issues.push('Missing status');
      if (isClosedOrPending) {
        if (!c.salesPrice) issues.push('Missing sales price');
        if (!c.grossCommission) issues.push('Missing gross commission');
        if (!c.agentSplit && !c.partnerSplit && !c.teamSplit) issues.push('No splits recorded');
        if (c.partner?.trim() && !c.partnerSplit) issues.push(`Partner listed (${c.partner}) but no partner split`);
        const hilaryOnDeal = c.agent === 'Hilary' || c.partner === 'Hilary';
        const externalOwners = ['Val','Ally','Michelle','Sonja','Meggie','Kaley','Amanda','Britni','Haley'];
        if (!hilaryOnDeal && externalOwners.includes(c.agent) && !c.teamSplit) issues.push('Non-Hilary deal — needs team split');
      }
      if (status === 'CLOSED' && !c.closingDate) issues.push('Closed but no closing date');
      const yr = (s) => { const m = (s||'').match(/^(\d{4})/); return m ? +m[1] : null; };
      const cy = yr(c.contractDate); if (cy && (cy < 2020 || cy > 2030)) issues.push(`Suspicious contract date (${c.contractDate})`);
      const cl = yr(c.closingDate);  if (cl && (cl < 2020 || cl > 2030)) issues.push(`Suspicious closing date (${c.closingDate})`);
      if (c.partner && /^\d/.test(String(c.partner).trim())) issues.push(`Partner field has a number (${c.partner})`);
      if (issues.length) items.push({ client: c, issues });
    }
    return items;
  }, [clients]);

  function openFix(client) {
    setFixTarget(client);
    setFixDraft({
      status: client.status || '',
      salesPrice: client.salesPrice ?? '',
      grossCommission: client.grossCommission ?? '',
      agentSplit: client.agentSplit ?? '', agentSplitUnit: '$',
      partnerSplit: client.partnerSplit ?? '', partnerSplitUnit: '$',
      teamSplit: client.teamSplit ?? '', teamSplitUnit: '$',
      contractDate: client.contractDate || '',
      closingDate: client.closingDate || '',
      partner: client.partner || '',
      invoice: client.invoice ?? '',
    });
  }

  function saveFix() {
    if (!fixTarget?.id) return;
    const num = (v) => {
      if (v === '' || v == null) return null;
      const n = Number(String(v).replace(/[$,\s%]/g, ''));
      return isNaN(n) ? v : n;
    };
    const gross = num(fixDraft.grossCommission);
    const splitDollars = (rawVal, unit) => {
      const n = num(rawVal);
      if (n == null || typeof n !== 'number') return n;
      if (unit === '%') {
        if (typeof gross !== 'number' || !gross) return null;
        return Math.round((n / 100) * gross * 100) / 100;
      }
      return n;
    };
    const patch = {
      status: fixDraft.status || null,
      salesPrice: num(fixDraft.salesPrice),
      grossCommission: gross,
      agentSplit: splitDollars(fixDraft.agentSplit, fixDraft.agentSplitUnit),
      partnerSplit: splitDollars(fixDraft.partnerSplit, fixDraft.partnerSplitUnit),
      teamSplit: splitDollars(fixDraft.teamSplit, fixDraft.teamSplitUnit),
      contractDate: fixDraft.contractDate || null,
      closingDate: fixDraft.closingDate || null,
      partner: fixDraft.partner || '',
      invoice: fixDraft.invoice === '' ? null : num(fixDraft.invoice),
    };
    onApplyEdit && onApplyEdit(fixTarget.id, patch);
    setFixTarget(null);
    setFixDraft({});
    toast('Saved');
  }

  return (
    <div>
      <div className="page-head">
        <div>
          <h1 className="page-title">Administration</h1>
          <p className="page-sub">Team members, license numbers, access codes, and settings</p>
        </div>
        <button className="btn btn-primary" onClick={() => setShowAdd(true)}>+ Add user</button>
      </div>

      {/* Needs Review */}
      {reviewItems.length > 0 && (
        <div className="card" style={{ marginBottom: 18, borderColor: 'color-mix(in oklab, var(--pending) 35%, var(--rule))' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <h3 className="card-title" style={{ margin: 0, color: 'var(--pending)' }}>
              ⚠ Needs Review · {reviewItems.length} {reviewItems.length === 1 ? 'record' : 'records'}
            </h3>
            <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>Auto-flagged from missing or inconsistent data</span>
          </div>
          <table className="table" style={{ fontSize: 12.5 }}>
            <thead><tr><th style={{ width: '26%' }}>Client</th><th style={{ width: '12%' }}>Agent</th><th>Issues</th><th style={{ width: 90 }}></th></tr></thead>
            <tbody>
              {reviewItems.map((item, i) => (
                <tr key={i}>
                  <td><strong>{item.client.client}</strong><div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{item.client.address}</div></td>
                  <td>{item.client.agent}</td>
                  <td><ul style={{ margin: 0, padding: '0 0 0 16px', color: 'var(--ink-2)' }}>{item.issues.map((iss, j) => <li key={j} style={{ marginBottom: 2 }}>{iss}</li>)}</ul></td>
                  <td><button className="btn btn-primary" style={{ padding: '6px 12px', fontSize: 12 }} onClick={() => openFix(item.client)}>Fix</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* Notification settings */}
      <div className="card" style={{ marginBottom: 18 }}>
        <h3 className="card-title">Notifications</h3>
        <div className="admin-grid">
          <div className="field" style={{ marginBottom: 0 }}>
            <label>Administrator email</label>
            <input type="email" value={adminEmail} onChange={e => setAdminEmail(e.target.value)} placeholder="admin@locals.com" />
            <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>Receives every new-client submission</span>
          </div>
          <div className="field" style={{ marginBottom: 0 }}>
            <label>Monthly stats — day of month</label>
            <input type="number" min="1" max="28" value={monthlyDay} onChange={e => setMonthlyDay(Math.max(1, Math.min(28, parseInt(e.target.value || '1', 10))))} />
            <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>Each user gets their stats emailed on this day</span>
          </div>
          <div className="field" style={{ marginBottom: 0 }}>
            <label>&nbsp;</label>
            <label className="checkbox-row">
              <input type="checkbox" checked={notifyOnSubmit} onChange={e => setNotifyOnSubmit(e.target.checked)} />
              <span>Email administrator on every new-client submission</span>
            </label>
          </div>
        </div>
        <div style={{ marginTop: 14, display: 'flex', justifyContent: 'flex-end' }}>
          <button className="btn btn-primary" onClick={saveSettings}>Save settings</button>
        </div>
      </div>

      {/* Users table */}
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ padding: '16px 20px 4px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <h3 className="card-title" style={{ marginBottom: 0 }}>Team members</h3>
          <span style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            {usersLoading ? 'Loading…' : `${users.length} users · ${users.filter(u => u.active).length} active`}
          </span>
        </div>
        <table className="table admin-table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th>AK License #</th>
              <th>Code</th>
              <th>Admin</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {users.map(u => (
              <tr key={u.id}>
                <td><strong>{u.name}</strong></td>
                <td>
                  <input type="email" className="inline-input" defaultValue={u.email}
                    onBlur={e => { if (e.target.value !== u.email) updateUser(u, { email: e.target.value }); }}
                  />
                </td>
                <td>
                  <input type="text" className="inline-input mono" defaultValue={u.license_number || ''}
                    placeholder="LICENSE-#####"
                    style={{ width: 160 }}
                    onBlur={e => { if ((e.target.value || null) !== u.license_number) updateUser(u, { license_number: e.target.value || null }); }}
                  />
                </td>
                <td>
                  <button type="button" className="btn" style={{ fontSize: 12, padding: '5px 10px' }}
                    onClick={() => resetPasscode(u)}>
                    Change code
                  </button>
                </td>
                <td>
                  <label className="switch">
                    <input type="checkbox" checked={u.is_admin} onChange={e => updateUser(u, { is_admin: e.target.checked })} />
                    <span className="slider"></span>
                  </label>
                </td>
                <td>
                  <label className="switch">
                    <input type="checkbox" checked={u.active} onChange={e => updateUser(u, { active: e.target.checked })} />
                    <span className="slider"></span>
                    <span className="switch-label">{u.active ? 'Active' : 'Disabled'}</span>
                  </label>
                </td>
                <td className="num">
                  <button className="btn-danger-mini" onClick={() => deleteUser(u)}>Remove</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Fix modal */}
      {fixTarget && (
        <div className="modal-backdrop" onClick={() => setFixTarget(null)}>
          <div className="modal" style={{ width: 'min(620px, 94vw)' }} onClick={e => e.stopPropagation()}>
            <div className="modal-head">
              <div>
                <h3>Fix · {fixTarget.client}</h3>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>{fixTarget.address}</div>
              </div>
              <button onClick={() => setFixTarget(null)}>✕</button>
            </div>
            <div className="modal-body" style={{ maxHeight: '70vh', overflow: 'auto' }}>
              <div className="field-row">
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Status</label>
                  <select value={fixDraft.status} onChange={e => setFixDraft({ ...fixDraft, status: e.target.value })}>
                    <option value="">— none —</option>
                    <option>ACTIVE</option><option>PENDING</option><option>CLOSED</option><option>DFT</option>
                  </select>
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Partner</label>
                  <input type="text" value={fixDraft.partner} onChange={e => setFixDraft({ ...fixDraft, partner: e.target.value })} />
                </div>
              </div>
              <div className="field-row">
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Contract date</label>
                  <input type="date" value={fixDraft.contractDate} onChange={e => setFixDraft({ ...fixDraft, contractDate: e.target.value })} />
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Closing date</label>
                  <input type="date" value={fixDraft.closingDate} onChange={e => setFixDraft({ ...fixDraft, closingDate: e.target.value })} />
                </div>
              </div>
              <div className="field-row">
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Sales price ($)</label>
                  <input type="text" inputMode="decimal" value={fixDraft.salesPrice} onChange={e => setFixDraft({ ...fixDraft, salesPrice: e.target.value })} placeholder="0" style={{ fontFamily: 'var(--font-mono)' }} />
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Gross commission ($)</label>
                  <input type="text" inputMode="decimal" value={fixDraft.grossCommission} onChange={e => setFixDraft({ ...fixDraft, grossCommission: e.target.value })} placeholder="0" style={{ fontFamily: 'var(--font-mono)' }} />
                </div>
              </div>
              <div className="form-section-title">Splits</div>
              <div className="field-row-3">
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Agent split</label>
                  <SplitInput value={fixDraft.agentSplit} unit={fixDraft.agentSplitUnit || '$'} onValueChange={v => setFixDraft({ ...fixDraft, agentSplit: v })} onUnitChange={u => setFixDraft({ ...fixDraft, agentSplitUnit: u })} gross={fixDraft.grossCommission} />
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Partner split</label>
                  <SplitInput value={fixDraft.partnerSplit} unit={fixDraft.partnerSplitUnit || '$'} onValueChange={v => setFixDraft({ ...fixDraft, partnerSplit: v })} onUnitChange={u => setFixDraft({ ...fixDraft, partnerSplitUnit: u })} gross={fixDraft.grossCommission} />
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Team split</label>
                  <SplitInput value={fixDraft.teamSplit} unit={fixDraft.teamSplitUnit || '$'} onValueChange={v => setFixDraft({ ...fixDraft, teamSplit: v })} onUnitChange={u => setFixDraft({ ...fixDraft, teamSplitUnit: u })} gross={fixDraft.grossCommission} />
                </div>
              </div>
              <div className="field" style={{ marginBottom: 0, marginTop: 14 }}>
                <label>Invoice</label>
                <input type="text" value={fixDraft.invoice} onChange={e => setFixDraft({ ...fixDraft, invoice: e.target.value })} placeholder="Amount or note" />
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn" onClick={() => setFixTarget(null)}>Cancel</button>
              <button className="btn btn-primary" onClick={saveFix}>Save</button>
            </div>
          </div>
        </div>
      )}

      {/* Add user modal */}
      {showAdd && (
        <div className="modal-backdrop" onClick={() => setShowAdd(false)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal-head">
              <h3>Add team member</h3>
              <button onClick={() => setShowAdd(false)}>✕</button>
            </div>
            <div className="modal-body">
              <div className="field">
                <label>Name</label>
                <input type="text" value={draft.name} onChange={e => setDraft({ ...draft, name: e.target.value })} placeholder="First name" />
              </div>
              <div className="field">
                <label>Email</label>
                <input type="email" value={draft.email} onChange={e => setDraft({ ...draft, email: e.target.value })} placeholder="name@locals.com" />
              </div>
              <div className="field">
                <label>AK License # <span style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 400 }}>(used to log in — add later if unknown)</span></label>
                <input type="text" value={draft.license_number} onChange={e => setDraft({ ...draft, license_number: e.target.value })}
                  placeholder="LICENSE-12345" style={{ fontFamily: 'var(--font-mono)' }} />
              </div>
              <div className="field">
                <label>4-digit access code</label>
                <input type="text" value={draft.passcode} maxLength="4" inputMode="numeric"
                  onChange={e => setDraft({ ...draft, passcode: e.target.value.replace(/\D/g, '') })}
                  placeholder="4 digits" style={{ fontFamily: 'var(--font-mono)', letterSpacing: '0.2em' }} />
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn" onClick={() => setShowAdd(false)}>Cancel</button>
              <button className="btn btn-primary" onClick={addUser}>Add user</button>
            </div>
          </div>
        </div>
      )}

      {flash && <div className="toast">✓ {flash}</div>}
    </div>
  );
}
window.AdminView = AdminView;