"use client";

import { useGlobalSettings } from "@/components/providers/global-settings-provider";
import { Link } from "@/i18n/routing";
import {
  Facebook,
  Instagram,
  Linkedin,
  Mail,
  MapPin,
  MessageCircle,
  Phone,
  Twitter,
  Youtube,
} from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import { DirectionalChevron } from "@/components/ui/directional-chevron";
import { getLocaleDirection, type Locale } from "@/lib/i18n-utils";
import { motion } from "motion/react";

const WEBSITE_LOGO_SRC = "/images/login/icons/maal co logo 1.svg";
const ease = [0.22, 1, 0.36, 1] as const;

const socialLinks = [
  { name: "LinkedIn", href: "#", icon: Linkedin },
  { name: "Facebook", href: "#", icon: Facebook },
  { name: "Instagram", href: "#", icon: Instagram },
  { name: "YouTube", href: "#", icon: Youtube },
  { name: "Twitter", href: "#", icon: Twitter },
  { name: "WhatsApp", href: "#", icon: MessageCircle },
];

const col = {
  hidden: { opacity: 0, y: 32 },
  show: (delay: number) => ({
    opacity: 1,
    y: 0,
    transition: { duration: 0.7, ease, delay },
  }),
};

export default function Footer() {
  const t = useTranslations();
  const locale = useLocale() as Locale;
  const direction = getLocaleDirection(locale);
  const { settings } = useGlobalSettings();

  const browseLinks = [
    { label: t("common.home"), href: "/" },
    { label: t("common.about"), href: "/about-us" },
    { label: t("common.services"), href: "/our-services" },
    { label: t("common.lifi"), href: "/lifi" },
    { label: t("common.team"), href: "/our-team" },
    { label: t("common.blog"), href: "/blogs" },
  ];

  const contactItems = [
    { label: settings?.company?.company_email || t("footer.email"), icon: Mail },
    { label: settings?.company?.company_phone || t("footer.phone"), icon: Phone },
    { label: settings?.company?.address || t("footer.address"), icon: MapPin },
  ];

  const activeSocials = settings?.socialLinks?.filter((s) => s.is_active);

  const platformIconMap: Record<string, React.ElementType> = {
    facebook: Facebook,
    instagram: Instagram,
    linkedin: Linkedin,
    youtube: Youtube,
    twitter: Twitter,
    whatsapp: MessageCircle,
  };

  const displaySocials = activeSocials?.length
    ? activeSocials.map((s) => ({
        key: s.id,
        href: s.url,
        label: s.name,
        icon: platformIconMap[s.platform?.toLowerCase() ?? ""] ?? Facebook,
      }))
    : socialLinks.map((s) => ({ key: s.name, href: s.href, label: s.name, icon: s.icon }));

  return (
    <footer
      className="relative overflow-hidden px-4 py-12 sm:px-8 lg:px-[120px] lg:py-[48px]"
      style={{ background: "linear-gradient(to right, #0D3430, #1E7C73)" }}
    >
      {/* Ambient decorative orbs */}
      <div aria-hidden className="pointer-events-none absolute inset-0 overflow-hidden">
        <motion.div
          className="absolute rounded-full"
          style={{
            width: 480,
            height: 480,
            right: -180,
            top: -180,
            background: "radial-gradient(ellipse, rgba(0,174,157,0.14) 0%, transparent 70%)",
            filter: "blur(72px)",
          }}
          initial={{ opacity: 0, scale: 0.7 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 2.5, ease: "easeOut" }}
        />
        <motion.div
          className="absolute rounded-full"
          style={{
            width: 320,
            height: 320,
            left: -100,
            bottom: -80,
            background: "radial-gradient(ellipse, rgba(30,124,115,0.18) 0%, transparent 70%)",
            filter: "blur(60px)",
          }}
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 2.5, ease: "easeOut", delay: 0.3 }}
        />
      </div>

      {/* Shimmer top-border */}
      <motion.div
        aria-hidden
        className="absolute inset-x-0 top-0 h-px"
        style={{
          background: "linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent)",
        }}
        initial={{ scaleX: 0 }}
        whileInView={{ scaleX: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 1.1, ease }}
      />

      <div className="relative mx-auto flex w-full max-w-[1440px] flex-col gap-6">
        <div className="flex flex-col items-start justify-between gap-10 md:flex-row">

          {/* ── Col 1 — Logo + description + social ── */}
          <motion.div
            className="flex flex-col items-start gap-6 md:flex-1"
            variants={col}
            custom={0}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
          >
            <motion.div whileHover={{ scale: 1.05 }} transition={{ duration: 0.22 }}>
              <Link href="/" className="relative h-20 w-[95px] shrink-0 block">
                <Image
                  src={settings?.company?.logo_footer || settings?.company?.logo_primary || WEBSITE_LOGO_SRC}
                  alt={t("footer.logoAlt")}
                  fill
                  className="object-contain"
                />
              </Link>
            </motion.div>

            <motion.p
              className="text-start text-base leading-[1.5] text-white"
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, ease, delay: 0.15 }}
            >
              {t("footer.description")}
            </motion.p>

            {/* Social icons — spring stagger */}
            <div className="flex flex-wrap items-center justify-start gap-4">
              {displaySocials.map((social, i) => {
                const Icon = social.icon;
                return (
                  <motion.div
                    key={social.key}
                    initial={{ opacity: 0, scale: 0.5 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    viewport={{ once: true }}
                    transition={{
                      type: "spring",
                      stiffness: 260,
                      damping: 18,
                      delay: 0.2 + i * 0.06,
                    }}
                    whileHover={{
                      scale: 1.2,
                      y: -3,
                      boxShadow: "0 4px 16px rgba(0,174,157,0.35)",
                    }}
                    whileTap={{ scale: 0.95 }}
                    className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-white/16 text-white"
                  >
                    <Link href={social.href} aria-label={social.label} className="flex items-center justify-center w-full h-full">
                      <Icon className="h-4 w-4" />
                    </Link>
                  </motion.div>
                );
              })}
            </div>
          </motion.div>

          {/* ── Col 2 — Browse site ── */}
          <motion.div
            className="flex flex-col items-start gap-6 md:flex-1"
            variants={col}
            custom={0.12}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
          >
            <motion.h3
              className="text-xl font-bold leading-[1.2] text-white"
              initial={{ opacity: 0, filter: "blur(6px)", y: 8 }}
              whileInView={{ opacity: 1, filter: "blur(0px)", y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, ease, delay: 0.1 }}
            >
              {t("footer.browseSite")}
            </motion.h3>

            <div className="grid grid-cols-2 gap-x-6 gap-y-4">
              {browseLinks.map((link, i) => (
                <motion.div
                  key={link.href}
                  initial={{ opacity: 0, x: -12 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.45, ease, delay: 0.15 + i * 0.07 }}
                >
                  <Link
                    href={link.href}
                    className="group flex items-center gap-2 text-base text-white transition-opacity hover:opacity-80"
                  >
                    <span>{link.label}</span>
                    <DirectionalChevron
                      direction={direction}
                      className="h-3 w-3 text-white/60 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-white"
                    />
                  </Link>
                </motion.div>
              ))}
            </div>
          </motion.div>

          {/* ── Col 3 — Contact info ── */}
          <motion.div
            className="flex flex-col items-start gap-6 md:flex-1"
            variants={col}
            custom={0.24}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
          >
            <motion.h3
              className="text-xl font-bold leading-[1.2] text-white"
              initial={{ opacity: 0, filter: "blur(6px)", y: 8 }}
              whileInView={{ opacity: 1, filter: "blur(0px)", y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, ease, delay: 0.1 }}
            >
              {t("common.contact")}
            </motion.h3>

            <ul className="flex w-full flex-col gap-4">
              {contactItems.map((item, i) => (
                <motion.li
                  key={item.label}
                  className="flex items-center gap-2"
                  initial={{ opacity: 0, x: 12 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.45, ease, delay: 0.18 + i * 0.1 }}
                >
                  <motion.span
                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/16"
                    whileHover={{ scale: 1.15, backgroundColor: "rgba(255,255,255,0.28)" }}
                    transition={{ duration: 0.18 }}
                  >
                    <item.icon className="h-4 w-4 text-white" />
                  </motion.span>
                  <span className="text-start text-sm leading-[1.5] text-white">
                    {item.label}
                  </span>
                </motion.li>
              ))}
            </ul>
          </motion.div>
        </div>

        {/* Divider — animates width */}
        <motion.div
          className="h-px bg-white/20"
          initial={{ scaleX: 0, originX: 0 }}
          whileInView={{ scaleX: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.9, ease, delay: 0.3 }}
        />

        {/* Copyright */}
        <motion.p
          className="text-center text-base leading-[1.5] text-white/80"
          initial={{ opacity: 0, y: 6 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.55, ease, delay: 0.45 }}
        >
          {t("footer.allRightsReserved")}
        </motion.p>
      </div>
    </footer>
  );
}