import Link from 'next/link';
import { notFound } from 'next/navigation';
import { ArrowLeft, ArrowRight } from 'lucide-react';
import Header from '../../../components/Header.jsx';
import Footer from '../../../components/Footer.jsx';
import Reveal from '../../../components/Reveal.jsx';
import { serverApi } from '../../../lib/serverApi.js';
import { getOrganizationSchema } from '../../../lib/schema.js';

export async function generateMetadata({ params }) {
  const faq = await serverApi.getFaq(params.slug);
  if (!faq) return { title: 'Вопрос не найден' };
  return {
    title: faq.question,
    description: faq.answer.length > 160 ? `${faq.answer.slice(0, 157)}...` : faq.answer,
    alternates: { canonical: `/faq/${params.slug}` },
  };
}

export default async function FaqDetailPage({ params }) {
  const [faq, orgSchema] = await Promise.all([serverApi.getFaq(params.slug), getOrganizationSchema()]);
  if (!faq) notFound();

  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: [
      {
        '@type': 'Question',
        name: faq.question,
        acceptedAnswer: { '@type': 'Answer', text: faq.answer },
      },
    ],
  };

  return (
    <div>
      {/* eslint-disable-next-line react/no-danger */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(orgSchema) }} />
      {/* eslint-disable-next-line react/no-danger */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }} />

      <Header />
      <article className="max-w-2xl mx-auto px-5 sm:px-8 py-20 min-h-[60vh]">
        <Link href="/faq" className="text-sm text-emerald-500 font-medium inline-flex items-center gap-1 mb-8">
          <ArrowLeft className="h-3.5 w-3.5" /> Все вопросы
        </Link>

        <Reveal>
          <p className="text-xs uppercase tracking-widest text-emerald-500 mb-4 font-mono">&gt; faq --detail</p>
          <h1 className="text-2xl sm:text-3xl font-bold mb-6 font-display">{faq.question}</h1>
          <p className="text-base text-slate-700 dark:text-slate-300">{faq.answer}</p>
        </Reveal>

        <Reveal delay={100} className="mt-10">
          <Link
            href="/kontakty"
            className="inline-flex items-center gap-2 px-5 py-3 rounded-md bg-emerald-500 text-white font-medium text-sm hover:bg-emerald-600 transition-colors"
          >
            Остались вопросы? Напишите нам <ArrowRight className="h-4 w-4" />
          </Link>
        </Reveal>
      </article>
      <Footer />
    </div>
  );
}