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

export async function generateMetadata() {
  const locale = await getLocale();
  const isArabic = locale === "ar";
  return metaObject(
    isArabic ? "الأسئلة الشائعة" : "FAQs",
    isArabic
      ? "إجابات سريعة حول المزادات والعروض وخدماتنا."
      : "Quick answers about auctions, listings and our services.",
    undefined,
    undefined,
    "/faqs",
  );
}

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

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

  const categories = await fetchFaqCategories(lang);

  const title = isArabic ? "الأسئلة الشائعة" : "Frequently Asked Questions";
  const description = isArabic
    ? "إجابات سريعة حول المزادات والعروض وخدماتنا."
    : "Quick answers about auctions, listings and our services.";

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

  const quickLinksTitle = isArabic ? "روابط سريعة" : "Quick links";
  const docsTitle = isArabic ? "مستندات مهمة" : "Important documents";

  const camelAuctionsLabel = isArabic
    ? "مزادات الإبل الجماعية"
    : "Annual camel auctions";
  const horseAuctionsLabel = isArabic
    ? "مزادات الخيل الجماعية"
    : "Annual horse auctions";
  const medicalServicesLabel = isArabic ? "خدمات طبية" : "Medical services";
  const transportServicesLabel = isArabic ? "خدمات نقل" : "Transport services";
  const productsLabel = isArabic
    ? "منتجات الخيل والإبل"
    : "Horse & camel products";

  const privacyPolicyLabel = isArabic ? "سياسة الخصوصية" : "Privacy policy";
  const termsLabel = isArabic ? "الشروط والأحكام" : "Terms & conditions";

  return (
    <>
      <HerotSectionWithBack
        title={title}
        description={description}
        gradientFrom="#0F5132"
        gradientTo="#1B7A50"
      />
      <nav className=" px-6 py-4 text-sm text-slate-600">
        <Link href="/" className="text-ataya-g1">
          {homeLabel}
        </Link>
        <span className="mx-2">/</span>
        <span className="text-slate-900">{breadcrumbCurrent}</span>
      </nav>

      <div className=" px-6 pb-16 grid lg:grid-cols-[minmax(0,1fr)_340px] gap-6">
        <div className="space-y-4 min-w-0">
          <FaqFiltersClient lang={lang} categories={categories} />
        </div>
        <aside className="space-y-4">
          <div className="border rounded-2xl shadow-sm bg-white">
            <div className="p-4">
              <h3 className="font-extrabold flex items-center flex-row justify-between gap-2">
                {quickLinksTitle} <span>↗</span>
              </h3>
              <ul className="mt-3 text-sm space-y-2 items-start text-start text-slate-700">
                <li>
                  <Link
                    className="text-primary underline"
                    href="/Annual-Camel-Auctions"
                  >
                    {camelAuctionsLabel}
                  </Link>
                </li>
                <li>
                  <Link
                    className="text-primary underline"
                    href="/Annual-Horse-Auctions"
                  >
                    {horseAuctionsLabel}
                  </Link>
                </li>
                <li>
                  <Link
                    className="text-primary underline"
                    href="/services/medical"
                  >
                    {medicalServicesLabel}
                  </Link>
                </li>
                <li>
                  <Link
                    className="text-primary underline"
                    href="/services/transport"
                  >
                    {transportServicesLabel}
                  </Link>
                </li>
                <li>
                  <Link
                    className="text-primary underline"
                    href="services/camel-products"
                  >
                    {productsLabel}
                  </Link>
                </li>
              </ul>
            </div>
          </div>

          <div className="border rounded-2xl shadow-sm bg-white">
            <div className="p-4">
              <h3 className="font-extrabold flex flex-row justify-between items-center gap-2">
                {docsTitle} <span>📄</span>
              </h3>
              <ul className="mt-3 text-sm space-y-2 items-center text-start text-slate-700">
                <li>
                  <Link className=" underline" href="/privacy-policy">
                    {privacyPolicyLabel}
                  </Link>
                </li>
                <li>
                  <Link className=" underline" href="/term-conditions">
                    {termsLabel}
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </aside>
      </div>
    </>
  );
}