"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import { Mail, MapPin, Phone, Globe, Heart, Users, ArrowUp } from "lucide-react";
import { useEditMode } from "@/context/EditModeContext";

type ContactInfo = {
  email: string;
  phone: string;
  address: string;
  registration: string;
};

type SiteSettings = {
  footerDescription: string;
  footerBeneficiaries: string;
  footerBeneficiariesLabel: string;
  footerPartners: string;
  footerPartnersLabel: string;
  footerTagline: string;
  footerIntervention: string;
};

const INFO_DEFAULTS: ContactInfo = {
  email: "anedong94@gmail.com",
  phone: "",
  address: "Nouakchott, Mauritanie",
  registration: "Récépissé N°086/DAPLP/SLP",
};

const SETTINGS_DEFAULTS: SiteSettings = {
  footerDescription: "Association mauritanienne pionnière dans la lutte contre la malnutrition et l'insécurité alimentaire. Leader en nutrition au sein du réseau ROSA et membre de l'Initiative SUN.",
  footerBeneficiaries: "50K+",
  footerBeneficiariesLabel: "bénéficiaires",
  footerPartners: "20+",
  footerPartnersLabel: "partenaires",
  footerTagline: "Pour chaque enfant, chaque femme et chaque ménage — une sécurité alimentaire durable.",
  footerIntervention: "7 wilayas d'intervention",
};

const NAV_FOOTER = [
  { label: "Accueil",             href: "/",            disabled: false },
  { label: "Présentation d'ANED", href: "/#mission",    disabled: false },
  { label: "Mission & Vision",    href: "/mission",     disabled: false },
  { label: "Projets & Activités", href: "/projets",     disabled: false },
  { label: "Partenaires",         href: "/#partenaires",disabled: false },
  { label: "Actualités",          href: "/actualites",  disabled: false },
  { label: "Contact",             href: "/contact",     disabled: false },
];

export function Footer() {
  const [info, setInfo] = useState<ContactInfo>(INFO_DEFAULTS);
  const [settings, setSettings] = useState<SiteSettings>(SETTINGS_DEFAULTS);
  const { contentVersion } = useEditMode();

  useEffect(() => {
    fetch("/api/contact-info")
      .then((r) => r.json())
      .then((data) => setInfo({ ...INFO_DEFAULTS, ...data }))
      .catch(console.error);

    fetch("/api/site-settings")
      .then((r) => r.json())
      .then((data) => setSettings({ ...SETTINGS_DEFAULTS, ...data }))
      .catch(console.error);
  }, [contentVersion]);

  const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); };

  return (
    <footer className="bg-[#2C3E50] text-white relative">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">

          {/* Brand */}
          <div className="lg:col-span-2">
            <div className="flex items-center gap-3 mb-5">
              <Image src="/aned-logo.png" alt="ANED Logo" width={48} height={48} className="h-12 w-auto bg-white rounded-lg p-1" />
            </div>
            <p className="text-sm text-white/80 leading-relaxed max-w-sm mb-6">
              {settings.footerDescription}
            </p>

            <div className="flex gap-6 mb-4">
              <div className="flex items-center gap-2">
                <Heart size={16} className="text-[#4A7C59]" />
                <span className="text-xs text-white/70">{settings.footerBeneficiaries} {settings.footerBeneficiariesLabel}</span>
              </div>
              <div className="flex items-center gap-2">
                <Users size={16} className="text-[#4A7C59]" />
                <span className="text-xs text-white/70">{settings.footerPartners} {settings.footerPartnersLabel}</span>
              </div>
            </div>

            {info.registration && <p className="text-xs text-white/50 font-mono">{info.registration}</p>}
          </div>

          {/* Navigation */}
          <div>
            <h4 className="text-sm font-bold text-white uppercase tracking-wider mb-4">Navigation</h4>
            <ul className="space-y-2.5">
              {NAV_FOOTER.map((link) => (
                <li key={link.href}>
                  <a href={link.href} className="text-sm text-white/70 hover:text-white transition-colors block">{link.label}</a>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="text-sm font-bold text-white uppercase tracking-wider mb-4">Contact</h4>
            <ul className="space-y-3">
              <li className="flex items-start gap-2.5">
                <Mail size={16} className="text-[#4A7C59] mt-0.5 flex-shrink-0" />
                <a href={`mailto:${info.email}`} className="text-sm text-white/70 hover:text-white transition-colors break-all">{info.email}</a>
              </li>
              {info.phone && (
                <li className="flex items-start gap-2.5">
                  <Phone size={16} className="text-[#4A7C59] mt-0.5 flex-shrink-0" />
                  <a href={`tel:${info.phone}`} className="text-sm text-white/70 hover:text-white transition-colors">{info.phone}</a>
                </li>
              )}
              <li className="flex items-start gap-2.5">
                <MapPin size={16} className="text-[#4A7C59] mt-0.5 flex-shrink-0" />
                <span className="text-sm text-white/70">{info.address}</span>
              </li>
              <li className="flex items-start gap-2.5">
                <Globe size={16} className="text-[#4A7C59] mt-0.5 flex-shrink-0" />
                <span className="text-sm text-white/70">{settings.footerIntervention}</span>
              </li>
            </ul>
          </div>

        </div>

        {/* Back to Top */}
        <div className="flex justify-end mb-8">
          <button onClick={scrollToTop} className="group w-10 h-10 bg-[#4A7C59] hover:bg-[#3d6849] text-white rounded-lg transition-all shadow-md hover:shadow-lg flex items-center justify-center" aria-label="Retour en haut">
            <ArrowUp size={18} className="group-hover:-translate-y-0.5 transition-transform" />
          </button>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-white/10 pt-8">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4 mb-4">
            <p className="text-xs text-white/60">© 2002–2026 ANED · Association Nutrition Et Développement. Tous droits réservés.</p>
            <div className="flex flex-wrap gap-2 justify-center">
              {["Professionnalisme", "Innovation", "Intégrité", "Redevabilité"].map((value) => (
                <span key={value} className="text-xs text-white/50 px-2 py-1 bg-white/5 rounded">{value}</span>
              ))}
            </div>
          </div>
          <p className="text-xs text-center text-white/40">{settings.footerTagline}</p>
        </div>
      </div>
    </footer>
  );
}