import { getTranslations } from 'next-intl/server';
import { prisma } from '@/lib/prisma';
import { Container } from '@/components/ui/container';
import { Reveal } from '@/components/ui/reveal';
import { buildMetadata } from '@/lib/seo';
import { JsonLd } from '@/lib/schema-org';
import type { Locale } from '@/i18n/config';

export async function generateMetadata({ params: { locale } }: { params: { locale: Locale } }) {
  const t = await getTranslations({ locale, namespace: 'nav' });
  return buildMetadata({
    locale,
    path: '/faq',
    title: t('faq'),
    description:
      locale === 'ar' ? 'إجابات على أسئلتكم حول الطاقة الشمسية.' : 'Réponses à vos questions sur le solaire.'
  });
}

export default async function FaqPage({ params: { locale } }: { params: { locale: Locale } }) {
  const t = await getTranslations({ locale, namespace: 'nav' });

  const faqs = await prisma.faq.findMany({
    where: { serviceId: null },
    orderBy: { order: 'asc' },
    include: { translations: { where: { locale } } }
  });

  const items = faqs.filter((f) => f.translations[0]);

  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: items.map((f) => ({
      '@type': 'Question',
      name: f.translations[0].question,
      acceptedAnswer: { '@type': 'Answer', text: f.translations[0].answer }
    }))
  };

  return (
    <Container className="max-w-3xl py-16">
      {items.length > 0 && <JsonLd data={faqSchema} />}
      <Reveal variant="up">
        <h1 className="font-display text-3xl font-semibold">{t('faq')}</h1>
      </Reveal>
      <div className="mt-8 divide-y divide-graphite-800/10">
        {items.map((f, i) => (
          <Reveal key={f.id} as="div" variant="up" delay={Math.min(i * 60, 360)}>
            <details className="py-5">
              <summary className="cursor-pointer font-medium transition-colors hover:text-copper-600">
                {f.translations[0].question}
              </summary>
              <p className="mt-2 text-sm text-graphite-900/60">{f.translations[0].answer}</p>
            </details>
          </Reveal>
        ))}
      </div>
      {items.length === 0 && (
        <p className="mt-8 text-graphite-900/50">
          {locale === 'ar' ? 'لا توجد أسئلة منشورة بعد.' : 'Aucune question publiée pour le moment.'}
        </p>
      )}
    </Container>
  );
}