const { Card, Button, Icon, IconButton, Input, Select, Modal, Badge, StatusPill, PriorityBadge, EmptyState, DataTable, StatCard, Textarea } = window.ACRFlowDesignSystem_ba1e9c;

const slugify = (s) => s.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "_").replace(/(^_|_$)/g, "");
const TONES = [
  { value: "st-aberta", label: "Azul — recém aberta" },
  { value: "st-triagem", label: "Roxo — triagem" },
  { value: "st-andamento", label: "Verde — em execução" },
  { value: "st-aguardando", label: "Âmbar — aguardando" },
  { value: "st-aprovacao", label: "Índigo — aprovação" },
  { value: "st-encerrada", label: "Cinza — encerrada" },
  { value: "st-reaberta", label: "Vermelho — reaberta" },
];
const PRIO_TONES = [{ value: "baixa", label: "Baixa" }, { value: "normal", label: "Normal" }, { value: "alta", label: "Alta" }, { value: "urgente", label: "Urgente" }];

function WorkflowScreen({ onToast }) {
  const D = window.useStore();
  const S = window.ACRStore;
  const statuses = D.statuses || [];
  const priorities = D.priorities || [];
  const [salvando, setSalvando] = React.useState(false);
  const falhou = (r) => { if (!r.ok) { onToast({ tone: "danger", title: "Não foi possível gravar", message: r.error }); return true; } return false; };
  const [statusForm, setStatusForm] = React.useState(null);
  const [prioForm, setPrioForm] = React.useState(null);
  const [remove, setRemove] = React.useState(null);

  const useCount = (kind, id) => D.demands.filter((d) => (kind === "status" ? d.status : d.priority) === id).length;

  const saveStatus = async () => {
    const f = statusForm;
    if (!f.name || !f.name.trim()) { onToast({ tone: "danger", title: "Informe o nome", message: "O nome do status é obrigatório." }); return; }
    setSalvando(true);
    const r = await S.salvarStatus({ ...f, existing: !!f.id });
    setSalvando(false);
    if (falhou(r)) return;
    onToast({ tone: "success", title: f.id ? "Status atualizado" : "Status criado", message: f.name });
    setStatusForm(null);
  };
  const savePrio = async () => {
    const f = prioForm;
    if (!f.name || !f.name.trim()) { onToast({ tone: "danger", title: "Informe o nome", message: "O nome da prioridade é obrigatório." }); return; }
    setSalvando(true);
    const r = await S.salvarPrioridade({ ...f, existing: !!f.id });
    setSalvando(false);
    if (falhou(r)) return;
    onToast({ tone: "success", title: f.id ? "Prioridade atualizada" : "Prioridade criada", message: f.name });
    setPrioForm(null);
  };
  const doRemove = async () => {
    setSalvando(true);
    const r = remove.kind === "status" ? await S.removerStatus(remove.item.id) : await S.removerPrioridade(remove.item.id);
    setSalvando(false);
    if (falhou(r)) return;
    onToast({ tone: "danger", title: remove.kind === "status" ? "Status removido" : "Prioridade removida", message: remove.item.name });
    setRemove(null);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)" }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
        <h1 style={{ font: "var(--type-h1)", color: "var(--text-strong)" }}>Prioridades e Status</h1>
        <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>Cadastro dos estados do ciclo de vida e dos níveis de prioridade usados em toda a operação.</span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: "var(--gap-grid)" }}>
        <StatCard label="Status cadastrados" value={statuses.length} tone="brand" icon={<Icon name="git-branch" size={16} />} />
        <StatCard label="Prioridades" value={priorities.length} icon={<Icon name="flag" size={16} />} />
        <StatCard label="Status do sistema" value={statuses.filter((s) => s.system).length} icon={<Icon name="lock" size={16} />} />
      </div>

      <Card padding="14px 16px" style={{ background: "var(--info-bg, var(--surface-sunken))", border: "1px solid var(--border-subtle)" }}>
        <span style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
          <Icon name="info" size={17} style={{ color: "var(--text-muted)", marginTop: 2 }} />
          <span style={{ font: "var(--type-body)", color: "var(--text-body)" }}>
            Regra fixa do fluxo: ao ser atribuída, a demanda fica em <strong>Aguardando atendimento</strong>. Só passa para <strong>Em andamento</strong> na primeira interação do operacional — comentário, checklist, evidência ou anexo. Status marcados como "do sistema" não podem ser removidos porque sustentam essa regra e a aprovação do supervisor.
          </span>
        </span>
      </Card>

      <Card padding="0" title="Status do ciclo de vida" subtitle="A ordem da lista é a ordem sugerida do fluxo"
        actions={<Button variant="secondary" size="sm" iconLeft={<Icon name="plus" size={15} />} onClick={() => setStatusForm({ name: "", tone: "st-aguardando", help: "" })}>Novo status</Button>}>
        <DataTable dense rowKey="id" rows={statuses}
          columns={[
            { key: "name", label: "Status", width: 240, render: (r) => <StatusPill status={r.id} label={r.name} tone={r.tone} /> },
            { key: "help", label: "Quando usar" },
            { key: "system", label: "Tipo", width: 120, render: (r) => <Badge tone={r.system ? "info" : "neutral"} size="sm">{r.system ? "Do sistema" : "Personalizado"}</Badge> },
            { key: "uso", label: "Demandas", width: 100, render: (r) => useCount("status", r.id) },
            { 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={() => setStatusForm(r)} />
                <IconButton size="sm" variant="ghost" label="Remover" icon={<Icon name="trash-2" size={15} />} disabled={r.system} onClick={() => setRemove({ kind: "status", item: r })} />
              </span>) },
          ]} />
      </Card>

      <Card padding="0" title="Prioridades" subtitle="Cor, rótulo e prazo-alvo de cada nível"
        actions={<Button variant="secondary" size="sm" iconLeft={<Icon name="plus" size={15} />} onClick={() => setPrioForm({ name: "", tone: "normal", sla: "" })}>Nova prioridade</Button>}>
        <DataTable dense rowKey="id" rows={priorities}
          columns={[
            { key: "name", label: "Prioridade", width: 200, render: (r) => <PriorityBadge priority={r.id} label={r.name} tone={r.tone} /> },
            { key: "sla", label: "Prazo-alvo" },
            { key: "system", label: "Tipo", width: 120, render: (r) => <Badge tone={r.system ? "info" : "neutral"} size="sm">{r.system ? "Do sistema" : "Personalizada"}</Badge> },
            { key: "uso", label: "Demandas", width: 100, render: (r) => useCount("priority", r.id) },
            { 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={() => setPrioForm(r)} />
                <IconButton size="sm" variant="ghost" label="Remover" icon={<Icon name="trash-2" size={15} />} disabled={r.system} onClick={() => setRemove({ kind: "prioridade", item: r })} />
              </span>) },
          ]} />
      </Card>

      {statusForm ? (
        <Modal title={statusForm.id ? "Editar status" : "Novo status"} subtitle={statusForm.id ? statusForm.name : "Fica disponível na demanda assim que salvo"} tone="info" width={540} onClose={() => setStatusForm(null)}
          footer={<><Button variant="secondary" onClick={() => setStatusForm(null)}>Cancelar</Button><Button variant="primary" disabled={!statusForm.name.trim()} onClick={saveStatus}>{statusForm.id ? "Salvar alterações" : "Criar status"}</Button></>}>
          <Input label="Nome do status" required value={statusForm.name} placeholder="Ex.: Aguardando documento" onChange={(e) => setStatusForm({ ...statusForm, name: e.target.value })} />
          <Select label="Cor" value={statusForm.tone} options={TONES} onChange={(e) => setStatusForm({ ...statusForm, tone: e.target.value })} />
          <Textarea label="Quando usar" rows={2} value={statusForm.help || ""} placeholder="Orientação exibida à equipe." onChange={(e) => setStatusForm({ ...statusForm, help: e.target.value })} />
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>Pré-visualização</span>
            <StatusPill status={statusForm.id || "aberta"} label={statusForm.name || "Novo status"} tone={statusForm.tone} />
          </div>
        </Modal>
      ) : null}

      {prioForm ? (
        <Modal title={prioForm.id ? "Editar prioridade" : "Nova prioridade"} subtitle={prioForm.id ? prioForm.name : "Usada na abertura e durante o ciclo da demanda"} tone="info" width={540} onClose={() => setPrioForm(null)}
          footer={<><Button variant="secondary" onClick={() => setPrioForm(null)}>Cancelar</Button><Button variant="primary" disabled={!prioForm.name.trim()} onClick={savePrio}>{prioForm.id ? "Salvar alterações" : "Criar prioridade"}</Button></>}>
          <Input label="Nome da prioridade" required value={prioForm.name} placeholder="Ex.: Crítica" onChange={(e) => setPrioForm({ ...prioForm, name: e.target.value })} />
          <Select label="Cor e intensidade" value={prioForm.tone} options={PRIO_TONES} onChange={(e) => setPrioForm({ ...prioForm, tone: e.target.value })} />
          <Input label="Prazo-alvo" value={prioForm.sla || ""} placeholder="Ex.: 48 horas" onChange={(e) => setPrioForm({ ...prioForm, sla: e.target.value })} hint="Usado nos alertas de prazo e nos relatórios de SLA." />
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>Pré-visualização</span>
            <PriorityBadge priority={prioForm.tone} label={prioForm.name || "Nova prioridade"} tone={prioForm.tone} />
          </div>
        </Modal>
      ) : null}

      {remove ? (
        <Modal title={"Remover " + remove.kind} subtitle={remove.item.name} tone="danger" width={470} onClose={() => setRemove(null)}
          footer={<><Button variant="secondary" onClick={() => setRemove(null)}>Cancelar</Button>
            <Button variant="danger" disabled={useCount(remove.kind === "status" ? "status" : "priority", remove.item.id) > 0} onClick={doRemove}>Remover</Button></>}>
          {useCount(remove.kind === "status" ? "status" : "priority", remove.item.id) > 0
            ? <span style={{ font: "var(--type-body)" }}>Existem <strong>{useCount(remove.kind === "status" ? "status" : "priority", remove.item.id)} demandas</strong> usando este item. Reclassifique-as antes de remover.</span>
            : <span style={{ font: "var(--type-body)" }}>O item deixa de ser oferecido na demanda. O histórico já registrado é preservado.</span>}
        </Modal>
      ) : null}
    </div>
  );
}

Object.assign(window, { WorkflowScreen });