"use client";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import {
  Clock,
  Facebook,
  Instagram,
  Linkedin,
  Mail,
  MapPin,
  Phone,
  Twitter,
  Youtube,
} from "lucide-react";
import { motion } from "framer-motion";
import { getContacts, getProjectCategories } from "@/lib/api";
import { IconBrandTelegram, IconBrandTiktok } from "@tabler/icons-react";
import { LogoFooter } from "./logo-footer";

interface Contacts {
  phone1: string | null;
  phone2: string | null;
  email: string | null;
  email2: string | null;
  address: string | null;
  telegramLink: string | null;
  facebookLink: string | null;
  instagramLink: string | null;
  linkedInLink: string | null;
  twitterLink: string | null;
  tiktokLink: string | null;
  business_hours: string | null;
}

interface ProjectMenuProps {
  name: string;
  description: string;
  slug: string;
}

const Footer = () => {
  const [contacts, setContacts] = useState<Contacts>();
  useEffect(() => {
    const fetchContacts = async () => {
      const resp = await getContacts();

      setContacts(resp);
    };
    fetchContacts();
  }, []);

  const [projects, setProjects] = useState<ProjectMenuProps[] | undefined>(
    undefined
  );
  useEffect(() => {
    const fetchProjects = async () => {
      const response = await getProjectCategories(1, 6);
      setProjects(response.data);
    };
    fetchProjects();
  }, []);
  console.log(projects);
  const socialLinks = [
    {
      name: "Facebook",
      Icon: Facebook,
      href: contacts?.facebookLink ?? null,
      color: "hover:text-blue-400",
    }, 
    {
      name: "Telegram",
      Icon: IconBrandTelegram,
      href: contacts?.telegramLink ?? null,
      color: "hover:text-blue-400",
    },
    {
      name: "Instagram",
      Icon: Instagram,
      href: contacts?.instagramLink ?? null,
      color: "hover:text-pink-400",
    },
    {
      name: "LinkedIn",
      Icon: Linkedin,
      href: contacts?.linkedInLink ?? null,
      color: "hover:text-blue-400",
    },
    {
      name: "Twitter",
      Icon: Twitter,
      href: contacts?.twitterLink ?? null,
      color: "hover:text-sky-400",
    },
    {
      name: "YouTube",
      Icon: IconBrandTiktok,
      href: contacts?.tiktokLink ?? null,
      color: "hover:text-red-400",
    },
  ];
  const activeLinks = socialLinks.filter((link) => link.href);
  return (
    <footer className="relative section-padding px-4 md:px-8">
      {/* Top Gradient Transition */}
      {/* <div className="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-white to-transparent z-10" /> */}

      {/* Background Image */}
      <div className="absolute inset-0 w-full hidden lg:block">
        <Image
          src="/images/photo9.jpg"
          alt="Footer background"
          fill
          className="object-cover relative"
          priority
        />
        <div className="absolute inset-0 bg-black/50" /> {/* Dark overlay */}
      </div>

      {/* Large Background Text */}

      {/* Orange Card Container */}
      <div className="relative z-10 max-w-7xl mx-auto ">
        <div className="bg-red-600 rounded-lg p-8">
          <div className="">
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 gap-8 mb-8 justify-between">
              <div className="space-y-6 flex flex-col">
                <div className="flex items-center space-x-2">
                  {/* <Zap className="w-6 h-6 text-white" />
                  <span className="text-xl font-bold text-white">OMICRON</span> */}
                  <div className="-ml-2">
                    <LogoFooter />
                  </div>
                </div>
                <p className="text-sm text-white">
                  Powering Ethiopia&apos;s future with high-quality electrical
                  solutions and unmatched expertise.
                </p>
              </div>

              <div>
                <h4 className="text-white font-bold mb-4">Quick Links</h4>
                <ul className="space-y-2">
                  <li>
                    <Link
                      href="/#about"
                      className="text-white hover:text-gray-200 transition-colors"
                    >
                      About Us
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/products"
                      className="text-white hover:text-gray-200 transition-colors"
                    >
                      Products
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/#services"
                      className="text-white hover:text-gray-200 transition-colors"
                    >
                      Services
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/contact"
                      className="text-white hover:text-gray-200 transition-colors"
                    >
                      Contact
                    </Link>
                  </li>
                </ul>
              </div>
              <div>
                <h4 className="text-white font-bold mb-4">Projects</h4>
                <ul className="space-y-2">
                  {projects ? (
                    projects.map((project) => {
                      return (
                        <li key={project.slug}>
                          <Link
                            href={`/projects/${project.slug}`}
                            className="text-white hover:text-gray-200 transition-colors"
                          >
                            {project.name}
                          </Link>
                        </li>
                      );
                    })
                  ) : (
                    <h1>Loading</h1>
                  )}
                </ul>
              </div>

              <div className="">
                {" "}
                {/* Add a minimum width to prevent squeezing */}
                <h4 className="text-white font-bold mb-4">Contact</h4>
                {contacts ? (
                  <ul className="space-y-3 text-white">
                    <li>
                      <Link
                        href={`tel:${contacts.phone1}`}
                        className="flex items-center gap-2 hover:underline"
                      >
                        <Phone className="text-white w-5 h-5 flex-shrink-0" />
                        <span className="truncate">{contacts?.phone1}</span>
                      </Link>
                    </li>
                    <li>
                      <Link
                        href={`mailto:${contacts?.email}`}
                        className="flex items-start gap-2 hover:underline"
                      >
                        <Mail className="text-white w-5 h-5 flex-shrink-0" />
                        <span className="truncate">{contacts?.email}</span>
                      </Link>
                    </li>
                    <li className="flex items-start gap-2">
                      <MapPin className="text-white w-5 h-5 flex-shrink-0 mt-0.5" />
                      <p className="max-w-[200px] break-words">
                        {contacts?.address}
                      </p>
                    </li>
                    <li className="flex items-start gap-2">
                      <Clock className="text-white w-5 h-5 flex-shrink-0 mt-0.5" />
                      <p className="max-w-[200px] break-words">
                        {contacts?.business_hours}
                      </p>
                    </li>
                  </ul>
                ) : (
                  <div>Loading...</div>
                )}
              </div>
            </div>
            {/* Social Links */}
            {activeLinks.length > 0 && (
              <div className="flex items-center my-6 justify-between">
                <div className="flex items-center space-x-4">
                  {activeLinks.map(({ name, Icon, href, color }) => (
                    <motion.a
                      key={name}
                      href={href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className={`w-10 h-10 rounded-full bg-white/10 flex items-center justify-center ${color} transition-all duration-300 hover:bg-white/20`}
                      whileHover={{ scale: 1.1 }}
                      whileTap={{ scale: 0.9 }}
                      title={name}
                    >
                      <Icon className="w-5 h-5 text-white" />
                    </motion.a>
                  ))}
                </div>
                <Link
                  href="https://email.omicroneng.com"
                  target="_blank"
                  className="p-2 px-3 text-white hover:underline rounded-lg bg-white/10 transition-all duration-300 hover:bg-white/20"
                >
                  Login
                </Link>
              </div>
            )}
            <div className="border-t border-white/20 pt-8 text-center">
              <p className="text-white">
                © 2025 Omicron Ethiopia. All rights reserved.
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;