// Client CRM screen — table + selectable profile panel.
(() => {
const { Card, Badge, Avatar, Tabs, Input } = window.TechyFuelOSDesignSystem_be0222;

const TF_STATUS = {
  active:   { tone: 'success', label: 'Active client' },
  inactive: { tone: 'neutral', label: 'Inactive' },
  lead:     { tone: 'brand',   label: 'Lead' },
};



// Capitalize the first letter of each word as the user types.
function titleCase(s) {
  return String(s).replace(/(^|\s)([a-z])/g, (m, p, c) => p + c.toUpperCase());
}

const CLIENT_CURRENCIES = ['PKR', 'USD', 'EUR', 'GBP', 'AED', 'INR'];
const CURRENCY_SYMBOL = { PKR: 'Rs', USD: '$', EUR: '€', GBP: '£', AED: 'AED', INR: '₹' };

function fmtValue(n, currency) {
  const sym = CURRENCY_SYMBOL[currency || 'USD'] || '';
  if (!n) return sym + '0/mo';
  return sym + Number(n).toLocaleString() + '/mo';
}

function Th({ children, w }) {
  return <th style={{ textAlign: 'left', padding: '0 14px 10px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-subtle)', width: w }}>{children}</th>;
}

function ClientRow({ c, selected, onClick }) {
  const [hover, setHover] = React.useState(false);
  const s = TF_STATUS[c.status] || TF_STATUS.lead;
  const displayName = c.company || c.name;
  return (
    <tr onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ cursor: 'pointer', background: selected ? 'var(--blue-50)' : hover ? 'var(--slate-50)' : 'transparent', transition: 'background var(--dur-fast) var(--ease-out)' }}>
      <td style={{ padding: '11px 14px', borderTop: '1px solid var(--border-subtle)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Avatar name={displayName} size="sm" />
          <div>
            <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{displayName}</div>
            <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{c.website || c.email}</div>
          </div>
        </div>
      </td>
      <td style={{ padding: '11px 14px', borderTop: '1px solid var(--border-subtle)', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>{c.name}</td>
      <td style={{ padding: '11px 14px', borderTop: '1px solid var(--border-subtle)' }}><Badge tone={s.tone} dot>{s.label}</Badge></td>
      <td style={{ padding: '11px 14px', borderTop: '1px solid var(--border-subtle)', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>{c.industry || '—'}</td>
      <td style={{ padding: '11px 14px', borderTop: '1px solid var(--border-subtle)', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>{c.email}</td>
      <td style={{ padding: '11px 14px', borderTop: '1px solid var(--border-subtle)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{fmtValue(c.monthly_value, c.currency)}</td>
    </tr>
  );
}

function ProfileField({ icon, label, value }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: '1px solid var(--border-subtle)' }}>
      <Icon name={icon} size={16} style={{ color: 'var(--text-subtle)', flex: 'none' }} />
      <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', width: 76, flex: 'none' }}>{label}</span>
      <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-strong)', fontWeight: 'var(--fw-medium)', textAlign: 'right', flex: 1 }}>{value}</span>
    </div>
  );
}

function CRM() {
  useLucide();
  const [clients, setClients] = React.useState([]);
  const [selId,   setSelId]   = React.useState(null);
  const [search,  setSearch]  = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [loading, setLoading] = React.useState(true);
  const [modalOpen,      setModalOpen]      = React.useState(false);
  const [saving,         setSaving]         = React.useState(false);
  const [deleting,       setDeleting]       = React.useState(false);
  const [confirmDelete,  setConfirmDelete]  = React.useState(false);
  const [form, setForm] = React.useState({ name: '', company: '', email: '', website: '', whatsapp: '', phone: '', industry: '', monthly_value: '', currency: 'PKR', status: 'active' });
  const [addError, setAddError] = React.useState('');

  const [editOpen,  setEditOpen]  = React.useState(false);
  const [editForm,  setEditForm]  = React.useState({});
  const [editSaving, setEditSaving] = React.useState(false);
  // Client detail — related projects, invoices, notes/feedback.
  const [detailTab, setDetailTab] = React.useState('projects');
  const [cProjects, setCProjects] = React.useState([]);
  const [cInvoices, setCInvoices] = React.useState([]);
  const [cNotes, setCNotes] = React.useState([]);
  const [cMeetings, setCMeetings] = React.useState([]);
  const [mtg, setMtg] = React.useState({ title: '', scheduled_at: '', location: '' });
  const [noteText, setNoteText] = React.useState('');

  React.useEffect(() => {
    if (!selId || !window.API) { setCProjects([]); setCInvoices([]); setCNotes([]); return; }
    (async () => {
      try { const r = await window.API.getProjects(); if (r.data) setCProjects(r.data.filter(p => p.client_id === selId)); } catch {}
      try { const r = await window.API.getInvoices(); if (r.data) setCInvoices(r.data.filter(iv => iv.client_id === selId)); } catch {}
      try { const r = await window.API.getClientNotes(selId); if (r.data) setCNotes(r.data); } catch {}
      try { const r = await window.API.getMeetings(selId); if (r.data) setCMeetings(r.data); } catch {}
    })();
  }, [selId]);

  async function addNote() {
    if (!noteText.trim() || !selId || !window.API) return;
    try { const { data } = await window.API.createClientNote({ client_id: selId, body: noteText.trim() }); if (data) setCNotes(prev => [data, ...prev]); setNoteText(''); } catch { alert('Could not add note.'); }
  }
  async function bookMeeting() {
    if (!mtg.title.trim() || !mtg.scheduled_at || !selId || !window.API) return;
    try { const { data } = await window.API.createMeeting({ client_id: selId, title: mtg.title.trim(), scheduled_at: mtg.scheduled_at, location: mtg.location }); if (data) setCMeetings(prev => [data, ...prev]); setMtg({ title: '', scheduled_at: '', location: '' }); } catch { alert('Could not book meeting.'); }
  }
  async function delMeeting(id) {
    setCMeetings(prev => prev.filter(m => m.id !== id));
    try { await window.API.deleteMeeting(id); } catch {}
  }
  async function delNote(id) {
    setCNotes(prev => prev.filter(n => n.id !== id));
    try { await window.API.deleteClientNote(id); } catch {}
  }
  const [editError, setEditError] = React.useState('');

  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }
  function setEF(k, v) { setEditForm(f => ({ ...f, [k]: v })); }

  function openEdit(c) {
    setEditError('');
    setEditForm({
      name: c.name || '', company: c.company || '', email: c.email || '', website: c.website || '',
      whatsapp: c.whatsapp || '', phone: c.phone || '',
      industry: c.industry || '', monthly_value: c.monthly_value ? String(c.monthly_value) : '', currency: c.currency || 'PKR', status: c.status || 'active',
    });
    setEditOpen(true);
  }

  async function handleUpdateClient() {
    if (!sel || !editForm.name?.trim()) return;
    setEditSaving(true);
    setEditError('');
    try {
      const payload = { name: editForm.name.trim(), status: editForm.status };
      payload.company = editForm.company || null;
      payload.email = editForm.email || null;
      payload.website = editForm.website || null;
      payload.whatsapp = editForm.whatsapp || null;
      payload.phone = editForm.phone || null;
      payload.industry = editForm.industry || null;
      payload.monthly_value = editForm.monthly_value ? Number(editForm.monthly_value) : null;
      payload.currency = editForm.currency || 'PKR';
      if (!window.API) { setEditOpen(false); return; }
      const { data, error } = await window.API.updateClient(sel.id, payload);
      if (error) { setEditError(error.message || 'Could not save changes. Please try again.'); return; }
      setClients(prev => prev.map(c => c.id === sel.id ? { ...c, ...(data || payload) } : c));
      setEditOpen(false);
    } finally { setEditSaving(false); }
  }

  React.useEffect(() => {
    if (!window.API) { setLoading(false); return; }
    (async () => {
      try {
        const { data } = await window.API.getClients();
        if (Array.isArray(data) && data.length > 0) {
          setClients(data);
          setSelId(data[0].id);
        }
      } catch {}
      setLoading(false);
    })();
  }, []);

  async function handleDeleteClient(id) {
    setDeleting(true);
    if (window.API) {
      try { await window.API.deleteClient(id); } catch(_) {}
    }
    const remaining = clients.filter(c => c.id !== id);
    setClients(remaining);
    setSelId(remaining[0]?.id || null);
    setConfirmDelete(false);
    setDeleting(false);
  }

  async function handleAddClient() {
    if (!form.name.trim()) return;
    setSaving(true);
    setAddError('');
    try {
      const payload = { name: form.name, status: form.status };
      if (form.company)       payload.company       = form.company;
      if (form.email)         payload.email         = form.email;
      if (form.website)       payload.website       = form.website;
      if (form.whatsapp)      payload.whatsapp      = form.whatsapp;
      if (form.phone)         payload.phone         = form.phone;
      if (form.industry)      payload.industry      = form.industry;
      if (form.monthly_value) payload.monthly_value = Number(form.monthly_value);
      payload.currency = form.currency || 'PKR';
      if (window.API) {
        const { data, error } = await window.API.createClient(payload);
        if (error) { setAddError(error.message || 'Could not add the client. Please try again.'); return; }
        if (data) {
          setClients(prev => [...prev, data]);
          setSelId(data.id);
        }
      }
      setModalOpen(false);
      setForm({ name: '', company: '', email: '', website: '', whatsapp: '', phone: '', industry: '', monthly_value: '', currency: 'PKR', status: 'active' });
    } finally { setSaving(false); }
  }

  const filtered = clients.filter(c => {
    const q = search.toLowerCase();
    const matchesSearch = !q || (c.company || c.name || '').toLowerCase().includes(q) || (c.name || '').toLowerCase().includes(q);
    const matchesStatus = statusFilter === 'all' || (c.status || 'lead') === statusFilter;
    return matchesSearch && matchesStatus;
  });

  if (loading) {
    return <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading…</div>;
  }

  const sel = clients.find(c => c.id === selId) || clients[0] || null;
  const s = sel ? (TF_STATUS[sel.status] || TF_STATUS.lead) : TF_STATUS.lead;
  const displayName = sel ? (sel.company || sel.name) : '';
  const activeCount = clients.filter(c => c.status === 'active').length;

  return (
    <div style={{ padding: 24 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <h1 style={{ fontSize: 'var(--text-3xl)', fontWeight: 'var(--fw-extrabold)', letterSpacing: '-0.02em' }}>Client CRM</h1>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginTop: 2 }}>{clients.length} {clients.length === 1 ? 'client' : 'clients'}{activeCount ? ` · ${activeCount} active` : ''}</p>
        </div>
        <button onClick={() => setModalOpen(true)} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 36, padding: '0 14px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-brand)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}>
          <Icon name="user-plus" size={16} /> Add client
        </button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 320px', gap: 16, alignItems: 'start' }}>
        <Card padding="none">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 14, borderBottom: '1px solid var(--border-subtle)' }}>
            <div style={{ width: 230 }}>
              <Input size="sm" placeholder="Search clients…" iconLeft={<Icon name="search" size={16} />} value={search} onChange={e => setSearch(e.target.value)} />
            </div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: 30, padding: '0 8px 0 11px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', color: 'var(--text-body)' }}>
              <Icon name="filter" size={15} style={{ color: 'var(--text-muted)' }} />
              <select value={statusFilter} onChange={e => setStatusFilter(e.target.value)}
                style={{ border: 'none', background: 'transparent', outline: 'none', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-body)', cursor: 'pointer' }}>
                <option value="all">All statuses</option>
                <option value="active">Active client</option>
                <option value="lead">Lead</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
            <div style={{ flex: 1 }} />
            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{filtered.length} of {clients.length}</span>
          </div>
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead><tr><Th>Company</Th><Th>Contact</Th><Th>Status</Th><Th>Industry</Th><Th>Email</Th><Th w="100">Value</Th></tr></thead>
              <tbody>{filtered.map(c => <ClientRow key={c.id} c={c} selected={c.id === selId} onClick={() => { setSelId(c.id); setConfirmDelete(false); }} />)}</tbody>
            </table>
          </div>
        </Card>

        <Card padding="none" style={{ overflow: 'hidden', position: 'sticky', top: 84 }}>
          {!sel && (
            <div style={{ padding: '40px 20px', textAlign: 'center' }}>
              <Icon name="contact" size={32} style={{ color: 'var(--text-subtle)', marginBottom: 10 }} />
              <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>No clients yet</div>
              <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 4 }}>Add your first client to see their profile here.</div>
            </div>
          )}
          {sel && (
          <>
          <div style={{ background: 'var(--grad-hero)', padding: '20px 18px', borderBottom: '1px solid var(--border-subtle)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Avatar name={displayName} size="lg" />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 'var(--text-lg)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)', letterSpacing: '-0.01em' }}>{displayName}</div>
                <div style={{ marginTop: 4 }}><Badge tone={s.tone} dot>{s.label}</Badge></div>
              </div>
              {confirmDelete
                ? <div style={{ display: 'flex', gap: 5, flex: 'none' }}>
                    <button onClick={() => handleDeleteClient(sel.id)} disabled={deleting} style={{ height: 28, padding: '0 10px', background: 'var(--red-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-bold)', cursor: 'pointer' }}>{deleting ? '…' : 'Delete'}</button>
                    <button onClick={() => setConfirmDelete(false)} style={{ height: 28, padding: '0 10px', background: 'var(--slate-0)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer', color: 'var(--text-body)' }}>Cancel</button>
                  </div>
                : <div style={{ display: 'flex', gap: 5, flex: 'none' }}>
                    <button onClick={() => openEdit(sel)} title="Edit client" style={{ width: 30, height: 30, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--slate-0)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', cursor: 'pointer', color: 'var(--text-body)' }}>
                      <Icon name="pencil" size={15} />
                    </button>
                    <button onClick={() => setConfirmDelete(true)} title="Delete client" style={{ width: 30, height: 30, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--red-50)', border: '1px solid var(--red-200)', borderRadius: 'var(--radius-md)', cursor: 'pointer', color: 'var(--red-600)' }}>
                      <Icon name="trash-2" size={15} />
                    </button>
                  </div>
              }
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
              {[['mail', 'Email'], ['message-circle', 'WhatsApp'], ['calendar-plus', 'Meeting']].map(([ic, l]) => (
                <button key={l} onClick={() => {
                  if (ic === 'mail') {
                    if (sel.email) window.open(`mailto:${sel.email}`, '_blank');
                    else alert('Is client ka email nahi hai. Pehle client edit karke email add karein.');
                  } else if (ic === 'message-circle') {
                    // Prefer the dedicated WhatsApp number; fall back to phone.
                    const wa = ((sel.whatsapp || sel.phone) || '').replace(/\D/g, '');
                    if (wa) window.open(`https://wa.me/${wa}`, '_blank');
                    else alert('Is client ka WhatsApp/phone number nahi hai. Pehle client edit karke WhatsApp number add karein.');
                  } else if (ic === 'calendar-plus') {
                    // Jump to the Meetings tab so they can book right away.
                    setDetailTab('meetings');
                  }
                }} style={{ flex: 1, display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4, padding: '8px 0', background: 'var(--slate-0)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-body)' }}>
                  <Icon name={ic} size={17} style={{ color: 'var(--blue-600)' }} /> {l}
                </button>
              ))}
            </div>
            {/* Public portal link — creates (or reuses) a shareable token so the
                client can open their portal with NO login. */}
            <button onClick={async () => {
              const el = document.activeElement;
              const setLabel = (txt) => { if (el) el.querySelector('span') && (el.querySelector('span').textContent = txt); };
              try {
                let token = null;
                try { const { data } = await window.API.getClientInvite(sel.id); token = data?.token; } catch {}
                if (!token) { const { data } = await window.API.createClientInvite({ client_id: sel.id }); token = data?.token; }
                if (!token) { setLabel('Could not create link'); return; }
                const url = window.location.origin + '/portal.html?t=' + token;
                try { await navigator.clipboard.writeText(url); } catch {}
                setLabel('Link copied!');
                setTimeout(() => setLabel('Copy client portal link'), 1800);
              } catch { setLabel('Could not create link'); }
            }} style={{ width: '100%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7, height: 34, marginTop: 8, background: 'var(--blue-50)', color: 'var(--blue-700)', border: '1px solid var(--blue-200)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}>
              <Icon name="external-link" size={14} /> <span>Copy client portal link</span>
            </button>
          </div>
          <div style={{ padding: '6px 18px 14px' }}>
            <ProfileField icon="user" label="Contact" value={sel.name} />
            <ProfileField icon="at-sign" label="Email" value={sel.email || '—'} />
            <ProfileField icon="message-circle" label="WhatsApp" value={sel.whatsapp || sel.phone || '—'} />
            <ProfileField icon="globe" label="Website" value={sel.website || '—'} />
            <ProfileField icon="briefcase" label="Industry" value={sel.industry || '—'} />
            <ProfileField icon="banknote" label="Value" value={fmtValue(sel.monthly_value, sel.currency)} />
          </div>
          {/* Related tabs */}
          <div style={{ padding: '0 18px 18px' }}>
            <div style={{ display: 'flex', gap: 2, borderBottom: '1px solid var(--border-subtle)', marginBottom: 12 }}>
              {[['projects',`Projects (${cProjects.length})`],['invoices',`Invoices (${cInvoices.length})`],['notes',`Feedback (${cNotes.length})`],['meetings',`Meetings (${cMeetings.length})`]].map(([id,label]) => (
                <button key={id} onClick={() => setDetailTab(id)} style={{ padding: '8px 10px', background: 'none', border: 'none', borderBottom: detailTab===id?'2px solid var(--blue-600)':'2px solid transparent', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', color: detailTab===id?'var(--blue-700)':'var(--text-muted)', marginBottom: -1 }}>{label}</button>
              ))}
            </div>

            {detailTab === 'projects' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {cProjects.length === 0 && <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', padding: '12px 0', textAlign: 'center' }}>No projects for this client.</div>}
                {cProjects.map(p => (
                  <div key={p.id} onClick={() => window.TFNavigate && window.TFNavigate('projects')} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', cursor: 'pointer' }}>
                    <Icon name="folder-kanban" size={14} style={{ color: 'var(--blue-600)' }} />
                    <span style={{ flex: 1, fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>
                    <span style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)' }}>{p.progress || 0}%</span>
                  </div>
                ))}
              </div>
            )}

            {detailTab === 'invoices' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {cInvoices.length === 0 && <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', padding: '12px 0', textAlign: 'center' }}>No invoices for this client.</div>}
                {cInvoices.map(iv => (
                  <div key={iv.id} onClick={() => window.TFNavigate && window.TFNavigate('finance')} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', cursor: 'pointer' }}>
                    <Icon name="receipt" size={14} style={{ color: 'var(--text-muted)' }} />
                    <span style={{ flex: 1, fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{iv.number || iv.invoice_number || 'Invoice'}</span>
                    <span style={{ fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)' }}>{fmtValue(iv.amount || iv.total)}</span>
                    <Badge tone={iv.status==='paid'?'success':iv.status==='overdue'?'danger':'warning'} size="sm">{iv.status || 'unpaid'}</Badge>
                  </div>
                ))}
              </div>
            )}

            {detailTab === 'notes' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div style={{ display: 'flex', gap: 6 }}>
                  <input value={noteText} onChange={e => setNoteText(e.target.value)} onKeyDown={e => e.key==='Enter'&&addNote()} placeholder="Add note / feedback…" style={{ flex: 1, height: 34, padding: '0 10px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontSize: 'var(--text-xs)', fontFamily: 'var(--font-sans)', outline: 'none' }} />
                  <button onClick={addNote} style={{ height: 34, padding: '0 12px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-sans)' }}>Add</button>
                </div>
                {cNotes.length === 0 && <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', padding: '8px 0', textAlign: 'center' }}>No notes yet.</div>}
                {cNotes.map(n => (
                  <div key={n.id} style={{ padding: '8px 10px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', position: 'relative' }}>
                    <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-body)', lineHeight: 1.5, paddingRight: 18 }}>{n.body || n.note || n.content}</div>
                    <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)', marginTop: 3 }}>{n.created_at ? new Date(String(n.created_at).replace(' ','T')+'Z').toLocaleDateString('en-GB') : ''}</div>
                    <button onClick={() => delNote(n.id)} style={{ position: 'absolute', top: 6, right: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--red-400)' }}><Icon name="x" size={12} /></button>
                  </div>
                ))}
              </div>
            )}

            {detailTab === 'meetings' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, padding: '10px', background: 'var(--slate-50)', borderRadius: 'var(--radius-md)' }}>
                  <input value={mtg.title} onChange={e => setMtg(m => ({ ...m, title: e.target.value }))} placeholder="Meeting title (e.g. Monthly review)" style={{ height: 32, padding: '0 10px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', fontSize: 'var(--text-xs)', fontFamily: 'var(--font-sans)', outline: 'none' }} />
                  <input type="datetime-local" value={mtg.scheduled_at} onChange={e => setMtg(m => ({ ...m, scheduled_at: e.target.value }))} style={{ height: 32, padding: '0 10px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', fontSize: 'var(--text-xs)', fontFamily: 'var(--font-sans)', outline: 'none' }} />
                  <input value={mtg.location} onChange={e => setMtg(m => ({ ...m, location: e.target.value }))} placeholder="Location or video link (optional)" style={{ height: 32, padding: '0 10px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', fontSize: 'var(--text-xs)', fontFamily: 'var(--font-sans)', outline: 'none' }} />
                  <button onClick={bookMeeting} style={{ height: 32, background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-sans)' }}>Book meeting</button>
                </div>
                {cMeetings.length === 0 && <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', padding: '8px 0', textAlign: 'center' }}>No meetings yet.</div>}
                {cMeetings.map(m => (
                  <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
                    <Icon name="calendar-plus" size={14} style={{ color: 'var(--blue-600)', flexShrink: 0 }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{m.title}</div>
                      <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)' }}>{m.scheduled_at ? new Date(String(m.scheduled_at).replace(' ','T')+'Z').toLocaleString('en-GB',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'}) : ''}{m.location ? ' · ' + m.location : ''}</div>
                    </div>
                    <button onClick={() => delMeeting(m.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--red-400)', flexShrink: 0 }}><Icon name="x" size={13} /></button>
                  </div>
                ))}
              </div>
            )}
          </div>
          </>
          )}
        </Card>
      </div>
      <Modal open={modalOpen} onClose={() => { setModalOpen(false); setAddError(''); }} title="Add client" onSubmit={handleAddClient} loading={saving} submitLabel="Add client">
        {addError && (
          <div style={{ marginBottom: 14, padding: '8px 12px', borderRadius: 'var(--radius-md)', background: '#fff1f2', border: '1px solid #fecdd3', color: '#be123c', fontSize: 'var(--text-sm)' }}>
            {addError}
          </div>
        )}
        <div style={FF.row2}>
          <FormRow label="Contact name" required>
            <input style={FF.input} placeholder="Full name…" value={form.name} onChange={e => set('name', titleCase(e.target.value))} />
          </FormRow>
          <FormRow label="Company">
            <input style={FF.input} placeholder="Company name…" value={form.company} onChange={e => set('company', e.target.value)} />
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Email">
            <input style={FF.input} type="email" placeholder="email@company.com" value={form.email} onChange={e => set('email', e.target.value)} />
          </FormRow>
          <FormRow label="Website">
            <input style={FF.input} placeholder="company.com" value={form.website} onChange={e => set('website', e.target.value)} />
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="WhatsApp">
            <input style={FF.input} type="tel" placeholder="+92 300 1234567" value={form.whatsapp} onChange={e => set('whatsapp', e.target.value)} />
          </FormRow>
          <FormRow label="Phone">
            <input style={FF.input} type="tel" placeholder="Optional" value={form.phone} onChange={e => set('phone', e.target.value)} />
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Industry">
            <input style={FF.input} placeholder="SaaS, F&B…" value={form.industry} onChange={e => set('industry', e.target.value)} />
          </FormRow>
          <FormRow label="Monthly value">
            <div style={{ display: 'flex', gap: 8 }}>
              <select style={{ ...FF.select, flex: '0 0 88px' }} value={form.currency} onChange={e => set('currency', e.target.value)}>
                {CLIENT_CURRENCIES.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
              <input style={{ ...FF.input, flex: 1 }} type="number" placeholder="0" value={form.monthly_value} onChange={e => set('monthly_value', e.target.value)} />
            </div>
          </FormRow>
        </div>
        <FormRow label="Status">
          <select style={FF.select} value={form.status} onChange={e => set('status', e.target.value)}>
            <option value="lead">Lead</option>
            <option value="active">Active client</option>
            <option value="inactive">Inactive</option>
          </select>
        </FormRow>
      </Modal>

      <Modal open={editOpen} onClose={() => setEditOpen(false)} title="Edit client" onSubmit={handleUpdateClient} loading={editSaving} submitLabel="Save changes">
        {editError && (
          <div style={{ marginBottom: 14, padding: '8px 12px', borderRadius: 'var(--radius-md)', background: '#fff1f2', border: '1px solid #fecdd3', color: '#be123c', fontSize: 'var(--text-sm)' }}>
            {editError}
          </div>
        )}
        <div style={FF.row2}>
          <FormRow label="Contact name" required>
            <input style={FF.input} placeholder="Full name…" value={editForm.name || ''} onChange={e => setEF('name', titleCase(e.target.value))} />
          </FormRow>
          <FormRow label="Company">
            <input style={FF.input} placeholder="Company name…" value={editForm.company || ''} onChange={e => setEF('company', e.target.value)} />
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Email">
            <input style={FF.input} type="email" placeholder="email@company.com" value={editForm.email || ''} onChange={e => setEF('email', e.target.value)} />
          </FormRow>
          <FormRow label="Website">
            <input style={FF.input} placeholder="company.com" value={editForm.website || ''} onChange={e => setEF('website', e.target.value)} />
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="WhatsApp">
            <input style={FF.input} type="tel" placeholder="+92 300 1234567" value={editForm.whatsapp || ''} onChange={e => setEF('whatsapp', e.target.value)} />
          </FormRow>
          <FormRow label="Phone">
            <input style={FF.input} type="tel" placeholder="Optional" value={editForm.phone || ''} onChange={e => setEF('phone', e.target.value)} />
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Industry">
            <input style={FF.input} placeholder="SaaS, F&B…" value={editForm.industry || ''} onChange={e => setEF('industry', e.target.value)} />
          </FormRow>
          <FormRow label="Monthly value">
            <div style={{ display: 'flex', gap: 8 }}>
              <select style={{ ...FF.select, flex: '0 0 88px' }} value={editForm.currency || 'PKR'} onChange={e => setEF('currency', e.target.value)}>
                {CLIENT_CURRENCIES.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
              <input style={{ ...FF.input, flex: 1 }} type="number" placeholder="0" value={editForm.monthly_value || ''} onChange={e => setEF('monthly_value', e.target.value)} />
            </div>
          </FormRow>
        </div>
        <FormRow label="Status">
          <select style={FF.select} value={editForm.status || 'active'} onChange={e => setEF('status', e.target.value)}>
            <option value="lead">Lead</option>
            <option value="active">Active client</option>
            <option value="inactive">Inactive</option>
          </select>
        </FormRow>
      </Modal>
    </div>
  );
}

Object.assign(window, { CRM });

})();