// Software Licenses — subscription & credential register (searchable by employee + software)

function Licenses() {
  const D = window.HitcentsData;
  const [q, setQ] = useState('');
  const [unit, setUnit] = useState('all');
  const [ownerFilter, setOwnerFilter] = useState('all');
  const [open, setOpen] = useState(null);
  const [addOpen, setAddOpen] = useState(false);
  const [version, setVersion] = useState(0);

  const owners = [...new Set(D.LICENSES.map(l => l.owner))].map(getEmployee).filter(Boolean);

  const rows = D.LICENSES.filter(l => {
    if (unit !== 'all' && l.unit !== unit) return false;
    if (ownerFilter !== 'all' && l.owner !== ownerFilter) return false;
    const o = getEmployee(l.owner);
    const hay = `${l.name} ${o?.name || ''} ${l.purpose} ${l.username}`.toLowerCase();
    if (q && !hay.includes(q.toLowerCase())) return false;
    return true;
  });

  const monthlyTotal = D.LICENSES.reduce((s, l) => s + l.monthly, 0);

  return (
    <div data-screen-label="Licenses">
      <div className="page-head">
        <div>
          <h1>Software licenses</h1>
          <div className="sub">{D.LICENSES.length} subscriptions tracked · {fmtMoneyFull(monthlyTotal)}/mo · {fmtMoneyFull(monthlyTotal * 12)}/yr</div>
        </div>
        <div className="row gap-2">
          <Button variant="primary" icon="plus" onClick={() => setAddOpen(true)}>Add license</Button>
        </div>
      </div>

      <div className="grid g-4" style={{ marginBottom: 18, gap: 12 }}>
        <Kpi label="Active subscriptions" value={D.LICENSES.length} delta={`${owners.length} account owners`} />
        <Kpi label="Monthly spend" value={fmtMoney(monthlyTotal)} delta="across all cards" />
        <Kpi label="Annual run-rate" value={fmtMoney(monthlyTotal * 12)} delta="committed software" />
        <Kpi label="Business units" value={new Set(D.LICENSES.map(l => l.unit)).size} delta="with software" />
      </div>

      <div className="toolbar">
        <div className="search-inline">
          <Icon name="search" size={14} />
          <input placeholder="Search by software or employee…" value={q} onChange={e => setQ(e.target.value)} style={{ minWidth: 240 }} />
        </div>
        <select value={ownerFilter} onChange={e => setOwnerFilter(e.target.value)}
                style={{ padding: '7px 10px', border: '1px solid var(--border)', borderRadius: 8, background: 'var(--bg-card)', fontSize: 13 }}>
          <option value="all">All owners</option>
          {owners.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
        </select>
        <select value={unit} onChange={e => setUnit(e.target.value)}
                style={{ padding: '7px 10px', border: '1px solid var(--border)', borderRadius: 8, background: 'var(--bg-card)', fontSize: 13 }}>
          <option value="all">All departments</option>
          {D.LICENSE_UNITS.map(u => <option key={u} value={u}>{u}</option>)}
        </select>
        <div style={{ marginLeft: 'auto' }} className="muted">{rows.length} of {D.LICENSES.length}</div>
      </div>

      <div className="card flush">
        <table className="table">
          <thead>
            <tr>
              <th>Software</th>
              <th>Account owner</th>
              <th>Department</th>
              <th>Est. monthly</th>
              <th>Card</th>
              <th>Purchased</th>
              <th>MFA</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(l => {
              const o = getEmployee(l.owner);
              return (
                <tr key={l.id} className="clickable" onClick={() => setOpen(l)}>
                  <td>
                    <div className="row gap-2">
                      <div className="lic-glyph">{l.name[0]}</div>
                      <div>
                        <div style={{ fontWeight: 500 }}>{l.name}</div>
                        <div className="dim" style={{ fontSize: 11.5, maxWidth: 240, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{l.purpose}</div>
                      </div>
                    </div>
                  </td>
                  <td>{o ? <div className="row gap-2"><Avatar person={o} size={24} /><span style={{ fontSize: 12.5 }}>{o.name}</span></div> : <span className="dim">—</span>}</td>
                  <td><Badge tone="blue">{l.unit}</Badge></td>
                  <td className="mono">{l.monthly ? fmtMoneyFull(l.monthly) : <span className="dim">Free</span>}</td>
                  <td className="mono dim" style={{ fontSize: 11.5 }}>{l.card}</td>
                  <td className="muted mono" style={{ fontSize: 11.5 }}>{fmtDateShort(l.purchase)}</td>
                  <td>
                    {l.mfa && l.mfa.length > 0
                      ? <Badge tone="green"><Icon name="shield" size={9} /> {l.mfa.length}</Badge>
                      : <Badge tone="red">None</Badge>}
                  </td>
                </tr>
              );
            })}
            {rows.length === 0 && (
              <tr><td colSpan={7} style={{ textAlign: 'center', padding: 40, color: 'var(--text-muted)' }}>No software matches your search.</td></tr>
            )}
          </tbody>
        </table>
      </div>

      <Drawer open={!!open} onClose={() => setOpen(null)} title="Software license" width={560}>
        {open && <LicenseDetail license={open} />}
      </Drawer>

      {addOpen && (
        <AddLicenseModal
          onClose={() => setAddOpen(false)}
          onCreate={(lic) => {
            D.LICENSES.unshift(lic);
            setVersion(v => v + 1);
            setAddOpen(false);
            setOpen(lic);
          }} />
      )}
    </div>
  );
}

function LicenseDetail({ license: l }) {
  const o = getEmployee(l.owner);
  const [reveal, setReveal] = useState(false);
  const [copied, setCopied] = useState('');

  function copy(field, value) {
    try { navigator.clipboard?.writeText(value); } catch (e) {}
    setCopied(field);
    setTimeout(() => setCopied(c => c === field ? '' : c), 1400);
  }

  return (
    <div>
      <div className="row gap-3" style={{ marginBottom: 18 }}>
        <div className="lic-glyph lg">{l.name[0]}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>{l.name}</h2>
          <div className="muted" style={{ fontSize: 13 }}>{l.purpose}</div>
          <div className="row gap-2" style={{ marginTop: 8, flexWrap: 'wrap' }}>
            <Badge tone="blue">{l.unit}</Badge>
            {l.monthly ? <Badge tone="orange">{fmtMoneyFull(l.monthly)}/mo</Badge> : <Badge tone="green">Free</Badge>}
          </div>
        </div>
      </div>

      <SectionTitle>Ownership & billing</SectionTitle>
      <div className="lic-card">
        <div className="lic-field">
          <span className="lic-label">Vendor</span>
          <span>
            {(() => {
              const v = getVendorForLicense(l.id);
              return v
                ? <button className="link-btn" onClick={() => window.dispatchEvent(new CustomEvent('hitcents:navigate', { detail: { section: 'vendors', target: { type: 'vendor', id: v.id } } }))}>{v.name} →</button>
                : <span className="dim">—</span>;
            })()}
          </span>
        </div>
        <div className="lic-field">
          <span className="lic-label">Account owner</span>
          <span className="row gap-2">{o ? <><Avatar person={o} size={22} /><span style={{ fontSize: 13 }}>{o.name}</span></> : '—'}</span>
        </div>
        <div className="lic-field"><span className="lic-label">Department</span><span><Badge tone="blue">{l.unit}</Badge></span></div>
        <div className="lic-field">
          <span className="lic-label">Login URL</span>
          <span className="row gap-2">
            <a className="lic-link" href={l.loginUrl} target="_blank" rel="noopener noreferrer">{(l.loginUrl || '').replace(/^https?:\/\//, '')}</a>
            <Icon name="arrow_r" size={12} style={{ color: 'var(--text-muted)' }} />
          </span>
        </div>
        <div className="lic-field"><span className="lic-label">Purchase date</span><span className="mono" style={{ fontSize: 12.5 }}>{fmtDate(l.purchase)}</span></div>
        <div className="lic-field"><span className="lic-label">Est. monthly charge</span><span className="mono" style={{ fontSize: 12.5, fontWeight: 600 }}>{l.monthly ? fmtMoneyFull(l.monthly) : 'Free'}</span></div>
        <div className="lic-field"><span className="lic-label">Credit card used</span><span className="mono" style={{ fontSize: 12.5 }}>{l.card}</span></div>
      </div>

      <div className="row spread" style={{ margin: '18px 0 8px', alignItems: 'center' }}>
        <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', fontWeight: 600 }}>Credentials</div>
        <button className="lic-reveal-btn" onClick={() => setReveal(r => !r)}>
          <Icon name={reveal ? 'eye_off' : 'eye'} size={13} />
          {reveal ? 'Hide' : 'Reveal'}
        </button>
      </div>
      <div className="lic-card secure">
        <div className="lic-field">
          <span className="lic-label">Account ID #</span>
          <span className="row gap-2">
            <span className="mono" style={{ fontSize: 12.5 }}>{l.accountId}</span>
            <button className="lic-copy" onClick={() => copy('acct', l.accountId)} title="Copy"><Icon name={copied === 'acct' ? 'check' : 'copy'} size={12} /></button>
          </span>
        </div>
        <div className="lic-field">
          <span className="lic-label">Username</span>
          <span className="row gap-2">
            <span className="mono" style={{ fontSize: 12.5 }}>{l.username}</span>
            <button className="lic-copy" onClick={() => copy('user', l.username)} title="Copy"><Icon name={copied === 'user' ? 'check' : 'copy'} size={12} /></button>
          </span>
        </div>
        <div className="lic-field">
          <span className="lic-label">Password</span>
          <span className="row gap-2">
            <span className="mono" style={{ fontSize: 12.5, letterSpacing: reveal ? 0 : '0.1em' }}>{reveal ? l.password : '•'.repeat(12)}</span>
            <button className="lic-copy" onClick={() => copy('pw', l.password)} title="Copy"><Icon name={copied === 'pw' ? 'check' : 'copy'} size={12} /></button>
          </span>
        </div>
        <div className="lic-field" style={{ alignItems: 'flex-start' }}>
          <span className="lic-label">MFA methods</span>
          <span className="col" style={{ gap: 4, alignItems: 'flex-end' }}>
            {(l.mfa && l.mfa.length) ? l.mfa.map(m => (
              <span key={m} className="lic-mfa"><Icon name="shield" size={10} />{m}</span>
            )) : <span className="dim" style={{ fontSize: 12.5 }}>None configured</span>}
          </span>
        </div>
        {!reveal && (
          <div className="lic-secure-note"><Icon name="lock" size={11} /> Credentials hidden — click Reveal to view</div>
        )}
      </div>

      <SectionTitle>Purpose</SectionTitle>
      <p style={{ marginTop: 0, fontSize: 13.5, lineHeight: 1.55 }}>{l.purpose}</p>
    </div>
  );
}

const MFA_OPTIONS = ['Authenticator app', 'SMS', 'Hardware key (YubiKey)', 'Email'];
const CARD_OPTIONS = ['Amex ··7012', 'Visa ··4421', 'Brex ··9930', 'n/a (no card)'];

function AddLicenseModal({ onClose, onCreate }) {
  const D = window.HitcentsData;
  const [showPw, setShowPw] = useState(false);
  const [draft, setDraft] = useState({
    name: '', owner: 'e7', unit: 'SaaS', purpose: '',
    loginUrl: '', purchase: '2026-06-01', monthly: 0,
    card: 'Amex ··7012', accountId: '', username: '', password: '',
    mfa: ['Authenticator app'],
  });

  function set(patch) { setDraft(d => ({ ...d, ...patch })); }
  function toggleMfa(m) {
    set({ mfa: draft.mfa.includes(m) ? draft.mfa.filter(x => x !== m) : [...draft.mfa, m] });
  }
  function genPassword() {
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!#$%';
    let p = '';
    for (let i = 0; i < 16; i++) p += chars[Math.floor(Math.random() * chars.length)];
    set({ password: p });
    setShowPw(true);
  }

  const canCreate = draft.name.trim() && draft.owner;

  function submit() {
    if (!canCreate) return;
    const lic = {
      id: `lic${Date.now().toString(36)}`,
      name: draft.name.trim(),
      owner: draft.owner,
      unit: draft.unit,
      purpose: draft.purpose.trim() || '—',
      loginUrl: draft.loginUrl.trim() || '',
      purchase: draft.purchase,
      monthly: +draft.monthly || 0,
      card: draft.card,
      accountId: draft.accountId.trim() || '—',
      username: draft.username.trim() || '—',
      password: draft.password || '—',
      mfa: draft.mfa,
    };
    onCreate(lic);
  }

  return (
    <div className="cmdk-scrim" onClick={onClose} style={{ paddingTop: '6vh', alignItems: 'flex-start' }}>
      <div onClick={e => e.stopPropagation()}
           style={{ width: 680, maxWidth: '94vw', maxHeight: '88vh', background: 'var(--bg-card)', borderRadius: 14, border: '1px solid var(--border)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>

        <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Add software license</h2>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>Track a subscription, its owner, billing, and login.</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>

        <div style={{ padding: 24, overflowY: 'auto', flex: 1 }}>
          <div className="add-emp-sech">Software</div>
          <div className="add-emp-row2">
            <div className="field" style={{ margin: 0 }}>
              <label>Software name</label>
              <input autoFocus placeholder="e.g. Notion" value={draft.name} onChange={e => set({ name: e.target.value })} />
            </div>
            <div className="field" style={{ margin: 0 }}>
              <label>Department</label>
              <select value={draft.unit} onChange={e => set({ unit: e.target.value })}>
                {D.LICENSE_UNITS.map(u => <option key={u} value={u}>{u}</option>)}
              </select>
            </div>
          </div>
          <div className="field" style={{ margin: 0, marginTop: 14 }}>
            <label>Purpose</label>
            <input placeholder="What is this used for?" value={draft.purpose} onChange={e => set({ purpose: e.target.value })} />
          </div>
          <div className="field" style={{ margin: 0, marginTop: 14 }}>
            <label>Login URL</label>
            <input placeholder="https://app.example.com/login" value={draft.loginUrl} onChange={e => set({ loginUrl: e.target.value })} />
          </div>

          <div className="add-emp-sech">Ownership & billing</div>
          <div className="add-emp-row2">
            <div className="field" style={{ margin: 0 }}>
              <label>Account owner</label>
              <select value={draft.owner} onChange={e => set({ owner: e.target.value })}>
                {D.EMPLOYEES.map(e => <option key={e.id} value={e.id}>{e.name} · {e.title}</option>)}
              </select>
            </div>
            <div className="field" style={{ margin: 0 }}>
              <label>Credit card used</label>
              <select value={draft.card} onChange={e => set({ card: e.target.value })}>
                {CARD_OPTIONS.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>
          </div>
          <div className="add-emp-row2" style={{ marginTop: 14 }}>
            <div className="field" style={{ margin: 0 }}>
              <label>Purchase date</label>
              <input type="date" value={draft.purchase} onChange={e => set({ purchase: e.target.value })} />
            </div>
            <div className="field" style={{ margin: 0 }}>
              <label>Est. monthly charge</label>
              <div style={{ position: 'relative' }}>
                <span style={{ position: 'absolute', left: 12, top: 9, color: 'var(--text-muted)', fontSize: 13.5 }}>$</span>
                <input type="number" min="0" step="10" value={draft.monthly} onChange={e => set({ monthly: +e.target.value })} style={{ paddingLeft: 24, width: '100%' }} />
              </div>
            </div>
          </div>

          <div className="add-emp-sech">Credentials</div>
          <div className="add-emp-row2">
            <div className="field" style={{ margin: 0 }}>
              <label>Account ID #</label>
              <input placeholder="acct-12345" value={draft.accountId} onChange={e => set({ accountId: e.target.value })} />
            </div>
            <div className="field" style={{ margin: 0 }}>
              <label>Username</label>
              <input placeholder="name@hitcents.com" value={draft.username} onChange={e => set({ username: e.target.value })} />
            </div>
          </div>
          <div className="field" style={{ margin: 0, marginTop: 14 }}>
            <label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span>Password</span>
              <button type="button" className="lic-reveal-btn" onClick={genPassword} style={{ textTransform: 'none', letterSpacing: 0 }}><Icon name="bolt" size={12} />Generate</button>
            </label>
            <div style={{ position: 'relative' }}>
              <input type={showPw ? 'text' : 'password'} className="mono" placeholder="••••••••••" value={draft.password} onChange={e => set({ password: e.target.value })} style={{ width: '100%', paddingRight: 36 }} />
              <button type="button" onClick={() => setShowPw(s => !s)} className="lic-copy" style={{ position: 'absolute', right: 8, top: 8 }}><Icon name={showPw ? 'eye_off' : 'eye'} size={13} /></button>
            </div>
          </div>
          <div className="field" style={{ margin: 0, marginTop: 14 }}>
            <label>MFA methods</label>
            <div className="row gap-2" style={{ flexWrap: 'wrap' }}>
              {MFA_OPTIONS.map(m => {
                const on = draft.mfa.includes(m);
                return (
                  <button key={m} type="button" onClick={() => toggleMfa(m)} className={`mfa-toggle ${on ? 'on' : ''}`}>
                    <Icon name={on ? 'check' : 'shield'} size={11} stroke={on ? 3 : 1.6} />{m}
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        <div style={{ padding: '14px 24px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'var(--bg-elev)' }}>
          <span className="dim" style={{ fontSize: 11.5 }}><Icon name="lock" size={11} /> Stored in the company vault</span>
          <div className="row gap-2">
            {!canCreate && <span className="dim" style={{ fontSize: 11.5 }}>Name & owner required</span>}
            <Button variant="ghost" onClick={onClose}>Cancel</Button>
            <Button variant="primary" icon="check" disabled={!canCreate} onClick={submit}>Add license</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Licenses = Licenses;