"use client";

import React, { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import {
  FacebookLogo, MapPin, ArrowRight, PhoneCall, EnvelopeSimple, WhatsappLogo,
  InstagramLogo, TwitterLogo, TiktokLogo, SnapchatLogo,
} from "@phosphor-icons/react";
import { useLanguage } from "@/lib/i18n/context";
import type { ContactInfo } from "@/app/api/contact-info/route";

const DEFAULT_CONTACT: ContactInfo = {
  phone:    "+222 41 28 44 79",
  whatsapp: "22241284479",
  email:    "njuumaan@gmail.com",
  socials: [
    { platform: "facebook",  label: "Asli-Food",   href: "https://www.facebook.com/p/Asli-Food-61578120753965/" },
    { platform: "facebook",  label: "Njuumaan",    href: "https://web.facebook.com/Njuumaan" },
    { platform: "instagram", label: "@asli_food",  href: "https://www.instagram.com/asli_food/" },
    { platform: "instagram", label: "@njuumaan",   href: "https://www.instagram.com/njuumaan" },
    { platform: "tiktok",    label: "@asli__food", href: "https://www.tiktok.com/@asli__food" },
    { platform: "snapchat",  label: "@njuumaan",   href: "https://www.snapchat.com/@njuumaan" },
    { platform: "twitter",   label: "@Njuumaan",   href: "https://x.com/Njuumaan" },
  ],
};

function platformIcon(platform: string, size = 15) {
  switch (platform) {
    case "instagram": return <InstagramLogo size={size} />;
    case "tiktok":    return <TiktokLogo    size={size} />;
    case "snapchat":  return <SnapchatLogo  size={size} />;
    case "twitter":   return <TwitterLogo   size={size} />;
    case "whatsapp":  return <WhatsappLogo  size={size} />;
    default:          return <FacebookLogo  size={size} />;
  }
}

function platformLabel(platform: string) {
  switch (platform) {
    case "instagram": return "Instagram";
    case "tiktok":    return "TikTok";
    case "snapchat":  return "Snapchat";
    case "twitter":   return "Twitter / X";
    case "whatsapp":  return "WhatsApp";
    default:          return "Facebook";
  }
}

export default function Footer() {
  const { t, locale } = useLanguage();
  const isRTL = locale === "ar";

  const [contact, setContact] = useState<ContactInfo>(DEFAULT_CONTACT);

  useEffect(() => {
    fetch("/api/contact-info")
      .then(r => r.json())
      .then((data: ContactInfo) => { if (data && !("error" in data)) setContact(data); })
      .catch(() => {});
  }, []);

  const NAV = [
    { label: t.footer.nav.home,     href: "/"          },
    { label: t.footer.nav.products, href: "/produits"  },
    { label: t.footer.nav.about,    href: "/a-propos"  },
    { label: t.footer.nav.contact,  href: "/contact"   },
  ];

  return (
    <footer className="bg-brand-sand-light text-brand-dark pt-16 pb-10">
      <div className="max-w-7xl mx-auto px-6">

        {/* Top grid */}
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 pb-12 border-b border-brand-dark/15">

          {/* Brand */}
          <div className="md:col-span-5 space-y-5">
            <Image
              src="/logo.png"
              alt="Asli Food"
              width={130}
              height={65}
              className="h-14 w-auto object-contain brightness-0"
            />
            <p className="text-brand-dark/75 text-sm leading-relaxed max-w-xs">
              {t.footer.tagline}
            </p>
            <div className="space-y-2.5 pt-1">
              <p className="text-brand-dark/35 text-[10px] font-bold tracking-[0.2em] uppercase mb-3">{t.footer.follow}</p>
              <div className="grid gap-x-6 gap-y-2.5" style={{ gridTemplateColumns: "repeat(2, max-content)" }}>
                {contact.socials.map((s, i) => (
                  <SocialLink
                    key={i}
                    href={s.href}
                    icon={platformIcon(s.platform)}
                    label={s.label}
                    sub={platformLabel(s.platform)}
                  />
                ))}
              </div>
            </div>
          </div>

          {/* Navigation */}
          <div className="md:col-span-3">
            <h4 className="text-brand-dark text-[10px] font-extrabold tracking-[0.25em] uppercase mb-6">
              {t.footer.navigation}
            </h4>
            <ul className="space-y-3.5">
              {NAV.map(({ label, href }) => (
                <li key={label}>
                  <Link
                    href={href}
                    className="text-brand-dark/80 text-sm font-semibold hover:text-brand-dark transition-colors duration-200 flex items-center gap-1.5 group"
                  >
                    <ArrowRight
                      size={12}
                      weight="bold"
                      className={`opacity-0 group-hover:opacity-100 transition-all duration-200 text-brand-yellow ${isRTL ? "rtl-flip translate-x-1 group-hover:translate-x-0" : "-translate-x-1 group-hover:translate-x-0"}`}
                    />
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div className="md:col-span-4">
            <h4 className="text-brand-dark text-[10px] font-extrabold tracking-[0.25em] uppercase mb-6">
              {t.footer.contact}
            </h4>
            <ul className="space-y-3.5 text-brand-dark/80 text-sm font-semibold">
              <li className="flex items-center gap-2">
                <MapPin size={16} className="text-brand-yellow flex-shrink-0" />
                Mauritanie
              </li>
              {contact.phone && (
                <li className="flex items-center gap-2">
                  <PhoneCall size={16} className="text-brand-yellow flex-shrink-0" />
                  <a href={`tel:${contact.phone.replace(/\s+/g, "")}`} className="hover:text-brand-dark transition-colors duration-200">
                    {contact.phone}
                  </a>
                </li>
              )}
              {contact.whatsapp && (
                <li className="flex items-center gap-2">
                  <WhatsappLogo size={16} className="text-brand-yellow flex-shrink-0" />
                  <a
                    href={`https://wa.me/${contact.whatsapp}?text=Bonjour%2C%20je%20souhaite%20commander%20vos%20produits.`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="hover:text-brand-dark transition-colors duration-200"
                  >
                    WhatsApp
                  </a>
                </li>
              )}
              {contact.email && (
                <li className="flex items-center gap-2">
                  <EnvelopeSimple size={16} className="text-brand-yellow flex-shrink-0" />
                  <a href={`mailto:${contact.email}`} className="hover:text-brand-dark transition-colors duration-200">
                    {contact.email}
                  </a>
                </li>
              )}
              {contact.socials.filter(s => s.platform === "facebook").map((s, i) => (
                <li key={i} className="flex items-center gap-2">
                  <FacebookLogo size={16} className="text-brand-yellow flex-shrink-0" />
                  <a href={s.href} target="_blank" rel="noopener noreferrer"
                    className="hover:text-brand-dark transition-colors duration-200">
                    {s.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom row */}
        <div className="pt-8 flex flex-col md:flex-row items-center justify-between gap-3">
          <p className="text-brand-dark/35 text-xs tracking-wide">
            {t.footer.copyright}
          </p>
          <div className="flex items-center gap-4">
            <Link
              href="/politique-confidentialite"
              className="text-brand-dark text-xs hover:text-brand-dark/60 transition-colors duration-200 underline underline-offset-2"
            >
              Politique de confidentialité
            </Link>
            <p className="text-brand-dark/35 text-xs">
              {t.footer.love}
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}

function SocialLink({ href, icon, label, sub }: { href: string; icon: React.ReactNode; label: string; sub: string }) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="flex items-center gap-2 group"
    >
      <span className="text-brand-yellow group-hover:text-brand-dark transition-colors duration-200 flex-shrink-0">
        {icon}
      </span>
      <span className="flex flex-col leading-tight">
        <span className="text-brand-dark text-xs font-bold group-hover:text-brand-dark/70 transition-colors duration-200">{label}</span>
        <span className="text-brand-dark/50 text-[10px]">{sub}</span>
      </span>
    </a>
  );
}