/* global React, Icon, Avatar, Sidebar, Kanban, DealDrawer, fmtBRL, daysLabel */
const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "esmeralda",
  "density": "compact",
  "accent": "#0f3d2e",
  "displayFont": "Source Serif 4",
  "showKpis": true
}/*EDITMODE-END*/;

function App() {
  const hashTheme = (() => {
    try {
      const h = (window.location.hash || '').replace(/^#/, '');
      const m = h.match(/theme=([\w-]+)/);
      return m ? m[1] : null;
    } catch (_) { return null; }
  })();

  const initial = hashTheme
    ? { ...TWEAK_DEFAULTS, theme: hashTheme, accent: hashTheme === 'onyx' ? '#c9a96e' : TWEAK_DEFAULTS.accent }
    : TWEAK_DEFAULTS;

  const [t, setTweak] = window.useTweaks(initial);
  const [authUser, setAuthUser] = useState(null);
  const [authLoading, setAuthLoading] = useState(true);

  const [stages, setStages] = useState([]);
  const [deals, setDeals] = useState([]);
  const [owners, setOwners] = useState([]);
  const [contacts, setContacts] = useState([]);
  const [activities, setActivities] = useState([]);

  const [view, setView] = useState('kanban');
  const [openDeal, setOpenDeal] = useState(null);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [editingFunnel, setEditingFunnel] = useState(false);

  const [filterOwner, setFilterOwner] = useState('all');
  const [filterHot, setFilterHot] = useState(false);
  const [search, setSearch] = useState('');

  const [error, setError] = useState('');

  const [dealModal, setDealModal] = useState({ open: false, stageId: 'lead' });
  const [stageModalOpen, setStageModalOpen] = useState(false);
  const [ownerModal, setOwnerModal] = useState({ open: false, item: null });
  const [contactModal, setContactModal] = useState({ open: false, item: null });

  const loadDeals = async () => {
    const response = await window.api.listDeals({
      q: search || undefined,
      owner: filterOwner !== 'all' ? filterOwner : undefined,
      hot: filterHot ? true : undefined,
      per_page: 500,
      page: 1,
    });
    setDeals(response.data || []);
  };

  const loadContacts = async () => {
    const response = await window.api.listContacts({ per_page: 200, page: 1 });
    setContacts(response.data || []);
  };

  const loadOwners = async () => {
    const response = await window.api.listOwners({ include_inactive: true });
    setOwners(response.data || []);
  };

  const loadActivities = async () => {
    const response = await window.api.listActivities({ per_page: 100, page: 1 });
    setActivities(response.data || []);
  };

  const refreshWorkspace = async () => {
    const data = await window.api.bootstrap();
    setStages(data.stages || []);
    setOwners(data.owners || []);
    setContacts(data.contacts || []);
    setDeals(data.deals || []);
    setActivities(data.activities || []);
  };

  useEffect(() => {
    document.documentElement.dataset.theme = t.theme === 'onyx' ? 'onyx' : '';
    document.documentElement.dataset.density = t.density;
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--font-display', `'${t.displayFont}', Georgia, serif`);
  }, [t.theme, t.density, t.accent, t.displayFont]);

  useEffect(() => {
    const token = window.api.getToken();
    if (!token) {
      setAuthLoading(false);
      return;
    }

    (async () => {
      try {
        const { user } = await window.api.me();
        setAuthUser(user);
        await refreshWorkspace();
      } catch (_err) {
        window.api.setToken(null);
      } finally {
        setAuthLoading(false);
      }
    })();
  }, []);

  useEffect(() => {
    if (!authUser) return;
    const timeoutId = setTimeout(() => {
      loadDeals().catch((err) => setError(err.message));
    }, 220);
    return () => clearTimeout(timeoutId);
  }, [authUser, search, filterOwner, filterHot]);

  const counts = useMemo(() => ({
    total: deals.length,
    closedWon: deals.filter((d) => d.stage === 'ganho').length,
    contacts: contacts.length,
  }), [deals, contacts]);

  const kpis = useMemo(() => {
    const open = deals.filter((d) => d.stage !== 'ganho');
    const won = deals.filter((d) => d.stage === 'ganho');
    const pipeline = open.reduce((sum, d) => sum + Number(d.value || 0), 0);
    const closed = won.reduce((sum, d) => sum + Number(d.value || 0), 0);
    const conversion = deals.length ? Math.round((won.length / deals.length) * 100) : 0;
    const avgTicket = won.length ? Math.round(closed / won.length) : 0;
    return { pipeline, closed, conversion, avgTicket, openCount: open.length, wonCount: won.length };
  }, [deals]);

  const closeDrawer = () => {
    setDrawerOpen(false);
    setTimeout(() => setOpenDeal(null), 280);
  };

  const onChangeStage = async (dealId, stageId) => {
    setDeals((prev) => prev.map((d) => d.id === dealId ? { ...d, stage: stageId, days: 0 } : d));
    setOpenDeal((prev) => prev ? { ...prev, stage: stageId, days: 0 } : prev);
    try {
      const updated = await window.api.updateDeal(dealId, { stage: stageId, days: 0 });
      setDeals((prev) => prev.map((d) => d.id === dealId ? updated : d));
      setOpenDeal((prev) => prev && prev.id === dealId ? updated : prev);
      await loadActivities();
      setError('');
    } catch (err) {
      setError(err.message);
      await refreshWorkspace();
    }
  };

  const onRenameStage = async (id, name) => {
    setStages((prev) => prev.map((s) => s.id === id ? { ...s, name } : s));
    try {
      await window.api.updateStage(id, { name });
      await loadActivities();
      setError('');
    } catch (err) {
      setError(err.message);
      await refreshWorkspace();
    }
  };

  const onDeleteStage = async (id) => {
    if (!confirm('Remover esta etapa? Os negócios voltam para Lead.')) return;
    setStages((prev) => prev.filter((s) => s.id !== id));
    try {
      await window.api.deleteStage(id);
      await Promise.all([loadDeals(), loadActivities()]);
      setError('');
    } catch (err) {
      setError(err.message);
      await refreshWorkspace();
    }
  };

  const onMoveDeal = async (dealId, stageId) => {
    setDeals((prev) => prev.map((d) => d.id === dealId ? { ...d, stage: stageId, days: 0 } : d));
    try {
      const updated = await window.api.updateDeal(dealId, { stage: stageId, days: 0 });
      setDeals((prev) => prev.map((d) => d.id === dealId ? updated : d));
      setOpenDeal((prev) => prev && prev.id === dealId ? updated : prev);
      await loadActivities();
      setError('');
    } catch (err) {
      setError(err.message);
      await refreshWorkspace();
    }
  };

  const onCreateStage = async (payload) => {
    try {
      await window.api.createStage(payload);
      await Promise.all([refreshWorkspace(), loadActivities()]);
      setStageModalOpen(false);
      setError('');
    } catch (err) {
      setError(err.message);
    }
  };

  const onCreateDeal = async (payload) => {
    try {
      await window.api.createDeal(payload);
      await Promise.all([loadDeals(), loadActivities()]);
      setDealModal({ open: false, stageId: 'lead' });
      setError('');
    } catch (err) {
      setError(err.message);
    }
  };

  const onCreateOrUpdateOwner = async (payload, editingItem) => {
    try {
      if (editingItem) {
        await window.api.updateOwner(editingItem.id, payload);
      } else {
        await window.api.createOwner(payload);
      }
      await Promise.all([loadOwners(), loadDeals(), loadActivities()]);
      setOwnerModal({ open: false, item: null });
      setError('');
    } catch (err) {
      setError(err.message);
    }
  };

  const onDeleteOwner = async (ownerId) => {
    if (!confirm('Remover responsável? Negócios ficarão sem responsável.')) return;
    try {
      await window.api.deleteOwner(ownerId);
      await Promise.all([loadOwners(), loadDeals(), loadActivities()]);
      setError('');
    } catch (err) {
      setError(err.message);
    }
  };

  const onCreateOrUpdateContact = async (payload, editingItem) => {
    try {
      if (editingItem) {
        await window.api.updateContact(editingItem.id, payload);
      } else {
        await window.api.createContact(payload);
      }
      await Promise.all([loadContacts(), loadActivities()]);
      setContactModal({ open: false, item: null });
      setError('');
    } catch (err) {
      setError(err.message);
    }
  };

  const onDeleteContact = async (contactId) => {
    if (!confirm('Remover contato?')) return;
    try {
      await window.api.deleteContact(contactId);
      await Promise.all([loadContacts(), loadDeals(), loadActivities()]);
      setError('');
    } catch (err) {
      setError(err.message);
    }
  };

  const onAuthSuccess = async ({ token, user }) => {
    window.api.setToken(token);
    setAuthUser(user);
    await refreshWorkspace();
  };

  const onLogout = () => {
    window.api.setToken(null);
    setAuthUser(null);
    setStages([]);
    setDeals([]);
    setOwners([]);
    setContacts([]);
    setActivities([]);
  };

  if (authLoading) {
    return (
      <div className="app" style={{ display: 'grid', placeItems: 'center' }}>
        <div style={{ color: 'var(--ink-2)' }}>Carregando CRM…</div>
      </div>
    );
  }

  if (!authUser) {
    return <AuthView onAuthSuccess={onAuthSuccess} />;
  }

  const actionLabel = view === 'contacts' ? 'Novo contato' : view === 'reports' ? 'Novo responsável' : 'Novo negócio';
  const actionClick = () => {
    if (view === 'contacts') return setContactModal({ open: true, item: null });
    if (view === 'reports') return setOwnerModal({ open: true, item: null });
    return setDealModal({ open: true, stageId: 'lead' });
  };

  return (
    <div className="app">
      <Sidebar counts={counts} view={view} onView={setView} authUser={authUser} />

      <div className="main">
        <div className="topbar">
          <div className="topbar-title">
            {view === 'kanban' && <>Pipeline <em>· CRM</em></>}
            {view === 'list' && <>Lista <em>· todos os negócios</em></>}
            {view === 'reports' && <>Relatórios <em>· equipe e performance</em></>}
            {view === 'contacts' && <>Contatos <em>· base de clientes</em></>}
            {view === 'inbox' && <>Histórico de atividades</>}
            {view === 'calendar' && <>Agenda</>}
          </div>
          <div className="topbar-spacer" />
          <div className="search">
            <Icon name="search" size={14} />
            <input
              placeholder="Buscar contato, empresa…"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
            <kbd>⌘K</kbd>
          </div>
          <button className="btn primary" onClick={actionClick}>
            <Icon name="plus" size={14} /> {actionLabel}
          </button>
          <button className="btn" onClick={onLogout}>Sair</button>
        </div>

        {error && (
          <div style={{ padding: '8px 22px', color: '#7a1f2b', fontSize: 12 }}>
            {error}
          </div>
        )}

        {view === 'kanban' && t.showKpis && (
          <div className="kpi-row">
            <div className="kpi">
              <div className="kpi-label">Em pipeline</div>
              <div className="kpi-value"><span className="currency">R$</span>{fmtBRL(kpis.pipeline)}</div>
              <div className="kpi-delta"><span>{kpis.openCount} negócios abertos</span></div>
            </div>
            <div className="kpi">
              <div className="kpi-label">Fechado ganho</div>
              <div className="kpi-value"><span className="currency">R$</span>{fmtBRL(kpis.closed)}</div>
              <div className="kpi-delta"><span>{kpis.wonCount} negócios ganhos</span></div>
            </div>
            <div className="kpi">
              <div className="kpi-label">Conversão lead → ganho</div>
              <div className="kpi-value">{kpis.conversion}<span style={{ fontSize: 16, color: 'var(--ink-3)' }}>%</span></div>
              <div className="kpi-delta"><span>foco no fechamento</span></div>
            </div>
            <div className="kpi">
              <div className="kpi-label">Ticket médio</div>
              <div className="kpi-value"><span className="currency">R$</span>{fmtBRL(kpis.avgTicket)}</div>
              <div className="kpi-delta"><span>base histórica</span></div>
            </div>
          </div>
        )}

        {view === 'kanban' && (
          <div className="subtoolbar">
            <span className={'chip' + (filterOwner === 'all' ? ' active' : '')} onClick={() => setFilterOwner('all')}>Todos</span>
            {owners.filter((o) => o.active).map((o) => (
              <span
                key={o.id}
                className={'chip' + (filterOwner === o.id ? ' active' : '')}
                onClick={() => setFilterOwner(filterOwner === o.id ? 'all' : o.id)}
              >
                <Avatar size="sm" initials={initialsFromName(o.name)} bg={o.avatarBg} fg={o.avatarFg} />
                {o.name.split(' ')[0]}
              </span>
            ))}
            <span className={'chip' + (filterHot ? ' active' : '')} onClick={() => setFilterHot((v) => !v)}>
              <Icon name="flame" size={11} /> Hot
            </span>
            <div style={{ flex: 1 }} />
            <button className="btn ghost sm" onClick={() => setEditingFunnel((v) => !v)}>
              <Icon name="edit" size={13} /> {editingFunnel ? 'Concluir edição' : 'Editar funil'}
            </button>
            <div className="view-switch">
              <button className="on"><Icon name="kanban" size={12} /> Kanban</button>
              <button onClick={() => setView('list')}><Icon name="list" size={12} /> Lista</button>
            </div>
          </div>
        )}

        {view === 'kanban' && (
          <Kanban
            stages={stages}
            deals={deals}
            density={t.density}
            editing={editingFunnel}
            onCardClick={(deal) => { setOpenDeal(deal); setDrawerOpen(true); }}
            onMoveDeal={onMoveDeal}
            onRenameStage={onRenameStage}
            onDeleteStage={onDeleteStage}
            onAddStage={() => setStageModalOpen(true)}
            onAddCard={(stageId) => setDealModal({ open: true, stageId })}
            filterOwner={filterOwner}
            filterHot={filterHot}
          />
        )}

        {view === 'list' && (
          <ListView deals={deals} stages={stages} onCardClick={(deal) => { setOpenDeal(deal); setDrawerOpen(true); }} />
        )}

        {view === 'reports' && (
          <ReportsView
            deals={deals}
            stages={stages}
            owners={owners}
            kpis={kpis}
            onCreateOwner={() => setOwnerModal({ open: true, item: null })}
            onEditOwner={(item) => setOwnerModal({ open: true, item })}
            onDeleteOwner={onDeleteOwner}
          />
        )}

        {view === 'contacts' && (
          <ContactsView
            contacts={contacts}
            onCreate={() => setContactModal({ open: true, item: null })}
            onEdit={(item) => setContactModal({ open: true, item })}
            onDelete={onDeleteContact}
          />
        )}

        {view === 'inbox' && <InboxView activities={activities} />}
        {view === 'calendar' && <PlaceholderView view={view} />}

        <DealDrawer
          deal={openDeal}
          stages={stages}
          open={drawerOpen}
          onClose={closeDrawer}
          onChangeStage={onChangeStage}
          activities={activities}
        />
      </div>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Tema">
          <window.TweakRadio
            label="Direção"
            value={t.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[{ value: 'esmeralda', label: 'Esmeralda' }, { value: 'onyx', label: 'Onyx' }]}
          />
          <window.TweakColor label="Acento" value={t.accent} onChange={(v) => setTweak('accent', v)} />
        </window.TweakSection>

        <window.TweakSection label="Cards">
          <window.TweakRadio
            label="Densidade"
            value={t.density}
            onChange={(v) => setTweak('density', v)}
            options={[{ value: 'compact', label: 'Compacto' }, { value: 'medium', label: 'Médio' }, { value: 'rich', label: 'Rico' }]}
          />
          <window.TweakToggle label="Mostrar KPIs no topo" value={t.showKpis} onChange={(v) => setTweak('showKpis', v)} />
        </window.TweakSection>

        <window.TweakSection label="Tipografia">
          <window.TweakSelect
            label="Display serif"
            value={t.displayFont}
            onChange={(v) => setTweak('displayFont', v)}
            options={[
              { value: 'Source Serif 4', label: 'Source Serif 4' },
              { value: 'Newsreader', label: 'Newsreader' },
              { value: 'Cormorant Garamond', label: 'Cormorant' },
              { value: 'Lora', label: 'Lora' },
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>

      <DealFormModal
        open={dealModal.open}
        stages={stages}
        owners={owners.filter((o) => o.active)}
        contacts={contacts}
        initialStageId={dealModal.stageId}
        onClose={() => setDealModal({ open: false, stageId: 'lead' })}
        onSubmit={onCreateDeal}
      />

      <StageFormModal
        open={stageModalOpen}
        onClose={() => setStageModalOpen(false)}
        onSubmit={onCreateStage}
      />

      <OwnerFormModal
        open={ownerModal.open}
        initial={ownerModal.item}
        onClose={() => setOwnerModal({ open: false, item: null })}
        onSubmit={onCreateOrUpdateOwner}
      />

      <ContactFormModal
        open={contactModal.open}
        initial={contactModal.item}
        onClose={() => setContactModal({ open: false, item: null })}
        onSubmit={onCreateOrUpdateContact}
      />
    </div>
  );
}

function AuthView({ onAuthSuccess }) {
  const [mode, setMode] = useState('login');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      const payload = mode === 'register' ? { name: name.trim(), email: email.trim(), password } : { email: email.trim(), password };
      const response = mode === 'register' ? await window.api.register(payload) : await window.api.login(payload);
      await onAuthSuccess(response);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="auth-shell">
      <form onSubmit={submit} className="auth-card">
        <div className="serif" style={{ fontSize: 30, marginBottom: 6, color: 'var(--ink)' }}>RP CRM</div>
        <div style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 18 }}>
          {mode === 'register' ? 'Crie sua conta para iniciar seu CRM.' : 'Entre para acessar seus negócios.'}
        </div>

        {mode === 'register' && (
          <label style={{ display: 'block', marginBottom: 10, fontSize: 12, color: 'var(--ink-3)' }}>
            Nome
            <input className="input" value={name} onChange={(e) => setName(e.target.value)} required />
          </label>
        )}

        <label style={{ display: 'block', marginBottom: 10, fontSize: 12, color: 'var(--ink-3)' }}>
          E-mail
          <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
        </label>

        <label style={{ display: 'block', marginBottom: 14, fontSize: 12, color: 'var(--ink-3)' }}>
          Senha
          <input className="input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
        </label>

        {error && <div style={{ color: '#7a1f2b', fontSize: 12, marginBottom: 10 }}>{error}</div>}

        <button className="btn primary" type="submit" disabled={loading} style={{ width: '100%', justifyContent: 'center' }}>
          {loading ? 'Processando...' : mode === 'register' ? 'Criar conta' : 'Entrar'}
        </button>

        <button
          type="button"
          className="btn ghost"
          style={{ width: '100%', justifyContent: 'center', marginTop: 8 }}
          onClick={() => {
            setError('');
            setMode(mode === 'register' ? 'login' : 'register');
          }}
        >
          {mode === 'register' ? 'Já tenho conta' : 'Criar conta'}
        </button>
      </form>
    </div>
  );
}

