/* Wood OS — Inventory, Vehicles, Logistics, History */
const { useState: useStateOps2, useMemo: useMemoOps2 } = React;

/* ============================================================
   INVENTORY (Almoxarifado)
   ============================================================ */
const InventoryPage = ({ navigate }) => {
  const [filter, setFilter] = useStateOps2("todos");
  const [drawer, setDrawer] = useStateOps2(null);
  const items = filter === "todos" ? MOCK.inventory : MOCK.inventory.filter(i => i.status === filter);

  const totals = useMemoOps2(() => {
    return {
      pending: MOCK.inventory.filter(i => i.status === "pendente").length,
      overdue: MOCK.inventory.filter(i => i.status === "atrasado").length,
      monthValue: MOCK.inventory.reduce((s, i) => s + i.value, 0),
      suppliers: new Set(MOCK.inventory.map(i => i.supplier)).size,
    };
  }, []);

  return (
    <>
      <PageHeader
        kicker="Produção"
        title="Almoxarifado"
        subtitle="Controle de compras, materiais e ordens. Cada item vinculado à sua obra."
        actions={
          <>
            <button className="wood-btn wood-btn-secondary"><Icon name="external" size={13} /> Exportar</button>
            <button className="wood-btn wood-btn-primary"><Icon name="plus" size={13} /> Nova ordem</button>
          </>
        }
      />

      <div className="grid grid-cols-4 gap-4 mb-5">
        <MetricCard icon="package" label="Pedidos pendentes" value={totals.pending} sub="aguardando entrega" accent="warning" delay={0} />
        <MetricCard icon="alert" label="Pedidos atrasados" value={totals.overdue} sub="ação imediata" accent="warning" trend={-15} delay={60} />
        <MetricCard icon="dollar" label="Valor do mês" value={fmtBRL(totals.monthValue)} sub="vs. R$ 42.180 em abril" accent="amber" trend={18} delay={120} />
        <MetricCard icon="building" label="Fornecedores ativos" value={totals.suppliers} sub="prazo médio: 3 dias" accent="info" delay={180} />
      </div>

      <div className="wood-card p-3 mb-4 flex items-center gap-2 flex-wrap">
        {["todos", "pendente", "producao", "pronto", "entregue", "atrasado"].map(s => (
          <FilterChip key={s} active={filter === s} onClick={() => setFilter(s)}>
            {s === "todos" ? "Todos" : STATUS_MAP[s]?.label}
          </FilterChip>
        ))}
      </div>

      <div className="wood-card" style={{ padding: 0, overflow: "hidden" }}>
        <table className="wood-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>Item</th>
              <th>Categoria</th>
              <th>Obra</th>
              <th>Fornecedor</th>
              <th>Qtd</th>
              <th>Valor</th>
              <th>Status</th>
              <th>Prioridade</th>
            </tr>
          </thead>
          <tbody>
            {items.map(it => (
              <tr key={it.id} onClick={() => setDrawer(it)} style={{ cursor: "pointer" }}>
                <td className="font-mono text-3" style={{ fontSize: 12 }}>{it.id}</td>
                <td>
                  <div style={{ fontWeight: 600, color: "var(--text)" }}>{it.item}</div>
                  <div className="text-xs text-4">{fmtDate(it.date)}</div>
                </td>
                <td><span className="wood-badge wood-badge-neutral">{it.category}</span></td>
                <td className="text-sm">{it.project}</td>
                <td className="text-sm">{it.supplier}</td>
                <td className="text-sm" style={{ fontVariantNumeric: "tabular-nums" }}>{it.qty} {it.unit}</td>
                <td className="text-sm" style={{ fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>{fmtBRL(it.value)}</td>
                <td><StatusPill status={it.status} pulse={it.status === "atrasado"} /></td>
                <td>
                  <span className="wood-badge" style={{
                    background: it.priority === "alta" ? "rgba(245,158,11,0.14)" : it.priority === "media" ? "rgba(56,189,248,0.12)" : "rgba(255, 255, 255,0.06)",
                    color: it.priority === "alta" ? "var(--warning)" : it.priority === "media" ? "var(--info)" : "var(--text-3)",
                    border: `1px solid ${it.priority === "alta" ? "rgba(245,158,11,0.3)" : it.priority === "media" ? "rgba(56,189,248,0.3)" : "var(--wood-border)"}`,
                    textTransform: "capitalize"
                  }}>{it.priority}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <PremiumDrawer
        open={!!drawer}
        onClose={() => setDrawer(null)}
        title={drawer?.item}
        subtitle={drawer?.id}
      >
        {drawer && (
          <div>
            <div className="flex items-center gap-2 mb-5 flex-wrap">
              <StatusPill status={drawer.status} pulse={drawer.status === "atrasado"} />
              <span className="wood-badge wood-badge-neutral">{drawer.category}</span>
              <span className="wood-badge wood-badge-neutral" style={{ textTransform: "capitalize" }}>Prioridade {drawer.priority}</span>
            </div>
            <div className="grid grid-cols-2 gap-3 mb-5">
              {[
                { label: "Fornecedor", value: drawer.supplier, icon: "building" },
                { label: "Obra", value: drawer.project, icon: "hammer" },
                { label: "Quantidade", value: `${drawer.qty} ${drawer.unit}`, icon: "package" },
                { label: "Valor total", value: fmtBRL(drawer.value), icon: "dollar" },
                { label: "Data do pedido", value: fmtDateLong(drawer.date), icon: "calendar" },
                { label: "Status atual", value: STATUS_MAP[drawer.status]?.label, icon: "activity" },
              ].map(d => (
                <div key={d.label} className="px-3 py-3 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
                  <div className="text-xs text-4 uppercase tracking-widest mb-1.5" style={{ fontWeight: 500 }}>{d.label}</div>
                  <div className="text-sm flex items-center gap-2" style={{ fontWeight: 500 }}>
                    <Icon name={d.icon} size={13} className="text-3" /> {d.value}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </PremiumDrawer>
    </>
  );
};

/* ============================================================
   VEHICLES (Veículos)
   ============================================================ */
const VehiclesPage = ({ navigate }) => {
  const [filter, setFilter] = useStateOps2("todos");
  const [drawer, setDrawer] = useStateOps2(null);
  const items = filter === "todos" ? MOCK.vehicles : MOCK.vehicles.filter(v => v.status === filter);
  const active = MOCK.vehicles.filter(v => v.status === "ativo").length;

  return (
    <>
      <PageHeader
        kicker="Logística"
        title="Veículos"
        subtitle="Frota, manutenção, motoristas e cargas em tempo real."
        actions={
          <>
            <button className="wood-btn wood-btn-secondary"><Icon name="wrench" size={13} /> Manutenções</button>
            <button className="wood-btn wood-btn-primary"><Icon name="plus" size={13} /> Adicionar veículo</button>
          </>
        }
      />

      <div className="grid grid-cols-4 gap-4 mb-5">
        <MetricCard icon="truck" label="Frota total" value={MOCK.vehicles.length} sub={`${active} ativos · ${MOCK.vehicles.length - active} em manutenção`} accent="amber" delay={0} />
        <MetricCard icon="activity" label="Em operação" value={MOCK.vehicles.filter(v => v.load > 0).length} sub="cargas em andamento" accent="success" delay={60} />
        <MetricCard icon="wrench" label="Próx. manutenção" value="2" sub="nos próximos 30 dias" accent="warning" delay={120} />
        <MetricCard icon="trending" label="KM total mês" value="18.420" sub="−4% vs. abril" accent="info" trend={-4} delay={180} />
      </div>

      <div className="wood-card p-3 mb-4 flex items-center gap-2 flex-wrap">
        <FilterChip active={filter === "todos"} onClick={() => setFilter("todos")}>Todos</FilterChip>
        <FilterChip active={filter === "ativo"} onClick={() => setFilter("ativo")}>Ativos</FilterChip>
        <FilterChip active={filter === "manutencao"} onClick={() => setFilter("manutencao")}>Manutenção</FilterChip>
        <FilterChip active={filter === "inativo"} onClick={() => setFilter("inativo")}>Inativos</FilterChip>
      </div>

      <div className="grid grid-cols-3 gap-4">
        {items.map((v, i) => {
          const maintDays = daysUntil(v.nextService);
          const maintWarn = maintDays <= 14;
          return (
            <div key={v.id} className="wood-card wood-card-hover p-5 slide-up" style={{ animationDelay: `${i * 60}ms` }} onClick={() => setDrawer(v)}>
              <div className="flex items-start justify-between mb-3">
                <div style={{
                  width: 50, height: 50, borderRadius: 12,
                  background: v.status === "ativo" ? "linear-gradient(135deg, rgba(16, 185, 129,0.18), rgba(2, 44, 34,0.4))" :
                             v.status === "manutencao" ? "rgba(245,158,11,0.16)" : "rgba(255, 255, 255,0.04)",
                  border: "1px solid var(--wood-border)",
                  color: v.status === "ativo" ? "var(--amber-bright)" : v.status === "manutencao" ? "var(--warning)" : "var(--text-4)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center"
                }}>
                  <Icon name="truck" size={22} />
                </div>
                <div className="flex items-center gap-2">
                  {v.status === "manutencao" && <span className="wood-dot wood-dot-pulse" style={{ background: "var(--warning)", color: "var(--warning)" }} />}
                  <StatusPill status={v.status === "manutencao" ? "pendente" : v.status} label={v.status === "manutencao" ? "Manutenção" : undefined} />
                </div>
              </div>

              <div className="font-mono text-xs text-4 mb-1">{v.id}</div>
              <div className="text-lg font-semibold tracking-tight">{v.model}</div>
              <div className="flex items-center gap-2 mb-4">
                <span className="font-mono text-sm text-amber" style={{ fontWeight: 600, letterSpacing: "0.04em" }}>{v.plate}</span>
              </div>

              <div className="flex flex-col gap-2 text-sm">
                <div className="flex items-center justify-between">
                  <span className="text-3 flex items-center gap-1.5"><Icon name="users" size={12} /> Motorista</span>
                  <span style={{ fontWeight: 500 }}>{v.driver}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-3 flex items-center gap-1.5"><Icon name="activity" size={12} /> KM</span>
                  <span style={{ fontVariantNumeric: "tabular-nums" }}>{fmtBR(v.km)} km</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-3 flex items-center gap-1.5"><Icon name="wrench" size={12} /> Próx. serviço</span>
                  <span className={maintWarn ? "text-warning" : ""} style={{ fontWeight: 500 }}>{fmtDate(v.nextService)}</span>
                </div>
                {v.project && (
                  <div className="flex items-center justify-between pt-2 mt-1 border-t" style={{ borderColor: "var(--wood-border-soft)" }}>
                    <span className="text-3 flex items-center gap-1.5"><Icon name="hammer" size={12} /> Obra</span>
                    <span className="text-amber truncate" style={{ fontWeight: 500, maxWidth: 140 }}>{v.project}</span>
                  </div>
                )}
              </div>

              {v.load > 0 && (
                <div className="mt-4 pt-3 border-t" style={{ borderColor: "var(--wood-border-soft)" }}>
                  <div className="flex items-center justify-between mb-1.5">
                    <span className="text-xs text-3">Carga atual</span>
                    <span className="text-xs" style={{ fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>{v.load}%</span>
                  </div>
                  <AnimatedProgress value={v.load} max={100} height={3} />
                </div>
              )}
            </div>
          );
        })}
      </div>

      <PremiumDrawer
        open={!!drawer}
        onClose={() => setDrawer(null)}
        title={drawer?.model}
        subtitle={drawer?.id}
      >
        {drawer && (
          <div>
            <div className="wood-card wood-veneer p-5 mb-5">
              <div className="flex items-center justify-between mb-3">
                <div>
                  <div className="text-xs uppercase tracking-widest text-amber mb-1" style={{ fontWeight: 600 }}>PLACA</div>
                  <div className="font-mono text-3xl font-semibold tracking-tighter">{drawer.plate}</div>
                </div>
                <StatusPill status={drawer.status === "manutencao" ? "pendente" : drawer.status} label={drawer.status === "manutencao" ? "Manutenção" : undefined} />
              </div>
              <div className="text-md text-2">{drawer.model}</div>
            </div>

            <div className="grid grid-cols-2 gap-3 mb-5">
              {[
                { label: "Motorista", value: drawer.driver, icon: "users" },
                { label: "KM total", value: `${fmtBR(drawer.km)} km`, icon: "activity" },
                { label: "Última manutenção", value: fmtDateLong(drawer.lastService), icon: "wrench" },
                { label: "Próx. manutenção", value: fmtDateLong(drawer.nextService), icon: "calendar" },
              ].map(d => (
                <div key={d.label} className="px-3 py-3 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
                  <div className="text-xs text-4 uppercase tracking-widest mb-1.5" style={{ fontWeight: 500 }}>{d.label}</div>
                  <div className="text-sm flex items-center gap-2" style={{ fontWeight: 500 }}>
                    <Icon name={d.icon} size={13} className="text-3" /> {d.value}
                  </div>
                </div>
              ))}
            </div>

            <div className="text-sm font-semibold mb-2">Histórico recente</div>
            <div className="flex flex-col gap-2">
              {[
                { time: "Hoje, 08:30", title: "Saída para Av. Vieira Souto 1102", type: "saida" },
                { time: "Ontem, 17:30", title: "Retorno galpão sede", type: "entrada" },
                { time: "Ontem, 09:00", title: "Saída para Apto Leblon 1101", type: "saida" },
                { time: "12 mai, 14:00", title: "Manutenção preventiva", type: "wrench" },
              ].map((h, i) => (
                <div key={i} className="flex items-center gap-3 py-2.5 px-3 rounded-lg" style={{ background: "rgba(0,0,0,0.18)" }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 7,
                    background: h.type === "wrench" ? "rgba(245,158,11,0.14)" : "rgba(16, 185, 129,0.14)",
                    color: h.type === "wrench" ? "var(--warning)" : "var(--amber-bright)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center"
                  }}>
                    <Icon name={h.type === "wrench" ? "wrench" : h.type === "saida" ? "send" : "package"} size={12} />
                  </div>
                  <div className="flex-1">
                    <div className="text-sm">{h.title}</div>
                    <div className="text-xs text-4">{h.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </PremiumDrawer>
    </>
  );
};

/* ============================================================
   LOGISTICS (Carga e Descarga)
   ============================================================ */
const LogisticsPage = ({ navigate }) => {
  const [day, setDay] = useStateOps2("2026-05-15");
  const events = MOCK.logistics.filter(l => l.date === day);
  const otherDays = [...new Set(MOCK.logistics.map(l => l.date))].sort().reverse();

  return (
    <>
      <PageHeader
        kicker="Logística"
        title="Carga e Descarga"
        subtitle="Timeline operacional de entradas e saídas. Cada evento com responsável, veículo e doca."
        actions={
          <>
            <button className="wood-btn wood-btn-secondary"><Icon name="calendar" size={13} /> Calendário</button>
            <button className="wood-btn wood-btn-primary"><Icon name="plus" size={13} /> Agendar carga</button>
          </>
        }
      />

      {/* Day picker */}
      <div className="wood-card p-3 mb-5 flex items-center gap-2 flex-wrap">
        {otherDays.map(d => (
          <FilterChip key={d} active={day === d} onClick={() => setDay(d)}>
            {fmtDateLong(d)}
            {d === "2026-05-15" && <span className="wood-dot wood-dot-pulse" style={{ background: "var(--amber-bright)", color: "var(--amber-bright)", marginLeft: 4 }} />}
          </FilterChip>
        ))}
      </div>

      <div className="grid grid-cols-12 gap-5">
        {/* Timeline */}
        <div className="col-span-8">
          <div className="wood-card p-5">
            <div className="flex items-center justify-between mb-5">
              <div>
                <div className="text-md font-semibold tracking-tight">Timeline · {fmtDateLong(day)}</div>
                <div className="text-xs text-3">{events.length} eventos · {events.filter(e => e.type === "saida").length} saídas · {events.filter(e => e.type === "entrada").length} entradas</div>
              </div>
            </div>

            {events.length === 0 ? (
              <EmptyState icon="boxes" title="Nenhum evento neste dia" description="Selecione outro dia ou agende uma nova carga." />
            ) : (
              <div className="relative">
                {/* Vertical line */}
                <div style={{ position: "absolute", left: 25, top: 12, bottom: 12, width: 2, background: "linear-gradient(180deg, var(--wood-border), transparent)" }} />
                {events.sort((a, b) => a.time.localeCompare(b.time)).map((e, i) => (
                  <div key={e.id} className="flex gap-4 relative pb-5 slide-up" style={{ animationDelay: `${i * 80}ms` }}>
                    {/* Node */}
                    <div style={{
                      width: 52, flexShrink: 0,
                      display: "flex", flexDirection: "column", alignItems: "center"
                    }}>
                      <div style={{
                        width: 52, height: 52, borderRadius: "50%",
                        background: e.urgent ? "linear-gradient(135deg, rgba(239,68,68,0.16), rgba(2, 44, 34,0.4))" :
                                  e.type === "saida" ? "linear-gradient(135deg, rgba(16, 185, 129,0.18), rgba(2, 44, 34,0.4))" : "linear-gradient(135deg, rgba(56,189,248,0.16), rgba(11,10,7,0.6))",
                        border: `1px solid ${e.urgent ? "rgba(239,68,68,0.45)" : e.type === "saida" ? "rgba(16, 185, 129,0.35)" : "rgba(56,189,248,0.3)"}`,
                        color: e.urgent ? "var(--error)" : e.type === "saida" ? "var(--amber-bright)" : "var(--info)",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        zIndex: 2, position: "relative",
                        boxShadow: e.urgent ? "0 0 0 4px rgba(239,68,68,0.1), 0 0 16px rgba(239,68,68,0.3)" : "var(--shadow-md)"
                      }}>
                        <Icon name={e.type === "saida" ? "send" : "package"} size={18} />
                      </div>
                    </div>

                    <div className="flex-1 pt-1">
                      <div className="flex items-start justify-between mb-1">
                        <div>
                          <div className="flex items-center gap-2 mb-1">
                            <span className="font-mono text-xs text-amber" style={{ fontWeight: 600 }}>{e.time}</span>
                            <span className="text-xs text-4">·</span>
                            <span className="font-mono text-xs text-4">{e.id}</span>
                            {e.urgent && <span className="wood-badge wood-badge-error" style={{ padding: "1px 6px", fontSize: 9.5 }}><Icon name="fire" size={9} /> URGENTE</span>}
                          </div>
                          <div className="text-md font-semibold tracking-tight">{e.title}</div>
                          <div className="text-sm text-3 flex items-center gap-1.5 mt-1">
                            <Icon name="map-pin" size={12} /> {e.local}
                          </div>
                        </div>
                        <StatusPill status={e.status === "ativo" ? "producao" : e.status === "finalizado" ? "finalizado" : "pendente"} pulse={e.status === "ativo"} />
                      </div>
                      <div className="flex items-center gap-4 mt-3 text-xs text-3">
                        <span className="flex items-center gap-1.5"><Icon name="hammer" size={11} /> {e.project}</span>
                        <span className="flex items-center gap-1.5"><Avatar name={e.responsible} size={20} /> {e.responsible}</span>
                        <span className="flex items-center gap-1.5"><Icon name="truck" size={11} /> {e.vehicle}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Side panel */}
        <div className="col-span-4 flex flex-col gap-5">
          <div className="wood-card p-5">
            <div className="text-md font-semibold tracking-tight mb-3">Resumo do dia</div>
            <div className="flex flex-col gap-3">
              {[
                { label: "Saídas", value: events.filter(e => e.type === "saida").length, color: "var(--amber-bright)" },
                { label: "Entradas", value: events.filter(e => e.type === "entrada").length, color: "var(--info)" },
                { label: "Finalizadas", value: events.filter(e => e.status === "finalizado").length, color: "var(--success)" },
                { label: "Pendentes", value: events.filter(e => e.status === "pendente" || e.status === "ativo").length, color: "var(--warning)" },
              ].map(r => (
                <div key={r.label} className="flex items-center justify-between">
                  <span className="text-sm text-3 flex items-center gap-2">
                    <span className="wood-dot" style={{ background: r.color }} /> {r.label}
                  </span>
                  <span className="text-lg font-semibold" style={{ fontVariantNumeric: "tabular-nums", color: r.color }}>{r.value}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="wood-card p-5">
            <div className="text-md font-semibold tracking-tight mb-3">Veículos em rota</div>
            <div className="flex flex-col gap-3">
              {MOCK.vehicles.filter(v => v.load > 0).map(v => (
                <div key={v.id} className="flex items-center gap-3">
                  <div style={{
                    width: 36, height: 36, borderRadius: 9,
                    background: "linear-gradient(135deg, rgba(16, 185, 129,0.16), rgba(2, 44, 34,0.4))",
                    color: "var(--amber-bright)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    border: "1px solid var(--wood-border)"
                  }}>
                    <Icon name="truck" size={14} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-mono" style={{ fontWeight: 600, color: "var(--amber)" }}>{v.plate}</div>
                    <div className="text-xs text-3 truncate">{v.driver}</div>
                  </div>
                  <div className="text-xs text-3" style={{ fontVariantNumeric: "tabular-nums" }}>{v.load}%</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

/* ============================================================
   HISTORY (Histórico)
   ============================================================ */
const HistoryPage = ({ navigate }) => {
  const [filter, setFilter] = useStateOps2("todos");
  const grouped = useMemoOps2(() => {
    const filtered = filter === "todos" ? MOCK.history : MOCK.history.filter(h => h.type === filter);
    const g = {};
    filtered.forEach(h => {
      const key = h.time.startsWith("Hoje") ? "Hoje" : h.time.startsWith("Ontem") ? "Ontem" : h.time.split(",")[0];
      g[key] = g[key] || [];
      g[key].push(h);
    });
    return g;
  }, [filter]);

  const ICONS = {
    request: { name: "inbox", color: "var(--amber-bright)" },
    project: { name: "hammer", color: "var(--info)" },
    logistics: { name: "boxes", color: "var(--amber-bright)" },
    inventory: { name: "package", color: "var(--info)" },
    team: { name: "users", color: "var(--success)" },
    vehicle: { name: "truck", color: "var(--warning)" },
  };

  return (
    <>
      <PageHeader
        kicker="Operacional"
        title="Histórico"
        subtitle="Linha do tempo completa da sua operação. Cada movimento, cada decisão, cada handoff."
        actions={<button className="wood-btn wood-btn-secondary"><Icon name="external" size={13} /> Exportar</button>}
      />

      <div className="wood-card p-3 mb-5 flex items-center gap-2 flex-wrap">
        <FilterChip active={filter === "todos"} onClick={() => setFilter("todos")}>Tudo</FilterChip>
        <FilterChip active={filter === "request"} onClick={() => setFilter("request")}><Icon name="inbox" size={12} /> Solicitações</FilterChip>
        <FilterChip active={filter === "project"} onClick={() => setFilter("project")}><Icon name="hammer" size={12} /> Obras</FilterChip>
        <FilterChip active={filter === "logistics"} onClick={() => setFilter("logistics")}><Icon name="boxes" size={12} /> Logística</FilterChip>
        <FilterChip active={filter === "inventory"} onClick={() => setFilter("inventory")}><Icon name="package" size={12} /> Almoxarifado</FilterChip>
        <FilterChip active={filter === "team"} onClick={() => setFilter("team")}><Icon name="users" size={12} /> Equipes</FilterChip>
        <FilterChip active={filter === "vehicle"} onClick={() => setFilter("vehicle")}><Icon name="truck" size={12} /> Veículos</FilterChip>
      </div>

      <div className="wood-card p-6">
        {Object.entries(grouped).map(([day, items]) => (
          <div key={day} className="mb-7">
            <div className="flex items-center gap-3 mb-5">
              <div className="text-md font-semibold tracking-tight">{day}</div>
              <div className="flex-1 h-px" style={{ background: "var(--wood-border)" }} />
              <span className="text-xs text-4" style={{ fontVariantNumeric: "tabular-nums" }}>{items.length} eventos</span>
            </div>
            <div className="relative" style={{ paddingLeft: 20 }}>
              <div style={{ position: "absolute", left: 13, top: 6, bottom: 0, width: 2, background: "var(--wood-border)" }} />
              {items.map((e, i) => {
                const ic = ICONS[e.type] || ICONS.request;
                return (
                  <div key={e.id} className="flex gap-4 pb-5 relative slide-up" style={{ animationDelay: `${i * 50}ms` }}>
                    <div style={{
                      position: "absolute", left: -14, top: 4,
                      width: 28, height: 28, borderRadius: "50%",
                      background: `${ic.color}1A`,
                      color: ic.color,
                      border: `1px solid var(--wood-border)`,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      zIndex: 2
                    }}>
                      <Icon name={ic.name} size={12} />
                    </div>
                    <div className="flex-1 ml-6 px-4 py-3 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
                      <div className="text-sm mb-1" style={{ fontWeight: 500 }}>{e.title}</div>
                      <div className="flex items-center gap-3 text-xs text-3">
                        <span className="flex items-center gap-1.5"><Avatar name={e.user} size={18} /> {e.user}</span>
                        {e.project && <><span>·</span><span className="text-amber">{e.project}</span></>}
                        <span style={{ flex: 1 }} />
                        <span className="text-4 font-mono">{e.time}</span>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

Object.assign(window, { InventoryPage, VehiclesPage, LogisticsPage, HistoryPage });