import { getDb } from "@/lib/db";
import { listProjects } from "@/lib/models";
import type { Locale } from "@/i18n/routes";

export function StatsBar({ locale }: { locale: Locale }) {
  const db = getDb();
  const projects = listProjects(db, locale);
  const allProjects = listProjects(db, "de").length + listProjects(db, "en").length; // unique
  const featured = projects.filter((p) => p.featured).length;
  const categories = new Set(projects.map((p) => p.category.split("·")[0].trim())).size;
  // Body-Words als grobes "Content-Volumen"-Signal
  const totalWords = projects.reduce((sum, p) => sum + (p.body.split(/\s+/).length), 0);

  const items = [
    { label: locale === "de" ? "Projekte" : "Projects", value: allProjects, hint: featured + " " + (locale === "de" ? "featured" : "featured") },
    { label: locale === "de" ? "Kategorien" : "Categories", value: categories, hint: "" },
    { label: locale === "de" ? "Wörter" : "Words", value: totalWords.toLocaleString("de-DE"), hint: locale === "de" ? "Notizen" : "Notes" },
    { label: "since", value: "2003", hint: locale === "de" ? "online-handle" : "online handle" },
  ];

  return (
    <Section>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        {items.map((it, i) => (
          <div
            key={i}
            className="ascii-box text-center"
          >
            <div className="font-mono text-[10px] uppercase tracking-wider text-muted">{it.label}</div>
            <div className="mt-1 font-mono text-3xl font-semibold text-[var(--fg)]">
              {it.value}
            </div>
            {it.hint ? <div className="mt-0.5 font-mono text-[10px] text-muted">{it.hint}</div> : null}
          </div>
        ))}
      </div>
    </Section>
  );
}

// Lokaler Section-Wrapper ohne Client-Side-Verhalten
function Section({ children }: { children: React.ReactNode }) {
  return <section className="py-10">{children}</section>;
}
