const { Card, DataTable, Button, Icon, IconButton, SearchField, Select, Input, Modal, Badge, Tag, Tabs, EmptyState, Switch, DropdownMenu, StatCard } = window.ACRFlowDesignSystem_ba1e9c;

const EMPTY_COMPANY = { name: "", kind: "cnpj", doc: "", purpose: "Condomínio", contact: "", active: true };

function CompanyForm({ value, purposes, onChange, onNewPurpose }) {
  const [novo, setNovo] = React.useState("");
  const [adding, setAdding] = React.useState(false);
  return (
    <>
      <Input label={value.kind === "cpf" ? "Nome completo" : "Nome ou razão social"} required value={value.name}
        placeholder={value.kind === "cpf" ? "Ex.: José Carlos da Silva" : "Ex.: Condomínio Alpha"}
        onChange={(e) => onChange({ ...value, name: e.target.value })} />
      <div style={{ display: "grid", gridTemplateColumns: "150px 1fr", gap: 14, alignItems: "start" }}>
        <Select label="Tipo" value={value.kind} onChange={(e) => onChange({ ...value, kind: e.target.value, doc: "" })}
          options={[{ value: "cnpj", label: "Pessoa jurídica" }, { value: "cpf", label: "Pessoa física" }]} />
        <Input label={value.kind === "cpf" ? "CPF" : "CNPJ"} required value={value.doc}
          placeholder={value.kind === "cpf" ? "000.000.000-00" : "00.000.000/0000-00"}
          onChange={(e) => onChange({ ...value, doc: e.target.value })} />
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <Select label="Finalidade da empresa" value={value.purpose} options={purposes}
          onChange={(e) => onChange({ ...value, purpose: e.target.value })}
          hint="A finalidade é personalizável — crie novas conforme a operação." />
        {adding ? (
          <div style={{ display: "flex", gap: 8, alignItems: "flex-end" }}>
            <Input label="Nova finalidade" value={novo} placeholder="Ex.: Associação" style={{ flex: 1 }} onChange={(e) => setNovo(e.target.value)} />
            <Button variant="secondary" onClick={() => { if (novo.trim()) { onNewPurpose(novo.trim()); onChange({ ...value, purpose: novo.trim() }); } setNovo(""); setAdding(false); }}>Adicionar</Button>
            <Button variant="ghost" onClick={() => { setNovo(""); setAdding(false); }}>Cancelar</Button>
          </div>
        ) : (
          <Button variant="ghost" size="sm" iconLeft={<Icon name="plus" size={14} />} style={{ alignSelf: "flex-start" }} onClick={() => setAdding(true)}>Nova finalidade</Button>
        )}
      </div>
      <Input label="Contato responsável" value={value.contact} placeholder="Ex.: Síndico Roberto Alves" onChange={(e) => onChange({ ...value, contact: e.target.value })} />
      <Input label="Telefone" type="tel" value={value.phone || ""} placeholder="Ex.: (11) 99999-1234"
        onChange={(e) => onChange({ ...value, phone: e.target.value })}
        hint="Visível apenas ao abrir o cadastro da empresa — não aparece na listagem." />
      <Switch checked={value.active} onChange={() => onChange({ ...value, active: !value.active })} label="Cadastro ativo" description="Cadastros inativos não aparecem na abertura de demandas." />
    </>
  );
}