function ListView({ deals, stages, onCardClick }) {
  const stageOf = (id) => stages.find((s) => s.id === id);
  return (
    <div className="table-wrap">
      <table className="t">
        <thead>
          <tr>
            <th>Negócio</th>
            <th>Empresa</th>
            <th>Etapa</th>
            <th>Valor</th>
            <th>Responsável</th>
            <th>Atividade</th>
            <th>Próxima ação</th>
          </tr>
        </thead>
        <tbody>
          {deals.map((d) => {
            const s = stageOf(d.stage);
            return (
              <tr key={d.id} onClick={() => onCardClick(d)}>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Avatar size="sm" initials={d.initials} bg={d.avatarBg} fg={d.avatarFg} />
                    <span style={{ fontWeight: 500 }}>{d.name}</span>
                    {d.hot && <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--hot)' }} />}
                  </div>
                </td>
                <td style={{ color: 'var(--ink-2)' }}>{d.company || '—'}</td>
                <td>
                  <span className="stage-pill">
                    <span className="column-dot" style={{ background: s?.accent }} />
                    {s?.name}
                  </span>
                </td>
                <td className="tabular"><span style={{ color: 'var(--ink-3)', fontSize: 11, marginRight: 2 }}>R$</span>{fmtBRL(d.value)}</td>
                <td style={{ color: 'var(--ink-2)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Avatar size="sm" initials={d.ownerName ? initialsFromName(d.ownerName) : '--'} bg="#3b4a42" fg="#e8efe9" />
                    {d.ownerName || 'Não definido'}
                  </div>
                </td>
                <td style={{ color: 'var(--ink-3)' }}>{daysLabel(d.days || 0)}</td>
                <td style={{ color: 'var(--ink-2)' }}>{d.nextAction || '—'}</td>
              </tr>
            );
          })}
          {deals.length === 0 && (
            <tr>
              <td colSpan={7} style={{ padding: 18, color: 'var(--ink-3)' }}>Nenhum negócio encontrado com os filtros atuais.</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}

function ReportsView({ deals, stages, owners, kpis, onCreateOwner, onEditOwner, onDeleteOwner }) {
  const counts = stages.map((s) => ({
    stage: s,
    count: deals.filter((d) => d.stage === s.id).length,
    value: deals.filter((d) => d.stage === s.id).reduce((a, b) => a + Number(b.value || 0), 0),
  }));
  const max = Math.max(...counts.map((c) => c.count), 1);

  return (
    <div style={{ flex: 1, overflow: 'auto', padding: '22px 22px 32px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18 }}>
        <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: '20px 22px' }}>
          <div className="drawer-section-title">Funil de conversão</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 8 }}>
            {counts.map((c) => (
              <div key={c.stage.id} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 180, fontSize: 13, color: 'var(--ink-2)', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span className="column-dot" style={{ background: c.stage.accent }} />
                  {c.stage.name}
                </div>
                <div style={{ flex: 1, height: 28, background: 'var(--bg-2)', borderRadius: 4, position: 'relative', overflow: 'hidden' }}>
                  <div style={{ width: `${(c.count / max) * 100}%`, height: '100%', background: `linear-gradient(90deg, ${c.stage.accent} 0%, color-mix(in srgb, ${c.stage.accent} 70%, var(--bg-2)) 100%)` }} />
                  <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', padding: '0 10px', fontSize: 11.5, color: 'var(--ink)', justifyContent: 'space-between' }}>
                    <span className="tabular">{c.count} negócios</span>
                    <span className="tabular" style={{ color: 'var(--ink-3)', fontSize: 11 }}>R$ {fmtBRL(c.value, { compact: true })}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: '20px 22px' }}>
          <div className="drawer-section-title">Resumo</div>
          <div style={{ display: 'grid', gap: 10, marginTop: 10, fontSize: 13 }}>
            <div>Pipeline: <strong>R$ {fmtBRL(kpis.pipeline)}</strong></div>
            <div>Fechado ganho: <strong>R$ {fmtBRL(kpis.closed)}</strong></div>
            <div>Taxa de conversão: <strong>{kpis.conversion}%</strong></div>
            <div>Ticket médio: <strong>R$ {fmtBRL(kpis.avgTicket)}</strong></div>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 18, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: '18px 22px' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
          <div className="drawer-section-title">Responsáveis</div>
          <div style={{ flex: 1 }} />
          <button className="btn sm" onClick={onCreateOwner}><Icon name="plus" size={12} /> Novo responsável</button>
        </div>
        <table className="t">
          <thead>
            <tr>
              <th>Nome</th>
              <th>E-mail</th>
              <th>Cargo</th>
              <th>Status</th>
              <th>Ações</th>
            </tr>
          </thead>
          <tbody>
            {owners.map((o) => (
              <tr key={o.id}>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Avatar size="sm" initials={initialsFromName(o.name)} bg={o.avatarBg} fg={o.avatarFg} />
                    {o.name}
                  </div>
                </td>
                <td>{o.email || '—'}</td>
                <td>{o.role || '—'}</td>
                <td>{o.active ? 'Ativo' : 'Inativo'}</td>
                <td>
                  <div style={{ display: 'flex', gap: 6 }}>
                    <button className="btn sm" onClick={() => onEditOwner(o)}>Editar</button>
                    <button className="btn sm" onClick={() => onDeleteOwner(o.id)}>Remover</button>
                  </div>
                </td>
              </tr>
            ))}
            {owners.length === 0 && (
              <tr>
                <td colSpan={5} style={{ padding: 16, color: 'var(--ink-3)' }}>Nenhum responsável cadastrado.</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function ContactsView({ contacts, onCreate, onEdit, onDelete }) {
  return (
    <div style={{ flex: 1, overflow: 'auto', padding: '22px' }}>
      <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: '18px 22px' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
          <div className="drawer-section-title">Contatos</div>
          <div style={{ flex: 1 }} />
          <button className="btn sm" onClick={onCreate}><Icon name="plus" size={12} /> Novo contato</button>
        </div>

        <table className="t">
          <thead>
            <tr>
              <th>Nome</th>
              <th>Empresa</th>
              <th>E-mail</th>
              <th>Telefone</th>
              <th>Cidade</th>
              <th>Ações</th>
            </tr>
          </thead>
          <tbody>
            {contacts.map((c) => (
              <tr key={c.id}>
                <td>{c.name}</td>
                <td>{c.company || '—'}</td>
                <td>{c.email || '—'}</td>
                <td>{c.phone || '—'}</td>
                <td>{c.city || '—'}</td>
                <td>
                  <div style={{ display: 'flex', gap: 6 }}>
                    <button className="btn sm" onClick={() => onEdit(c)}>Editar</button>
                    <button className="btn sm" onClick={() => onDelete(c.id)}>Remover</button>
                  </div>
                </td>
              </tr>
            ))}
            {contacts.length === 0 && (
              <tr>
                <td colSpan={6} style={{ padding: 16, color: 'var(--ink-3)' }}>Nenhum contato cadastrado.</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function InboxView({ activities }) {
  return (
    <div style={{ flex: 1, overflow: 'auto', padding: '22px' }}>
      <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: '18px 22px' }}>
        <div className="drawer-section-title" style={{ marginBottom: 10 }}>Atividades recentes</div>
        <div className="timeline">
          {activities.map((activity) => (
            <div key={activity.id} className="timeline-item">
              <div className="timeline-when">{new Date(activity.createdAt).toLocaleString('pt-BR')}</div>
              <div className="timeline-what">{activity.description}</div>
              <div className="timeline-who">{activity.entityType} · {activity.action}</div>
            </div>
          ))}
          {activities.length === 0 && (
            <div style={{ color: 'var(--ink-3)', fontSize: 13 }}>Nenhuma atividade registrada ainda.</div>
          )}
        </div>
      </div>
    </div>
  );
}

function PlaceholderView({ view }) {
  const labels = {
    calendar: ['Agenda', 'Reuniões, follow-ups e compromissos da equipe.'],
  };
  const [title, sub] = labels[view] || ['—', '—'];
  return (
    <div style={{ flex: 1, display: 'grid', placeItems: 'center', color: 'var(--ink-3)' }}>
      <div style={{ textAlign: 'center', maxWidth: 360 }}>
        <div className="serif" style={{ fontSize: 28, color: 'var(--ink)', marginBottom: 8 }}>{title}</div>
        <div style={{ fontSize: 13.5 }}>{sub}</div>
      </div>
    </div>
  );
}

function ModalShell({ open, title, children, onClose }) {
  if (!open) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div className="serif" style={{ fontSize: 20 }}>{title}</div>
          <button className="btn icon" onClick={onClose}><Icon name="close" size={14} /></button>
        </div>
        <div className="modal-body">{children}</div>
      </div>
    </div>
  );
}

function DealFormModal({ open, stages, owners, contacts, initialStageId, onClose, onSubmit }) {
  const [name, setName] = useState('');
  const [company, setCompany] = useState('');
  const [city, setCity] = useState('');
  const [value, setValue] = useState('');
  const [stage, setStage] = useState(initialStageId || 'lead');
  const [owner, setOwner] = useState('');
  const [contactId, setContactId] = useState('');
  const [nextAction, setNextAction] = useState('');
  const [notes, setNotes] = useState('');
  const [hot, setHot] = useState(false);

  useEffect(() => {
    if (!open) return;
    setName('');
    setCompany('');
    setCity('');
    setValue('');
    setStage(initialStageId || 'lead');
    setOwner('');
    setContactId('');
    setNextAction('');
    setNotes('');
    setHot(false);
  }, [open, initialStageId]);

  const submit = (e) => {
    e.preventDefault();
    onSubmit({
      name,
      stage,
      company,
      city,
      value: Number(value || 0),
      owner: owner || null,
      contactId: contactId || null,
      nextAction: nextAction || null,
      notes: notes || null,
      hot,
      avatarBg: '#3b4a42',
      avatarFg: '#e8efe9',
    });
  };

  return (
    <ModalShell open={open} title="Novo negócio" onClose={onClose}>
      <form className="form-stack" onSubmit={submit}>
        <label>Nome<input className="input" value={name} onChange={(e) => setName(e.target.value)} required /></label>
        <label>Empresa<input className="input" value={company} onChange={(e) => setCompany(e.target.value)} /></label>
        <label>Cidade<input className="input" value={city} onChange={(e) => setCity(e.target.value)} /></label>
        <label>Valor<input className="input" type="number" value={value} onChange={(e) => setValue(e.target.value)} /></label>
        <label>Etapa<select className="input" value={stage} onChange={(e) => setStage(e.target.value)}>{stages.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}</select></label>
        <label>Responsável<select className="input" value={owner} onChange={(e) => setOwner(e.target.value)}><option value="">Não definido</option>{owners.map((o) => <option key={o.id} value={o.id}>{o.name}</option>)}</select></label>
        <label>Contato<select className="input" value={contactId} onChange={(e) => setContactId(e.target.value)}><option value="">Sem vínculo</option>{contacts.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}</select></label>
        <label>Próxima ação<input className="input" value={nextAction} onChange={(e) => setNextAction(e.target.value)} /></label>
        <label>Notas<textarea className="input" rows={3} value={notes} onChange={(e) => setNotes(e.target.value)} /></label>
        <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}><input type="checkbox" checked={hot} onChange={(e) => setHot(e.target.checked)} /> Lead quente</label>
        <div className="modal-actions">
          <button type="button" className="btn" onClick={onClose}>Cancelar</button>
          <button type="submit" className="btn primary">Salvar</button>
        </div>
      </form>
    </ModalShell>
  );
}

function StageFormModal({ open, onClose, onSubmit }) {
  const [name, setName] = useState('');
  const [accent, setAccent] = useState('#60a5fa');

  useEffect(() => {
    if (!open) return;
    setName('');
    setAccent('#60a5fa');
  }, [open]);

  const submit = (e) => {
    e.preventDefault();
    onSubmit({ id: uid('stage'), name, accent });
  };

  return (
    <ModalShell open={open} title="Nova etapa" onClose={onClose}>
      <form className="form-stack" onSubmit={submit}>
        <label>Nome da etapa<input className="input" value={name} onChange={(e) => setName(e.target.value)} required /></label>
        <label>Cor de destaque<input className="input" type="color" value={accent} onChange={(e) => setAccent(e.target.value)} /></label>
        <div className="modal-actions">
          <button type="button" className="btn" onClick={onClose}>Cancelar</button>
          <button type="submit" className="btn primary">Criar etapa</button>
        </div>
      </form>
    </ModalShell>
  );
}

function OwnerFormModal({ open, initial, onClose, onSubmit }) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [role, setRole] = useState('');
  const [active, setActive] = useState(true);

  useEffect(() => {
    if (!open) return;
    setName(initial?.name || '');
    setEmail(initial?.email || '');
    setRole(initial?.role || '');
    setActive(initial?.active !== false);
  }, [open, initial]);

  const submit = (e) => {
    e.preventDefault();
    onSubmit({ name, email, role, active }, initial);
  };

  return (
    <ModalShell open={open} title={initial ? 'Editar responsável' : 'Novo responsável'} onClose={onClose}>
      <form className="form-stack" onSubmit={submit}>
        <label>Nome<input className="input" value={name} onChange={(e) => setName(e.target.value)} required /></label>
        <label>E-mail<input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} /></label>
        <label>Cargo<input className="input" value={role} onChange={(e) => setRole(e.target.value)} /></label>
        <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}><input type="checkbox" checked={active} onChange={(e) => setActive(e.target.checked)} /> Ativo</label>
        <div className="modal-actions">
          <button type="button" className="btn" onClick={onClose}>Cancelar</button>
          <button type="submit" className="btn primary">Salvar</button>
        </div>
      </form>
    </ModalShell>
  );
}

function ContactFormModal({ open, initial, onClose, onSubmit }) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [company, setCompany] = useState('');
  const [city, setCity] = useState('');
  const [notes, setNotes] = useState('');

  useEffect(() => {
    if (!open) return;
    setName(initial?.name || '');
    setEmail(initial?.email || '');
    setPhone(initial?.phone || '');
    setCompany(initial?.company || '');
    setCity(initial?.city || '');
    setNotes(initial?.notes || '');
  }, [open, initial]);

  const submit = (e) => {
    e.preventDefault();
    onSubmit({ name, email, phone, company, city, notes }, initial);
  };

  return (
    <ModalShell open={open} title={initial ? 'Editar contato' : 'Novo contato'} onClose={onClose}>
      <form className="form-stack" onSubmit={submit}>
        <label>Nome<input className="input" value={name} onChange={(e) => setName(e.target.value)} required /></label>
        <label>Empresa<input className="input" value={company} onChange={(e) => setCompany(e.target.value)} /></label>
        <label>E-mail<input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} /></label>
        <label>Telefone<input className="input" value={phone} onChange={(e) => setPhone(e.target.value)} /></label>
        <label>Cidade<input className="input" value={city} onChange={(e) => setCity(e.target.value)} /></label>
        <label>Notas<textarea className="input" rows={3} value={notes} onChange={(e) => setNotes(e.target.value)} /></label>
        <div className="modal-actions">
          <button type="button" className="btn" onClick={onClose}>Cancelar</button>
          <button type="submit" className="btn primary">Salvar</button>
        </div>
      </form>
    </ModalShell>
  );
}

function initialsFromName(name) {
  return (name || '').split(' ').filter(Boolean).slice(0, 2).map((s) => s[0]).join('').toUpperCase();
}

function uid(prefix) {
  return `${prefix}_${Math.random().toString(36).slice(2, 10)}`;
}

window.App = App;