const { Card, Tabs, Button, Icon, IconButton, DropdownMenu, Breadcrumbs, StatusPill, PriorityBadge, SectorTag, DeadlineIndicator, ChecklistPanel, Timeline, Avatar, AvatarGroup, ProgressBar, Tag, Modal, Textarea, Badge, DataTable, Tooltip, FileDropzone, CommentComposer, Select, Checkbox, Switch, SearchField } = window.ACRFlowDesignSystem_ba1e9c;

const SECTOR_LABEL = new Proxy({}, { get: (_, id) => { const s = (window.ACRData.sectorsCfg || []).find((x) => x.id === id); return s ? s.name : "Setor"; } });

function AssignModal({ current, sector, onClose, onConfirm }) {
  const team = (window.ACRData.team || []).filter((m) => m.active !== false);
  const [toSector, setToSector] = React.useState(sector);
  const [owner, setOwner] = React.useState(current[0] ? current[0].name : "");
  const [extras, setExtras] = React.useState(current.slice(1).map((p) => p.name));
  const [q, setQ] = React.useState("");
  const [note, setNote] = React.useState("");
  const [notify, setNotify] = React.useState(true);
  // Qualquer colaborador ativo pode ser responsável — o setor é só informativo,
  // já que um supervisor pode atender mais de uma área.
  const list = team.filter((m) => m.name.toLowerCase().includes(q.toLowerCase()));
  const forwarding = toSector !== sector;

  return (
    <Modal title="Atribuir / encaminhar demanda" subtitle="O responsável escolhido recebe notificação imediata" tone="info" onClose={onClose} width={620}
      footer={<><Button variant="secondary" onClick={onClose}>Cancelar</Button><Button variant="primary" iconLeft={<Icon name={forwarding ? "corner-up-right" : "user-check"} size={16} />} disabled={!owner} onClick={() => onConfirm({ owner, extras, toSector, note })}>{forwarding ? "Encaminhar e atribuir" : "Salvar atribuição"}</Button></>}>
      <Select label="Setor responsável" value={toSector} onChange={(e) => setToSector(e.target.value)}
        options={window.ACRData.sectorsCfg.filter((s) => s.active).map((s) => ({ value: s.id, label: s.name }))}
        hint={forwarding ? "A demanda será encaminhada para outra área — o histórico é preservado." : "Qualquer colaborador ativo pode ser responsável, de qualquer área."} />
      <SearchField placeholder="Buscar pessoa da equipe..." shortcut="" width="100%" value={q} onChange={(e) => setQ(e.target.value)} />
      <div style={{ display: "flex", flexDirection: "column", gap: 6, flexShrink: 0, minHeight: 160, maxHeight: 240, overflowY: "auto" }}>
        {list.map((m) => {
          const isOwner = m.name === owner;
          const isExtra = extras.includes(m.name);
          return (
            <div key={m.name} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", border: "1px solid " + (isOwner ? "var(--border-focus)" : "var(--border-subtle)"), borderRadius: "var(--radius-sm)", background: isOwner ? "var(--surface-sunken)" : "var(--surface-card)" }}>
              <Avatar name={m.name} size="sm" />
              <span style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }}>
                <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{m.name}</span>
                <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{[m.role, m.profile === "supervisor" ? "Supervisor" : "Operacional", m.email].filter(Boolean).join(" · ")}</span>
              </span>
              {isOwner ? <Badge tone="info" size="sm">Principal</Badge> : (
                <Button variant="ghost" size="sm" onClick={() => { setOwner(m.name); setExtras((s) => s.filter((n) => n !== m.name)); }}>Tornar principal</Button>
              )}
              <Checkbox checked={isExtra} disabled={isOwner} label="Adicional"
                onChange={() => setExtras((s) => (s.includes(m.name) ? s.filter((n) => n !== m.name) : [...s, m.name]))} />
            </div>
          );
        })}
        {!list.length ? <span style={{ font: "var(--type-caption)", color: "var(--text-muted)", padding: "8px 2px" }}>{team.length === 0 ? "Nenhum colaborador cadastrado — cadastre em Controle de Acesso." : "Nenhuma pessoa com esse nome."}</span> : null}
      </div>
      <Textarea label={forwarding ? "Motivo do encaminhamento" : "Observação para o responsável"} rows={2} value={note} onChange={(e) => setNote(e.target.value)}
        placeholder={forwarding ? "Ex.: demanda é de competência da Contabilidade." : "Ex.: priorizar a geração dos boletos hoje."} />
      <Switch checked={notify} onChange={() => setNotify((v) => !v)} label="Notificar por e-mail e WhatsApp" description="O responsável principal e os adicionais recebem o aviso." />
    </Modal>
  );
}

