/* Wood OS — Clientes (CRM leve) */
const { useState: useStateCli, useMemo: useMemoCli } = React;

/* ============================================================
   Helpers
   ============================================================ */
const SEGMENT_META = {
  residencial:  { label: "Residencial", color: "#34D399", icon: "home" },
  arquitetura:  { label: "Arquiteto",   color: "#38BDF8", icon: "ruler" },
  construtora:  { label: "Construtora", color: "#F59E0B", icon: "building" },
  design:       { label: "Design",      color: "#A78BFA", icon: "feature" },
  hotelaria:    { label: "Hotelaria",   color: "#F472B6", icon: "map-pin" },
};

const CLIENT_STATUS_META = {
  ativo:    { label: "Ativo",     dot: "#22C55E", bg: "rgba(34,197,94,0.12)",  fg: "#22C55E" },
  atencao:  { label: "Atenção",   dot: "#F59E0B", bg: "rgba(245,158,11,0.14)", fg: "#F59E0B" },
  prospect: { label: "Prospect",  dot: "#38BDF8", bg: "rgba(56,189,248,0.12)", fg: "#38BDF8" },
  inativo:  { label: "Inativo",   dot: "#737373", bg: "rgba(115,115,115,0.14)",fg: "#A3A3A3" },
};

const enrichClient = (c) => {
  const projects = MOCK.projects.filter(p => c.projects.includes(p.id));
  const projectNames = new Set(projects.map(p => p.name));
  const requests = MOCK.requests.filter(r => projectNames.has(r.project));
  const activeProjects = projects.filter(p => p.status !== "entregue" && p.status !== "cancelado");
  const revenue = projects.reduce((s, p) => s + (p.budget || 0), 0);
  return { ...c, _projects: projects, _activeProjects: activeProjects, _requests: requests, _revenue: revenue };
};

/* ============================================================
   ClientsPage
   ============================================================ */
