import { MapPin, Mail, Phone, Clock } from "lucide-react";
import { getDictionary, pick } from "@/i18n";
import { sanityFetch } from "@/sanity/client";
import { SITE_SETTINGS_QUERY } from "@/sanity/queries";
import { PageHeader, Container, Eyebrow } from "@/components/ui";
import { Reveal } from "@/components/reveal";
import { ContactForm } from "@/components/contact-form";
import { SOCIAL_ICONS, type SocialKey } from "@/components/icons";

/* eslint-disable @typescript-eslint/no-explicit-any */

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const d = getDictionary(locale);
  return { title: d.contact.title, description: d.contact.lead };
}

export default async function ContactPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dict = getDictionary(locale);
  const settings = await sanityFetch<any>(SITE_SETTINGS_QUERY, {}, null);

  const address = settings?.address || "Youpwe, Douala, Cameroun";
  const email = settings?.email;
  const phone = settings?.phone;
  const social: Partial<Record<SocialKey, string>> = settings?.social || {};
  const services = settings?.serviceTimes?.length
    ? settings.serviceTimes
    : [
        { label: { en: "Sunday Celebration", fr: "Célébration du dimanche" }, time: "09:00" },
        { label: { en: "Wednesday Bible study", fr: "Étude biblique du mercredi" }, time: "18:00" },
      ];
  const maps = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
  const mapsEmbed = `https://www.google.com/maps?q=${encodeURIComponent(address)}&output=embed`;

  const infoItem =
    "flex items-start gap-4 rounded-2xl border border-line bg-surface p-5 shadow-card";
  const infoIcon = "grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-brand/10 text-brand";

  return (
    <>
      <PageHeader eyebrow={dict.nav.contact} title={dict.contact.title} lead={dict.contact.lead} />

      <Container>
        <div className="grid gap-12 py-16 sm:py-20 lg:grid-cols-[1fr_1.1fr]">
          {/* Info column */}
          <Reveal>
            <Eyebrow>{dict.contact.getInTouch}</Eyebrow>
            <h2 className="mt-3 text-3xl tracking-tight">{dict.contact.title}</h2>

            <div className="mt-7 space-y-4">
              <div className={infoItem}>
                <span className={infoIcon}>
                  <MapPin className="size-5" />
                </span>
                <div>
                  <p className="text-xs font-semibold uppercase tracking-wide text-brand-bright">
                    {dict.contact.address}
                  </p>
                  <p className="mt-1 text-ink-soft">{address}</p>
                  <a
                    href={maps}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="mt-1 inline-block text-sm font-semibold text-brand hover:underline"
                  >
                    {dict.contact.directions} →
                  </a>
                </div>
              </div>

              {email && (
                <div className={infoItem}>
                  <span className={infoIcon}>
                    <Mail className="size-5" />
                  </span>
                  <div>
                    <p className="text-xs font-semibold uppercase tracking-wide text-brand-bright">
                      Email
                    </p>
                    <a className="mt-1 inline-block text-ink-soft hover:text-ink" href={`mailto:${email}`}>
                      {email}
                    </a>
                  </div>
                </div>
              )}

              {phone && (
                <div className={infoItem}>
                  <span className={infoIcon}>
                    <Phone className="size-5" />
                  </span>
                  <div>
                    <p className="text-xs font-semibold uppercase tracking-wide text-brand-bright">
                      {dict.contact.phone}
                    </p>
                    <a className="mt-1 inline-block text-ink-soft hover:text-ink" href={`tel:${phone}`}>
                      {phone}
                    </a>
                  </div>
                </div>
              )}
            </div>

            {/* Service times */}
            <div className="mt-8">
              <p className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-brand-bright">
                <Clock className="size-4" /> {dict.contact.services}
              </p>
              <ul className="mt-4 space-y-2.5">
                {services.map((s: any, i: number) => (
                  <li
                    key={i}
                    className="flex items-center justify-between rounded-xl border border-line bg-surface px-5 py-3.5"
                  >
                    <span className="font-medium">{pick(s.label, locale)}</span>
                    <span className="font-display font-bold text-brand">{s.time}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Social */}
            {Object.keys(social).length > 0 && (
              <div className="mt-8">
                <p className="text-xs font-semibold uppercase tracking-[0.16em] text-brand-bright">
                  {dict.contact.followUs}
                </p>
                <div className="mt-4 flex gap-3">
                  {(Object.keys(SOCIAL_ICONS) as SocialKey[]).map((key) => {
                    const url = social[key];
                    if (!url) return null;
                    const Icon = SOCIAL_ICONS[key];
                    return (
                      <a
                        key={key}
                        href={url}
                        target="_blank"
                        rel="noopener noreferrer"
                        aria-label={key}
                        className="grid h-11 w-11 place-items-center rounded-full border border-line bg-surface text-brand transition hover:bg-brand hover:text-bg"
                      >
                        <Icon className="size-[18px]" />
                      </a>
                    );
                  })}
                </div>
              </div>
            )}
          </Reveal>

          {/* Form column */}
          <Reveal delay={0.1}>
            <Eyebrow>{dict.contact.formTitle}</Eyebrow>
            <h2 className="mt-3 text-3xl tracking-tight">{dict.contact.formTitle}</h2>
            <p className="mt-3 max-w-lg text-ink-soft">{dict.contact.formLead}</p>
            <div className="mt-7">
              <ContactForm dict={dict} email={email} />
            </div>
          </Reveal>
        </div>
      </Container>

      {/* Map */}
      <Container className="pb-20">
        <Reveal>
          <div className="overflow-hidden rounded-[2rem] border border-line shadow-card">
            <iframe
              title={dict.contact.directions}
              src={mapsEmbed}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              className="h-[420px] w-full grayscale-[0.2]"
            />
          </div>
        </Reveal>
      </Container>
    </>
  );
}