const { Card, Input, Select, Textarea, Button, Icon, Checkbox, Switch, Tag, Avatar, SearchField, ChecklistPanel, Badge, PriorityBadge, SectorTag, FileDropzone, Modal, StatusPill } = window.ACRFlowDesignSystem_ba1e9c;

const RECUR_MAP = { "Não recorrente": "none", "Diária": "daily", "Semanal": "weekly", "Mensal": "monthly", "Anual": "yearly", "Personalizada": "custom" };

function NewDemandScreen({ onCancel, onCreate, onToast, user }) {
  const D = window.useStore();
  const S = window.ACRStore;
  const sectors = (D.sectorsCfg || []).filter((s) => s.active !== false);
  const companies = (D.companies || []).filter((c) => c.active !== false);
  const [enviando, setEnviando] = React.useState(false);

  const [sector, setSector] = React.useState((sectors[0] || {}).id);
  const [category, setCategory] = React.useState(((sectors[0] || {}).categories || [])[0] || "");
  const [title, setTitle] = React.useState("");
  const [description, setDescription] = React.useState("");
  const [tags, setTags] = React.useState([]);
  const [newTag, setNewTag] = React.useState("");
  const [addingTag, setAddingTag] = React.useState(false);
  const [priority, setPriority] = React.useState("normal");
  const [due, setDue] = React.useState("");
  const [company, setCompany] = React.useState("");
  const [linked, setLinked] = React.useState([]);
  const [owner, setOwner] = React.useState("");
  const [extras, setExtras] = React.useState([]);
  const [personQ, setPersonQ] = React.useState("");
  const [recur, setRecur] = React.useState("Não recorrente");
  const [recurDay, setRecurDay] = React.useState("25");
  const [autoRecur, setAutoRecur] = React.useState(true);
  const [anexos, setAnexos] = React.useState([]);
  const [confirm, setConfirm] = React.useState(false);
  const [items, setItems] = React.useState([]);

  const current = sectors.find((s) => s.id === sector) || sectors[0] || { id: "", name: "", categories: [] };
  React.useEffect(() => { setCategory(current.categories[0] || ""); }, [sector]);

  const notRecurring = recur === "Não recorrente";
  React.useEffect(() => { if (notRecurring) setAutoRecur(false); }, [recur]);

  const sectorExtras = { "departamento-pessoal": ["Colaborador"] }[sector] || [];
  const peopleOptions = personQ.trim().length === 0 ? [] : (D.team || []).filter((t) =>
    t.active !== false && t.name !== owner && !extras.includes(t.name)
    && t.name.toLowerCase().includes(personQ.trim().toLowerCase()));

  const missing = [!title.trim() && "Título", !description.trim() && "Descrição detalhada", !due && "Prazo de entrega", !category && "Atividade", !owner && "Responsável principal"].filter(Boolean);
  const valid = missing.length === 0;

  const submit = async () => {
    const time = D.team || [];
    const idDe = (nome) => (time.find((u) => u.name === nome) || {}).id;
    const principal = idDe(owner);
    const responsaveis = [principal, ...extras.map(idDe)].filter(Boolean);
    if (S.online() && responsaveis.length === 0) {
      onToast({ tone: "danger", title: "Informe o responsável", message: "Toda demanda precisa de ao menos um responsável cadastrado." });
      return;
    }
    const catId = ((D.catIds || {})[sector] || {})[category];
    const empresa = company || undefined;

    setEnviando(true);
    const r = await S.criarDemanda({
      title: title.trim(),
      description: description.trim() || undefined,
      sectorId: sector,
      categoryId: catId,
      companyId: empresa,
      priorityId: priority,
      requester: (user && user.name) || undefined,
      deadline: due || undefined,
      assigneeIds: responsaveis,
      primaryAssigneeId: principal,
      tags,
      recurrence: { type: RECUR_MAP[recur] || "none", day: Number(recurDay) || undefined, auto: !!autoRecur },
      checklist: items.filter((i) => i.text && i.text.trim()).map((i) => ({ text: i.text.trim(), ownerId: idDe(i.owner), dueDate: i.due || undefined })),
    });
    setEnviando(false);
    if (!r.ok) { onToast({ tone: "danger", title: "Não foi possível criar a demanda", message: r.error }); return; }
    setConfirm(false);
    const num = r.demanda && r.demanda.id ? r.demanda.id : "";
    onToast({ tone: "success", title: num ? "Demanda " + num + " criada" : "Demanda criada", message: owner ? owner + " é o responsável principal." : "Registrada com sucesso." });
    onCreate();
  };

  const dueBR = due ? due.split("-").reverse().join("/") : "—";

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)", maxWidth: 1080 }}>
      <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)" }}>Nova demanda</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>O número é gerado automaticamente ao salvar: <span style={{ font: "var(--type-mono)" }}>DEM-2026-000145</span></span>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.5fr) minmax(0,1fr)", gap: "var(--gap-grid)", alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
          <Card title="Identificação">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <span style={{ font: "var(--type-label)", color: "var(--text-strong)" }}>Setor <span style={{ color: "var(--danger-fg)" }}>*</span></span>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                  {sectors.map((s) => (
                    <button key={s.id} type="button" onClick={() => setSector(s.id)}
                      style={{ padding: "7px 11px", borderRadius: "var(--radius-sm)", cursor: "pointer", font: "var(--type-caption)", background: sector === s.id ? "var(--surface-sunken)" : "var(--surface-card)", border: "1px solid " + (sector === s.id ? "var(--accent-primary)" : "var(--border-default)"), color: sector === s.id ? "var(--text-brand)" : "var(--text-body)" }}>{s.name}</button>
                  ))}
                </div>
              </div>
              <Select label="Categoria" required value={category} onChange={(e) => setCategory(e.target.value)}
                options={current.categories.length ? current.categories : ["—"]}
                hint="Categorias vêm do cadastro de Áreas e Atividades." />
            </div>
            <Input label="Título" required value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Ex.: Emissão de boleto — Alpha" />
            <Textarea label="Descrição detalhada" required rows={4} counterMax={2000} value={description} onChange={(e) => setDescription(e.target.value)}
              placeholder="Descreva o que precisa ser feito, com contexto suficiente para quem vai executar." />
            <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
              <span style={{ font: "var(--type-label)", color: "var(--text-strong)" }}>Tags</span>
              {tags.map((t) => <Tag key={t} onRemove={() => setTags((s) => s.filter((x) => x !== t))}>{t}</Tag>)}
              {addingTag ? (
                <span style={{ display: "flex", gap: 6, alignItems: "center" }}>
                  <Input size="sm" value={newTag} placeholder="nova tag" style={{ width: 140 }}
                    onChange={(e) => setNewTag(e.target.value)}
                    onKeyDown={(e) => { if (e.key === "Enter" && newTag.trim()) { setTags((s) => [...new Set([...s, newTag.trim()])]); setNewTag(""); setAddingTag(false); } }} />
                  <Button variant="secondary" size="sm" disabled={!newTag.trim()} onClick={() => { setTags((s) => [...new Set([...s, newTag.trim()])]); setNewTag(""); setAddingTag(false); }}>Adicionar</Button>
                </span>
              ) : (
                <Button variant="ghost" size="sm" iconLeft={<Icon name="plus" size={14} />} onClick={() => setAddingTag(true)}>Adicionar tag</Button>
              )}
            </div>
          </Card>

          <Card title="Vínculos" subtitle="Empresa do cadastro — condomínios, administradoras e prestadores">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 14 }}>
              <Select label="Empresa" value={company} onChange={(e) => setCompany(e.target.value)}
                options={[{ value: "", label: "Selecione a empresa..." }, ...companies.map((c) => ({ value: c.id, label: c.name + " · " + c.purpose }))]} />
              {sectorExtras.map((label) => (
                <div key={label} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span style={{ font: "var(--type-label)", color: "var(--text-strong)" }}>{label}</span>
                  <SearchField width="100%" placeholder={"Pesquisar " + label.toLowerCase() + "..."} shortcut={null} />
                  <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                    {(window.ACRData.team || []).map((u) => u.name).map((n) => (
                      <button key={n} type="button" onClick={() => setLinked((s) => (s.includes(n) ? s.filter((x) => x !== n) : [...s, n]))}
                        style={{ padding: 0, border: "none", background: "transparent", cursor: "pointer" }}>
                        <Badge tone={linked.includes(n) ? "info" : "neutral"} size="sm">{n}</Badge>
                      </button>
                    ))}
                  </div>
                </div>
              ))}
            </div>
            {company ? <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>Finalidade: {(companies.find((c) => c.id === company) || {}).purpose} · {(companies.find((c) => c.id === company) || {}).doc}</span> : null}
          </Card>

          <Card title="Checklist inicial" subtitle="Opcional — pode ser criado durante a execução">
            <ChecklistPanel title="Etapas" items={items} people={D.team}
              onToggle={(id) => setItems((s) => s.map((i) => (i.id === id ? { ...i, done: !i.done } : i)))}
              onAdd={(it) => setItems((s) => [...s, { ...it, id: "c" + Date.now(), done: false }])}
              onUpdate={(id, patch) => setItems((s) => s.map((i) => (i.id === id ? { ...i, ...patch } : i)))}
              onRemove={(id) => setItems((s) => s.filter((i) => i.id !== id))} />
          </Card>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
          <Card title="Prazo e prioridade">
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <span style={{ font: "var(--type-label)", color: "var(--text-strong)" }}>Prioridade <span style={{ color: "var(--danger-fg)" }}>*</span></span>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                {D.priorities.map((p) => (
                  <button key={p.id} type="button" onClick={() => setPriority(p.id)} style={{ padding: 3, borderRadius: "var(--radius-pill)", border: "1px solid " + (priority === p.id ? "var(--prio-" + p.tone + ")" : "transparent"), background: "transparent", cursor: "pointer" }}>
                    <PriorityBadge priority={p.id} label={p.name} tone={p.tone} />
                  </button>
                ))}
              </div>
            </div>
            <Input label="Data de abertura" value={new Date().toLocaleDateString("pt-BR")} readOnly disabled iconLeft={<Icon name="calendar" size={15} />} hint="Registrada automaticamente na criação." />
            <Input label="Prazo de entrega" required type="date" value={due} onChange={(e) => setDue(e.target.value)} hint="O sistema alerta 1 dia antes do vencimento." />
          </Card>

          <Card title="Responsáveis" subtitle="Ao menos um responsável é obrigatório">
            {owner
              ? <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <Avatar name={owner} role="Responsável principal" showName style={{ flex: 1 }} />
                  <Button variant="ghost" size="sm" onClick={() => setOwner("")}>Remover</Button>
                </div>
              : <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 12px", borderRadius: "var(--radius-sm)", border: "1px dashed var(--border-default)", font: "var(--type-caption)", color: "var(--text-muted)" }}>
                  <Icon name="user-plus" size={15} />Nenhum responsável definido — pesquise abaixo.
                </div>}
            {extras.map((n) => (
              <div key={n} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <Avatar name={n} role="Responsável adicional" showName style={{ flex: 1 }} />
                <Button variant="ghost" size="sm" onClick={() => setExtras((s) => s.filter((x) => x !== n))}>Remover</Button>
              </div>
            ))}
            <SearchField width="100%" placeholder="Digite o nome do colaborador..." shortcut={null} value={personQ} onChange={(e) => setPersonQ(e.target.value)} onClear={() => setPersonQ("")} />
            {personQ.trim() ? (
              <div style={{ display: "flex", flexDirection: "column", gap: 4, border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-sm)", padding: 6 }}>
                {peopleOptions.length ? peopleOptions.slice(0, 6).map((t) => (
                  <div key={t.id} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <Avatar name={t.name} size="sm" />
                    <span style={{ flex: 1, font: "var(--type-body)", color: "var(--text-strong)" }}>{t.name}</span>
                    {owner ? <Button variant="ghost" size="sm" onClick={() => { setExtras((s) => [...s, t.name]); setPersonQ(""); }}>Adicionar</Button> : null}
                    <Button variant="soft" size="sm" onClick={() => { setExtras((s) => [...s.filter((x) => x !== t.name), owner].filter(Boolean)); setOwner(t.name); setPersonQ(""); }}>{owner ? "Tornar principal" : "Definir responsável"}</Button>
                  </div>
                )) : <span style={{ font: "var(--type-caption)", color: "var(--text-muted)", padding: "4px 2px" }}>{(D.team || []).length === 0 ? "Nenhum colaborador cadastrado — cadastre em Controle de Acesso." : "Nenhum colaborador com esse nome."}</span>}
              </div>
            ) : null}
          </Card>

          <Card title="Recorrência">
            <Select label="Periodicidade" value={recur} onChange={(e) => setRecur(e.target.value)}
              options={["Não recorrente", "Diária", "Semanal", "Mensal", "Anual", "Personalizada"]} />
            {recur === "Mensal" ? <Input label="Dia do mês" value={recurDay} onChange={(e) => setRecurDay(e.target.value)} suffix="dia" /> : null}
            <Switch checked={autoRecur && !notRecurring} disabled={notRecurring} onChange={() => setAutoRecur((v) => !v)}
              label="Gerar automaticamente a próxima demanda"
              description={notRecurring ? "Disponível apenas para demandas recorrentes." : "Preserva o histórico das anteriores."} />
          </Card>

          <Card title="Anexos">
            <FileDropzone files={anexos} hint="PDF, imagens, planilhas — até 20 MB"
              onAdd={(f) => setAnexos((s) => [...s, ...f])}
              onRemove={(id) => setAnexos((s) => s.filter((f) => f.id !== id))} />
          </Card>
        </div>
      </div>

      <Card padding="14px 16px">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14, flexWrap: "wrap" }}>
          <span style={{ font: "var(--type-caption)", color: valid ? "var(--text-muted)" : "var(--danger-fg)" }}>
            {valid ? "Tudo pronto — a demanda entra como Aguardando atendimento até a primeira interação do responsável." : "Campos obrigatórios pendentes: " + missing.join(", ") + "."}
          </span>
          <div style={{ display: "flex", gap: 8 }}>
            <Button variant="secondary" onClick={onCancel}>Cancelar</Button>
            <Button variant="primary" iconLeft={<Icon name="check" size={16} />} disabled={!valid} onClick={() => setConfirm(true)}>Criar demanda</Button>
          </div>
        </div>
      </Card>

      {confirm ? (
        <Modal title="Confirmar criação da demanda" subtitle="Revise antes de registrar" tone="info" width={560} onClose={() => setConfirm(false)}
          footer={<><Button variant="secondary" onClick={() => setConfirm(false)}>Voltar e editar</Button><Button variant="primary" iconLeft={<Icon name="check" size={16} />} disabled={enviando} onClick={submit}>{enviando ? "Gravando…" : "Confirmar e criar"}</Button></>}>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <span style={{ font: "var(--type-h3)", color: "var(--text-strong)" }}>{title}</span>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              <SectorTag sector={sector} label={current.name} />
              <PriorityBadge priority={priority} />
              <StatusPill status="aguardando_atendimento" />
            </div>
            {[["Atividade", category || "—"], ["Empresa", (companies.find((c) => c.id === company) || {}).name || "—"], ["Prazo de entrega", dueBR], ["Responsável principal", owner || "—"], ["Responsáveis adicionais", extras.length ? extras.join(", ") : "—"], ["Recorrência", notRecurring ? "Não recorrente" : recur + (recur === "Mensal" ? " · dia " + recurDay : "") + (autoRecur ? " · geração automática" : "")], ["Checklist", items.length + " etapas"], ["Anexos", anexos.length ? anexos.length + " arquivo(s)" : "—"]].map(([k, v]) => (
              <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "6px 0", borderBottom: "1px solid var(--border-subtle)" }}>
                <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{k}</span>
                <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)", textAlign: "right" }}>{v}</span>
              </div>
            ))}
          </div>
        </Modal>
      ) : null}
    </div>
  );
}

Object.assign(window, { NewDemandScreen });