"use client";

import { useMemo, useState } from "react";
import { CaseStudyCard } from "@/components/ui/Cards";
import type { CaseStudy, Locale } from "@/types/content";

const storyIndustryFilters = [
  { slug: "education", label: "Education" },
  { slug: "enterprise", label: "Enterprise" },
  { slug: "government-public-sector", label: "Government & Public Sector" },
  { slug: "hospitality-commercial", label: "Hospitality & Commercial" }
] as const;

export function SuccessStoryFilter({ items, locale }: { items: CaseStudy[]; locale: Locale }) {
  const [activeIndustry, setActiveIndustry] = useState<string>("all");
  const filteredStories = useMemo(() => {
    if (activeIndustry === "all") return items;
    return items.filter((item) => getStoryIndustrySlug(item) === activeIndustry);
  }, [activeIndustry, items]);

  return (
    <>
      <div className="story-filter" aria-label={locale === "id" ? "Filter success stories berdasarkan industri" : "Filter success stories by industry"}>
        <button className={activeIndustry === "all" ? "active" : ""} type="button" onClick={() => setActiveIndustry("all")} aria-pressed={activeIndustry === "all"}>
          All
        </button>
        {storyIndustryFilters.map((filter) => (
          <button className={activeIndustry === filter.slug ? "active" : ""} key={filter.slug} type="button" onClick={() => setActiveIndustry(filter.slug)} aria-pressed={activeIndustry === filter.slug}>
            {filter.label}
          </button>
        ))}
      </div>
      <div className="case-grid">{filteredStories.map((item) => <CaseStudyCard key={item.slug} item={item} locale={locale} />)}</div>
      {!filteredStories.length ? <p className="empty-note">{locale === "id" ? "Belum ada Success Stories untuk filter ini." : "No Success Stories match this industry yet."}</p> : null}
    </>
  );
}

function getStoryIndustrySlug(item: CaseStudy) {
  const industry = item.industry.toLowerCase();
  const category = item.projectCategory.toLowerCase();
  if (industry.includes("education") || industry.includes("museum") || category.includes("classroom")) return "education";
  if (industry.includes("government") || industry.includes("public sector") || category.includes("ifp")) return "government-public-sector";
  if (industry.includes("hospitality") || industry.includes("public experience") || category.includes("immersive")) return "hospitality-commercial";
  return "enterprise";
}
