import { getTranslations } from 'next-intl/server';
import { Mail, MapPin, Phone, Sparkles, ArrowUpRight } from 'lucide-react';
import { Container } from '@/components/ui/container';
import { Reveal } from '@/components/ui/reveal';
import { ContactForm } from '@/components/forms/contact-form';
import { buildMetadata } from '@/lib/seo';
import { siteConfig } from '@/data/site-config';
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: '/contact',
    title: t('contact'),
    description: locale === 'ar' ? 'تواصلوا معنا.' : 'Contactez notre équipe.'
  });
}

const mapsQuery = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
  `${siteConfig.address.street}, ${siteConfig.address.postalCode} ${siteConfig.address.city}, ${siteConfig.address.country}`
)}`;

export default async function ContactPage({ params: { locale } }: { params: { locale: Locale } }) {
  const t = await getTranslations({ locale, namespace: 'contactForm' });
  const isAr = locale === 'ar';

  const channels = [
    {
      icon: <Mail className="h-5 w-5" />,
      label: isAr ? 'البريد الإلكتروني' : 'E-mail',
      value: siteConfig.email,
      href: `mailto:${siteConfig.email}`
    },
    {
      icon: <Phone className="h-5 w-5" />,
      label: isAr ? 'الهاتف' : 'Téléphone',
      value: siteConfig.phone,
      href: `tel:${siteConfig.phone.replace(/\s/g, '')}`
    },
    {
      icon: <MapPin className="h-5 w-5" />,
      label: isAr ? 'العنوان' : 'Adresse',
      value: `${siteConfig.address.street}, ${siteConfig.address.postalCode} ${siteConfig.address.city}`,
      href: mapsQuery
    },
    {
      icon: (
        <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
        </svg>
      ),
      label: isAr ? 'فيسبوك' : 'Facebook',
      value: isAr ? 'صفحتنا الرسمية' : 'Notre page officielle',
      href: siteConfig.social.facebook
    }
  ];

  return (
    <Container className="grid gap-12 py-16 lg:grid-cols-5">
      <Reveal variant="up" className="lg:col-span-2">
        <div>
          <span className="inline-flex items-center gap-2 rounded-full bg-copper-600/10 px-3 py-1 text-xs font-medium text-copper-600">
            {isAr ? 'تواصلوا معنا' : 'Contactez-nous'}
          </span>
          <h1 className="mt-4 font-display text-3xl font-semibold sm:text-4xl">{t('title')}</h1>
          <p className="mt-3 text-graphite-900/60">
            {isAr
              ? 'سنتواصل معكم في أقرب وقت لإعداد مشروعكم الشمسي.'
              : 'Notre équipe vous répond dans les meilleurs délais pour préparer votre projet solaire.'}
          </p>

        <ul className="mt-8 space-y-3">
          {channels.map((c) => (
            <li key={c.label}>
              <a
                href={c.href}
                target={c.href.startsWith('http') ? '_blank' : undefined}
                rel={c.href.startsWith('http') ? 'noreferrer' : undefined}
                className="group flex items-center gap-4 rounded-2xl border border-graphite-800/10 bg-white p-4 transition-colors hover:border-copper-600/30 hover:bg-copper-600/[0.03]"
              >
                <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-copper-600/10 text-copper-600">
                  {c.icon}
                </span>
                <span className="min-w-0">
                  <span className="block text-xs font-medium text-graphite-900/40">{c.label}</span>
                  <span className="block truncate text-sm font-semibold text-graphite-900">{c.value}</span>
                </span>
                <ArrowUpRight className="ml-auto h-4 w-4 shrink-0 text-graphite-900/30 transition-colors group-hover:text-copper-600" />
              </a>
            </li>
          ))}
        </ul>

        <div className="mt-6 flex items-start gap-3 rounded-2xl bg-copper-600/[0.06] p-4 text-sm text-graphite-900/70">
          <Sparkles className="mt-0.5 h-4 w-4 shrink-0 text-copper-600" />
          <p>
            {isAr
              ? 'استشارة وعرض سعر مجانيان ومخصصان لمشروعك، للأفراد والشركات.'
              : 'Devis gratuit et personnalisé pour votre projet, aussi bien pour les particuliers que les professionnels.'}
          </p>
        </div>
        </div>
      </Reveal>

      <Reveal variant="up" delay={140} className="lg:col-span-3">
        <ContactForm locale={locale} />
      </Reveal>
    </Container>
  );
}