/* global React, Card, Badge, Button, Avatar, Icon, ICONS, Field, sb */
const { useState, useEffect } = React;

const DEFAULT_ORIGINS = ['Indicação','Site','Instagram','LinkedIn','Google Ads','Evento','Outro'];

// ─── Google Calendar inline helper ───────────────────────────────────────────
// Returns: event object on success | { error: 'no_token' | 'scope' | 'api' | 'exception' }
async function clGcCreateEvent({ title, description, start, end, attendees = [] }) {
  try {
    const { data } = await window.sb.auth.getSession();
    const token = data?.session?.provider_token;
    if (!token) return { error: 'no_token' };
    const body = {
      summary: title, description,
      start: { dateTime: start, timeZone: 'America/Sao_Paulo' },
      end:   { dateTime: end,   timeZone: 'America/Sao_Paulo' },
      attendees: attendees.map(e => ({ email: e })),
      conferenceData: { createRequest: { requestId: 'inbrivvo-meet-' + Date.now(), conferenceSolutionKey: { type: 'hangoutsMeet' } } },
    };
    const res = await fetch('https://www.googleapis.com/calendar/v3/calendars/primary/events?conferenceDataVersion=1', {
      method: 'POST', headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' }, body: JSON.stringify(body),
    });
    if (res.status === 403) return { error: 'scope' };
    if (!res.ok) return { error: 'api', status: res.status };
    return await res.json();
  } catch(e) { return { error: 'exception', message: e.message }; }
}

// Delete a Google Calendar event by id
async function clGcDeleteEvent(gcEventId) {
  try {
    const { data } = await window.sb.auth.getSession();
    const token = data?.session?.provider_token;
    if (!token || !gcEventId) return false;
    const res = await fetch(`https://www.googleapis.com/calendar/v3/calendars/primary/events/${encodeURIComponent(gcEventId)}`, {
      method: 'DELETE', headers: { Authorization: `Bearer ${token}` },
    });
    return res.status === 204 || res.status === 200;
  } catch { return false; }
}

// Trigger re-auth asking for Calendar + Drive scopes (called when 403 detected)
function clTriggerCalendarReauth(pendingData) {
  try { localStorage.setItem('inbrivvo_pending_meeting', JSON.stringify({ ...pendingData, ts: Date.now() })); } catch {}
  window.__toast?.('Permissão do Google Calendar necessária. Você será redirecionada para autorizar — a reunião será criada automaticamente ao voltar.', { tone: 'info' });
  setTimeout(() => {
    window.sb.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: window.location.href,
        scopes: 'openid email profile https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/drive.file',
        queryParams: { access_type: 'offline', prompt: 'consent' },
      },
    }).catch(() => {});
  }, 2500);
}

