import Link from "next/link";
import { MapPin, Mail, Phone } from "lucide-react";
import type { Dictionary } from "@/i18n";
import { Container } from "@/components/ui";
import { Newsletter } from "@/components/newsletter";
import { SOCIAL_ICONS, type SocialKey } from "@/components/icons";

type Settings = {
  address?: string;
  email?: string;
  phone?: string;
  galleryUrl?: string;
  social?: Partial<Record<SocialKey, string>>;
} | null;

export function Footer({
  locale,
  dict,
  settings,
}: {
  locale: string;
  dict: Dictionary;
  settings: Settings;
}) {
  const base = `/${locale}`;
  const gallery = settings?.galleryUrl || "https://photos.cityoftestimonies.com";
  const social = settings?.social || {};
  const year = new Date().getFullYear();

  const explore = [
    { href: `${base}/about/`, label: dict.nav.about },
    { href: `${base}/ministries/`, label: dict.nav.ministries },
    { href: `${base}/events/`, label: dict.nav.events },
    { href: `${base}/sermons/`, label: dict.nav.sermons },
  ];
  const more = [
    { href: `${base}/blog/`, label: dict.nav.blog },
    { href: `${base}/leadership/`, label: dict.nav.leadership },
    { href: `${base}/contact/`, label: dict.nav.contact },
    { href: gallery, label: dict.nav.gallery, external: true },
  ];

  return (
    <footer className="mt-24 bg-brand-deep text-bg/90">
      {/* Newsletter band */}
      <div className="border-b border-bg/10">
        <Container className="flex flex-col items-start gap-8 py-14 md:flex-row md:items-center md:justify-between">
          <div className="max-w-md">
            <h3 className="font-display text-2xl font-bold tracking-tight text-bg sm:text-3xl">
              {dict.newsletter.title}
            </h3>
            <p className="mt-2 text-bg/70">{dict.newsletter.lead}</p>
          </div>
          <Newsletter dict={dict} email={settings?.email} />
        </Container>
      </div>

      <Container className="py-16">
        <div className="grid gap-12 md:grid-cols-2 lg:grid-cols-[1.6fr_1fr_1fr_1.2fr]">
          <div>
            <p className="font-display text-2xl font-bold tracking-tight text-bg">
              {dict.brand.sub}
            </p>
            <p className="mt-1 text-sm uppercase tracking-[0.16em] text-white/55">
              {dict.brand.name}
            </p>
            <p className="mt-5 max-w-sm text-bg/70">{dict.footer.tagline}</p>

            {Object.keys(social).length > 0 && (
              <div className="mt-6 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-10 w-10 place-items-center rounded-full border border-bg/15 bg-bg/5 text-bg/80 transition hover:border-bg/40 hover:bg-bg/10 hover:text-white"
                    >
                      <Icon className="size-[18px]" />
                    </a>
                  );
                })}
              </div>
            )}
          </div>

          <div>
            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.18em] text-white/55">
              {dict.footer.explore}
            </p>
            <ul className="space-y-2.5 text-bg/80">
              {explore.map((l) => (
                <li key={l.href}>
                  <Link className="transition hover:text-white" href={l.href}>
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.18em] text-white/55">
              {dict.brand.sub}
            </p>
            <ul className="space-y-2.5 text-bg/80">
              {more.map((l) =>
                l.external ? (
                  <li key={l.href}>
                    <a
                      className="transition hover:text-white"
                      href={l.href}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {l.label}
                    </a>
                  </li>
                ) : (
                  <li key={l.href}>
                    <Link className="transition hover:text-white" href={l.href}>
                      {l.label}
                    </Link>
                  </li>
                ),
              )}
            </ul>
          </div>

          <div>
            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.18em] text-white/55">
              {dict.footer.connect}
            </p>
            <ul className="space-y-3 text-bg/80">
              {settings?.address && (
                <li className="flex gap-3">
                  <MapPin className="mt-0.5 size-4 shrink-0 text-white/55" />
                  <span>{settings.address}</span>
                </li>
              )}
              {settings?.email && (
                <li className="flex gap-3">
                  <Mail className="mt-0.5 size-4 shrink-0 text-white/55" />
                  <a className="transition hover:text-white" href={`mailto:${settings.email}`}>
                    {settings.email}
                  </a>
                </li>
              )}
              {settings?.phone && (
                <li className="flex gap-3">
                  <Phone className="mt-0.5 size-4 shrink-0 text-white/55" />
                  <a className="transition hover:text-white" href={`tel:${settings.phone}`}>
                    {settings.phone}
                  </a>
                </li>
              )}
            </ul>
          </div>
        </div>

        <div className="mt-14 flex flex-col gap-2 border-t border-bg/15 pt-6 text-sm text-bg/60 sm:flex-row sm:items-center sm:justify-between">
          <p>
            © {year} {dict.brand.name}. {dict.footer.rights}
          </p>
          <p>Youpwe · Douala · Cameroun</p>
        </div>
      </Container>
    </footer>
  );
}