const { Card, Button, Icon, Select, Input, DataTable, Badge, Tabs, ProgressBar, Avatar, StatCard, EmptyState, SectorTag } = window.ACRFlowDesignSystem_ba1e9c;

const iso = (d) => d.toISOString().slice(0, 10);
const brToISO = (s) => { if (!s) return ""; const [d, m, y] = String(s).split("/"); return y && m && d ? `${y}-${m.padStart(2, "0")}-${d.padStart(2, "0")}` : ""; };
const MESES_CURTOS = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];

function ReportsScreen() {
  const D = window.ACRData;
  const hoje = new Date();
  const [rep, setRep] = React.useState("produtividade");
  const [de, setDe] = React.useState(iso(new Date(hoje.getFullYear(), hoje.getMonth(), 1)));
  const [ate, setAte] = React.useState(iso(hoje));
  const [setor, setSetor] = React.useState("Todos");
  const [resp, setResp] = React.useState("Todos");
  const [status, setStatus] = React.useState("Todos");
  const [prio, setPrio] = React.useState("Todas");

  const sectors = D.sectorsCfg || [];
  const statuses = D.statuses || [];
  const priorities = D.priorities || [];
  const team = D.team || [];
  const nomeSetor = (id) => (sectors.find((s) => s.id === id) || {}).name || "";
  const nomeStatus = (id) => (statuses.find((s) => s.id === id) || {}).name || id;

  const dentroPeriodo = (d) => {
    const o = brToISO(d.opened);
    if (!o) return true;
    return (!de || o >= de) && (!ate || o <= ate);
  };
  const filtradas = (D.demands || []).filter((d) =>
    dentroPeriodo(d)
    && (setor === "Todos" || nomeSetor(d.sector) === setor)
    && (status === "Todos" || nomeStatus(d.status) === status)
    && (prio === "Todas" || ((priorities.find((p) => p.id === d.priority) || {}).name === prio))
    && (resp === "Todos" || (d.people || []).some((p) => p.name === resp)));

  const encerradas = filtradas.filter((d) => d.status === "encerrada");
  const fora = encerradas.filter((d) => typeof d.daysLeft === "number" && d.daysLeft < 0).length;
  const taxa = encerradas.length ? Math.round(((encerradas.length - fora) / encerradas.length) * 100) : 0;
  const atrasadas = filtradas.filter((d) => d.status !== "encerrada" && typeof d.daysLeft === "number" && d.daysLeft < 0).length;
  const vazio = filtradas.length === 0;

  const pessoas = team.map((u) => {
    const suas = filtradas.filter((d) => (d.people || []).some((p) => p.name === u.name));
    const enc = suas.filter((d) => d.status === "encerrada");
    const foraP = enc.filter((d) => typeof d.daysLeft === "number" && d.daysLeft < 0).length;
    return {
      id: u.id, name: u.name, sector: u.role || "",
      atendidas: enc.length,
      andamento: suas.filter((d) => d.status !== "encerrada").length,
      atrasadas: suas.filter((d) => d.status !== "encerrada" && typeof d.daysLeft === "number" && d.daysLeft < 0).length,
      prazo: enc.length ? Math.round(((enc.length - foraP) / enc.length) * 100) : 0,
      total: suas.length,
    };
  }).filter((p) => p.total > 0);

  const porStatus = statuses.map((s) => ({ label: s.name, value: filtradas.filter((d) => d.status === s.id).length, tone: "var(--st-" + String(s.id).split("_")[0] + ")" })).filter((x) => x.value > 0);
  const porPrioridade = priorities.map((p) => ({ label: p.name, value: filtradas.filter((d) => d.priority === p.id).length, tone: "var(--prio-" + p.id + ")" })).filter((x) => x.value > 0);

  const meses = Array.from({ length: 6 }, (_, i) => {
    const d = new Date(hoje.getFullYear(), hoje.getMonth() - (5 - i), 1);
    const pref = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
    return { label: MESES_CURTOS[d.getMonth()], value: (D.demands || []).filter((x) => brToISO(x.opened).startsWith(pref)).length, atual: i === 5 };
  });
  const maxMes = Math.max(1, ...meses.map((m) => m.value));

  const sla = sectors.map((s) => {
    const suas = filtradas.filter((d) => d.sector === s.id);
    const enc = suas.filter((d) => d.status === "encerrada");
    return {
      id: s.id, k: s.id,
      dentro: enc.filter((d) => !(typeof d.daysLeft === "number" && d.daysLeft < 0)).length,
      fora: enc.filter((d) => typeof d.daysLeft === "number" && d.daysLeft < 0).length,
      atr: suas.filter((d) => d.status !== "encerrada" && typeof d.daysLeft === "number" && d.daysLeft < 0).length,
      total: suas.length,
    };
  }).filter((r) => r.total > 0);

  const etapas = (D.demands || []).reduce((a, d) => a + (d.checklistDone || 0), 0);
  const consolidado = [
    ["Demandas abertas no período", String(filtradas.length)],
    ["Encerradas", String(encerradas.length)],
    ["Em andamento", String(filtradas.filter((d) => d.status === "andamento").length)],
    ["Aguardando aprovação", String(filtradas.filter((d) => d.status === "aguardando_aprovacao").length)],
    ["Atrasadas hoje", String(atrasadas)],
    ["Etapas de checklist concluídas", etapas + (etapas === 1 ? " etapa" : " etapas")],
  ];

  const semDados = (texto) => <EmptyState icon={<Icon name="bar-chart-3" size={22} />} title="Sem dados no período" description={texto} />;
  const periodoLabel = de && ate ? de.split("-").reverse().join("/") + " a " + ate.split("-").reverse().join("/") : "Todo o histórico";

  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)" }}>Relatórios</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>{"Período: " + periodoLabel}</span>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <Button variant="secondary" iconLeft={<Icon name="file-down" size={16} />} disabled={vazio} onClick={() => window.print()}>PDF</Button>
          <Button variant="secondary" iconLeft={<Icon name="file-text" size={16} />} disabled={vazio} onClick={() => {
            const linhas = [["Numero", "Titulo", "Setor", "Status", "Abertura", "Prazo", "Conclusao"]].concat(
              filtradas.map((d) => [d.id, d.title, nomeSetor(d.sector), nomeStatus(d.status), d.opened || "", d.due || "", (d.progress || 0) + "%"]));
            const csv = linhas.map((l) => l.map((c) => '"' + String(c).replace(/"/g, '""') + '"').join(";")).join("\n");
            const a = document.createElement("a");
            a.href = URL.createObjectURL(new Blob(["\ufeff" + csv], { type: "text/csv;charset=utf-8" }));
            a.download = "flowtix-demandas.csv";
            a.click();
          }}>CSV</Button>
        </div>
      </div>

      <Card title="Filtros" padding="var(--pad-card)">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(170px,1fr))", gap: 12 }}>
          <Input label="De" type="date" size="sm" value={de} onChange={(e) => setDe(e.target.value)} />
          <Input label="Até" type="date" size="sm" value={ate} onChange={(e) => setAte(e.target.value)} />
          <Select label="Setor" size="sm" value={setor} onChange={(e) => setSetor(e.target.value)} options={["Todos"].concat(sectors.map((s) => s.name))} />
          <Select label="Responsável" size="sm" value={resp} onChange={(e) => setResp(e.target.value)} options={["Todos"].concat(team.map((u) => u.name))} />
          <Select label="Status" size="sm" value={status} onChange={(e) => setStatus(e.target.value)} options={["Todos"].concat(statuses.map((s) => s.name))} />
          <Select label="Prioridade" size="sm" value={prio} onChange={(e) => setPrio(e.target.value)} options={["Todas"].concat(priorities.map((p) => p.name))} />
        </div>
      </Card>

      <Tabs value={rep} onChange={setRep} tabs={[
        { id: "produtividade", label: "Produtividade" },
        { id: "demandas", label: "Demandas" },
        { id: "sla", label: "SLA / Prazos" },
        { id: "mensal", label: "Consolidado mensal" },
      ]} />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: "var(--gap-grid)" }}>
        <StatCard label="Demandas no período" value={filtradas.length} tone="brand" icon={<Icon name="check-check" size={16} />} />
        <StatCard label="Encerradas" value={encerradas.length} tone="success" icon={<Icon name="archive" size={16} />} />
        <StatCard label="Fora do prazo" value={fora} tone="danger" icon={<Icon name="alert-octagon" size={16} />} />
        <StatCard label="Atrasadas hoje" value={atrasadas} tone="warning" icon={<Icon name="alarm-clock" size={16} />} />
        <StatCard label="Taxa no prazo" value={encerradas.length ? taxa + "%" : "—"} tone="success" icon={<Icon name="target" size={16} />} hint={encerradas.length ? null : "Sem encerramentos"} />
      </div>

      {rep === "produtividade" ? (
        <Card title="Produtividade por colaborador" subtitle={periodoLabel} padding="0">
          {pessoas.length === 0 ? semDados("Nenhuma demanda atribuída aos colaboradores neste período.") : (
            <DataTable
              columns={[
                { key: "name", label: "Colaborador", render: (r) => <Avatar name={r.name} role={r.sector} showName size="sm" /> },
                { key: "atendidas", label: "Encerradas", width: 110, align: "right" },
                { key: "andamento", label: "Em aberto", width: 110, align: "right" },
                { key: "atrasadas", label: "Atrasadas", width: 100, align: "right", render: (r) => <Badge tone={r.atrasadas ? "danger" : "success"} size="sm">{r.atrasadas}</Badge> },
                { key: "prazo", label: "No prazo", width: 170, render: (r) => <ProgressBar value={r.prazo} size="sm" countLabel={r.atendidas ? r.prazo + "%" : "—"} tone={r.prazo >= 90 ? "success" : "warning"} /> },
              ]} rows={pessoas} />
          )}
        </Card>
      ) : null}

      {rep === "demandas" ? (
        vazio ? <Card>{semDados("Nenhuma demanda aberta no período selecionado.")}</Card> : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(300px,1fr))", gap: "var(--gap-grid)" }}>
            <Card title="Demandas por status">{porStatus.length ? <window.BarChart data={porStatus} /> : semDados("Sem registros.")}</Card>
            <Card title="Demandas por prioridade">{porPrioridade.length ? <window.BarChart data={porPrioridade} /> : semDados("Sem registros.")}</Card>
            <Card title="Aberturas por mês" subtitle="Últimos 6 meses" style={{ gridColumn: "1 / -1" }}>
              <div style={{ display: "flex", alignItems: "flex-end", gap: 14, height: 150, padding: "8px 4px" }}>
                {meses.map((m) => (
                  <div key={m.label} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 7 }}>
                    <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: "var(--text-muted)" }}>{m.value}</span>
                    <div style={{ width: "100%", height: (m.value / maxMes) * 110, minHeight: 2, borderRadius: "var(--radius-sm) var(--radius-sm) 2px 2px", background: m.atual ? "var(--accent-primary)" : "var(--acr-blue-200)" }} />
                    <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{m.label}</span>
                  </div>
                ))}
              </div>
            </Card>
          </div>
        )
      ) : null}

      {rep === "sla" ? (
        <Card title="SLA por área" padding="0">
          {sla.length === 0 ? semDados("Nenhuma demanda no período para calcular o SLA.") : (
            <DataTable
              columns={[
                { key: "s", label: "Área", render: (r) => <SectorTag sector={r.k} size="sm" /> },
                { key: "dentro", label: "Dentro do prazo", width: 150, align: "right" },
                { key: "fora", label: "Fora do prazo", width: 140, align: "right" },
                { key: "atr", label: "Atrasadas hoje", width: 140, align: "right", render: (r) => <Badge tone={r.atr ? "danger" : "success"} size="sm">{r.atr}</Badge> },
                { key: "total", label: "Total", width: 100, align: "right" },
              ]} rows={sla} />
          )}
        </Card>
      ) : null}

      {rep === "mensal" ? (
        <Card title={"Consolidado — " + periodoLabel} subtitle="Visão de equipe para reunião mensal">
          {vazio ? semDados("Nenhuma demanda aberta no período selecionado.") : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 18 }}>
              {consolidado.map(([l, v]) => (
                <div key={l} style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                  <span style={{ font: "var(--type-overline)", color: "var(--text-muted)", letterSpacing: "var(--tracking-caps)" }}>{l.toUpperCase()}</span>
                  <span style={{ font: "var(--type-h2)", color: "var(--text-strong)" }}>{v}</span>
                </div>
              ))}
            </div>
          )}
        </Card>
      ) : null}
    </div>
  );
}

Object.assign(window, { ReportsScreen });