function Field({ label, children }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      <span style={{ font: "var(--type-overline)", color: "var(--text-muted)", letterSpacing: "var(--tracking-caps)" }}>{label}</span>
      <span style={{ font: "var(--type-body)", color: "var(--text-strong)" }}>{children}</span>
    </div>
  );
}

function DemandDetailScreen({ user, demandId, onBack, onToast }) {
  const D = window.ACRData;
  const demand = D.demands.find((d) => d.id === demandId) || D.demands[1];
  const supervisor = user.profile === "supervisor";
  const souResponsavel = (demand.people || []).some((p) => p.name === user.name);
  const souCriador = demand.openedById ? demand.openedById === user.id : demand.requester === user.name;
  const podeMexer = supervisor || souResponsavel || souCriador;
  const podeExcluir = supervisor || souCriador;
  const [tab, setTab] = React.useState("visao");
  const [items, setItems] = React.useState(window.ACRStore.online() ? [] : (D.checklist || []));
  const [modal, setModal] = React.useState(null);
  const [status, setStatus] = React.useState(demand.status === "atribuida" ? "aguardando_atendimento" : demand.status);
  const [touched, setTouched] = React.useState(!["aguardando_atendimento", "atribuida", "aberta", "triagem"].includes(demand.status));
  const S = window.ACRStore;
  const [detalhe, setDetalhe] = React.useState(null);
  const [editandoId, setEditandoId] = React.useState(null);
  const [rascunho, setRascunho] = React.useState("");
  const [apagarComentario, setApagarComentario] = React.useState(null);
  const [anexoUrls, setAnexoUrls] = React.useState({});
  const [edicao, setEdicao] = React.useState(null);
  const [uploads, setUploads] = React.useState([]);
  const [enviando, setEnviando] = 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 [people, setPeople] = React.useState(demand.people);
  const [sector, setSector] = React.useState(demand.sector);
  const [assign, setAssign] = React.useState(null);
  const [priority, setPriority] = React.useState(demand.priority);
  const [log, setLog] = React.useState([]);
  const [comments, setComments] = React.useState([]);

  /** Ao abrir, busca no banco o conteúdo completo desta demanda. */
  const recarregarDetalhe = React.useCallback(async () => {
    const d = await S.carregarDemanda(demand.id);
    if (!d) return;
    setDetalhe(d);
    setComments((d.comments || []).map((c) => ({
      id: c.id, userId: c.user_id, editado: !!c.edited_at,
      n: c.user_name || "—",
      d: new Date(c.created_at).toLocaleString("pt-BR", { dateStyle: "short", timeStyle: "short" }),
      t: c.body,
      files: (d.attachments || []).filter((a) => a.comment_id === c.id).map((a) => ({
        id: a.id, name: a.file_name, url: a.public_url || null, key: a.storage_key,
        isImage: (a.kind === "imagem") || (a.content_type || "").startsWith("image/"),
      })),
    })));
    setItems((d.checklist || []).map((i) => ({
      id: i.id, text: i.text, done: !!i.done,
      owner: ((D.team || []).find((u) => u.id === i.owner_id) || {}).name || "",
      due: i.due_date ? String(i.due_date).slice(0, 10) : "",
      note: i.note || "",
    })));
    setLog([]);
  }, [demand.id]);

  React.useEffect(() => { recarregarDetalhe(); }, [recarregarDetalhe]);

  /** Bucket é privado: pede a URL assinada de cada imagem para exibir no comentário. */
  React.useEffect(() => {
    if (!S.online() || !detalhe) return;
    const pendentes = (detalhe.attachments || []).filter((a) => !a.public_url && !anexoUrls[a.id]);
    if (!pendentes.length) return;
    let vivo = true;
    Promise.all(pendentes.map(async (a) => {
      try { const r = await window.ACRApi.attachments.url(a.id); return [a.id, r.url]; } catch { return null; }
    })).then((pares) => {
      if (!vivo) return;
      const mapa = {};
      pares.filter(Boolean).forEach(([id, url]) => (mapa[id] = url));
      if (Object.keys(mapa).length) setAnexoUrls((s) => ({ ...s, ...mapa }));
    });
    return () => { vivo = false; };
  }, [detalhe]);

  const abrirAnexo = async (f) => {
    const url = f.url || anexoUrls[f.id];
    if (url) { window.open(url, "_blank", "noopener"); return; }
    try { const r = await window.ACRApi.attachments.url(f.id); window.open(r.url, "_blank", "noopener"); }
    catch { onToast({ tone: "danger", title: "Não foi possível abrir o anexo" }); }
  };
  const historico = (detalhe && detalhe.history || []).map((h) => ({
    id: h.id, kind: "status", actor: (h.user_name || "Sistema").split(" ")[0], text: h.description || h.action,
    date: new Date(h.created_at).toLocaleDateString("pt-BR"),
    time: new Date(h.created_at).toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }),
  }));
  const anexosBanco = (detalhe && detalhe.attachments || []).map((a) => ({
    name: a.file_name, desc: a.description || "", type: a.kind || (a.content_type && a.content_type.startsWith("image/") ? "Imagem" : "Arquivo"),
    user: a.uploaded_by_name || "", date: new Date(a.uploaded_at).toLocaleString("pt-BR", { dateStyle: "short", timeStyle: "short" }),
  }));
  const evidenceRows = [
    ...uploads.map((f) => ({ name: f.name, desc: "Anexado agora nesta demanda", type: f.kind, user: user.name, date: new Date().toLocaleDateString("pt-BR") + " " + new Date().toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }) })),
    ...anexosBanco,
    ...(S.online() ? [] : D.evidences),
  ];
  const done = items.filter((i) => i.done).length;
  const pct = items.length ? Math.round((done / items.length) * 100) : 0;
  const events = S.online() ? [...historico, ...log] : [...D.timeline, ...log];

  const toggle = async (id) => {
    const atual = items.find((i) => i.id === id);
    const r = await S.checklistAtualizar(demand.id, id, { done: !(atual && atual.done) });
    if (falhou(r)) return;
    registerInteraction("Checklist atualizado.");
    setItems((s) => s.map((i) => (i.id === id ? { ...i, done: !i.done } : i)));
  };

  const now = () => new Date().toLocaleDateString("pt-BR") + " " + new Date().toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });

  const logEvent = (text, meta) => setLog((s) => [...s, { id: "l" + Date.now() + Math.random(), kind: "status", actor: user.name.split(" ")[0], text, meta, date: now().slice(0, 10), time: now().slice(11) }]);

  const setStatusManual = async (next) => {
    if (next === status) return;
    const label = (D.statuses.find((s) => s.id === next) || {}).name || next;
    const r = await S.atualizarDemanda(demand.id, { statusId: next });
    if (falhou(r)) return;
    setStatus(next);
    logEvent('alterou o status para "' + label + '".');
    onToast({ tone: "info", title: "Status alterado", message: "Agora: " + label });
  };

  /** Primeira interação do operacional tira a demanda de "Aguardando atendimento". */
  const registerInteraction = (what) => {
    if (touched) return;
    setTouched(true);
    if (status === "aguardando_atendimento") {
      setStatus("andamento");
      logEvent('iniciou o atendimento — status alterado automaticamente para "Em andamento".', what);
      onToast({ tone: "success", title: "Atendimento iniciado", message: "A demanda passou para Em andamento." });
    }
  };

  const changePriority = async (p) => {
    if (p === priority) return;
    const label = (D.priorities.find((x) => x.id === p) || {}).name || p;
    const from = (D.priorities.find((x) => x.id === priority) || {}).name || priority;
    const r = await S.atualizarDemanda(demand.id, { priorityId: p });
    if (falhou(r)) return;
    setPriority(p);
    setLog((s) => [...s, { id: "p" + Date.now(), kind: "status", actor: user.name.split(" ")[0], text: "alterou a prioridade de " + from + " para " + label + ".", date: now().slice(0, 10), time: now().slice(11) }]);
    onToast({ tone: p === "urgente" ? "danger" : "info", title: "Prioridade alterada", message: "Agora esta demanda está como " + label + "." });
  };

  const applyAssign = async ({ owner, extras, toSector, note }) => {
    const idDe = (n) => ((D.team || []).find((u) => u.name === n) || {}).id;
    const principal = idDe(owner);
    const ids = [principal, ...extras.map(idDe)].filter(Boolean);
    if (ids.length) {
      const r = await S.atualizarDemanda(demand.id, { assigneeIds: ids, primaryAssigneeId: principal, note: note || undefined });
      if (falhou(r)) return;
    }
    setPeople([{ name: owner }, ...extras.map((n) => ({ name: n }))]);
    setStatus("aguardando_atendimento");
    setTouched(false);
    setSector(toSector);
    const changedSector = toSector !== demand.sector;
    setLog((s) => [...s, {
      id: "a" + Date.now(), kind: "status", actor: user.name.split(" ")[0],
      text: changedSector ? "encaminhou a demanda para " + SECTOR_LABEL[toSector] + " e atribuiu a " + owner + "." : "atribuiu a demanda a " + owner + ".",
      date: now().slice(0, 10), time: now().slice(11),
      meta: (extras.length ? "Responsáveis adicionais: " + extras.join(", ") + ". " : "") + (note || "") + " Status: Aguardando atendimento até a primeira interação do responsável.",
    }]);
    setAssign(null);
    onToast({ tone: "success", title: changedSector ? "Demanda encaminhada" : "Demanda atribuída", message: owner + " foi notificado por e-mail e WhatsApp." });
  };

  const [resumo, setResumo] = React.useState("");
  const [resultado, setResultado] = React.useState("");
  const [motivo, setMotivo] = React.useState("");

  const close = async (kind) => {
    setEnviando(true);
    let r = { ok: true };
    if (kind === "solicitar") r = await S.solicitarEncerramento(demand.id, { summary: resumo.trim() || "Atividades concluídas.", result: resultado.trim() || undefined });
    if (kind === "aprovar") r = await S.atualizarDemanda(demand.id, { statusId: "encerrada" });
    if (kind === "devolver") r = await S.devolverDemanda(demand.id, motivo.trim() || "Devolvida para ajustes.");
    setEnviando(false);
    if (falhou(r)) return;
    setModal(null);
    if (kind === "solicitar") { setStatus("aguardando_aprovacao"); setResumo(""); setResultado(""); onToast({ tone: "success", title: "Encerramento solicitado", message: "Aguardando aprovação do supervisor." }); }
    if (kind === "aprovar") { setStatus("encerrada"); onToast({ tone: "success", title: "Encerramento aprovado", message: demand.id + " foi encerrada." }); }
    if (kind === "devolver") { setStatus("andamento"); setMotivo(""); onToast({ tone: "danger", title: "Demanda devolvida", message: "O responsável foi notificado com o motivo." }); }
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <IconButton icon={<Icon name="arrow-left" size={18} />} label="Voltar" variant="outline" onClick={onBack} />
        <Breadcrumbs items={[{ label: "Demandas", href: "#" }, SECTOR_LABEL[sector] || "Setor", demand.id]} />
      </div>

      <Card padding="var(--pad-card)">
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 18, flexWrap: "wrap" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, minWidth: 320 }}>
            <span style={{ font: "var(--type-mono)", color: "var(--text-muted)", letterSpacing: "var(--tracking-wide)" }}>{demand.id}</span>
            <h1 style={{ font: "var(--type-h2)", color: "var(--text-strong)" }}>{demand.title}</h1>
            <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
              <SectorTag sector={sector} />
              <DropdownMenu align="left"
                trigger={<button type="button" title="Alterar status" disabled={status === "encerrada" && !supervisor} style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: 2, paddingRight: 6, border: "1px dashed var(--border-default)", borderRadius: "var(--radius-pill)", background: "transparent", cursor: "pointer" }}><StatusPill status={status} label={(D.statuses.find((s) => s.id === status) || {}).name} tone={(D.statuses.find((s) => s.id === status) || {}).tone} /><Icon name="chevron-down" size={13} style={{ color: "var(--text-muted)" }} /></button>}
                items={D.statuses.filter((s) => s.id !== "encerrada" || supervisor).map((s) => ({
                  label: s.name, icon: <Icon name={s.id === status ? "check" : "circle"} size={15} />,
                  onSelect: () => setStatusManual(s.id),
                }))} />
              <DropdownMenu align="left"
                trigger={<button type="button" title="Alterar prioridade" disabled={status === "encerrada"} style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: 2, paddingRight: 6, border: "1px dashed var(--border-default)", borderRadius: "var(--radius-pill)", background: "transparent", cursor: status === "encerrada" ? "default" : "pointer" }}><PriorityBadge priority={priority} label={(D.priorities.find((p) => p.id === priority) || {}).name} tone={(D.priorities.find((p) => p.id === priority) || {}).tone} />{status === "encerrada" ? null : <Icon name="chevron-down" size={13} style={{ color: "var(--text-muted)" }} />}</button>}
                items={D.priorities.map((p) => ({
                  label: "Prioridade " + p.name, icon: <Icon name={p.tone === "urgente" ? "flame" : "flag"} size={15} />,
                  onSelect: () => changePriority(p.id),
                }))} />
              <DeadlineIndicator daysLeft={demand.daysLeft} date={demand.due} />
              {demand.tags.map((t) => <Tag key={t}>{t}</Tag>)}
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 12 }}>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }}>
              {status === "encerrada" ? null : (
                <Button variant="secondary" iconLeft={<Icon name="user-check" size={16} />} onClick={() => setAssign(true)}>Atribuir / encaminhar</Button>
              )}
              {status === "aguardando_aprovacao" && supervisor ? (
                <>
                  <Button variant="danger" iconLeft={<Icon name="corner-up-left" size={16} />} onClick={() => setModal("devolver")}>Devolver para execução</Button>
                  <Button variant="success" iconLeft={<Icon name="shield-check" size={16} />} onClick={() => setModal("aprovar")}>Aprovar encerramento</Button>
                </>
              ) : status === "aguardando_aprovacao" ? (
                <Tooltip label="Somente o Supervisor aprova"><Button variant="secondary" disabled iconLeft={<Icon name="lock" size={16} />}>Aguardando aprovação</Button></Tooltip>
              ) : status === "encerrada" ? (
                <Button variant="secondary" iconLeft={<Icon name="rotate-ccw" size={16} />} disabled={!supervisor}>Reabrir demanda</Button>
              ) : (
                <Button variant="primary" iconLeft={<Icon name="send" size={16} />} onClick={() => setModal("solicitar")}>Solicitar encerramento</Button>
              )}
              <DropdownMenu align="right" trigger={<IconButton icon={<Icon name="more-horizontal" size={18} />} label="Ações" variant="outline" />}
                items={[
                  { label: "Atribuir / encaminhar", icon: <Icon name="user-check" size={15} />, onSelect: () => setAssign(true) },
                  ...(podeMexer ? [{ label: "Editar demanda", icon: <Icon name="pencil" size={15} />, onSelect: () => { setEdicao({ title: demand.title, description: demand.description || "", priorityId: priority, deadline: demand.dueISO || "" }); } }] : []),
                  { divider: true },
                  ...(podeExcluir ? [{ label: "Excluir demanda", icon: <Icon name="trash-2" size={15} />, tone: "danger", onSelect: () => setModal("excluir") }] : []),
                ]} />
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <div style={{ width: 200 }}><ProgressBar value={pct} showValue countLabel={done + " de " + items.length + " etapas"} tone={pct === 100 ? "success" : "flow"} /></div>
              <AvatarGroup people={people} />
            </div>
          </div>
        </div>
      </Card>

      {status === "aguardando_atendimento" ? (
        <Card padding="12px 16px" style={{ background: "var(--surface-sunken)", border: "1px solid var(--border-subtle)" }}>
          <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <Icon name="hourglass" size={16} style={{ color: "var(--text-muted)" }} />
            <span style={{ font: "var(--type-body)", color: "var(--text-body)" }}>Aguardando atendimento — a demanda passa para <strong>Em andamento</strong> automaticamente na primeira interação do responsável (comentário, checklist ou evidência).</span>
          </span>
        </Card>
      ) : null}

      <Tabs value={tab} onChange={setTab} tabs={[
        { id: "visao", label: "Visão geral" },
        { id: "check", label: "Checklist", count: items.length },
        { id: "coment", label: "Comentários", count: comments.length },
        { id: "hist", label: "Histórico" },
      ]} />

      {tab === "visao" ? (
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.6fr) minmax(0,1fr)", gap: "var(--gap-grid)", alignItems: "start" }}>
          <Card title="Descrição detalhada">
            <p style={{ font: "var(--type-body)", color: "var(--text-body)", margin: 0 }}>
              {demand.description || "Sem descrição registrada."}
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(150px,1fr))", gap: 16, marginTop: 8 }}>
              <Field label="SOLICITANTE">{demand.requester || "—"}</Field>
              <Field label="CATEGORIA">{demand.category || "—"}</Field>
              <Field label="ABERTURA">{demand.opened}</Field>
              <Field label="PRAZO">{demand.due}</Field>
              <Field label="VÍNCULO">{demand.context || "—"}</Field>
              <Field label="RECORRÊNCIA">{demand.recurrenceLabel || "Não recorrente"}</Field>
            </div>
          </Card>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
            <Card title="Responsáveis" actions={status === "encerrada" ? null : <Button variant="ghost" size="sm" iconLeft={<Icon name="user-check" size={15} />} onClick={() => setAssign(true)}>Atribuir</Button>}>
              <Avatar name={people[0].name} role="Responsável principal" showName size="md" />
              {people.slice(1).map((p) => <Avatar key={p.name} name={p.name} role="Responsável adicional" showName />)}
              <Button variant="ghost" size="sm" iconLeft={<Icon name="user-plus" size={15} />} style={{ alignSelf: "flex-start" }} onClick={() => setAssign(true)}>Adicionar responsável</Button>
              <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>Setor responsável: {SECTOR_LABEL[sector]}</span>
            </Card>
            <Card title="Últimas atividades" padding="var(--pad-card)">
              <Timeline events={events.slice(-3)} />
            </Card>
          </div>
        </div>
      ) : null}

      {tab === "check" ? <Card><ChecklistPanel title={"Checklist — " + demand.title} items={items} people={D.team} onToggle={toggle} readOnly={status === "encerrada"}
        onAdd={async (it) => { const idDe = (n) => ((D.team || []).find((u) => u.name === n) || {}).id; const r = await S.checklistAdicionar(demand.id, { text: it.text, ownerId: idDe(it.owner), dueDate: it.due || undefined }); if (falhou(r)) return; registerInteraction("Etapa criada no checklist."); setItems((s) => [...s, { ...it, id: "c" + Date.now(), done: false }]); onToast({ tone: "success", title: "Etapa criada", message: it.text }); }}
        onUpdate={async (id, patch) => { const idDe = (n) => ((D.team || []).find((u) => u.name === n) || {}).id; const body = {}; if (patch.text !== undefined) body.text = patch.text; if (patch.done !== undefined) body.done = patch.done; if (patch.owner !== undefined) body.ownerId = idDe(patch.owner) || null; if (patch.due !== undefined) body.dueDate = patch.due || null; const r = await S.checklistAtualizar(demand.id, id, body); if (falhou(r)) return; registerInteraction("Checklist editado."); setItems((s) => s.map((i) => (i.id === id ? { ...i, ...patch } : i))); onToast({ tone: "info", title: "Etapa atualizada", message: patch.text }); }}
        onRemove={async (id) => { const it = items.find((i) => i.id === id); const r = await S.checklistRemover(demand.id, id); if (falhou(r)) return; setItems((s) => s.filter((i) => i.id !== id)); onToast({ tone: "danger", title: "Etapa excluída", message: it && it.text }); }} /></Card> : null}

      {tab === "hist" ? <Card title={tab === "hist" ? "Histórico completo" : "Atividades"}><Timeline events={events} /></Card> : null}

      {tab === "evid" ? (
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
          <Card title="Anexar evidências" subtitle="Arraste arquivos, cole um print com Ctrl+V ou selecione do computador">
            <FileDropzone files={uploads} disabled={status === "encerrada"}
              onAdd={async (f) => { setEnviando(true); const r = await S.anexar(demand.id, f); setEnviando(false); if (falhou(r)) return; registerInteraction("Evidência anexada."); setUploads((s) => [...s, ...f]); onToast({ tone: "success", title: f.length > 1 ? f.length + " arquivos anexados" : "Arquivo anexado", message: f.map((x) => x.name).join(", ") }); }}
              onRemove={(id) => setUploads((s) => s.filter((f) => f.id !== id))} />
          </Card>
          <Card title="Evidências" subtitle="O Supervisor revisa estas evidências antes de aprovar o encerramento" padding="0">
            <DataTable
              columns={[
                { key: "name", label: "Arquivo", render: (r) => <span style={{ display: "flex", alignItems: "center", gap: 9 }}><Icon name={r.type === "Imagem" ? "image" : r.type === "Planilha" ? "table-2" : "file-text"} size={16} style={{ color: "var(--text-muted)" }} /><span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{r.name}</span></span> },
                { key: "desc", label: "Descrição" },
                { key: "type", label: "Tipo", width: 96, render: (r) => <Badge tone="neutral" size="sm">{r.type}</Badge> },
                { key: "user", label: "Usuário", width: 150 },
                { key: "date", label: "Data", width: 150, render: (r) => <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: "var(--text-muted)" }}>{r.date}</span> },
              ]} rows={evidenceRows} rowKey="name" dense />
          </Card>
        </div>
      ) : null}

      {tab === "coment" ? (
        <Card title="Comentários" subtitle="Cole um print direto no campo com Ctrl+V ou anexe arquivos ao comentário">
          {comments.length === 0 ? <div style={{ padding: "14px 2px", font: "var(--type-body)", color: "var(--text-muted)" }}>Nenhum comentário ainda.</div> : null}
          {comments.map((c, i) => {
            const meu = c.userId ? c.userId === user.id : c.n === user.name;
            const editando = editandoId === c.id;
            return (
            <div key={c.id || i} style={{ display: "flex", gap: 11, padding: "12px 0", borderBottom: "1px solid var(--border-subtle)" }}>
              <Avatar name={c.n} size="sm" />
              <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }}>
                <span style={{ display: "flex", gap: 8, alignItems: "baseline", flexWrap: "wrap" }}>
                  <strong style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{c.n}</strong>
                  <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: "var(--text-subtle)" }}>{c.d}</span>
                  {c.editado ? <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)" }}>· editado</span> : null}
                  <span style={{ flex: 1 }} />
                  {meu && status !== "encerrada" && !editando ? (
                    <span style={{ display: "flex", gap: 4 }}>
                      <Button variant="ghost" size="sm" onClick={() => { setEditandoId(c.id); setRascunho(c.t); }}>Editar</Button>
                      <Button variant="ghost" size="sm" tone="danger" onClick={() => setApagarComentario(c)}>Excluir</Button>
                    </span>
                  ) : null}
                </span>
                {editando ? (
                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    <Textarea rows={3} value={rascunho} onChange={(e) => setRascunho(e.target.value)} />
                    <div style={{ display: "flex", gap: 8 }}>
                      <Button variant="primary" size="sm" disabled={enviando || !rascunho.trim()} onClick={async () => {
                        setEnviando(true);
                        const r = await S.editarComentario(demand.id, c.id, rascunho.trim());
                        setEnviando(false);
                        if (falhou(r)) return;
                        setEditandoId(null);
                        await recarregarDetalhe();
                        onToast({ tone: "success", title: "Comentário atualizado" });
                      }}>Salvar</Button>
                      <Button variant="secondary" size="sm" onClick={() => setEditandoId(null)}>Cancelar</Button>
                    </div>
                  </div>
                ) : c.t ? <span style={{ font: "var(--type-body)", whiteSpace: "pre-wrap" }}>{c.t}</span> : null}
                {c.files && c.files.length ? (
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 2 }}>
                    {c.files.map((f) => (
                      <button key={f.id} type="button" title={f.name} onClick={() => abrirAnexo(f)}
                        style={{ padding: 0, border: "none", background: "transparent", cursor: "pointer" }}>
                        {f.isImage ? (
                          <img src={f.url || anexoUrls[f.id] || ""} alt={f.name}
                            onError={(e) => { e.target.style.display = "none"; }}
                            style={{ width: 190, height: 118, objectFit: "cover", borderRadius: "var(--radius-sm)", border: "1px solid var(--border-subtle)", display: "block" }} />
                        ) : (
                          <span style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "8px 12px", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-sm)", background: "var(--surface-sunken)", font: "var(--type-caption)", color: "var(--text-strong)" }}>
                            <Icon name="paperclip" size={13} />{f.name}
                          </span>
                        )}
                      </button>
                    ))}
                  </div>
                ) : null}
              </div>
            </div>
          );})}
          <CommentComposer author={user.name} disabled={status === "encerrada"}
            onSubmit={async ({ text, files }) => {
              setEnviando(true);
              const r = await S.comentar(demand.id, text, files);
              setEnviando(false);
              if (falhou(r)) return;
              registerInteraction("Comentário publicado.");
              setComments((s) => [...s, { n: user.name, d: now(), t: text, files }]);
              if (files.length) setUploads((s) => [...s, ...files]);
              onToast({ tone: "success", title: "Comentário publicado", message: files.length ? files.length + (files.length === 1 ? " anexo salvo no storage." : " anexos salvos no storage.") : undefined });
            }} />
        </Card>
      ) : null}

      {assign ? <AssignModal current={people} sector={sector} onClose={() => setAssign(null)} onConfirm={applyAssign} /> : null}

      {edicao ? (
        <Modal title="Editar demanda" subtitle={demand.id} tone="info" width={620} onClose={() => setEdicao(null)}
          footer={<><Button variant="secondary" onClick={() => setEdicao(null)}>Cancelar</Button>
            <Button variant="primary" disabled={enviando || !edicao.title.trim()} onClick={async () => {
              setEnviando(true);
              const r = await S.editarDemanda(demand.id, {
                title: edicao.title.trim(),
                description: edicao.description.trim(),
                priorityId: edicao.priorityId,
                deadline: edicao.deadline || null,
              });
              setEnviando(false);
              if (falhou(r)) return;
              setPriority(edicao.priorityId);
              setEdicao(null);
              await recarregarDetalhe();
              onToast({ tone: "success", title: "Demanda atualizada" });
            }}>{enviando ? "Gravando…" : "Salvar alterações"}</Button></>}>
          <Input label="Título" required value={edicao.title} onChange={(e) => setEdicao({ ...edicao, title: e.target.value })} />
          <Textarea label="Descrição detalhada" rows={5} value={edicao.description} onChange={(e) => setEdicao({ ...edicao, description: e.target.value })} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <Select label="Prioridade" value={edicao.priorityId} onChange={(e) => setEdicao({ ...edicao, priorityId: e.target.value })}
              options={(D.priorities || []).map((p) => ({ value: p.id, label: p.name }))} />
            <Input label="Prazo de entrega" type="date" value={edicao.deadline} onChange={(e) => setEdicao({ ...edicao, deadline: e.target.value })} />
          </div>
        </Modal>
      ) : null}

      {modal === "excluir" ? (
        <Modal title="Excluir demanda" subtitle={demand.id + " · " + demand.title} tone="danger" width={520} onClose={() => setModal(null)}
          footer={<><Button variant="secondary" onClick={() => setModal(null)}>Cancelar</Button>
            <Button variant="danger" disabled={enviando} onClick={async () => {
              setEnviando(true);
              const r = await S.excluirDemanda(demand.id);
              setEnviando(false);
              if (falhou(r)) return;
              onToast({ tone: "danger", title: "Demanda excluída", message: demand.id });
              onBack();
            }}>{enviando ? "Excluindo…" : "Excluir definitivamente"}</Button></>}>
          <span style={{ font: "var(--type-body)" }}>Comentários, anexos, checklist e histórico desta demanda serão apagados. <strong>Esta ação não pode ser desfeita.</strong></span>
        </Modal>
      ) : null}

      {apagarComentario ? (
        <Modal title="Excluir comentário" tone="danger" width={460} onClose={() => setApagarComentario(null)}
          footer={<><Button variant="secondary" onClick={() => setApagarComentario(null)}>Cancelar</Button>
            <Button variant="danger" disabled={enviando} onClick={async () => {
              setEnviando(true);
              const r = await S.removerComentario(demand.id, apagarComentario.id);
              setEnviando(false);
              if (falhou(r)) return;
              setApagarComentario(null);
              await recarregarDetalhe();
              onToast({ tone: "danger", title: "Comentário excluído" });
            }}>Excluir</Button></>}>
          <span style={{ font: "var(--type-body)" }}>O comentário e os anexos enviados junto com ele serão removidos. O histórico registra a exclusão.</span>
        </Modal>
      ) : null}

      {modal === "solicitar" ? (
        <Modal title="Solicitar encerramento" subtitle={demand.id + " · " + demand.title} tone="info" onClose={() => setModal(null)}
          footer={<><Button variant="secondary" onClick={() => setModal(null)}>Cancelar</Button><Button variant="primary" disabled={enviando} onClick={() => close("solicitar")}>{enviando ? "Enviando…" : "Enviar para aprovação"}</Button></>}>
          <Textarea label="Resumo da tratativa" required rows={3} value={resumo} onChange={(e) => setResumo(e.target.value)} placeholder="Descreva o que foi feito." counterMax={1000} />
          <Textarea label="Resultado" rows={2} value={resultado} onChange={(e) => setResultado(e.target.value)} placeholder="Qual foi o resultado?" />
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: 12, background: "var(--success-bg)", border: "1px solid var(--success-border)", borderRadius: "var(--radius-md)" }}>
            <Icon name="check-circle-2" size={17} style={{ color: "var(--success-fg)" }} />
            <span style={{ font: "var(--type-caption)", color: "var(--success-fg)" }}>Checklist {pct}% concluído · {evidenceRows.length} evidências anexadas</span>
          </div>
        </Modal>
      ) : null}

      {modal === "aprovar" ? (
        <Modal title="Aprovar encerramento" subtitle={demand.id} tone="success" onClose={() => setModal(null)}
          footer={<><Button variant="secondary" onClick={() => setModal(null)}>Cancelar</Button><Button variant="success" disabled={enviando} onClick={() => close("aprovar")}>{enviando ? "Gravando…" : "Aprovar e encerrar"}</Button></>}>
          <span style={{ font: "var(--type-body)" }}>Ao aprovar, a demanda passa para <strong>Encerrada</strong> e o histórico é congelado. O responsável recebe a notificação.</span>
          <Timeline events={events.slice(-3)} />
        </Modal>
      ) : null}

      {modal === "devolver" ? (
        <Modal title="Devolver para execução" subtitle={demand.id} tone="danger" onClose={() => setModal(null)}
          footer={<><Button variant="secondary" onClick={() => setModal(null)}>Cancelar</Button><Button variant="danger" disabled={enviando} onClick={() => close("devolver")}>{enviando ? "Gravando…" : "Devolver demanda"}</Button></>}>
          <Textarea label="Motivo da devolução" required rows={3} value={motivo} onChange={(e) => setMotivo(e.target.value)} placeholder="Explique o que precisa ser corrigido." counterMax={500} />
          <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>A demanda retorna para "Em andamento" e o responsável é notificado com o motivo.</span>
        </Modal>
      ) : null}
    </div>
  );
}

Object.assign(window, { DemandDetailScreen });