import { useEffect, useState } from "react";
import { getJSON, itemsOrEmpty, type Category } from "../../api";
import { CategoryIcon } from "../../components/CategoryIcon";
import { SectionHeader } from "../../components/SectionHeader";
import { langQuery, useI18n } from "../../i18n";
import { cleanCategoryDisplayName } from "../../utils/categoryDisplay";

const FIGMA_CATEGORY_ORDER = [
  "project-ppt",
  "daily-class",
  "official-announcement",
  "academy-materials",
  "global-evangelism",
  "daily-poster",
  "community-tweets",
  "video-hub",
  "subsidy-policy",
  "how-to",
  "official-assets",
  "media-coverage",
  "academy-video",
  "general",
];

function figmaCategoryRank(category: Category): number {
  const index = FIGMA_CATEGORY_ORDER.indexOf(category.slug);
  return index === -1 ? FIGMA_CATEGORY_ORDER.length : index;
}

export function CategoriesPage() {
  const { t, lang } = useI18n();
  const [cats, setCats] = useState<Category[]>([]);
  const [unavailableOpen, setUnavailableOpen] = useState(false);
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    getJSON<Category[]>(
      `/api/categories?lang=${encodeURIComponent(langQuery(lang))}`,
    )
      .then((items) =>
        setCats(
          itemsOrEmpty(items).sort(
            (a, b) => figmaCategoryRank(a) - figmaCategoryRank(b),
          ),
        ),
      )
      .catch((e) => setErr(String(e)));
  }, [lang]);

  if (err) {
    return (
      <div className="rounded-xl border border-red-900 bg-red-950/40 p-4 text-red-200">
        {err}
      </div>
    );
  }

  return (
    <section>
      <SectionHeader title={t("categorySection")} />
      <div className="mt-7 grid grid-cols-3 gap-2 md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
        {cats.map((category) => (
          <button
            key={category.id}
            type="button"
            onClick={() => setUnavailableOpen(true)}
            className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
          >
            <CategoryIcon
              iconKey={category.iconKey}
              categorySlug={category.slug}
              className="h-9 w-9 shrink-0 text-ark-gold"
            />
            <div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2">
              {cleanCategoryDisplayName(category.name)}
            </div>
          </button>
        ))}
      </div>

      {unavailableOpen ? (
        <div
          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 px-6 backdrop-blur-sm"
          role="dialog"
          aria-modal="true"
          aria-labelledby="category-unavailable-title"
          onClick={() => setUnavailableOpen(false)}
        >
          <div
            className="w-full max-w-[320px] rounded-2xl border border-[#27292E] bg-[#1D1E23] p-5 text-center shadow-2xl"
            onClick={(event) => event.stopPropagation()}
          >
            <div
              id="category-unavailable-title"
              className="text-xl font-bold text-white"
            >
              {t("featureUnavailable")}
            </div>
            <p className="mt-2 text-sm leading-6 text-[#A8A9AE]">
              {t("featureUnavailableDesc")}
            </p>
            <button
              type="button"
              onClick={() => setUnavailableOpen(false)}
              className="mt-5 h-10 w-full rounded-full bg-ark-gold text-sm font-semibold text-black transition hover:bg-ark-gold2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#1D1E23]"
            >
              {t("confirm")}
            </button>
          </div>
        </div>
      ) : null}
    </section>
  );
}