"use client";

import { useEffect, useRef, useState } from "react";
import { Check, ListFilter } from "lucide-react";
import type { CategoriaAgenda } from "./tipos";

/**
 * Filtro por categoria.
 *
 * O estado e "o que esta escondido", nao "o que esta visivel": comeca vazio
 * (nada escondido, tudo aparece) e uma categoria nova nunca nasce escondida
 * por acidente so porque a pessoa tinha filtrado antes de ela existir.
 */
export default function FiltroCategorias({
  categorias,
  ocultas,
  aoAlternar,
  aoMostrarTodas,
  contagens,
}: {
  categorias: CategoriaAgenda[];
  ocultas: Set<string>;
  aoAlternar: (id: string) => void;
  aoMostrarTodas: () => void;
  contagens: Record<string, number>;
}) {
  const [aberto, setAberto] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!aberto) return;
    const aoClicarFora = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setAberto(false);
    };
    const aoTeclar = (e: KeyboardEvent) => e.key === "Escape" && setAberto(false);
    document.addEventListener("mousedown", aoClicarFora);
    window.addEventListener("keydown", aoTeclar);
    return () => {
      document.removeEventListener("mousedown", aoClicarFora);
      window.removeEventListener("keydown", aoTeclar);
    };
  }, [aberto]);

  if (categorias.length === 0) return null;

  const ativas = categorias.length - ocultas.size;

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        onClick={() => setAberto((v) => !v)}
        aria-expanded={aberto}
        className={`relative flex h-11 items-center gap-2 rounded-[9px] border px-[11px] text-[12px] font-medium transition-colors sm:h-9 ${
          ocultas.size > 0
            ? "border-[rgba(108,60,240,0.35)] bg-[rgba(108,60,240,0.06)] text-[#6C3CF0]"
            : "border-[var(--ag-border-strong)] bg-[var(--ag-surface)] text-[var(--ag-text-2)] hover:border-[var(--ag-border-strong)] hover:bg-[var(--ag-surface-2)]"
        }`}
      >
        <ListFilter className="h-4 w-4" />
        <span className="hidden sm:inline">Filtrar</span>
        {ocultas.size > 0 && (
          <span className="flex h-4 min-w-[16px] items-center justify-center rounded-full bg-[#6C3CF0] px-1 text-[9px] font-semibold text-white">
            {ativas}
          </span>
        )}
      </button>

      {aberto && (
        <div className="absolute right-0 top-[calc(100%+8px)] z-[65] w-72 overflow-hidden rounded-[14px] border border-[var(--ag-border)] bg-[var(--ag-surface)] shadow-[var(--ag-sombra-alta)]">
          <div className="flex items-center justify-between border-b border-[var(--ag-line-h)] px-3.5 py-2.5">
            <span className="text-[11px] font-semibold uppercase tracking-[0.03em] text-[var(--ag-text-4)]">
              Categorias
            </span>
            {ocultas.size > 0 && (
              <button
                type="button"
                onClick={aoMostrarTodas}
                className="text-[11px] font-semibold text-[#6C3CF0] hover:underline"
              >
                Mostrar todas
              </button>
            )}
          </div>
          <div className="max-h-72 overflow-y-auto p-1.5">
            {categorias.map((c) => {
              const visivel = !ocultas.has(c.id);
              const n = contagens[c.id] ?? 0;
              return (
                <button
                  key={c.id}
                  type="button"
                  onClick={() => aoAlternar(c.id)}
                  className="flex w-full items-center gap-2.5 rounded-[9px] px-2.5 py-2 text-left hover:bg-[var(--ag-surface-2)]"
                >
                  <span
                    aria-hidden
                    className={`flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[6px] border-2 transition-colors`}
                    style={{
                      background: visivel ? c.color : "transparent",
                      borderColor: c.color,
                    }}
                  >
                    {visivel && <Check className="h-3 w-3 text-white" />}
                  </span>
                  <span
                    className={`min-w-0 flex-1 truncate text-[13px] font-medium ${
                      visivel ? "text-[var(--ag-text)]" : "text-[var(--ag-text-5)] line-through"
                    }`}
                  >
                    {c.name}
                  </span>
                  <span className="shrink-0 text-[11px] font-medium tabular-nums text-[var(--ag-text-5)]">
                    {n}
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}