import { Archive, DraftingCompass, MonitorCheck, Rows3 } from "lucide-react";
import type { MenuBoard, MenuBoardFilters } from "@/components/business/menu-boards/types";
import { useMenuBoardText } from "@/components/business/menu-boards/menuBoardI18n";

type Props = {
  boards: MenuBoard[];
  activeStatus: MenuBoardFilters["status"];
  onStatusChange: (status: MenuBoardFilters["status"]) => void;
};

export default function MenuBoardStats({ boards, activeStatus, onStatusChange }: Props) {
  const t = useMenuBoardText();
  const nonArchivedBoards = boards.filter((board) => board.status !== "ARCHIVED");
  const stats = [
    { label: t("totalBoards"), value: nonArchivedBoards.length, status: "ALL" as const, icon: Rows3, tone: "text-sky-300" },
    { label: t("published"), value: nonArchivedBoards.filter((board) => board.status === "PUBLISHED").length, status: "PUBLISHED" as const, icon: MonitorCheck, tone: "text-emerald-300" },
    { label: t("drafts"), value: nonArchivedBoards.filter((board) => board.status === "DRAFT").length, status: "DRAFT" as const, icon: DraftingCompass, tone: "text-amber-300" },
    { label: t("archived"), value: boards.filter((board) => board.status === "ARCHIVED").length, status: "ARCHIVED" as const, icon: Archive, tone: "text-zinc-300" },
  ];

  return (
    <section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
      {stats.map((stat) => {
        const Icon = stat.icon;
        const isActive = activeStatus === stat.status;

        return (
          <button
            key={stat.label}
            type="button"
            aria-pressed={isActive}
            onClick={() => onStatusChange(stat.status)}
            className={`rounded-xl border p-4 text-left transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-elevated)] ${
              isActive
                ? "border-[var(--accent)] bg-[var(--accent-muted)] shadow-[0_0_0_1px_var(--accent),0_0_24px_var(--accent-muted)]"
                : "border-[var(--border)] bg-[var(--bg-elevated)] hover:border-[var(--accent)]/70 hover:bg-[var(--bg-hover)]"
            }`}
          >
            <div className="flex items-center justify-between gap-3">
              <p className="text-xs font-medium uppercase tracking-wide text-[var(--text-faint)]">{stat.label}</p>
              <Icon className={`h-4 w-4 ${stat.tone}`} />
            </div>
            <p className="mt-3 text-3xl font-semibold text-[var(--text)]">{stat.value}</p>
          </button>
        );
      })}
    </section>
  );
}