const { Card, DataTable, Button, Icon, IconButton, Tabs, SearchField, Select, StatusPill, PriorityBadge, SectorTag, DeadlineIndicator, ProgressBar, AvatarGroup, Badge, EmptyState } = window.ACRFlowDesignSystem_ba1e9c;

const PRESETS = [
  { value: "todos", label: "Todo o histórico" },
  { value: "3", label: "Últimos 3 dias" },
  { value: "7", label: "Últimos 7 dias" },
  { value: "30", label: "Últimos 30 dias" },
  { value: "90", label: "Últimos 3 meses" },
  { value: "custom", label: "Escolher no calendário" },
];
const MONTHS = ["janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"];
const WD = ["D", "S", "T", "Q", "Q", "S", "S"];
const TODAY = new Date(2026, 8, 1);
const parseBR = (s) => { const [d, m, y] = (s || "").split("/"); return y ? new Date(+y, +m - 1, +d) : null; };
const fmtBR = (d) => d ? String(d.getDate()).padStart(2, "0") + "/" + String(d.getMonth() + 1).padStart(2, "0") + "/" + d.getFullYear() : "";
const sameDay = (a, b) => a && b && a.toDateString() === b.toDateString();

/** Mini-calendário de seleção de intervalo: 1º clique define o início, 2º o fim. */
function RangeCalendar({ from, to, onPick }) {
  const [view, setView] = React.useState(new Date((to || TODAY).getFullYear(), (to || TODAY).getMonth(), 1));
  const first = new Date(view.getFullYear(), view.getMonth(), 1);
  const days = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
  const cells = [...Array(first.getDay()).fill(null), ...Array.from({ length: days }, (_, i) => new Date(view.getFullYear(), view.getMonth(), i + 1))];
  const inRange = (d) => from && to && d > from && d < to;
  const edge = (d) => sameDay(d, from) || sameDay(d, to);

  return (
    <div style={{ width: 268, flex: "none", padding: 12, borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", background: "var(--surface-card)", boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column", gap: 8 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 6 }}>
        <IconButton size="sm" variant="ghost" label="Mês anterior" icon={<Icon name="chevron-left" size={15} />} onClick={() => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1))} />
        <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)", textTransform: "capitalize" }}>{MONTHS[view.getMonth()]} {view.getFullYear()}</span>
        <IconButton size="sm" variant="ghost" label="Mês seguinte" icon={<Icon name="chevron-right" size={15} />} onClick={() => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1))} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 2 }}>
        {WD.map((w, i) => <span key={i} style={{ textAlign: "center", font: "var(--type-overline)", color: "var(--text-subtle)", padding: "2px 0" }}>{w}</span>)}
        {cells.map((d, i) => d ? (
          <button key={i} type="button" onClick={() => onPick(d)}
            style={{ height: 30, border: "none", cursor: "pointer", borderRadius: edge(d) ? "var(--radius-sm)" : inRange(d) ? 0 : "var(--radius-sm)",
              background: edge(d) ? "var(--accent-primary)" : inRange(d) ? "var(--accent-primary-soft)" : "transparent",
              color: edge(d) ? "#fff" : inRange(d) ? "var(--text-brand)" : "var(--text-body)",
              font: sameDay(d, TODAY) ? "var(--type-body-strong)" : "var(--type-body)",
              outline: sameDay(d, TODAY) && !edge(d) ? "1px solid var(--border-focus)" : "none" }}>{d.getDate()}</button>
        ) : <span key={i} />)}
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, borderTop: "1px solid var(--border-subtle)", paddingTop: 8 }}>
        <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{from ? fmtBR(from) + (to ? " – " + fmtBR(to) : " – ...") : "Selecione a data inicial"}</span>
        <Button variant="ghost" size="sm" onClick={() => onPick(null)}>Limpar</Button>
      </div>
    </div>
  );
}

