import TermsHero from "@/components/terms/TermsHero";
import TOC from "@/components/faq-comp/TOC";
import SectionCard from "@/components/terms/SectionCard";
import Link from "next/link";
import HerotSectionWithBack from "@/components/hero-intro";
import { fetchTerms } from "@/lib/api";
import type { Locale } from "next-intl";
import { metaObject } from "@/config/site.config";
import { getLocale } from "next-intl/server";

const titleToId: Record<string, string> = {
  "الموافقة على الشروط": "accept",
  "الأهلية وإنشاء الحساب": "eligibility",
  "شروط المزادات": "auctions",
  "التزامات البائع في العروض": "listings",
};

export async function generateMetadata() {
  const locale = await getLocale();
  const isArabic = locale === "ar";
  return metaObject(
    isArabic ? "الشروط والأحكام" : "Terms & Conditions",
    isArabic
      ? "اقرأ الشروط والأحكام الخاصة بمنصة عطايا لمعرفة قواعد استخدام الموقع، آلية المشاركة في مزادات الخيل والإبل، وحقوق والتزامات المستخدمين والبائعين. آخر تحديث: سبتمبر 2025."
      : "Read Ataya’s Terms & Conditions to understand platform rules, participation in horse and camel auctions, and the rights and responsibilities of users and sellers. Last updated: September 2025.",
    undefined,
    undefined,
    "/term-conditions",
  );
}

type Props = {
  params: Promise<{ lang: Locale }>;
};

export default async function TermsPage({ params }: Props) {
  const { lang } = await params;
  const isArabic = lang === "ar";

  const items = await fetchTerms(lang);

  const title = isArabic ? "الشروط والأحكام" : "Terms & Conditions";
  const description = isArabic
    ? "آخر تحديث: سبتمبر 2025"
    : "Last updated: September 2025";

  const homeLabel = isArabic ? "الرئيسية" : "Home";
  const breadcrumbCurrent = title;

  return (
    <div className=" text-slate-800">
      <HerotSectionWithBack title={title} description={description} />

      <nav className="container-7xl px-6 py-4 text-sm text-slate-600">
        <Link href="/" className="hover:text-(--g1)">
          {homeLabel}
        </Link>
        <span className="mx-2">/</span>
        <span className="text-slate-900">{breadcrumbCurrent}</span>
      </nav>

      <main className=" px-6 pb-16">
        <section className="space-y-6  ">
          {items.map((item, index) => {
            const id = titleToId[item.title] ?? `section-${index}`;
            return (
              <SectionCard
                key={item.id}
                id={id}
                title={item.title}
                index={index}
              >
                <p className="whitespace-pre-line text-start">{item.body}</p>
              </SectionCard>
            );
          })}
        </section>
      </main>
    </div>
  );
}