import Link from "next/link";
import type { Metadata } from "next";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import CategoryIcon from "@/lib/category-icons";
import {
  categories,
  categoryGroups,
  getCategoriesByGroup,
  type CategoryGroup,
} from "@/data/categories";
import {
  getTierCategories,
  tierLabels,
  getCategoryStrategy,
  type CategoryTier,
} from "@/data/category-strategy";
import { ArrowRight } from "lucide-react";

export const metadata: Metadata = {
  title: "Tüm Kategoriler — Yakınımda Aramalar | yakınımda.tr",
  description:
    "Google Türkiye'de en çok aranan yakınımda sorguları. Eczane, nöbetçi eczane, hastane, restoran ve daha fazlası.",
};

const groupOrder: CategoryGroup[] = ["saglik", "gunluk", "hizmet", "finans", "diger"];
const tierOrder: CategoryTier[] = [1, 2, 3];

export default function KategorilerPage() {
  return (
    <>
      <Header />
      <main className="min-h-screen pt-28 pb-16">
        <div className="hero-glow pointer-events-none absolute inset-0 opacity-50" />
        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mx-auto max-w-2xl text-center">
            <span className="inline-flex rounded-full border border-emerald-500/20 bg-emerald-500/8 px-3.5 py-1 text-xs font-semibold uppercase tracking-widest text-emerald-400">
              {categories.length} Kategori
            </span>
            <h1 className="mt-4 text-4xl font-extrabold text-white sm:text-5xl">
              Tüm <span className="text-gradient">Yakınımda</span> Aramaları
            </h1>
            <p className="mt-4 text-lg text-slate-400">
              Google&apos;da aranan, Maps&apos;te güvenilir cevabı olmayan kategoriler önce —
              dinamik veri önceliğimiz buna göre.
            </p>
          </div>

          <div className="mt-14 space-y-14">
            {tierOrder.map((tier) => {
              const tierCats = getTierCategories(tier);
              if (tierCats.length === 0) return null;
              return (
                <section key={tier}>
                  <div className="mb-6">
                    <span className="text-xs font-bold uppercase tracking-wider text-amber-400">
                      Tier {tier}
                    </span>
                    <h2 className="mt-1 text-2xl font-bold text-white">{tierLabels[tier]}</h2>
                  </div>
                  <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    {tierCats.map((cat) => (
                      <CategoryListCard key={cat.slug} category={cat} showStrategy />
                    ))}
                  </div>
                </section>
              );
            })}

            <section>
              <div className="mb-6">
                <h2 className="text-2xl font-bold text-white">Tüm kategoriler (gruba göre)</h2>
              </div>
            </section>

            {groupOrder.map((group) => {
              const groupCategories = getCategoriesByGroup(group);
              const meta = categoryGroups[group];
              return (
                <section key={group}>
                  <div className="mb-6">
                    <h2 className="text-2xl font-bold text-white">{meta.label}</h2>
                    <p className="mt-1 text-sm text-slate-500">{meta.description}</p>
                  </div>
                  <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    {groupCategories.map((cat) => (
                      <CategoryListCard key={cat.slug} category={cat} />
                    ))}
                  </div>
                </section>
              );
            })}
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}

function CategoryListCard({
  category,
  showStrategy = false,
}: {
  category: (typeof categories)[0];
  showStrategy?: boolean;
}) {
  const strategy = showStrategy ? getCategoryStrategy(category.slug) : null;
  return (
    <Link
      href={`/${category.slug}`}
      className="category-card group flex items-center gap-4 rounded-2xl border border-white/6 bg-white/3 p-4"
    >
      <div
        className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br ${category.color}`}
      >
        <CategoryIcon name={category.icon} className="h-6 w-6 text-white" />
      </div>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <h3 className="font-bold text-white">{category.title}</h3>
          {category.hot && (
            <span className="rounded-full bg-amber-500 px-1.5 py-0.5 text-[9px] font-bold uppercase text-black">
              Top
            </span>
          )}
        </div>
        <p className="text-sm text-slate-500">
          {showStrategy && strategy
            ? strategy.searchWhy
            : `${category.searches} aylık arama`}
        </p>
      </div>
      <ArrowRight className="h-4 w-4 text-slate-600 group-hover:text-emerald-400" />
    </Link>
  );
}