function DemandsListScreen({ onOpenDemand, onNavigate }) {
  const D = window.ACRData;
  const [q, setQ] = React.useState("");
  const [sector, setSector] = React.useState("todos");
  const [status, setStatus] = React.useState("todos");
  const [priority, setPriority] = React.useState("todas");
  const [preset, setPreset] = React.useState("todos");
  const [from, setFrom] = React.useState(null);
  const [to, setTo] = React.useState(null);
  const [calOpen, setCalOpen] = React.useState(false);
  const [advanced, setAdvanced] = React.useState(false);

  const all = D.demands;
  const sectors = D.sectorsCfg;

  const pick = (d) => {
    if (!d) { setFrom(null); setTo(null); return; }
    if (!from || (from && to)) { setFrom(d); setTo(null); return; }
    if (d < from) { setTo(from); setFrom(d); } else setTo(d);
  };

  const inPeriod = (dem) => {
    const ref = parseBR(dem.opened) || parseBR(dem.due);
    if (!ref) return true;
    if (preset === "custom") {
      if (from && ref < from) return false;
      if (to && ref > to) return false;
      return true;
    }
    if (preset === "todos") return true;
    const limit = new Date(TODAY); limit.setDate(limit.getDate() - Number(preset));
    return ref >= limit;
  };

  const rows = all.filter((d) =>
    (sector === "todos" || d.sector === sector) &&
    (status === "todos" || d.status === status) &&
    (priority === "todas" || d.priority === priority) &&
    inPeriod(d) &&
    (d.title + " " + d.id + " " + (d.context || "") + " " + (d.category || "") + " " + (d.people || []).map((p) => p.name).join(" ") + " " + (d.tags || []).join(" ")).toLowerCase().includes(q.toLowerCase()));

  const periodLabel = preset === "custom"
    ? (from ? fmtBR(from) + (to ? " – " + fmtBR(to) : " – ...") : "Escolher no calendário")
    : (PRESETS.find((p) => p.value === preset) || {}).label;

  const active = [
    sector !== "todos" && { k: "sector", label: (sectors.find((s) => s.id === sector) || {}).name, clear: () => setSector("todos") },
    status !== "todos" && { k: "status", label: (D.statuses.find((s) => s.id === status) || {}).name, clear: () => setStatus("todos") },
    priority !== "todas" && { k: "prio", label: (D.priorities.find((p) => p.id === priority) || {}).name, clear: () => setPriority("todas") },
    preset !== "todos" && { k: "per", label: periodLabel, clear: () => { setPreset("todos"); setFrom(null); setTo(null); } },
    q && { k: "q", label: '"' + q + '"', clear: () => setQ("") },
  ].filter(Boolean);

  const clearAll = () => { setQ(""); setSector("todos"); setStatus("todos"); setPriority("todas"); setPreset("todos"); setFrom(null); setTo(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)" }}>Todas as Demandas</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>Busque em todo o histórico — demandas encerradas há meses ou anos mantêm timeline, evidências e ciclo completo.</span>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <Button variant="secondary" iconLeft={<Icon name="file-down" size={16} />}>Exportar</Button>
          <Button variant="primary" iconLeft={<Icon name="plus" size={16} />} onClick={() => onNavigate("nova")}>Nova demanda</Button>
        </div>
      </div>

      <Card padding="16px">
        <SearchField value={q} onChange={(e) => setQ(e.target.value)} onClear={() => setQ("")} width="100%" shortcut={null}
          placeholder="Nº da demanda, título, empresa, responsável ou tag..." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(200px,1fr))", gap: 12, alignItems: "start" }}>
          <Select label="Setor" value={sector} onChange={(e) => setSector(e.target.value)}
            options={[{ value: "todos", label: "Todos os setores" }, ...sectors.map((s) => ({ value: s.id, label: s.name }))]} />
          <Select label="Status" value={status} onChange={(e) => setStatus(e.target.value)}
            options={[{ value: "todos", label: "Todos os status" }, ...D.statuses.map((s) => ({ value: s.id, label: s.name }))]} />
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ font: "var(--type-label)", color: "var(--text-strong)" }}>Período de abertura</span>
            <div style={{ display: "flex", gap: 6 }}>
              <Select value={preset} style={{ flex: 1 }} onChange={(e) => { setPreset(e.target.value); setCalOpen(e.target.value === "custom"); }} options={PRESETS} />
              <IconButton variant={calOpen ? "primary" : "secondary"} label="Abrir calendário" icon={<Icon name="calendar-days" size={16} />}
                onClick={() => { setPreset("custom"); setCalOpen((v) => !v); }} />
            </div>
            {preset === "custom" ? <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{from ? fmtBR(from) + (to ? " – " + fmtBR(to) : " – selecione o fim") : "Clique no calendário para definir o intervalo"}</span> : null}
          </div>
          {advanced ? (
            <Select label="Prioridade" value={priority} onChange={(e) => setPriority(e.target.value)}
              options={[{ value: "todas", label: "Todas as prioridades" }, ...D.priorities.map((p) => ({ value: p.id, label: p.name }))]} />
          ) : null}
          {advanced ? <Select label="Responsável" options={[{ value: "todos", label: "Todos os responsáveis" }, ...D.team.map((t) => ({ value: t.id, label: t.name }))]} /> : null}
          {advanced ? <Select label="Empresa" options={[{ value: "todas", label: "Todas as empresas" }, ...D.companies.map((c) => ({ value: c.id, label: c.name }))]} /> : null}
        </div>
        {calOpen ? (
          <div style={{ display: "flex", alignItems: "flex-start", gap: 14, flexWrap: "wrap", padding: "12px 0 2px", borderTop: "1px solid var(--border-subtle)" }}>
            <RangeCalendar from={from} to={to} onPick={pick} />
            <div style={{ display: "flex", flexDirection: "column", gap: 8, minWidth: 200, flex: 1 }}>
              <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{from ? fmtBR(from) + (to ? " – " + fmtBR(to) : " – selecione a data final") : "Selecione a data inicial"}</span>
              <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>O primeiro clique define o início do período e o segundo o fim. Sem data final, a busca vai da data escolhida até hoje.</span>
              <Button variant="secondary" size="sm" style={{ alignSelf: "flex-start" }} onClick={() => setCalOpen(false)}>Fechar calendário</Button>
            </div>
          </div>
        ) : null}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            {active.length ? active.map((f) => (
              <span key={f.k} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 6px 4px 10px", borderRadius: "var(--radius-pill)", background: "var(--surface-sunken)", border: "1px solid var(--border-subtle)", font: "var(--type-caption)", color: "var(--text-strong)" }}>
                {f.label}
                <button type="button" aria-label="Remover filtro" onClick={f.clear} style={{ display: "inline-flex", padding: 2, border: "none", background: "transparent", color: "var(--text-subtle)", cursor: "pointer" }}><Icon name="x" size={12} /></button>
              </span>
            )) : <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>Nenhum filtro aplicado — mostrando todo o histórico.</span>}
            {active.length ? <Button variant="ghost" size="sm" onClick={clearAll}>Limpar tudo</Button> : null}
          </div>
          <Button variant="ghost" size="sm" iconLeft={<Icon name={advanced ? "chevron-up" : "sliders-horizontal"} size={15} />} onClick={() => setAdvanced((v) => !v)}>
            {advanced ? "Menos filtros" : "Mais filtros"}
          </Button>
        </div>
      </Card>

      <Tabs variant="pill" value={status} onChange={setStatus} tabs={[
        { id: "todos", label: "Todas", count: all.length },
        { id: "aguardando_atendimento", label: "Aguardando atendimento", count: all.filter((d) => d.status === "aguardando_atendimento").length },
        { id: "andamento", label: "Em andamento", count: all.filter((d) => d.status === "andamento").length },
        { id: "pendente", label: "Pendentes", count: all.filter((d) => d.status === "pendente").length },
        { id: "aguardando_aprovacao", label: "Aguardando aprovação", count: all.filter((d) => d.status === "aguardando_aprovacao").length },
        { id: "encerrada", label: "Encerradas", count: all.filter((d) => d.status === "encerrada").length },
      ]} />

      <Card padding="0" title={rows.length + " de " + all.length + " demandas"} subtitle="Clique em uma linha para abrir a demanda com timeline, evidências e histórico completo">
        {rows.length ? (
          <DataTable
            columns={[
              { key: "id", label: "Nº", width: 156, render: (r) => <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: "var(--text-muted)" }}>{r.id}</span> },
              { key: "title", label: "Demanda", render: (r) => (
                <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                  <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{r.title}</span>
                  <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)" }}>{r.context}{r.category ? " · " + r.category : ""}</span>
                </div>) },
              { key: "sector", label: "Setor", width: 190, render: (r) => <SectorTag sector={r.sector} size="sm" /> },
              { key: "status", label: "Status", width: 190, render: (r) => <StatusPill status={r.status} size="sm" /> },
              { key: "priority", label: "Prioridade", width: 108, render: (r) => <PriorityBadge priority={r.priority} size="sm" /> },
              { key: "people", label: "Responsáveis", width: 118, render: (r) => <AvatarGroup people={r.people} size="xs" /> },
              { key: "daysLeft", label: "Prazo", width: 170, render: (r) => r.status === "encerrada" ? <Badge tone="success" size="sm">Entregue em {r.due}</Badge> : <DeadlineIndicator daysLeft={r.daysLeft} style={{ padding: "2px 8px", font: "var(--type-overline)" }} /> },
              { key: "progress", label: "Conclusão", width: 128, render: (r) => <ProgressBar value={r.progress} size="sm" countLabel={r.progress + "%"} tone={r.progress === 100 ? "success" : "flow"} /> },
            ]}
            rows={rows} onRowClick={(r) => onOpenDemand(r.id)} dense />
        ) : (
          <EmptyState icon={<Icon name="search-x" size={22} />} title="Nenhuma demanda encontrada." description="Amplie o período ou remova filtros — o histórico completo continua disponível." action={<Button variant="soft" onClick={clearAll}>Limpar filtros</Button>} />
        )}
      </Card>
    </div>
  );
}

Object.assign(window, { DemandsListScreen });