// ─── Modal: Agendar reunião com Google Meet ───────────────────────────────────
function AgendarReuniaoModal({ client, onClose }) {
  const today = new Date().toISOString().slice(0, 10);
  const IS = { width:'100%', background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', borderRadius:8, padding:'9px 12px', color:'var(--fg-primary)', fontSize:13, fontFamily:'inherit', outline:'none', boxSizing:'border-box' };
  const LS = { fontSize:11, fontWeight:700, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.06em', display:'block', marginBottom:7 };

  // Check for pending meeting from before re-auth redirect
  const _pending = (() => { try { const p = JSON.parse(localStorage.getItem('inbrivvo_pending_meeting') || 'null'); return (p && p.clientId === client.id && (Date.now() - p.ts < 5 * 60 * 1000)) ? p : null; } catch { return null; } })();

  const [titulo,  setTitulo]  = useState(_pending?.title  || `Reunião com ${client.name}`);
  const [data,    setData]    = useState(_pending?.date   || today);
  const [hInicio, setHInicio] = useState(_pending?.hInicio || '10:00');
  const [hFim,    setHFim]    = useState(_pending?.hFim   || '11:00');
  const [saving,  setSaving]  = useState(false);
  const [meetLink, setMeetLink] = useState('');

  // Auto-resume: if pending matched, attempt to create immediately after mount
  useEffect(() => {
    if (_pending) {
      localStorage.removeItem('inbrivvo_pending_meeting');
      setTimeout(() => agendar(), 800);
    }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  // Auto-update hFim when hInicio changes (+1h, cap at 23:30)
  function handleHInicio(val) {
    setHInicio(val);
    const [h, m] = val.split(':').map(Number);
    const nextH = Math.min(h + 1, 23);
    setHFim(`${String(nextH).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
  }

  async function agendar() {
    if (!titulo.trim()) { window.__toast?.('Informe o título', { tone:'danger' }); return; }
    setSaving(true);
    const attendees = client.email ? [client.email] : [];
    const ev = await clGcCreateEvent({
      title: titulo.trim(),
      description: `Reunião agendada via inBrivvo com o cliente ${client.name}.`,
      start: `${data}T${hInicio}:00`,
      end:   `${data}T${hFim}:00`,
      attendees,
    });
    setSaving(false);

    // Scope/auth error → trigger re-auth and save pending
    if (ev?.error === 'scope' || ev?.error === 'no_token') {
      clTriggerCalendarReauth({ clientId: client.id, clientName: client.name, clientEmail: client.email || '', title: titulo.trim(), date: data, hInicio, hFim });
      return;
    }
    if (!ev || ev?.error) { window.__toast?.('Erro ao criar reunião. Tente novamente.', { tone:'danger' }); return; }
    const link = ev.hangoutLink || ev.conferenceData?.entryPoints?.find(p => p.entryPointType === 'video')?.uri || '';
    // Save meeting to localStorage so it appears in agenda history
    try {
      const key = 'inbrivvo_meetings';
      const existing = JSON.parse(localStorage.getItem(key) || '[]');
      existing.unshift({
        id: ev.id || ('meet-' + Date.now()),
        clientId: client.id,
        clientName: client.name,
        title: titulo.trim(),
        date: data,
        hInicio, hFim,
        meetLink: link,
        gcEventId: ev.id,
        createdAt: new Date().toISOString(),
      });
      localStorage.setItem(key, JSON.stringify(existing.slice(0, 100)));
    } catch {}
    window.__toast?.('Reunião criada no Google Calendar!', { tone:'success' });
    if (link) { setMeetLink(link); return; }
    onClose();
  }

  if (meetLink) {
    return (
      <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(8,12,28,0.7)', backdropFilter:'blur(6px)', zIndex:300, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
        <div onClick={e=>e.stopPropagation()} style={{ width:'min(420px,100%)', background:'var(--bg-surface)', border:'1px solid var(--border-strong)', borderRadius:16, padding:28, boxShadow:'0 24px 64px rgba(0,0,0,0.5)', textAlign:'center' }}>
          <div style={{ fontSize:44, marginBottom:12 }}>📹</div>
          <h3 style={{ margin:'0 0 6px', fontSize:17, fontWeight:700 }}>Reunião criada!</h3>
          <p style={{ fontSize:13, color:'var(--fg-muted)', marginBottom:6 }}>
            {client.email ? `Convite enviado para ${client.email}` : 'Evento criado no Google Calendar'}
          </p>
          <p style={{ fontSize:12, color:'var(--fg-muted)', marginBottom:16 }}>Link Google Meet:</p>
          <div style={{ background:'var(--bg-elevated)', borderRadius:8, padding:'10px 14px', fontFamily:'var(--font-mono,monospace)', fontSize:11, color:'var(--fg-primary)', wordBreak:'break-all', border:'1px solid var(--border-subtle)', marginBottom:18, textAlign:'left' }}>{meetLink}</div>
          <div style={{ display:'flex', gap:10, justifyContent:'center' }}>
            <Button variant="secondary" onClick={() => { navigator.clipboard?.writeText(meetLink); window.__toast?.('Link copiado!', { tone:'success' }); }}>Copiar link</Button>
            <Button onClick={onClose}>Fechar</Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(8,12,28,0.7)', backdropFilter:'blur(6px)', zIndex:300, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
      <div onClick={e=>e.stopPropagation()} style={{ width:'min(460px,100%)', background:'var(--bg-surface)', border:'1px solid var(--border-strong)', borderRadius:16, boxShadow:'0 24px 64px rgba(0,0,0,0.5)', overflow:'hidden' }}>
        <div style={{ padding:'18px 22px', borderBottom:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize:16, fontWeight:700 }}>📹 Agendar reunião</div>
            <div style={{ fontSize:12, color:'var(--fg-muted)', marginTop:2 }}>Gera link Google Meet + convida {client.name}</div>
          </div>
          <button onClick={onClose} style={{ background:'transparent', border:'none', color:'var(--fg-muted)', cursor:'pointer', fontSize:22 }}>×</button>
        </div>
        <div style={{ padding:22, display:'flex', flexDirection:'column', gap:14 }}>
          <div><label style={LS}>Título</label><input value={titulo} onChange={e=>setTitulo(e.target.value)} style={IS}/></div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12 }}>
            <div><label style={LS}>Data</label><input type="date" value={data} onChange={e=>setData(e.target.value)} style={IS}/></div>
            <div><label style={LS}>Início</label><input type="time" value={hInicio} onChange={e=>handleHInicio(e.target.value)} style={IS}/></div>
            <div><label style={LS}>Fim</label><input type="time" value={hFim} onChange={e=>setHFim(e.target.value)} style={IS}/></div>
          </div>
          {client.email && (
            <div style={{ padding:'10px 14px', borderRadius:8, background:'rgba(0,137,123,0.08)', border:'1px solid rgba(0,137,123,0.25)', fontSize:12, color:'var(--fg-secondary)', display:'flex', alignItems:'center', gap:8 }}>
              <span>✉️</span> Convite será enviado para <strong>{client.email}</strong>
            </div>
          )}
          {!client.email && (
            <div style={{ padding:'10px 14px', borderRadius:8, background:'rgba(250,173,20,0.08)', border:'1px solid rgba(250,173,20,0.25)', fontSize:12, color:'var(--fg-muted)' }}>
              ⚠️ Nenhum e-mail cadastrado para este cliente. O evento será criado sem convidado.
            </div>
          )}
        </div>
        <div style={{ padding:'14px 22px', borderTop:'1px solid var(--border-subtle)', display:'flex', justifyContent:'flex-end', gap:10 }}>
          <Button variant="secondary" onClick={onClose}>Cancelar</Button>
          <Button onClick={agendar} style={{ opacity:saving?0.6:1, pointerEvents:saving?'none':'auto', background:'#00897b' }}>
            {saving ? 'Agendando…' : '📹 Agendar com Meet'}
          </Button>
        </div>
      </div>
    </div>
  );
}

function rowToClient(row) {
  const ltv = row.ltv || row.value || 0;
  return {
    id:                row.id,
    name:              row.name || '',
    contact:           row.contact || '',
    email:             row.email || '',
    phone:             row.phone || '',
    company:           row.company || row.name || '',
    city:              row.city || '',
    status:            row.status || 'ativo',
    projects:          row.projects_count || 0,
    ltv:               ltv ? 'R$ ' + Number(ltv).toLocaleString('pt-BR') : 'R$ 0',
    rawLtv:            ltv,
    tag:               row.tag_category || 'Standard',
    origin:            row.origin || 'Indicação',
    notes:             row.notes || '',
    segmento:          row.segmento || '',
    site:              row.site || '',
    instagram:         row.instagram || '',
    documento:         row.documento || '',
    inscricaoEstadual: row.inscricao_estadual || '',
    taxa:              row.taxa || 0,
  };
}

function clientToRow(form, userId) {
  return {
    user_id:            userId,
    name:               form.name,
    email:              form.email || null,
    phone:              form.phone || null,
    company:            form.name,
    status:             form.status,
    notes:              form.notes || null,
    value:              form.rawLtv || 0,
    projects_count:     form.projects || 0,
    contact:            form.contact || null,
    city:               form.city || null,
    segmento:           form.segmento || null,
    site:               form.site || null,
    instagram:          form.instagram || null,
    documento:          form.documento || null,
    inscricao_estadual: form.inscricaoEstadual || null,
    taxa:               form.taxa || 0,
    origin:             form.origin || 'Indicação',
    tag_category:       form.tag || 'Standard',
  };
}

function OrigemSelector({ value, origins, onChange, onAddOrigin, IS }) {
  const [adding,  setAdding]  = useState(false);
  const [newOrig, setNewOrig] = useState('');
  function confirm() {
    const v = newOrig.trim();
    if (!v) return;
    onAddOrigin(v);
    onChange(v);
    setNewOrig('');
    setAdding(false);
  }
  return (
    <div>
      <select value={value} onChange={e => onChange(e.target.value)} style={{ ...IS, cursor: 'pointer' }}>
        {origins.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
      {adding ? (
        <div style={{ display: 'flex', gap: 6, marginTop: 7 }}>
          <input autoFocus value={newOrig} onChange={e => setNewOrig(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') confirm(); if (e.key === 'Escape') { setAdding(false); setNewOrig(''); }}} placeholder="Nome da nova origem…" style={{ ...IS, flex: 1 }}/>
          <button onClick={confirm} style={{ padding: '7px 12px', border: 'none', background: 'var(--primary)', color: '#fff', borderRadius: 8, cursor: 'pointer', fontSize: 13, fontFamily: 'inherit', fontWeight: 600 }}>OK</button>
          <button onClick={() => { setAdding(false); setNewOrig(''); }} style={{ padding: '7px 10px', border: '1px solid var(--border-subtle)', background: 'transparent', color: 'var(--fg-muted)', borderRadius: 8, cursor: 'pointer', fontSize: 13 }}>✕</button>
        </div>
      ) : (
        <button onClick={() => setAdding(true)} style={{ marginTop: 7, background: 'transparent', border: 'none', color: 'var(--accent-primary)', cursor: 'pointer', fontSize: 11, fontWeight: 600, padding: 0, fontFamily: 'inherit' }}>+ Adicionar nova origem</button>
      )}
    </div>
  );
}

function ClientFilterPop({ label, icon, options, selected, onChange }) {
  const [open, setOpen] = useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const close = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [open]);
  const allOn = selected.size === options.length;
  function toggle(v) { const n = new Set(selected); n.has(v) ? n.delete(v) : n.add(v); onChange(n); }
  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <Button variant="secondary" icon={icon} onClick={() => setOpen(o => !o)}>
        {label}{!allOn && <span style={{ marginLeft: 6, background: 'var(--accent-primary)', color: '#fff', fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 700, padding: '1px 5px', borderRadius: 4 }}>{selected.size}</span>}
      </Button>
      {open && (
        <div style={{ position: 'absolute', top: 'calc(100% + 6px)', left: 0, zIndex: 60, width: 200, background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', borderRadius: 10, boxShadow: '0 16px 40px rgba(0,0,0,0.5)', overflow: 'hidden' }}>
          <div style={{ padding: '10px 12px', borderBottom: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{label}</span>
            <button onClick={() => onChange(new Set(allOn ? [] : options.map(o => o.v)))} style={{ background: 'transparent', border: 'none', cursor: 'pointer', fontSize: 11, color: 'var(--accent-primary)', fontWeight: 600 }}>{allOn ? 'Limpar' : 'Todos'}</button>
          </div>
          {options.map(o => {
            const checked = selected.has(o.v);
            return (
              <button key={o.v} onClick={() => toggle(o.v)} style={{ width: '100%', background: 'transparent', border: 'none', cursor: 'pointer', padding: '9px 12px', display: 'flex', alignItems: 'center', gap: 10, textAlign: 'left' }} onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-elevated)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                <div style={{ width: 16, height: 16, borderRadius: 4, border: `1.5px solid ${checked ? 'var(--accent-primary)' : 'var(--border-strong)'}`, background: checked ? 'var(--accent-primary)' : 'transparent', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                  {checked && <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5l2.5 2.5 4-4" stroke="#fff" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                </div>
                {o.dot && <span style={{ width: 8, height: 8, borderRadius: '50%', background: o.dot, flexShrink: 0 }}/>}
                <span style={{ fontSize: 13, color: 'var(--fg-primary)' }}>{o.l}</span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

function ClienteDetailPanel({ client, origins, onClose, onSave, onAddOrigin }) {
  const [form,           setForm]           = useState({ ...client });
  const [saving,         setSaving]         = useState(false);
  const [showMeet,       setShowMeet]       = useState(false);
  const [clientMeetings, setClientMeetings] = useState(() => {
    try { return (JSON.parse(localStorage.getItem('inbrivvo_meetings') || '[]')).filter(m => m.clientId === client.id || m.clientName === client.name); }
    catch { return []; }
  });
  const [cancellingId,   setCancellingId]   = useState(null);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  async function cancelMeeting(meeting) {
    if (cancellingId) return;
    setCancellingId(meeting.id);
    // Remove from localStorage
    try {
      const all = JSON.parse(localStorage.getItem('inbrivvo_meetings') || '[]');
      localStorage.setItem('inbrivvo_meetings', JSON.stringify(all.filter(m => m.id !== meeting.id)));
    } catch {}
    // Remove from Google Calendar if we have the event id
    if (meeting.gcEventId) {
      const deleted = await clGcDeleteEvent(meeting.gcEventId);
      if (deleted) window.__toast?.('Reunião cancelada e removida do Google Calendar.', { tone: 'success' });
      else window.__toast?.('Reunião removida localmente. Remova manualmente do Google Calendar se necessário.', { tone: 'info' });
    } else {
      window.__toast?.('Reunião cancelada.', { tone: 'success' });
    }
    setClientMeetings(prev => prev.filter(m => m.id !== meeting.id));
    setCancellingId(null);
  }

  const STATUS_OPTS = [{ v:'ativo',l:'Ativo',c:'#22C55E' },{ v:'lead',l:'Lead',c:'#FADB14' },{ v:'pausa',l:'Em pausa',c:'#7A859A' },{ v:'inativo',l:'Inativo',c:'#EF4444' }];
  const TAG_COLORS  = { Premium:'#597EF7', Recorrente:'#36CFC9', Standard:'#A0D911', Lead:'#FADB14' };
  const IS = { width: '100%', background: 'var(--bg-elevated)', border: '1px solid var(--border-subtle)', borderRadius: 8, padding: '7px 10px', color: 'var(--fg-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' };
  const LS = { fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', display: 'block', marginBottom: 6 };

  async function handleSave() {
    setSaving(true);
    const { error } = await sb.from('clients').update({
      name: form.name, email: form.email, phone: form.phone, status: form.status, notes: form.notes,
      contact: form.contact, city: form.city, segmento: form.segmento, site: form.site,
      instagram: form.instagram, documento: form.documento, inscricao_estadual: form.inscricaoEstadual,
      taxa: form.taxa || 0, origin: form.origin, tag_category: form.tag,
    }).eq('id', client.id);
    setSaving(false);
    if (error) { window.__toast?.(error.message, { tone: 'danger' }); return; }
    onSave(form);
  }

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(8,12,28,0.55)', backdropFilter: 'blur(4px)', zIndex: 200, display: 'flex', alignItems: 'stretch', justifyContent: 'flex-end' }}>
      <div onClick={e => e.stopPropagation()} style={{ width: 500, display: 'flex', flexDirection: 'column', background: 'var(--bg-surface)', borderLeft: '1px solid var(--border-subtle)', boxShadow: '-20px 0 60px rgba(0,0,0,0.4)' }}>
        <div style={{ padding: '20px 22px', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <Avatar name={form.name} size={48} idx={0}/>
            <div><div style={{ fontSize: 17, fontWeight: 700, lineHeight: 1.2 }}>{form.name || 'Cliente'}</div><div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 3 }}>{form.city || form.segmento || '—'}</div></div>
          </div>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <button onClick={() => setShowMeet(true)} title="Agendar reunião com Google Meet" style={{ display:'flex', alignItems:'center', gap:6, padding:'7px 12px', borderRadius:8, border:'1px solid rgba(0,137,123,0.4)', background:'rgba(0,137,123,0.08)', color:'#00897b', fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:'inherit' }}>
              📹 Agendar reunião
            </button>
            <button onClick={onClose} style={{ background: 'transparent', border: 'none', color: 'var(--fg-muted)', cursor: 'pointer', padding: 4 }}><Icon d={ICONS.x} size={18}/></button>
          </div>
        </div>
        <div style={{ padding: '12px 22px', borderBottom: '1px solid var(--border-subtle)', display: 'flex', background: 'var(--bg-elevated)', flexShrink: 0 }}>
          {[{ v:form.projects,l:'Projetos' },{ v:form.ltv,l:'LTV' },{ v:form.taxa?form.taxa+'%':'—',l:'Taxa' },{ v:form.origin,l:'Origem' }].map((s, i, arr) => (
            <div key={s.l} style={{ flex: 1, textAlign: 'center', borderRight: i < arr.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 700 }}>{s.v}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>{s.l}</div>
            </div>
          ))}
        </div>
        <div style={{ flex: 1, overflow: 'auto' }}>
          <div style={{ padding: '16px 22px 18px', display: 'flex', flexDirection: 'column', gap: 14, borderBottom: '1px solid var(--border-subtle)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Informações básicas</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div><span style={LS}>Nome da empresa</span><input value={form.name} onChange={e => set('name', e.target.value)} style={IS}/></div>
              <div><span style={LS}>Segmento</span><input value={form.segmento||''} onChange={e => set('segmento', e.target.value)} placeholder="Ex: Cosméticos…" style={IS}/></div>
              <div><span style={LS}>Pessoa de contato</span><input value={form.contact||''} onChange={e => set('contact', e.target.value)} style={IS}/></div>
              <div><span style={LS}>Cidade / Localização</span><input value={form.city||''} onChange={e => set('city', e.target.value)} style={IS}/></div>
              <div><span style={LS}>E-mail</span><input value={form.email||''} onChange={e => set('email', e.target.value)} style={IS}/></div>
              <div><span style={LS}>Telefone</span><input value={form.phone||''} onChange={e => set('phone', e.target.value)} style={IS}/></div>
            </div>
          </div>
          <div style={{ padding: '16px 22px 18px', display: 'flex', flexDirection: 'column', gap: 12, borderBottom: '1px solid var(--border-subtle)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Presença digital</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div><span style={LS}>Site</span><input value={form.site||''} onChange={e => set('site', e.target.value)} placeholder="exemplo.com.br" style={IS}/></div>
              <div><span style={LS}>Instagram</span><input value={form.instagram||''} onChange={e => set('instagram', e.target.value)} placeholder="@perfil" style={IS}/></div>
            </div>
          </div>
          <div style={{ padding: '16px 22px 18px', display: 'flex', flexDirection: 'column', gap: 12, borderBottom: '1px solid var(--border-subtle)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Documentos</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div><span style={LS}>CPF / CNPJ</span><input value={form.documento||''} onChange={e => set('documento', e.target.value)} placeholder="00.000.000/0001-00" style={IS}/></div>
              <div><span style={LS}>Inscrição Estadual</span><input value={form.inscricaoEstadual||''} onChange={e => set('inscricaoEstadual', e.target.value)} placeholder="Opcional" style={IS}/></div>
            </div>
          </div>
          <div style={{ padding: '16px 22px 18px', display: 'flex', flexDirection: 'column', gap: 16, borderBottom: '1px solid var(--border-subtle)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Comercial</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 110px', gap: 12, alignItems: 'start' }}>
              <div><span style={LS}>Origem do cliente</span><OrigemSelector value={form.origin||'Indicação'} origins={origins} onChange={v => set('origin', v)} onAddOrigin={onAddOrigin} IS={IS}/></div>
              <div><span style={LS}>Taxa (%)</span><div style={{ position: 'relative' }}><input type="number" min="0" max="100" step="0.5" value={form.taxa??''} onChange={e => set('taxa', e.target.value===''?'':Number(e.target.value))} placeholder="0" style={{ ...IS, paddingRight: 28 }}/><span style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', fontSize: 13, color: 'var(--fg-muted)', pointerEvents: 'none' }}>%</span></div></div>
            </div>
            <div><span style={LS}>Status</span><div style={{ display: 'flex', gap: 8 }}>{STATUS_OPTS.map(s => <button key={s.v} onClick={() => set('status', s.v)} style={{ flex: 1, padding: '7px 8px', borderRadius: 8, fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', background: form.status===s.v?s.c+'22':'var(--bg-elevated)', color: form.status===s.v?s.c:'var(--fg-muted)', border: `1.5px solid ${form.status===s.v?s.c+'66':'var(--border-subtle)'}` }}>{s.l}</button>)}</div></div>
            <div><span style={LS}>Categoria</span><div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{Object.entries(TAG_COLORS).map(([tag, c]) => <button key={tag} onClick={() => set('tag', tag)} style={{ padding: '6px 14px', borderRadius: 20, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', background: form.tag===tag?c+'22':'var(--bg-elevated)', color: form.tag===tag?c:'var(--fg-muted)', border: `1.5px solid ${form.tag===tag?c+'66':'var(--border-subtle)'}` }}>{tag}</button>)}</div></div>
          </div>
          <div style={{ padding: '16px 22px 22px' }}>
            <span style={LS}>Observações</span>
            <textarea value={form.notes||''} onChange={e => set('notes', e.target.value)} placeholder="Histórico de conversas, preferências, contexto importante…" rows={4} style={{ ...IS, resize: 'vertical', lineHeight: 1.55 }}/>
          </div>
          {/* ─ Reuniões agendadas ─ */}
          {clientMeetings.length > 0 && (
            <div style={{ padding: '0 22px 22px', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                Reuniões agendadas
              </div>
              {clientMeetings.slice(0, 10).map((m) => {
                const isCancelling = cancellingId === m.id;
                const isPast = m.date < new Date().toISOString().slice(0, 10);
                return (
                  <div key={m.id} style={{ display: 'flex', gap: 0, borderRadius: 10, overflow: 'hidden', border: `1px solid ${isPast ? 'var(--border-subtle)' : 'rgba(0,137,123,0.3)'}`, opacity: isCancelling ? 0.5 : 1, transition: 'opacity 200ms' }}>
                    <span style={{ width: 3, flexShrink: 0, background: isPast ? 'var(--border-strong)' : '#00897b' }}/>
                    <div style={{ flex: 1, padding: '10px 12px', background: isPast ? 'var(--bg-elevated)' : 'rgba(0,137,123,0.06)', minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.title}</div>
                          <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>
                            {m.date} · {m.hInicio}–{m.hFim}
                            {isPast && <span style={{ marginLeft: 6, color: 'var(--fg-muted)', fontStyle: 'italic' }}>passada</span>}
                          </div>
                          {m.meetLink && (
                            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
                              <a href={m.meetLink} target="_blank" rel="noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 5, background: 'rgba(26,115,232,0.1)', color: '#1a73e8', fontSize: 11, fontWeight: 600, textDecoration: 'none', border: '1px solid rgba(26,115,232,0.2)' }}>
                                Entrar no Meet ↗
                              </a>
                              <button onClick={() => { navigator.clipboard?.writeText(m.meetLink); window.__toast?.('Link copiado!', { tone: 'success' }); }} title="Copiar link" style={{ background: 'transparent', border: 'none', color: 'var(--fg-muted)', cursor: 'pointer', fontSize: 14, padding: '2px 4px' }}>⎘</button>
                            </div>
                          )}
                        </div>
                        {/* Cancel button */}
                        <button
                          onClick={() => cancelMeeting(m)}
                          disabled={isCancelling}
                          title="Cancelar reunião"
                          style={{ flexShrink: 0, display: 'flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 6, border: '1px solid rgba(239,68,68,0.35)', background: 'rgba(239,68,68,0.06)', color: '#EF4444', fontSize: 11, fontWeight: 600, cursor: isCancelling ? 'default' : 'pointer', fontFamily: 'inherit', transition: 'all 150ms', marginTop: 2 }}
                          onMouseEnter={e => { if (!isCancelling) e.currentTarget.style.background = 'rgba(239,68,68,0.14)'; }}
                          onMouseLeave={e => { e.currentTarget.style.background = 'rgba(239,68,68,0.06)'; }}
                        >
                          {isCancelling ? '…' : '✕ Cancelar'}
                        </button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
        <div style={{ padding: '12px 22px', borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'flex-end', gap: 8, flexShrink: 0 }}>
          <Button variant="secondary" onClick={onClose}>Fechar</Button>
          <Button icon="check" onClick={handleSave} style={{ opacity: saving ? 0.6 : 1, pointerEvents: saving ? 'none' : 'auto' }}>{saving ? 'Salvando…' : 'Salvar alterações'}</Button>
        </div>
      </div>
      {showMeet && <AgendarReuniaoModal client={form} onClose={() => {
        setShowMeet(false);
        // Refresh meetings list after modal closes (new meeting may have been saved)
        try {
          const refreshed = (JSON.parse(localStorage.getItem('inbrivvo_meetings') || '[]')).filter(m => m.clientId === client.id || m.clientName === client.name);
          setClientMeetings(refreshed);
        } catch {}
      }} />}
    </div>
  );
}

function NovoClienteModal({ origins, onClose, onCreate, onAddOrigin }) {
  const [form, setForm] = useState({ name:'', contact:'', email:'', phone:'', city:'', segmento:'', site:'', instagram:'', documento:'', inscricaoEstadual:'', status:'lead', tag:'Standard', origin:origins[0]||'Indicação', taxa:'', notes:'' });
  const [saving, setSaving] = useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  async function handleCreate() {
    if (!form.name.trim()) { window.__toast?.('Informe o nome da empresa', { tone: 'danger' }); return; }
    setSaving(true);
    const { data: { user } } = await sb.auth.getUser();
    const { data, error } = await sb.from('clients').insert({
      user_id: user.id, name: form.name.trim(), email: form.email||null, phone: form.phone||null,
      company: form.name.trim(), status: form.status, notes: form.notes||null,
      contact: form.contact||null, city: form.city||null, segmento: form.segmento||null,
      site: form.site||null, instagram: form.instagram||null,
      documento: form.documento||null, inscricao_estadual: form.inscricaoEstadual||null,
      taxa: form.taxa===''?0:Number(form.taxa), origin: form.origin, tag_category: form.tag,
    }).select().single();
    setSaving(false);
    if (error) { window.__toast?.(error.message, { tone: 'danger' }); return; }
    onCreate(rowToClient(data));
  }

  const IS = { width: '100%', background: 'var(--bg-elevated)', border: '1px solid var(--border-subtle)', borderRadius: 8, padding: '8px 12px', color: 'var(--fg-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' };
  const LS = { fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', display: 'block', marginBottom: 8 };
  const STATUS_OPTS = [{ v:'ativo',c:'#22C55E',l:'Ativo' },{ v:'lead',c:'#FADB14',l:'Lead' },{ v:'pausa',c:'#7A859A',l:'Em pausa' }];
  const TAG_COLORS  = { Premium:'#597EF7', Recorrente:'#36CFC9', Standard:'#A0D911', Lead:'#FADB14' };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(8,12,28,0.65)', backdropFilter: 'blur(6px)', zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: 'min(600px,100%)', maxHeight: '90vh', display: 'flex', flexDirection: 'column', background: 'var(--bg-surface)', border: '1px solid var(--border-strong)', borderRadius: 16, boxShadow: '0 24px 64px rgba(0,0,0,0.5)', overflow: 'hidden' }}>
        <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
          <div><div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--geek-blue-300)' }}>Clientes</div><h2 style={{ margin: '4px 0 0', fontSize: 18, fontWeight: 700 }}>Novo cliente</h2></div>
          <button onClick={onClose} style={{ background: 'transparent', border: 'none', color: 'var(--fg-muted)', cursor: 'pointer', padding: 4 }}><Icon d={ICONS.x} size={18}/></button>
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12 }}>Informações básicas</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <div style={{ gridColumn: '1/-1' }}><span style={LS}>Nome da empresa *</span><input autoFocus value={form.name} onChange={e => set('name', e.target.value)} onKeyDown={e => e.key==='Enter'&&handleCreate()} placeholder="Ex: Astra Cosméticos" style={IS}/></div>
              <div><span style={LS}>Segmento</span><input value={form.segmento} onChange={e => set('segmento', e.target.value)} placeholder="Ex: Cosméticos, Tecnologia…" style={IS}/></div>
              <div><span style={LS}>Pessoa de contato</span><input value={form.contact} onChange={e => set('contact', e.target.value)} placeholder="Nome do responsável" style={IS}/></div>
              <div><span style={LS}>E-mail</span><input value={form.email} onChange={e => set('email', e.target.value)} placeholder="email@empresa.com" style={IS}/></div>
              <div><span style={LS}>Telefone</span><input value={form.phone} onChange={e => set('phone', e.target.value)} placeholder="(11) 99999-0000" style={IS}/></div>
              <div><span style={LS}>Cidade</span><input value={form.city} onChange={e => set('city', e.target.value)} placeholder="São Paulo · SP" style={IS}/></div>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12 }}>Comercial</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 110px', gap: 14, marginBottom: 14 }}>
              <div><span style={LS}>Origem</span><OrigemSelector value={form.origin} origins={origins} onChange={v => set('origin', v)} onAddOrigin={onAddOrigin} IS={IS}/></div>
              <div><span style={LS}>Taxa (%)</span><div style={{ position: 'relative' }}><input type="number" min="0" max="100" step="0.5" value={form.taxa} onChange={e => set('taxa', e.target.value)} placeholder="0" style={{ ...IS, paddingRight: 28 }}/><span style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', fontSize: 13, color: 'var(--fg-muted)', pointerEvents: 'none' }}>%</span></div></div>
            </div>
            <div style={{ marginBottom: 14 }}><span style={LS}>Status inicial</span><div style={{ display: 'flex', gap: 8 }}>{STATUS_OPTS.map(s => <button key={s.v} onClick={() => set('status', s.v)} style={{ flex: 1, padding: '8px 10px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', background: form.status===s.v?s.c+'22':'var(--bg-elevated)', color: form.status===s.v?s.c:'var(--fg-muted)', border: `1.5px solid ${form.status===s.v?s.c+'66':'var(--border-subtle)'}` }}>{s.l}</button>)}</div></div>
            <div><span style={LS}>Categoria</span><div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>{Object.entries(TAG_COLORS).map(([tag, c]) => <button key={tag} onClick={() => set('tag', tag)} style={{ padding: '6px 14px', borderRadius: 20, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', background: form.tag===tag?c+'22':'var(--bg-elevated)', color: form.tag===tag?c:'var(--fg-muted)', border: `1.5px solid ${form.tag===tag?c+'66':'var(--border-subtle)'}` }}>{tag}</button>)}</div></div>
          </div>
        </div>
        <div style={{ padding: '14px 24px', borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'flex-end', gap: 10, background: 'var(--bg-elevated)', flexShrink: 0 }}>
          <Button variant="ghost" onClick={onClose}>Cancelar</Button>
          <Button icon="plus" onClick={handleCreate} style={{ opacity: saving ? 0.6 : 1, pointerEvents: saving ? 'none' : 'auto' }}>{saving ? 'Criando…' : 'Criar cliente'}</Button>
        </div>
      </div>
    </div>
  );
}

function Clients({ onNav }) {
  const [clients,        setClients]        = useState([]);
  const [loading,        setLoading]        = useState(true);
  const [view,           setView]           = useState('grid');
  const [q,              setQ]              = useState('');
  const [selectedClient, setSelectedClient] = useState(null);
  const [creatingClient, setCreatingClient] = useState(false);
  const [origins,        setOrigins]        = useState(DEFAULT_ORIGINS);
  const [statusFilter,   setStatusFilter]   = useState(new Set(['ativo','lead','pausa']));
  const [originFilter,   setOriginFilter]   = useState(new Set(DEFAULT_ORIGINS));
  const [menuOpen,       setMenuOpen]       = useState(null);
  const [confirmDelete,  setConfirmDelete]  = useState(null);
  const [deleting,       setDeleting]       = useState(false);

  async function handleDeleteClient(clientId) {
    setDeleting(true);
    const { error } = await sb.from('clients').delete().eq('id', clientId);
    if (error) {
      window.__toast?.(error.message, { tone: 'danger' });
    } else {
      setClients(prev => prev.filter(c => c.id !== clientId));
      window.__toast?.('Cliente excluído com sucesso', { tone: 'success' });
    }
    setDeleting(false);
    setConfirmDelete(null);
    setMenuOpen(null);
  }

  useEffect(() => {
    (async () => {
      const { data, error } = await sb.from('clients').select('*').order('created_at', { ascending: false });
      if (error) { window.__toast?.(error.message, { tone: 'danger' }); }
      const mapped = (data || []).map(rowToClient);
      setClients(mapped);
      const allOrigins = [...new Set([...DEFAULT_ORIGINS, ...mapped.map(c => c.origin).filter(Boolean)])];
      setOrigins(allOrigins);
      setOriginFilter(new Set(allOrigins));
      setLoading(false);
    })();
  }, []);

  function addOrigin(v) {
    const t = v.trim();
    if (!t || origins.includes(t)) return;
    setOrigins(prev => [...prev, t]);
    setOriginFilter(prev => new Set([...prev, t]));
  }

  const filtered = clients.filter(c =>
    statusFilter.has(c.status) &&
    (originFilter.has(c.origin) || !c.origin) &&
    (!q || c.name.toLowerCase().includes(q.toLowerCase()) || (c.contact||'').toLowerCase().includes(q.toLowerCase()))
  );

  const counts = { todos: clients.length, ativo: clients.filter(c => c.status==='ativo').length, lead: clients.filter(c => c.status==='lead').length, pausa: clients.filter(c => c.status==='pausa').length };

  function saveClient(updated) {
    setClients(prev => prev.map(c => c.id === updated.id ? updated : c));
    setSelectedClient(null);
    window.__toast?.('Cliente atualizado', { tone: 'success' });
  }

  function createClient(data) {
    setClients(prev => [data, ...prev]);
    setCreatingClient(false);
    window.__toast?.('Cliente adicionado', { tone: 'success' });
  }

  const statusBadgeTone = s => s==='ativo'?'success':s==='lead'?'warning':'neutral';

  return (
    <div style={{ padding: '24px 28px', display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14 }}>
        {[
          { l:'Total de clientes', v:counts.todos, d:'todos os clientes',  t:'success' },
          { l:'Ativos',            v:counts.ativo, d:'em andamento',       t:'brand'   },
          { l:'Leads',             v:counts.lead,  d:'aguardando',         t:'warning' },
          { l:'Em pausa',          v:counts.pausa, d:'pausados',           t:'neutral' },
        ].map(s => (
          <Card key={s.l} padding={18}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>{s.l}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, marginTop: 8, letterSpacing: '-0.02em' }}>{loading ? '…' : s.v}</div>
            <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 4 }}>{s.d}</div>
          </Card>
        ))}
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
        <div style={{ width: 320 }}><Field icon="search" placeholder="Buscar por nome ou contato…" value={q} onChange={e => setQ(e.target.value)}/></div>
        <ClientFilterPop label="Status" icon="filter" selected={statusFilter} onChange={setStatusFilter} options={[{ v:'ativo',l:'Ativo',dot:'#22C55E' },{ v:'lead',l:'Lead',dot:'#FADB14' },{ v:'pausa',l:'Em pausa',dot:'#7A859A' }]}/>
        <ClientFilterPop label="Origem" icon="briefcase" selected={originFilter} onChange={setOriginFilter} options={origins.map(o => ({ v:o, l:o }))}/>
        <div style={{ flex: 1 }}/>
        <div style={{ display: 'inline-flex', background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)', borderRadius: 10, padding: 3 }}>
          {[{id:'grid',l:'Cards'},{id:'list',l:'Lista'}].map(v => (
            <button key={v.id} onClick={() => setView(v.id)} style={{ padding: '7px 14px', borderRadius: 7, border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, fontWeight: 600, background: view===v.id?'var(--primary)':'transparent', color: view===v.id?'#fff':'var(--fg-secondary)' }}>{v.l}</button>
          ))}
        </div>
        <Button icon="plus" onClick={() => setCreatingClient(true)}>Novo cliente</Button>
      </div>

      {loading && <div style={{ padding: '32px 0', textAlign: 'center', color: 'var(--fg-muted)', fontSize: 14 }}>Carregando clientes…</div>}

      {!loading && filtered.length === 0 && (
        <div style={{ padding: '48px 24px', textAlign: 'center', color: 'var(--fg-muted)' }}>
          <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{clients.length === 0 ? 'Nenhum cliente ainda' : 'Nenhum cliente encontrado'}</div>
          <div style={{ fontSize: 13 }}>{clients.length === 0 ? 'Clique em "Novo cliente" para adicionar.' : 'Ajuste os filtros ou a busca.'}</div>
        </div>
      )}

      {/* Modal de confirmação de exclusão */}
      {confirmDelete && (
        <div style={{ position:'fixed', inset:0, background:'rgba(7,11,28,0.75)', backdropFilter:'blur(6px)', display:'grid', placeItems:'center', zIndex:9999, padding:24 }}
          onClick={() => { if (!deleting) setConfirmDelete(null); }}>
          <div onClick={e => e.stopPropagation()} style={{ width:'min(420px,100%)', background:'var(--bg-surface)', border:'1px solid rgba(239,68,68,0.3)', borderRadius:16, padding:'32px 32px 24px' }}>
            <div style={{ fontSize:18, fontWeight:800, marginBottom:8 }}>Excluir cliente?</div>
            <p style={{ margin:'0 0 24px', fontSize:14, color:'var(--fg-secondary)', lineHeight:1.6 }}>
              Esta ação não pode ser desfeita. O cliente e todos os dados associados serão removidos permanentemente.
            </p>
            <div style={{ display:'flex', gap:10 }}>
              <button onClick={() => setConfirmDelete(null)} disabled={deleting}
                style={{ flex:1, padding:'12px 0', borderRadius:10, border:'1px solid var(--border-subtle)', background:'var(--bg-elevated)', color:'var(--fg-primary)', fontSize:14, fontWeight:600, cursor:'pointer', fontFamily:'inherit' }}>
                Cancelar
              </button>
              <button onClick={() => handleDeleteClient(confirmDelete)} disabled={deleting}
                style={{ flex:1, padding:'12px 0', borderRadius:10, border:'none', background:'rgba(239,68,68,0.9)', color:'#fff', fontSize:14, fontWeight:700, cursor:deleting?'not-allowed':'pointer', fontFamily:'inherit', opacity:deleting?0.7:1 }}>
                {deleting ? 'Excluindo…' : 'Sim, excluir'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Overlay para fechar menu ao clicar fora */}
      {menuOpen && <div onClick={() => setMenuOpen(null)} style={{ position:'fixed', inset:0, zIndex:40 }}/>}

      {!loading && view === 'grid' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
          {filtered.map((c, i) => (
            <div key={c.id} style={{ position:'relative' }}>
              <div onClick={() => setSelectedClient(c)} style={{ cursor: 'pointer' }}>
                <Card hoverable padding={18}>
                  <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                    <Avatar name={c.name} size={48} idx={i}/>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 15, fontWeight: 700, lineHeight: 1.3 }}>{c.name}</div>
                      <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 2 }}>{c.segmento || c.city}</div>
                    </div>
                    <Badge tone={statusBadgeTone(c.status)}>{c.status}</Badge>
                  </div>
                  <div style={{ marginTop: 14, padding: 12, borderRadius: 10, background: 'var(--bg-elevated)', display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
                    {c.contact && <div style={{ display: 'flex', gap: 8, color: 'var(--fg-secondary)' }}><Icon d={ICONS.users} size={13}/>{c.contact}</div>}
                    {c.email   && <div style={{ display: 'flex', gap: 8, color: 'var(--fg-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}><Icon d={ICONS.msg} size={13}/>{c.email}</div>}
                    {c.phone   && <div style={{ display: 'flex', gap: 8, color: 'var(--fg-secondary)' }}><Icon d={ICONS.bolt} size={13}/>{c.phone}</div>}
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14 }}>
                    <div style={{ display: 'flex', gap: 14, fontSize: 11, color: 'var(--fg-muted)' }}>
                      <span><strong style={{ color: 'var(--fg-primary)', fontFamily: 'var(--font-display)', fontSize: 14 }}>{c.projects}</strong> projetos</span>
                      <span><strong style={{ color: 'var(--fg-primary)', fontFamily: 'var(--font-display)', fontSize: 14 }}>{c.ltv}</strong> LTV</span>
                    </div>
                    <Badge tone={c.tag==='Premium'?'brand':c.tag==='Lead'?'warning':'cyan'} dot={false}>{c.tag}</Badge>
                  </div>
                </Card>
              </div>
              {/* Menu ··· */}
              <div style={{ position:'absolute', top:10, right:10, zIndex:50 }} onClick={e => e.stopPropagation()}>
                <button onClick={() => setMenuOpen(menuOpen === c.id ? null : c.id)}
                  style={{ background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', borderRadius:7, width:28, height:28, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', color:'var(--fg-muted)' }}>
                  <Icon d={ICONS.more} size={14}/>
                </button>
                {menuOpen === c.id && (
                  <div style={{ position:'absolute', top:'calc(100% + 6px)', right:0, background:'var(--bg-surface)', border:'1px solid var(--border-strong)', borderRadius:10, boxShadow:'0 12px 32px rgba(0,0,0,0.5)', overflow:'hidden', minWidth:160 }}>
                    <button onClick={() => { setConfirmDelete(c.id); setMenuOpen(null); }}
                      style={{ display:'flex', alignItems:'center', gap:10, width:'100%', padding:'11px 14px', background:'transparent', border:'none', color:'#F87171', fontSize:13, fontWeight:600, cursor:'pointer', fontFamily:'inherit', textAlign:'left' }}>
                      🗑 Excluir cliente
                    </button>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      )}

      {!loading && view === 'list' && (
        <Card padding={0} style={{ overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1.2fr 1fr 90px 90px 90px 80px 44px', padding: '12px 18px', borderBottom: '1px solid var(--border-subtle)', fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--fg-muted)' }}>
            <span>Cliente</span><span>Contato</span><span>Cidade</span><span>Status</span><span>Projetos</span><span>LTV</span><span>Origem</span><span/>
          </div>
          {filtered.map((c, i) => (
            <div key={c.id} style={{ position:'relative', display: 'grid', gridTemplateColumns: '1.4fr 1.2fr 1fr 90px 90px 90px 80px 44px', padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)', fontSize: 13, alignItems: 'center' }} onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-elevated)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <span onClick={() => setSelectedClient(c)} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor:'pointer' }}><Avatar name={c.name} size={32} idx={i}/><div><strong>{c.name}</strong>{c.segmento && <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{c.segmento}</div>}</div></span>
              <span onClick={() => setSelectedClient(c)} style={{ color: 'var(--fg-secondary)', cursor:'pointer' }}>{c.contact}<div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{c.email}</div></span>
              <span onClick={() => setSelectedClient(c)} style={{ color: 'var(--fg-secondary)', cursor:'pointer' }}>{c.city}</span>
              <span onClick={() => setSelectedClient(c)} style={{ cursor:'pointer' }}><Badge tone={statusBadgeTone(c.status)}>{c.status}</Badge></span>
              <span onClick={() => setSelectedClient(c)} style={{ fontFamily: 'var(--font-display)', fontWeight: 700, cursor:'pointer' }}>{c.projects}</span>
              <span onClick={() => setSelectedClient(c)} style={{ fontFamily: 'var(--font-display)', fontWeight: 700, cursor:'pointer' }}>{c.ltv}</span>
              <span onClick={() => setSelectedClient(c)} style={{ color: 'var(--fg-muted)', fontSize: 12, cursor:'pointer' }}>{c.origin}</span>
              {/* Menu ··· na list view */}
              <div style={{ position:'relative' }} onClick={e => e.stopPropagation()}>
                <button onClick={() => setMenuOpen(menuOpen === c.id ? null : c.id)}
                  style={{ background:'transparent', border:'1px solid var(--border-subtle)', borderRadius:7, width:28, height:28, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', color:'var(--fg-muted)' }}>
                  <Icon d={ICONS.more} size={14}/>
                </button>
                {menuOpen === c.id && (
                  <div style={{ position:'absolute', top:'calc(100% + 4px)', right:0, background:'var(--bg-surface)', border:'1px solid var(--border-strong)', borderRadius:10, boxShadow:'0 12px 32px rgba(0,0,0,0.5)', overflow:'hidden', minWidth:160, zIndex:60 }}>
                    <button onClick={() => { setConfirmDelete(c.id); setMenuOpen(null); }}
                      style={{ display:'flex', alignItems:'center', gap:10, width:'100%', padding:'11px 14px', background:'transparent', border:'none', color:'#F87171', fontSize:13, fontWeight:600, cursor:'pointer', fontFamily:'inherit', textAlign:'left' }}>
                      🗑 Excluir cliente
                    </button>
                  </div>
                )}
              </div>
            </div>
          ))}
        </Card>
      )}

      {selectedClient && (
        <ClienteDetailPanel
          client={clients.find(c => c.id === selectedClient.id) || selectedClient}
          origins={origins}
          onClose={() => setSelectedClient(null)}
          onSave={saveClient}
          onAddOrigin={addOrigin}
        />
      )}

      {creatingClient && (
        <NovoClienteModal
          origins={origins}
          onClose={() => setCreatingClient(false)}
          onCreate={createClient}
          onAddOrigin={addOrigin}
        />
      )}
    </div>
  );
}
window.Clients = Clients;