const { Tabs, DemandCard, Card, Button, Icon, EmptyState, Select, SearchField, Badge } = window.ACRFlowDesignSystem_ba1e9c;

const FILTERS = [
  { id: "todas", label: "Todas" },
  { id: "hoje", label: "Hoje" },
  { id: "amanha", label: "Amanhã" },
  { id: "atrasadas", label: "Atrasadas" },
  { id: "alta", label: "Alta prioridade" },
  { id: "minhas", label: "Minhas" },
];

function order(a, b) {
  const rank = (d) => (d.daysLeft < 0 ? 0 : d.daysLeft === 0 ? 1 : d.daysLeft === 1 ? 2 : d.priority === "urgente" ? 3 : d.priority === "alta" ? 4 : 5);
  return rank(a) - rank(b) || a.daysLeft - b.daysLeft;
}

function QueueScreen({ user, onOpenDemand, onNavigate }) {
  const [filter, setFilter] = React.useState("todas");
  const [q, setQ] = React.useState("");
  const all = window.ACRData.demands.filter((d) => d.status !== "encerrada");
  const list = all.filter((d) => {
    if (q && !(d.title + d.id).toLowerCase().includes(q.toLowerCase())) return false;
    if (filter === "hoje") return d.daysLeft === 0;
    if (filter === "amanha") return d.daysLeft === 1;
    if (filter === "atrasadas") return d.daysLeft < 0;
    if (filter === "alta") return d.priority === "alta" || d.priority === "urgente";
    if (filter === "minhas") return d.people.some((p) => p.name === user.name);
    return true;
  }).sort(order);

  const groups = [
    { key: "atrasadas", label: "Atrasadas", tone: "danger", items: list.filter((d) => d.daysLeft < 0) },
    { key: "hoje", label: "Vencendo hoje", tone: "danger", items: list.filter((d) => d.daysLeft === 0) },
    { key: "amanha", label: "Vencendo amanhã", tone: "warning", items: list.filter((d) => d.daysLeft === 1) },
    { key: "resto", label: "Próximas", tone: "neutral", items: list.filter((d) => d.daysLeft > 1) },
  ].filter((g) => g.items.length);

  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)" }}>Minha Fila</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>{list.length} demandas · ordenadas por urgência de prazo</span>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <SearchField value={q} onChange={(e) => setQ(e.target.value)} onClear={() => setQ("")} width={260} placeholder="Filtrar nesta fila..." shortcut={null} />
          <Button variant="primary" iconLeft={<Icon name="plus" size={16} />} onClick={() => onNavigate("nova")}>Nova demanda</Button>
        </div>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
        <Tabs variant="pill" tabs={FILTERS} value={filter} onChange={setFilter} />
        <span style={{ flex: 1 }} />
        <Select size="sm" options={["Ordenar: urgência", "Ordenar: prioridade", "Ordenar: abertura"]} style={{ width: 200 }} />
      </div>

      {groups.length === 0 ? (
        <Card padding="0"><EmptyState icon={<Icon name="party-popper" size={22} />} title="Nada por aqui." description="Nenhuma demanda corresponde a este filtro. Sua fila está em dia." action={<Button variant="soft" onClick={() => setFilter("todas")}>Ver todas</Button>} /></Card>
      ) : groups.map((g) => (
        <section key={g.key} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: g.tone === "neutral" ? "var(--border-strong)" : "var(--" + g.tone + "-solid)" }} />
            <h3 style={{ font: "var(--type-h4)", color: "var(--text-strong)" }}>{g.label}</h3>
            <Badge tone={g.tone === "neutral" ? "neutral" : g.tone} size="sm">{g.items.length}</Badge>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(320px,1fr))", gap: "var(--gap-grid)" }}>
            {g.items.map((d) => <DemandCard key={d.id} demand={d} onClick={() => onOpenDemand(d.id)} />)}
          </div>
        </section>
      ))}
    </div>
  );
}

Object.assign(window, { QueueScreen });