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

const slug = (s) => s.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");

function TaxonomyScreen({ onToast }) {
  const D = window.useStore();
  const S = window.ACRStore;
  const sectors = D.sectorsCfg || [];
  const [selected, setSelected] = React.useState((sectors[0] || {}).id);
  const [salvando, setSalvando] = React.useState(false);
  React.useEffect(() => { if (!sectors.some((x) => x.id === selected)) setSelected((sectors[0] || {}).id); }, [sectors.length]);
  const catId = (sectorId, name) => ((D.catIds || {})[sectorId] || {})[name];
  const falhou = (r) => { if (!r.ok) { onToast({ tone: "danger", title: "Não foi possível gravar", message: r.error }); return true; } return false; };
  const [sectorForm, setSectorForm] = React.useState(null);
  const [removeSector, setRemoveSector] = React.useState(null);
  const [catForm, setCatForm] = React.useState(null);
  const [removeCat, setRemoveCat] = React.useState(null);
  const [q, setQ] = React.useState("");

  const sector = sectors.find((s) => s.id === selected) || sectors[0];
  const cats = sector ? sector.categories.filter((c) => c.toLowerCase().includes(q.toLowerCase())) : [];
  const demandsOf = (id, cat) => D.demands.filter((d) => d.sector === id && (!cat || d.category === cat)).length;

  const saveSector = async () => {
    const f = sectorForm;
    setSalvando(true);
    const r = await S.salvarArea(f);
    setSalvando(false);
    if (falhou(r)) return;
    if (!f.id) setSelected(slug(f.name));
    onToast({ tone: "success", title: f.id ? "Área atualizada" : "Área cadastrada", message: f.name });
    setSectorForm(null);
  };

  const saveCat = async () => {
    const { target, name, original } = catForm;
    setSalvando(true);
    const r = await S.salvarAtividade({ sectorId: target, name, catId: original ? catId(target, original) : null });
    setSalvando(false);
    if (falhou(r)) return;
    onToast({ tone: "success", title: original ? "Atividade renomeada" : "Atividade criada", message: name + " · " + (sectors.find((x) => x.id === target) || {}).name });
    setCatForm(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)" }}>Áreas e Atividades</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>Cadastro dos setores da empresa e das categorias de atividade de cada um. Novos setores ficam disponíveis imediatamente.</span>
        </div>
        <Button variant="primary" iconLeft={<Icon name="plus" size={16} />} onClick={() => setSectorForm({ name: "", active: true })}>Novo setor</Button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: "var(--gap-grid)" }}>
        <StatCard label="Setores ativos" value={sectors.filter((s) => s.active).length} tone="brand" icon={<Icon name="folder-tree" size={16} />} />
        <StatCard label="Categorias" value={sectors.reduce((n, s) => n + s.categories.length, 0)} icon={<Icon name="tags" size={16} />} />
        <StatCard label="Demandas classificadas" value={D.demands.length} icon={<Icon name="inbox" size={16} />} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,320px) minmax(0,1fr)", gap: "var(--gap-grid)", alignItems: "start" }}>
        <Card title="Setores" padding="0">
          <div style={{ display: "flex", flexDirection: "column" }}>
            {sectors.map((s) => (
              <div key={s.id} onClick={() => setSelected(s.id)}
                style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", cursor: "pointer", borderLeft: "3px solid " + (s.id === selected ? "var(--accent-primary)" : "transparent"), background: s.id === selected ? "var(--surface-sunken)" : "transparent", borderBottom: "1px solid var(--border-subtle)" }}>
                <span style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 3 }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 7 }}>
                    <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{s.name}</span>
                    {!s.active ? <Badge tone="neutral" size="sm">Inativo</Badge> : null}
                  </span>
                  <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{s.categories.length} categorias · {demandsOf(s.id)} demandas</span>
                </span>
                <IconButton size="sm" variant="ghost" label="Editar setor" icon={<Icon name="pencil" size={15} />} onClick={(e) => { e.stopPropagation(); setSectorForm({ ...s }); }} />
                <IconButton size="sm" variant="ghost" label="Remover setor" icon={<Icon name="trash-2" size={15} />} onClick={(e) => { e.stopPropagation(); setRemoveSector(s); }} />
              </div>
            ))}
          </div>
        </Card>

        <Card padding="0" title={sector ? "Categorias — " + sector.name : "Categorias"}
          subtitle="As categorias classificam a atividade executada e alimentam os relatórios de produtividade"
          actions={<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <SearchField width={230} shortcut="" placeholder="Buscar categoria..." value={q} onChange={(e) => setQ(e.target.value)} />
            <Button variant="secondary" size="sm" iconLeft={<Icon name="plus" size={15} />} onClick={() => setCatForm({ target: sector.id, name: "", original: null })}>Nova categoria</Button>
          </div>}>
          {cats.length ? (
            <DataTable dense rowKey="name" rows={cats.map((c) => ({ name: c }))}
              columns={[
                { key: "name", label: "Categoria", render: (r) => <span style={{ display: "flex", alignItems: "center", gap: 9 }}><Icon name="tag" size={15} style={{ color: "var(--text-muted)" }} /><span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{r.name}</span></span> },
                { key: "sector", label: "Setor", width: 200, render: () => <SectorTag sector={sector.id} label={sector.name} size="sm" /> },
                { key: "uso", label: "Demandas", width: 110, render: (r) => <span style={{ font: "var(--type-body)", color: "var(--text-body)" }}>{demandsOf(sector.id, r.name)}</span> },
                { key: "acoes", label: "", width: 92, render: (r) => (
                  <span style={{ display: "flex", gap: 4, justifyContent: "flex-end" }}>
                    <IconButton size="sm" variant="ghost" label="Renomear" icon={<Icon name="pencil" size={15} />} onClick={() => setCatForm({ target: sector.id, name: r.name, original: r.name })} />
                    <IconButton size="sm" variant="ghost" label="Remover" icon={<Icon name="trash-2" size={15} />} onClick={() => setRemoveCat(r.name)} />
                  </span>) },
              ]} />
          ) : (
            <EmptyState icon={<Icon name="tags" size={22} />} title="Nenhuma categoria neste setor." description="Cadastre as atividades que este setor executa — elas aparecem na abertura da demanda." action={<Button variant="soft" onClick={() => setCatForm({ target: sector.id, name: "", original: null })}>Nova categoria</Button>} />
          )}
        </Card>
      </div>

      {sectorForm ? (
        <Modal title={sectorForm.id ? "Editar setor" : "Novo setor"} subtitle={sectorForm.id ? sectorForm.name : "Ficará disponível na abertura e no encaminhamento de demandas"} tone="info" width={520} onClose={() => setSectorForm(null)}
          footer={<><Button variant="secondary" onClick={() => setSectorForm(null)}>Cancelar</Button><Button variant="primary" disabled={!sectorForm.name.trim()} onClick={saveSector}>{sectorForm.id ? "Salvar alterações" : "Cadastrar setor"}</Button></>}>
          <Input label="Nome do setor" required value={sectorForm.name} placeholder="Ex.: Jurídico" onChange={(e) => setSectorForm({ ...sectorForm, name: e.target.value })} />
          <Switch checked={sectorForm.active} onChange={() => setSectorForm({ ...sectorForm, active: !sectorForm.active })} label="Setor ativo" description="Setores inativos não recebem novas demandas." />
        </Modal>
      ) : null}

      {removeSector ? (
        <Modal title="Remover setor" subtitle={removeSector.name} tone="danger" width={480} onClose={() => setRemoveSector(null)}
          footer={<><Button variant="secondary" onClick={() => setRemoveSector(null)}>Cancelar</Button>
            <Button variant="danger" disabled={demandsOf(removeSector.id) > 0 || salvando} onClick={async () => { setSalvando(true); const r = await S.removerArea(removeSector.id); setSalvando(false); if (falhou(r)) return; onToast({ tone: "danger", title: "Área removida", message: removeSector.name }); setRemoveSector(null); }}>Remover área</Button></>}>
          {demandsOf(removeSector.id) > 0 ? (
            <span style={{ font: "var(--type-body)" }}>Este setor possui <strong>{demandsOf(removeSector.id)} demandas</strong> vinculadas. Encaminhe-as para outro setor antes de remover — ou desative o setor para bloquear novas aberturas.</span>
          ) : (
            <span style={{ font: "var(--type-body)" }}>As {removeSector.categories.length} categorias deste setor também serão removidas.</span>
          )}
        </Modal>
      ) : null}

      {catForm ? (
        <Modal title={catForm.original ? "Editar categoria" : "Nova categoria"} subtitle={(sectors.find((s) => s.id === catForm.target) || {}).name} tone="info" width={520} onClose={() => setCatForm(null)}
          footer={<><Button variant="secondary" onClick={() => setCatForm(null)}>Cancelar</Button><Button variant="primary" disabled={!catForm.name.trim()} onClick={saveCat}>{catForm.original ? "Salvar alterações" : "Criar categoria"}</Button></>}>
          <Input label="Nome da categoria" required value={catForm.name} placeholder="Ex.: Emissão dos Boletos" onChange={(e) => setCatForm({ ...catForm, name: e.target.value })} />
          <Select label="Setor" value={catForm.target} options={sectors.map((s) => ({ value: s.id, label: s.name }))} onChange={(e) => setCatForm({ ...catForm, target: e.target.value })}
            hint="Mudar o setor move a categoria — demandas antigas mantêm a classificação original." />
        </Modal>
      ) : null}

      {removeCat ? (
        <Modal title="Remover categoria" subtitle={removeCat} tone="danger" width={460} onClose={() => setRemoveCat(null)}
          footer={<><Button variant="secondary" onClick={() => setRemoveCat(null)}>Cancelar</Button>
            <Button variant="danger" disabled={salvando} onClick={async () => { setSalvando(true); const r = await S.removerAtividade({ sectorId: sector.id, catId: catId(sector.id, removeCat), name: removeCat }); setSalvando(false); if (falhou(r)) return; onToast({ tone: "danger", title: "Categoria removida", message: removeCat }); setRemoveCat(null); }}>Remover</Button></>}>
          <span style={{ font: "var(--type-body)" }}>A categoria deixa de ser oferecida na abertura de demandas. As {demandsOf(sector.id, removeCat)} demandas já classificadas mantêm o registro.</span>
        </Modal>
      ) : null}
    </div>
  );
}

Object.assign(window, { TaxonomyScreen });