"use client";
import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import Logo from '@/assets/images/Footer-Logo.png';
import facebook from '@/assets/images/social/facebook.png';
import X from '@/assets/images/social/x.png';
import linked from '@/assets/images/social/link.png';
import insta from '@/assets/images/social/insta.png';
import { Mail, Phone, Sparkles } from 'lucide-react';
import { useRouter } from 'next/navigation';
import apis from '@/utils/apis';

const Footer = () => {
  const router = useRouter();
  const [email, setEmail] = useState<string>('');

  useEffect(() => {
    const fetchConfiguration = async () => {
      try {
        const res = await apis.Auth.configuration();
        const config = res?.data?.[0];
        const fetchedEmail = config?.support?.email || config?.email || config?.email_creds?.AppEmail;
        if (fetchedEmail) {
          setEmail(fetchedEmail);
        }
      } catch (error) {
        console.error("Error fetching configuration in Footer:", error);
      }
    };
    fetchConfiguration();
  }, []);

  return (
    <footer className="w-full bg-[#000000] py-8 px-4">
      <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between">
        <div className="mb-6 md:mb-0">
          <div className="flex items-center gap-3 mb-4 cursor-pointer" onClick={() => { window.location.href = '/'; }}>
            <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-white text-black">
              <Sparkles className="h-4 w-4" />
            </div>
            <div>
              <span className="text-base font-bold text-white tracking-tight">Ready<span className="font-black">Go</span></span>
              <p className="text-xs text-neutral-400">Food &bull; Cab &bull; Services</p>
            </div>
          </div>

          {email && (
            <div className="flex items-center">
              <div className="text-white mr-2">
                <Mail size={18} />
              </div>
              <div className="text-sm text-white">
                Email : <a href={`mailto:${email}`} className="hover:underline">{email}</a>
              </div>
            </div>
          )}
        </div>
        <div className="mb-6 md:mb-0">
          <h3 className="font-medium mb-4 text-white">Useful links</h3>
          <ul className="space-y-2 text-white text-sm">
            <li><Link href="https://readyeats.henceforthsolutions.com/about" target='_blank' className="hover:text-primary transition-colors">About Us</Link></li>
            <li><Link href="https://readyeats.henceforthsolutions.com/customer-policy/" target='_blank' className="hover:text-primary transition-colors">Privacy Policy</Link></li>
            <li><Link href="https://readyeats.henceforthsolutions.com/terms-condition/" target='_blank' className="hover:text-primary transition-colors">Terms & Conditions</Link></li>
          </ul>
        </div>
        <div className="mb-6 md:mb-0">
          <h3 className="font-medium mb-4 text-white">Help center</h3>
          <ul className="space-y-2 text-white text-sm">
            <li><Link href="https://readyeats.henceforthsolutions.com/#faqs" className="hover:text-primary transition-colors">FAQs</Link></li>
            <li><Link href="/contact" className="hover:text-primary transition-colors">Contact Us</Link></li>
          </ul>
        </div>
      </div>
      <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center mt-8 pt-4 border-t border-gray-700">
        <div className="text-sm text-white mb-4 md:mb-0">
          © 2025 ReadyEats All rights reserved
        </div>
        <div className="flex space-x-3">
          <Link href="https://www.facebook.com/" className="bg-brand-500 hover:bg-primary transition-colors rounded-full w-7 h-7 flex items-center justify-center">
            <Image src={facebook} alt="Facebook" width={10} height={10} className="invert brightness-0 saturate-0" />
          </Link>
          <Link href="https://x.com/" className="bg-brand-500 hover:bg-primary transition-colors rounded-full w-7 h-7 flex items-center justify-center">
            <Image src={X} alt="X" width={14} height={14} className="invert brightness-0 saturate-0" />
          </Link>
          <Link href="https://www.instagram.com/" className="bg-brand-500 hover:bg-primary transition-colors rounded-full w-7 h-7 flex items-center justify-center">
            <Image src={insta} alt="Instagram" width={14} height={14} className="invert brightness-0 saturate-0" />
          </Link>
          <Link href="https://in.linkedin.com/" className="bg-brand-500 hover:bg-primary transition-colors rounded-full w-7 h-7 flex items-center justify-center">
            <Image src={linked} alt="LinkedIn" width={14} height={14} className="invert brightness-0 saturate-0" />
          </Link>
        </div>
      </div>
    </footer>
  );
};

export default Footer;