function CompaniesScreen({ onToast }) {
  const D = window.useStore();
  const S = window.ACRStore;
  const rows = D.companies || [];
  const [extraPurposes, setExtraPurposes] = React.useState([]);
  const purposes = [...new Set([...(D.purposes || []), ...extraPurposes])];
  const setPurposes = (fn) => setExtraPurposes((s) => { const r = typeof fn === "function" ? fn([...purposes]) : fn; return r.filter((p) => !(D.purposes || []).includes(p)); });
  const [salvando, setSalvando] = React.useState(false);

  /** O telefone não vem na listagem: busca ao abrir o cadastro. */
  const abrir = async (empresa) => {
    setForm(empresa);
    if (empresa && empresa.id) {
      const cheia = await S.empresa(empresa.id);
      if (cheia) setForm((f) => (f && f.id === empresa.id ? { ...f, phone: cheia.phone || "", contact: cheia.contact || f.contact } : f));
    }
  };
  const falhou = (r) => { if (!r.ok) { onToast({ tone: "danger", title: "Não foi possível gravar", message: r.error }); return true; } return false; };
  const [q, setQ] = React.useState("");
  const [purpose, setPurpose] = React.useState("todas");
  const [form, setForm] = React.useState(null);
  const [remove, setRemove] = React.useState(null);

  const list = rows.filter((r) => (purpose === "todas" || r.purpose === purpose) && (String(r.name).toLowerCase().includes(q.toLowerCase()) || String(r.doc || "").includes(q)));

  const save = async () => {
    if (!form.name || !String(form.name).trim()) { onToast({ tone: "danger", title: "Informe o nome", message: "O nome ou razão social é obrigatório." }); return; }
    setSalvando(true);
    const r = await S.salvarEmpresa(form);
    setSalvando(false);
    if (falhou(r)) return;
    onToast({ tone: "success", title: form.id ? "Cadastro atualizado" : "Empresa cadastrada", message: form.name });
    setForm(null);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 14, flexWrap: "wrap" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          <h1 style={{ font: "var(--type-h1)", color: "var(--text-strong)" }}>Empresas</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>Pessoas jurídicas e físicas atendidas pela ACR — condomínios, administradoras e prestadores.</span>
        </div>
        <Button variant="primary" iconLeft={<Icon name="plus" size={16} />} onClick={() => setForm({ ...EMPTY_COMPANY })}>Nova empresa</Button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: "var(--gap-grid)" }}>
        <StatCard label="Cadastros ativos" value={rows.filter((r) => r.active).length} tone="brand" icon={<Icon name="building-2" size={16} />} />
        <StatCard label="Pessoa jurídica" value={rows.filter((r) => r.kind === "cnpj").length} icon={<Icon name="briefcase" size={16} />} />
        <StatCard label="Pessoa física" value={rows.filter((r) => r.kind === "cpf").length} icon={<Icon name="user" size={16} />} />
        <StatCard label="Finalidades" value={purposes.length} icon={<Icon name="tags" size={16} />} />
      </div>

      <Card padding="0"
        actions={<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <SearchField width={280} shortcut="" placeholder="Buscar nome ou documento..." value={q} onChange={(e) => setQ(e.target.value)} />
          <Select size="sm" value={purpose} onChange={(e) => setPurpose(e.target.value)} options={["todas", ...purposes].map((p) => ({ value: p, label: p === "todas" ? "Todas as finalidades" : p }))} />
        </div>}
        title="Cadastros" subtitle={list.length + " de " + rows.length + " registros"}>
        {list.length ? (
          <DataTable dense rowKey="id" rows={list}
            columns={[
              { key: "name", label: "Nome / razão social", render: (r) => (
                <span style={{ display: "flex", flexDirection: "column" }}>
                  <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{r.name}</span>
                  <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{r.contact}</span>
                </span>) },
              { key: "kind", label: "Tipo", width: 130, render: (r) => <Badge tone="neutral" size="sm">{r.kind === "cpf" ? "Pessoa física" : "Pessoa jurídica"}</Badge> },
              { key: "doc", label: "CNPJ / CPF", width: 170, render: (r) => <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: "var(--text-body)" }}>{r.doc}</span> },
              { key: "purpose", label: "Finalidade", width: 170, render: (r) => <Tag>{r.purpose}</Tag> },
              { key: "demands", label: "Demandas", width: 100, render: (r) => <span style={{ font: "var(--type-body)", color: "var(--text-body)" }}>{r.demands}</span> },
              { key: "active", label: "Status", width: 100, render: (r) => <Badge tone={r.active ? "success" : "neutral"} size="sm">{r.active ? "Ativo" : "Inativo"}</Badge> },
              { key: "acoes", label: "", width: 92, render: (r) => (
                <span style={{ display: "flex", gap: 4, justifyContent: "flex-end" }}>
                  <IconButton size="sm" variant="ghost" label="Editar" icon={<Icon name="pencil" size={15} />} onClick={() => abrir(r)} />
                  <IconButton size="sm" variant="ghost" label="Remover" icon={<Icon name="trash-2" size={15} />} onClick={() => setRemove(r)} />
                </span>) },
            ]} />
        ) : (
          <EmptyState icon={<Icon name="building-2" size={22} />} title="Nenhuma empresa encontrada." description="Ajuste a busca ou cadastre um novo registro." action={<Button variant="soft" onClick={() => setForm({ ...EMPTY_COMPANY })}>Nova empresa</Button>} />
        )}
      </Card>

      {form ? (
        <Modal title={form.id ? "Editar empresa" : "Nova empresa"} subtitle={form.id ? form.name : "Cadastro de pessoa jurídica ou física"} tone="info" width={600} onClose={() => setForm(null)}
          footer={<><Button variant="secondary" onClick={() => setForm(null)}>Cancelar</Button><Button variant="primary" disabled={!form.name.trim() || !form.doc.trim()} onClick={save}>{form.id ? "Salvar alterações" : "Cadastrar empresa"}</Button></>}>
          <CompanyForm value={form} purposes={purposes} onChange={setForm} onNewPurpose={(p) => setPurposes((s) => (s.includes(p) ? s : [...s, p]))} />
        </Modal>
      ) : null}

      {remove ? (
        <Modal title="Remover cadastro" subtitle={remove.name} tone="danger" width={480} onClose={() => setRemove(null)}
          footer={<><Button variant="secondary" onClick={() => setRemove(null)}>Cancelar</Button><Button variant="danger" disabled={salvando} onClick={async () => { setSalvando(true); const rr = await S.removerEmpresa(remove.id); setSalvando(false); if (falhou(rr)) return; onToast({ tone: "danger", title: "Cadastro removido", message: remove.name }); setRemove(null); }}>Remover</Button></>}>
          <span style={{ font: "var(--type-body)" }}>O cadastro sai das listas de seleção. As {remove.demands} demandas já vinculadas preservam o histórico.</span>
        </Modal>
      ) : null}
    </div>
  );
}

Object.assign(window, { CompaniesScreen });