"use client";
import { useState, useTransition, useMemo } from "react";
import type { Project } from "@/lib/models";
import { ProjectCard } from "./project-card";
import type { Locale } from "@/i18n/routes";

type StatusTone = "live" | "warm" | "muted";
function statusTone(s: string): StatusTone {
  const v = s.toLowerCase();
  if (v.startsWith("aktiv") || v.startsWith("live") || v === "running") return "live";
  if (v.includes("early") || v.includes("draft") || v.includes("hardening")) return "warm";
  return "muted";
}

export function ProjectFilter({
  projects,
  locale,
  emptyLabel,
}: {
  projects: Project[];
  locale: Locale;
  emptyLabel: string;
}) {
  // Sammle alle einzigartigen Kategorien + Status-Töne als Filter-Tags.
  const tags = useMemo(() => {
    const set = new Set<string>();
    projects.forEach((p) => {
      const [main] = p.category.split("·");
      if (main) set.add(main.trim());
      set.add(statusTone(p.status));
    });
    return Array.from(set);
  }, [projects]);

  const [active, setActive] = useState<string | null>(null);
  const [, start] = useTransition();

  const filtered = useMemo(() => {
    if (!active) return projects;
    return projects.filter((p) => {
      if (active === "live" || active === "warm" || active === "muted") {
        return statusTone(p.status) === active;
      }
      const [main] = p.category.split("·");
      return main?.trim() === active;
    });
  }, [projects, active]);

  return (
    <div>
      <div className="mb-6 flex flex-wrap items-center gap-2">
        <span className="mr-1 font-mono text-[10px] uppercase tracking-wider text-muted">filter</span>
        <button
          type="button"
          onClick={() => start(() => setActive(null))}
          className={`tag ${active === null ? "tag--active" : ""}`}
        >
          all · {projects.length}
        </button>
        {tags.map((t) => {
          const count = projects.filter((p) => {
            if (t === "live" || t === "warm" || t === "muted") return statusTone(p.status) === t;
            const [main] = p.category.split("·");
            return main?.trim() === t;
          }).length;
          return (
            <button
              key={t}
              type="button"
              onClick={() => start(() => setActive(active === t ? null : t))}
              className={`tag ${active === t ? "tag--active" : ""}`}
            >
              {t} · {count}
            </button>
          );
        })}
      </div>
      {filtered.length === 0 ? (
        <div className="rounded border border-hairline bg-panel p-8 text-center font-mono text-sm text-muted">
          {emptyLabel}
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          {filtered.map((p) => (
            <div key={p.slug} className="transition-opacity duration-200">
              <ProjectCard project={p} locale={locale} showStance />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}