import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { ExternalLink } from "lucide-react";
import { SectionHeader } from "@/components/shared/SectionHeader";
import { AnimatedSection } from "@/components/shared/AnimatedSection";
import { getAllUsesItems } from "@/lib/db/uses";

interface Props {
  params: Promise<{ locale: string }>;
}

type UsesCategory = "development" | "design" | "marketing" | "productivity" | "hardware";

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "uses" });
  return { title: t("title"), description: t("subtitle") };
}

export const dynamic = "force-dynamic";

const categoryOrder: UsesCategory[] = ["development", "design", "marketing", "productivity", "hardware"];

export default async function UsesPage({ params }: Props) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "uses" });
  const tCat = await getTranslations({ locale, namespace: "uses.categories" });

  const items = await getAllUsesItems();

  const grouped = categoryOrder.reduce<Record<string, typeof items>>((acc, cat) => {
    const catItems = items.filter((i) => i.category === cat);
    if (catItems.length > 0) acc[cat] = catItems;
    return acc;
  }, {});

  return (
    <div className="relative z-10 mx-auto max-w-4xl px-6 py-24 pt-32">
      <SectionHeader label="uses" />
      <AnimatedSection className="mb-12">
        <h1 className="text-4xl font-bold text-text-primary md:text-5xl">{t("title")}</h1>
        <p className="mt-4 text-text-secondary">{t("subtitle")}</p>
      </AnimatedSection>

      <div className="space-y-14">
        {Object.entries(grouped).map(([cat, catItems], groupIdx) => (
          <AnimatedSection key={cat} delay={groupIdx * 0.05}>
            <h2 className="mb-6 flex items-center gap-3">
              <span className="font-mono text-xs text-accent">// {tCat(cat as UsesCategory)}</span>
              <span className="h-px flex-1 bg-border" />
            </h2>
            <div className="grid gap-3 sm:grid-cols-2">
              {catItems.map((item) => (
                <div
                  key={item.id}
                  className="group flex items-start justify-between gap-3 rounded-lg border border-border bg-surface p-4 transition-all hover:border-accent/20"
                >
                  <div className="flex-1 min-w-0">
                    <div className="font-medium text-text-primary">{item.title}</div>
                    {item.description && (
                      <p className="mt-0.5 text-sm text-text-secondary">{item.description}</p>
                    )}
                  </div>
                  {item.url && (
                    <a
                      href={item.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="mt-0.5 shrink-0 text-text-secondary opacity-0 transition-opacity group-hover:opacity-100 hover:text-accent"
                      aria-label={`Visit ${item.title}`}
                    >
                      <ExternalLink size={14} />
                    </a>
                  )}
                </div>
              ))}
            </div>
          </AnimatedSection>
        ))}
        {Object.keys(grouped).length === 0 && (
          <p className="text-center text-text-secondary py-10">هنوز ابزاری اضافه نشده.</p>
        )}
      </div>
    </div>
  );
}