const ClientsPage = ({ navigate }) => {
  const [segment, setSegment] = useStateCli("todos");
  const [status, setStatus] = useStateCli("todos");
  const [q, setQ] = useStateCli("");
  const [view, setView] = useStateCli("list");
  const [drawer, setDrawer] = useStateCli(null);
  const [creating, setCreating] = useStateCli(false);

  const clients = useMemoCli(() => MOCK.clients.map(enrichClient), []);

  const filtered = useMemoCli(() => {
    return clients.filter(c => {
      if (segment !== "todos" && c.segment !== segment && !(segment === "PF" && c.type === "PF") && !(segment === "PJ" && c.type === "PJ")) {
        if (segment === "PF" || segment === "PJ") return false;
        if (c.segment !== segment) return false;
      }
      if (status !== "todos" && c.status !== status) return false;
      if (q) {
        const hay = `${c.name} ${c.email} ${c.document} ${c.address.city} ${c.address.neighborhood} ${c.tags.join(" ")}`.toLowerCase();
        if (!hay.includes(q.toLowerCase())) return false;
      }
      return true;
    });
  }, [clients, segment, status, q]);

  const metrics = useMemoCli(() => {
    const active = clients.filter(c => c.status === "ativo").length;
    const inProduction = clients.filter(c => c._activeProjects.length > 0).length;
    const revenue = clients.reduce((s, c) => s + c._revenue, 0);
    const prospects = clients.filter(c => c.status === "prospect").length;
    return { total: clients.length, active, inProduction, revenue, prospects };
  }, [clients]);

  return (
    <>
      <PageHeader
        kicker="Operacional"
        title="Clientes"
        subtitle="Cadastro completo com histórico de obras, contato, anexos e atividade. Cada solicitação e orçamento se vincula a um cliente."
        actions={
          <>
            <div className="iflex items-center" style={{ background: "var(--wood-surface-2)", border: "1px solid var(--wood-border)", borderRadius: 10, padding: 2 }}>
              <button onClick={() => setView("list")} className="wood-btn wood-btn-ghost wood-btn-sm" style={{ background: view === "list" ? "rgba(16,185,129,0.16)" : "transparent", color: view === "list" ? "var(--cream)" : undefined }}>
                <Icon name="log" size={13} /> Lista
              </button>
              <button onClick={() => setView("cards")} className="wood-btn wood-btn-ghost wood-btn-sm" style={{ background: view === "cards" ? "rgba(16,185,129,0.16)" : "transparent", color: view === "cards" ? "var(--cream)" : undefined }}>
                <Icon name="layers" size={13} /> Cards
              </button>
            </div>
            <button className="wood-btn wood-btn-secondary"><Icon name="external" size={13} /> Exportar</button>
            <button className="wood-btn wood-btn-primary" onClick={() => setCreating(true)}>
              <Icon name="plus" size={13} /> Novo cliente
            </button>
          </>
        }
      />

      {/* KPIs */}
      <div className="grid grid-cols-4 gap-4 mb-5">
        <MetricCard icon="users" label="Clientes cadastrados" value={metrics.total} sub={`${metrics.active} ativos`} accent="amber" delay={0} />
        <MetricCard icon="hammer" label="Em obra agora" value={metrics.inProduction} sub="com obra em andamento" accent="info" delay={60} />
        <MetricCard icon="dollar" label="Receita acumulada" value={fmtBRL(metrics.revenue)} sub="soma das obras" accent="success" delay={120} />
        <MetricCard icon="spark" label="Prospects" value={metrics.prospects} sub="em negociação" accent="warning" delay={180} />
      </div>

      {/* Filters */}
      <div className="wood-card p-3 mb-4 flex items-center gap-2 flex-wrap">
        <FilterChip active={segment === "todos"} onClick={() => setSegment("todos")} count={clients.length}>Todos</FilterChip>
        <FilterChip active={segment === "PF"} onClick={() => setSegment("PF")} count={clients.filter(c => c.type === "PF").length}>Pessoa Física</FilterChip>
        <FilterChip active={segment === "PJ"} onClick={() => setSegment("PJ")} count={clients.filter(c => c.type === "PJ").length}>Pessoa Jurídica</FilterChip>
        <div className="wood-divider md-hide" style={{ width: 1, height: 24, background: "var(--wood-border)" }} />
        {Object.entries(SEGMENT_META).map(([k, m]) => (
          <FilterChip key={k} active={segment === k} onClick={() => setSegment(k)} count={clients.filter(c => c.segment === k).length}>{m.label}</FilterChip>
        ))}
        <div className="wood-divider md-hide" style={{ width: 1, height: 24, background: "var(--wood-border)" }} />
        <select className="wood-select" value={status} onChange={e => setStatus(e.target.value)} style={{ maxWidth: 160 }}>
          <option value="todos">Todos os status</option>
          {Object.entries(CLIENT_STATUS_META).map(([k, m]) => <option key={k} value={k}>{m.label}</option>)}
        </select>
        <div className="flex items-center gap-2 flex-1" style={{ minWidth: 200 }}>
          <Icon name="search" size={14} className="text-3" />
          <input
            className="flex-1"
            style={{ background: "transparent", border: "none", outline: "none", fontSize: 13, color: "var(--text)" }}
            placeholder="Buscar por nome, documento, cidade…"
            value={q}
            onChange={e => setQ(e.target.value)}
          />
        </div>
      </div>

      {filtered.length === 0 ? (
        <EmptyState icon="users" title="Nenhum cliente" description="Ajuste os filtros ou cadastre um novo cliente." />
      ) : view === "list" ? (
        <ClientList items={filtered} onOpen={setDrawer} />
      ) : (
        <ClientCards items={filtered} onOpen={setDrawer} />
      )}

      <PremiumDrawer
        open={!!drawer}
        onClose={() => setDrawer(null)}
        title={drawer?.name}
        subtitle={drawer?.id}
        actions={
          <>
            <button className="wood-btn wood-btn-ghost"><Icon name="edit" size={13} /> Editar</button>
            <button className="wood-btn wood-btn-ghost" onClick={() => {
              if (drawer) {
                try { sessionStorage.setItem("portalClientId", drawer.id); } catch (e) {}
                navigate("portal");
              }
            }}><Icon name="external" size={13} /> Ver portal</button>
            <div className="flex-1" />
            <button className="wood-btn wood-btn-secondary" onClick={() => setDrawer(null)}>Fechar</button>
            <button className="wood-btn wood-btn-primary" onClick={() => navigate("new-quote")}><Icon name="plus" size={13} /> Novo orçamento</button>
          </>
        }
      >
        {drawer && <ClientDetail c={drawer} navigate={navigate} />}
      </PremiumDrawer>

      <NewClientModal open={creating} onClose={() => setCreating(false)} />
    </>
  );
};

