import { type Metadata } from 'next';
import { getConfigurations } from '@/lib/api/client';
import { Footer } from '@/components/layout/Footer';
import { type Locale } from '@/i18n';

interface DataDeletionPageProps {
  params: Promise<{ locale: Locale }>;
}

export async function generateMetadata({ params }: DataDeletionPageProps): Promise<Metadata> {
  const { locale } = await params;
  const isAr = locale === 'ar';

  return {
    title: isAr ? 'طلب حذف البيانات والحساب | ShineCode' : 'Data Deletion Request | ShineCode',
    description: isAr
      ? 'دليل وإجراءات طلب حذف البيانات والحساب في ShineCode وفقاً لأعلى معايير الخصوصية.'
      : 'Follow the secure process to permanently erase your account and associated data from ShineCode.',
    alternates: {
      canonical: `https://shinecode.ae/${locale}/data-deletion`,
      languages: {
        en: `https://shinecode.ae/en/data-deletion`,
        ar: `https://shinecode.ae/ar/data-deletion`,
        'x-default': `https://shinecode.ae/en/data-deletion`,
      },
    },
    openGraph: {
      title: isAr ? 'طلب حذف البيانات والحساب | ShineCode' : 'Data Deletion Request | ShineCode',
      description: isAr
        ? 'دليل وإجراءات طلب حذف البيانات والحساب في ShineCode وفقاً لأعلى معايير الخصوصية.'
        : 'Follow the secure process to permanently erase your account and associated data from ShineCode.',
      url: `https://shinecode.ae/${locale}/data-deletion`,
      siteName: 'ShineCode',
      images: ['https://shinecode.ae/images/frontend/socialP.webp'],
      locale: isAr ? 'ar_AE' : 'en_AE',
    },
  };
}

export default async function DataDeletionPage({ params }: DataDeletionPageProps) {
  const { locale } = await params;
  const isAr = locale === 'ar';

  let htmlContent: string | null = null;
  try {
    const configRes = await getConfigurations({ revalidate: 86400, tags: ['configurations'] });
    if (configRes.ok && configRes.data?.data_deletion_request) {
      htmlContent = configRes.data.data_deletion_request as string;
    }
  } catch (err) {
    console.error('[DataDeletionPage] Error loading policy from API:', err);
  }

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <main id="main-content" className="flex-1 py-16 md:py-20">
        <div className="container mx-auto px-4 max-w-4xl">
          <h1 className="text-3xl md:text-4xl font-bold text-ink mb-6 text-start">
            {isAr ? 'طلب حذف البيانات والحساب' : 'Data Deletion Request'}
          </h1>
          {htmlContent ? (
            <div
              className="bg-surface border border-subtle rounded-2xl p-6 md:p-8 shadow-xs overflow-hidden"
              dangerouslySetInnerHTML={{ __html: htmlContent }}
            />
          ) : (
            <div className="bg-surface border border-subtle rounded-2xl p-6 md:p-8 space-y-6">
              <p className="text-muted leading-relaxed">
                {isAr
                  ? 'لحذف حسابك وجميع بياناتك وسجل الحجوزات نهائياً، يرجى إرسال بريد إلكتروني من عنوانك المسجل إلى contact@shinecode.ae مع كتابة "طلب حذف البيانات" في العنوان.'
                  : 'To permanently erase your profile, bookings, and account history, please send a deletion request from your registered email address to contact@shinecode.ae.'}
              </p>
              <a
                href="mailto:contact@shinecode.ae?subject=Data Deletion Request&body=Hello ShineCode Team,%0D%0A%0D%0AI would like to formally request the permanent deletion of my account and all associated data from your platform.%0D%0A%0D%0AThank you."
                className="inline-block bg-brand-500 hover:bg-brand-600 text-white font-semibold px-6 py-3 rounded-xl transition-colors shadow-sm"
              >
                {isAr ? 'إرسال طلب الحذف عبر البريد الإلكتروني' : 'Send Deletion Request via Email'}
              </a>
            </div>
          )}
        </div>
      </main>
      <Footer locale={locale} />
    </div>
  );
}