/* ============================================================
   ClientList — table view
   ============================================================ */
const ClientList = ({ items, onOpen }) => (
  <div className="wood-card" style={{ padding: 0, overflow: "hidden" }}>
    <table className="wood-table">
      <thead>
        <tr>
          <th>Cliente</th>
          <th>Documento</th>
          <th>Contato</th>
          <th>Segmento</th>
          <th>Obras</th>
          <th>Receita</th>
          <th>Último contato</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        {items.map(c => {
          const seg = SEGMENT_META[c.segment] || SEGMENT_META.residencial;
          const st = CLIENT_STATUS_META[c.status] || CLIENT_STATUS_META.ativo;
          return (
            <tr key={c.id} onClick={() => onOpen(c)} style={{ cursor: "pointer" }}>
              <td>
                <div className="flex items-center gap-3">
                  <Avatar name={c.name} size={32} />
                  <div className="min-w-0">
                    <div className="flex items-center gap-1.5">
                      <span style={{ fontWeight: 600, color: "var(--text)" }}>{c.name}</span>
                      {c.vip && <Icon name="star" size={12} className="text-amber-bright" />}
                    </div>
                    <div className="text-xs text-4 truncate">{c.address.neighborhood}, {c.address.city}</div>
                  </div>
                </div>
              </td>
              <td>
                <div className="flex items-center gap-2">
                  <span className="wood-badge" style={{ background: c.type === "PF" ? "rgba(56,189,248,0.12)" : "rgba(245,158,11,0.12)", color: c.type === "PF" ? "#38BDF8" : "#F59E0B", padding: "1px 7px", fontSize: 10 }}>{c.type}</span>
                  <span className="font-mono text-xs text-3">{c.document}</span>
                </div>
              </td>
              <td>
                <div className="text-sm flex items-center gap-1.5">
                  <Icon name="dot" size={10} className="text-amber" /> {c.phone}
                  {c.whatsapp && <span className="wood-badge" style={{ background: "rgba(34,197,94,0.14)", color: "#22C55E", padding: "1px 5px", fontSize: 9.5 }}>WA</span>}
                </div>
                <div className="text-xs text-4 truncate" style={{ maxWidth: 200 }}>{c.email}</div>
              </td>
              <td>
                <span className="flex items-center gap-1.5 text-sm" style={{ color: seg.color, fontWeight: 500 }}>
                  <Icon name={seg.icon} size={12} /> {seg.label}
                </span>
              </td>
              <td>
                <div className="text-sm" style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>
                  {c._activeProjects.length}<span className="text-4 text-xs"> / {c._projects.length}</span>
                </div>
                <div className="text-xs text-4">{c._requests.length} solicitações</div>
              </td>
              <td>
                <div className="text-sm" style={{ fontWeight: 500, fontVariantNumeric: "tabular-nums" }}>
                  {c._revenue ? fmtBRL(c._revenue) : <span className="text-4">—</span>}
                </div>
              </td>
              <td className="text-sm text-2">{fmtDate(c.lastContact)}</td>
              <td>
                <span className="wood-badge" style={{ background: st.bg, color: st.fg, padding: "2px 8px" }}>
                  <span className="wood-dot" style={{ background: st.dot, width: 6, height: 6 }} />
                  {st.label}
                </span>
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
);

/* ============================================================
   ClientCards — grid view
   ============================================================ */
const ClientCards = ({ items, onOpen }) => (
  <div className="grid grid-cols-3 gap-4">
    {items.map((c, i) => {
      const seg = SEGMENT_META[c.segment] || SEGMENT_META.residencial;
      const st = CLIENT_STATUS_META[c.status] || CLIENT_STATUS_META.ativo;
      return (
        <div key={c.id} onClick={() => onOpen(c)} className="wood-card wood-card-hover p-5 slide-up cursor-pointer" style={{ animationDelay: `${i * 50}ms` }}>
          <div className="flex items-start justify-between mb-3">
            <div className="flex items-center gap-3 min-w-0">
              <Avatar name={c.name} size={42} />
              <div className="min-w-0">
                <div className="flex items-center gap-1.5">
                  <span className="truncate" style={{ fontWeight: 600 }}>{c.name}</span>
                  {c.vip && <Icon name="star" size={13} className="text-amber-bright" style={{ flexShrink: 0 }} />}
                </div>
                <div className="text-xs text-3 flex items-center gap-2 mt-0.5">
                  <span className="wood-badge" style={{ background: c.type === "PF" ? "rgba(56,189,248,0.12)" : "rgba(245,158,11,0.12)", color: c.type === "PF" ? "#38BDF8" : "#F59E0B", padding: "0px 5px", fontSize: 9.5 }}>{c.type}</span>
                  <span style={{ color: seg.color }}>· {seg.label}</span>
                </div>
              </div>
            </div>
            <span className="wood-badge flex-shrink-0" style={{ background: st.bg, color: st.fg, padding: "2px 7px" }}>
              <span className="wood-dot" style={{ background: st.dot, width: 5, height: 5 }} />
              {st.label}
            </span>
          </div>

          <div className="text-xs text-3 mb-3 flex items-center gap-1.5">
            <Icon name="map-pin" size={11} /> {c.address.neighborhood}, {c.address.city}
          </div>

          <div className="grid grid-cols-3 gap-2 mb-3" style={{ paddingTop: 12, borderTop: "1px solid var(--wood-border-soft)" }}>
            <div>
              <div className="text-lg font-semibold" style={{ fontVariantNumeric: "tabular-nums" }}>{c._activeProjects.length}</div>
              <div className="text-xs text-4">obras ativas</div>
            </div>
            <div>
              <div className="text-lg font-semibold" style={{ fontVariantNumeric: "tabular-nums" }}>{c._requests.length}</div>
              <div className="text-xs text-4">solicitações</div>
            </div>
            <div>
              <div className="text-lg font-semibold tracking-tight" style={{ color: c._revenue ? "var(--amber-bright)" : "var(--text-4)" }}>
                {c._revenue ? fmtBRL(c._revenue).replace("R$", "").trim() : "—"}
              </div>
              <div className="text-xs text-4">receita</div>
            </div>
          </div>

          {c.tags.length > 0 && (
            <div className="flex items-center gap-1.5 flex-wrap">
              {c.tags.slice(0, 3).map(t => (
                <span key={t} className="wood-badge wood-badge-neutral" style={{ padding: "1px 7px", fontSize: 10 }}>{t}</span>
              ))}
            </div>
          )}
        </div>
      );
    })}
  </div>
);

/* ============================================================
   ClientDetail — drawer content
   ============================================================ */
const ClientDetail = ({ c, navigate }) => {
  const [tab, setTab] = useStateCli("overview");
  const seg = SEGMENT_META[c.segment] || SEGMENT_META.residencial;
  const st = CLIENT_STATUS_META[c.status] || CLIENT_STATUS_META.ativo;

  return (
    <div>
      {/* Header card */}
      <div className="wood-card wood-veneer p-5 mb-5">
        <div className="flex items-start justify-between gap-4 mb-4">
          <div className="flex items-center gap-4 min-w-0">
            <Avatar name={c.name} size={56} />
            <div className="min-w-0">
              <div className="flex items-center gap-2 flex-wrap mb-1">
                <span className="text-xl font-semibold tracking-tight">{c.name}</span>
                {c.vip && <Icon name="star" size={15} className="text-amber-bright" />}
              </div>
              <div className="flex items-center gap-2 flex-wrap">
                <span className="wood-badge" style={{ background: c.type === "PF" ? "rgba(56,189,248,0.12)" : "rgba(245,158,11,0.12)", color: c.type === "PF" ? "#38BDF8" : "#F59E0B" }}>{c.type === "PF" ? "Pessoa Física" : "Pessoa Jurídica"}</span>
                <span className="wood-badge" style={{ background: `${seg.color}22`, color: seg.color }}>
                  <Icon name={seg.icon} size={10} /> {seg.label}
                </span>
                <span className="wood-badge" style={{ background: st.bg, color: st.fg }}>
                  <span className="wood-dot" style={{ background: st.dot, width: 6, height: 6 }} />
                  {st.label}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div className="grid grid-cols-3 gap-3" style={{ paddingTop: 12, borderTop: "1px solid var(--wood-border-soft)" }}>
          <div>
            <div className="text-xs text-4 uppercase tracking-widest" style={{ fontWeight: 500 }}>OBRAS</div>
            <div className="text-2xl font-semibold tracking-tight" style={{ fontVariantNumeric: "tabular-nums" }}>{c._activeProjects.length}<span className="text-md text-4"> / {c._projects.length}</span></div>
          </div>
          <div>
            <div className="text-xs text-4 uppercase tracking-widest" style={{ fontWeight: 500 }}>SOLICITAÇÕES</div>
            <div className="text-2xl font-semibold tracking-tight" style={{ fontVariantNumeric: "tabular-nums" }}>{c._requests.length}</div>
          </div>
          <div>
            <div className="text-xs text-4 uppercase tracking-widest" style={{ fontWeight: 500 }}>RECEITA</div>
            <div className="text-2xl font-semibold tracking-tight wood-gradient-text">{c._revenue ? fmtBRL(c._revenue) : "—"}</div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex items-center gap-1 mb-4" style={{ borderBottom: "1px solid var(--wood-border)" }}>
        {[
          { id: "overview", label: "Visão geral", icon: "compass" },
          { id: "projects",  label: "Obras",       icon: "hammer", count: c._projects.length },
          { id: "requests",  label: "Solicitações", icon: "inbox", count: c._requests.length },
          { id: "financial", label: "Financeiro",  icon: "dollar" },
          { id: "files",     label: "Anexos",      icon: "paperclip" },
        ].map(t => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className="px-3 py-2.5 flex items-center gap-1.5 text-sm"
            style={{
              background: "transparent", border: "none", cursor: "pointer",
              color: tab === t.id ? "var(--amber-bright)" : "var(--text-3)",
              fontWeight: tab === t.id ? 600 : 500,
              borderBottom: tab === t.id ? "2px solid var(--amber-bright)" : "2px solid transparent",
              marginBottom: -1, transition: "all 0.18s"
            }}
          >
            <Icon name={t.icon} size={13} /> {t.label}
            {t.count != null && t.count > 0 && (
              <span className="text-xs" style={{ color: "var(--text-4)", fontVariantNumeric: "tabular-nums" }}>{t.count}</span>
            )}
          </button>
        ))}
      </div>

      {tab === "overview" && (
        <div>
          <div className="grid grid-cols-2 gap-3 mb-5">
            {[
              { label: "Documento", value: c.document, icon: "file-text" },
              { label: "Telefone", value: c.phone, icon: "send", badge: c.whatsapp ? "WhatsApp" : null },
              { label: "Email", value: c.email, icon: "send" },
              { label: "Cadastrado em", value: fmtDateLong(c.createdAt), icon: "calendar" },
              { label: "Endereço", value: c.address.full, icon: "map-pin", colSpan: 2 },
              { label: "Cidade", value: `${c.address.neighborhood}, ${c.address.city} — ${c.address.state}`, icon: "globe" },
              { label: "CEP", value: c.address.zip, icon: "tag" },
            ].map(d => (
              <div key={d.label} className="px-3 py-3 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)", gridColumn: d.colSpan === 2 ? "1 / span 2" : undefined }}>
                <div className="text-xs text-4 uppercase tracking-widest mb-1.5" style={{ fontWeight: 500 }}>{d.label}</div>
                <div className="text-sm flex items-center gap-2" style={{ fontWeight: 500 }}>
                  <Icon name={d.icon} size={13} className="text-3" />
                  <span className="truncate flex-1">{d.value}</span>
                  {d.badge && <span className="wood-badge" style={{ background: "rgba(34,197,94,0.14)", color: "#22C55E", padding: "1px 7px", fontSize: 9.5 }}>{d.badge}</span>}
                </div>
              </div>
            ))}
          </div>

          {c.tags.length > 0 && (
            <div className="mb-5">
              <div className="text-sm font-semibold mb-2">Tags</div>
              <div className="flex items-center gap-1.5 flex-wrap">
                {c.tags.map(t => (
                  <span key={t} className="wood-badge wood-badge-neutral">{t}</span>
                ))}
              </div>
            </div>
          )}

          {c.notes && (
            <div className="mb-2">
              <div className="text-sm font-semibold mb-2">Notas internas</div>
              <div className="p-4 rounded-lg text-sm text-2" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
                {c.notes}
              </div>
            </div>
          )}
        </div>
      )}

      {tab === "projects" && (
        c._projects.length === 0
          ? <EmptyState icon="hammer" title="Sem obras" description="Este cliente ainda não tem obras cadastradas." />
          : (
            <div className="flex flex-col gap-2.5">
              {c._projects.map(p => (
                <div key={p.id} onClick={() => navigate("projects")} className="wood-card wood-card-hover p-4 cursor-pointer">
                  <div className="flex items-center justify-between gap-3 mb-2">
                    <div className="min-w-0">
                      <div className="text-sm" style={{ fontWeight: 600 }}>{p.name}</div>
                      <div className="text-xs text-3">{p.address}</div>
                    </div>
                    <div className="flex items-center gap-2 flex-shrink-0">
                      <StatusPill status={p.status} />
                      <span className="text-sm font-semibold" style={{ fontVariantNumeric: "tabular-nums" }}>{p.progress}%</span>
                    </div>
                  </div>
                  <AnimatedProgress value={p.progress} max={100} height={4} />
                  <div className="flex items-center justify-between mt-2 text-xs text-3">
                    <span>{p.team} · entrega {fmtDate(p.deadline)}</span>
                    <span style={{ fontWeight: 600, color: "var(--amber-bright)" }}>{fmtBRL(p.budget)}</span>
                  </div>
                </div>
              ))}
            </div>
          )
      )}

      {tab === "requests" && (
        c._requests.length === 0
          ? <EmptyState icon="inbox" title="Sem solicitações" description="Nenhuma solicitação vinculada a este cliente." />
          : (
            <div className="wood-card" style={{ padding: 0, overflow: "hidden" }}>
              <table className="wood-table">
                <thead><tr><th>ID</th><th>Solicitação</th><th>Status</th><th>Prazo</th></tr></thead>
                <tbody>
                  {c._requests.map(r => (
                    <tr key={r.id} style={{ cursor: "pointer" }}>
                      <td className="font-mono text-xs text-3">{r.id}</td>
                      <td>
                        <div className="flex items-center gap-2">
                          {r.urgent && <Icon name="fire" size={12} className="text-amber-bright" />}
                          <span style={{ fontWeight: 500 }}>{r.title}</span>
                        </div>
                      </td>
                      <td><StatusPill status={r.status} /></td>
                      <td className="text-sm">{fmtDate(r.deadline)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )
      )}

      {tab === "financial" && <ClientFinancial c={c} />}

      {tab === "files" && (
        <div className="grid grid-cols-2 gap-3">
          {["Contrato_assinado.pdf", "RG_documento.pdf", "Comprovante_endereço.pdf", "Plantas_baixas.dwg"].map((f, i) => (
            <div key={i} className="flex items-center gap-3 p-4 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: "rgba(16,185,129,0.12)", color: "var(--amber-bright)", display: "inline-flex", alignItems: "center", justifyContent: "center", border: "1px solid var(--wood-border)" }}>
                <Icon name="file-text" size={16} />
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-sm truncate" style={{ fontWeight: 500 }}>{f}</div>
                <div className="text-xs text-4">2.4 MB · {fmtDate(c.createdAt)}</div>
              </div>
              <button className="wood-btn wood-btn-ghost wood-btn-icon-sm"><Icon name="external" size={13} /></button>
            </div>
          ))}
          <div className="flex items-center justify-center p-6 rounded-lg cursor-pointer" style={{ background: "rgba(0,0,0,0.12)", border: "1.5px dashed var(--wood-border-strong)", gridColumn: "span 2" }}>
            <div className="text-center">
              <Icon name="paperclip" size={20} className="text-3 mx-auto mb-2" />
              <div className="text-sm" style={{ fontWeight: 500 }}>Arraste arquivos ou clique para anexar</div>
              <div className="text-xs text-4 mt-1">PDF, DWG, imagens · até 25MB cada</div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

/* ============================================================
   ClientFinancial — financial summary (mock)
   ============================================================ */
const ClientFinancial = ({ c }) => {
  const revenue = c._revenue;
  const received = Math.round(revenue * 0.62);
  const pending = revenue - received;
  return (
    <div>
      <div className="grid grid-cols-3 gap-3 mb-5">
        <div className="px-4 py-4 rounded-lg" style={{ background: "rgba(34,197,94,0.06)", border: "1px solid rgba(34,197,94,0.18)" }}>
          <div className="text-xs text-3 uppercase tracking-widest mb-1" style={{ fontWeight: 500 }}>RECEBIDO</div>
          <div className="text-xl font-semibold tracking-tight" style={{ color: "#22C55E" }}>{revenue ? fmtBRL(received) : "—"}</div>
        </div>
        <div className="px-4 py-4 rounded-lg" style={{ background: "rgba(245,158,11,0.06)", border: "1px solid rgba(245,158,11,0.18)" }}>
          <div className="text-xs text-3 uppercase tracking-widest mb-1" style={{ fontWeight: 500 }}>A RECEBER</div>
          <div className="text-xl font-semibold tracking-tight" style={{ color: "#F59E0B" }}>{revenue ? fmtBRL(pending) : "—"}</div>
        </div>
        <div className="px-4 py-4 rounded-lg" style={{ background: "rgba(16,185,129,0.06)", border: "1px solid rgba(16,185,129,0.18)" }}>
          <div className="text-xs text-3 uppercase tracking-widest mb-1" style={{ fontWeight: 500 }}>TOTAL</div>
          <div className="text-xl font-semibold tracking-tight wood-gradient-text">{revenue ? fmtBRL(revenue) : "—"}</div>
        </div>
      </div>

      <div className="text-sm font-semibold mb-2">Próximas parcelas</div>
      {revenue ? (
        <div className="flex flex-col gap-2">
          {[
            { date: "2026-05-25", value: Math.round(pending * 0.5), label: "Parcela 3/5" },
            { date: "2026-06-25", value: Math.round(pending * 0.3), label: "Parcela 4/5" },
            { date: "2026-07-25", value: pending - Math.round(pending * 0.5) - Math.round(pending * 0.3), label: "Parcela 5/5 (final)" },
          ].map((p, i) => (
            <div key={i} className="flex items-center gap-3 px-4 py-3 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
              <Icon name="calendar" size={14} className="text-3" />
              <div className="flex-1">
                <div className="text-sm" style={{ fontWeight: 500 }}>{p.label}</div>
                <div className="text-xs text-4">Vence em {fmtDateLong(p.date)}</div>
              </div>
              <div className="text-sm font-semibold" style={{ fontVariantNumeric: "tabular-nums" }}>{fmtBRL(p.value)}</div>
            </div>
          ))}
        </div>
      ) : (
        <EmptyState icon="dollar" title="Sem movimentação" description="Este cliente ainda não tem lançamentos financeiros." />
      )}
    </div>
  );
};

/* ============================================================
   NewClientModal — placeholder creation flow
   ============================================================ */
const NewClientModal = ({ open, onClose }) => {
  const [type, setType] = useStateCli("PF");
  if (!open) return null;
  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(0,0,0,0.65)", backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} className="wood-card slide-up" style={{ width: "100%", maxWidth: 560, padding: 24, maxHeight: "90vh", overflow: "auto" }}>
        <div className="flex items-center justify-between mb-5">
          <div>
            <div className="text-xs uppercase tracking-widest text-amber mb-1" style={{ fontWeight: 600 }}>NOVO REGISTRO</div>
            <div className="text-xl font-semibold tracking-tight">Cadastrar cliente</div>
          </div>
          <button className="wood-btn wood-btn-ghost wood-btn-icon-sm" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>

        <div className="mb-4">
          <label className="wood-label">Tipo</label>
          <div className="flex gap-2">
            {[
              { v: "PF", label: "Pessoa Física", icon: "users" },
              { v: "PJ", label: "Pessoa Jurídica", icon: "building" },
            ].map(opt => (
              <button key={opt.v} type="button" onClick={() => setType(opt.v)}
                className="flex-1 py-3 rounded-lg flex items-center justify-center gap-2"
                style={{
                  background: type === opt.v ? "rgba(16,185,129,0.12)" : "var(--wood-surface-2)",
                  border: `1px solid ${type === opt.v ? "rgba(16,185,129,0.45)" : "var(--wood-border)"}`,
                  color: type === opt.v ? "var(--amber-bright)" : "var(--text-2)",
                  cursor: "pointer", fontWeight: type === opt.v ? 600 : 500, transition: "all 0.18s"
                }}>
                <Icon name={opt.icon} size={14} /> {opt.label}
              </button>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3 mb-3">
          <div>
            <label className="wood-label">{type === "PF" ? "Nome completo" : "Razão social"}</label>
            <input className="wood-input" placeholder={type === "PF" ? "Ex: Ana Maria Silva" : "Ex: Marcenaria Norte LTDA"} />
          </div>
          <div>
            <label className="wood-label">{type === "PF" ? "CPF" : "CNPJ"}</label>
            <input className="wood-input" placeholder={type === "PF" ? "000.000.000-00" : "00.000.000/0001-00"} />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3 mb-3">
          <div>
            <label className="wood-label">Telefone</label>
            <input className="wood-input" placeholder="(00) 90000-0000" />
          </div>
          <div>
            <label className="wood-label">Email</label>
            <input className="wood-input" type="email" placeholder="contato@exemplo.com" />
          </div>
        </div>

        <div className="mb-3">
          <label className="wood-label">Segmento</label>
          <select className="wood-select">
            {Object.entries(SEGMENT_META).map(([k, m]) => <option key={k} value={k}>{m.label}</option>)}
          </select>
        </div>

        <div className="grid grid-cols-3 gap-3 mb-3">
          <div style={{ gridColumn: "span 2" }}>
            <label className="wood-label">Endereço</label>
            <input className="wood-input" placeholder="Rua, número, complemento" />
          </div>
          <div>
            <label className="wood-label">CEP</label>
            <input className="wood-input" placeholder="00000-000" />
          </div>
        </div>

        <div className="grid grid-cols-3 gap-3 mb-5">
          <div style={{ gridColumn: "span 2" }}>
            <label className="wood-label">Cidade</label>
            <input className="wood-input" placeholder="Cidade" />
          </div>
          <div>
            <label className="wood-label">UF</label>
            <input className="wood-input" placeholder="RJ" maxLength={2} />
          </div>
        </div>

        <div className="mb-5">
          <label className="wood-label">Notas internas (opcional)</label>
          <textarea className="wood-textarea" rows={3} placeholder="Observações sobre o cliente, preferências, contatos secundários…" />
        </div>

        <div className="flex items-center justify-end gap-2 pt-4 border-t" style={{ borderColor: "var(--wood-border)" }}>
          <button className="wood-btn wood-btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="wood-btn wood-btn-primary" onClick={onClose}>
            <Icon name="check" size={14} /> Cadastrar cliente
          </button>
        </div>
      </div>
    </div>
  );
};

/* expose */
Object.assign(window, { ClientsPage });