import React, { useState } from 'react';
import { Instagram, Facebook, Youtube, Linkedin, Mail, Send, Loader2, Check, AlertCircle } from 'lucide-react';
import { InfoPageSlug } from './InfoPage';
import { subscribeNewsletter } from '../services/newsletterService';

interface FooterProps {
  onOpenTracking?: () => void;
  onNavigatePage?: (slug: InfoPageSlug) => void;
  onNavigateShop?: () => void;
}

export const Footer: React.FC<FooterProps> = ({ onOpenTracking, onNavigatePage, onNavigateShop }) => {
  const [newsletterEmail, setNewsletterEmail] = useState('');
  const [newsletterStatus, setNewsletterStatus] = useState<{ type: 'success' | 'error' | 'info'; message: string } | null>(null);
  const [isSubscribing, setIsSubscribing] = useState(false);

  const handleSubscribe = async (e: React.FormEvent) => {
    e.preventDefault();
    setNewsletterStatus(null);

    if (!newsletterEmail.trim() || !newsletterEmail.includes('@')) {
      setNewsletterStatus({ type: 'error', message: 'Please enter a valid email address.' });
      return;
    }

    setIsSubscribing(true);
    try {
      const res = await subscribeNewsletter(newsletterEmail, 'footer');
      if (res.success) {
        setNewsletterStatus({
          type: res.isNew ? 'success' : 'info',
          message: res.message,
        });
        if (res.isNew) setNewsletterEmail('');
      } else {
        setNewsletterStatus({ type: 'error', message: res.message });
      }
    } catch (err) {
      setNewsletterStatus({ type: 'error', message: 'Subscription failed. Please try again later.' });
    } finally {
      setIsSubscribing(false);
    }
  };

  const handlePageClick = (e: React.MouseEvent, slug: InfoPageSlug) => {
    e.preventDefault();
    if (onNavigatePage) {
      onNavigatePage(slug);
    } else {
      window.location.hash = `#${slug}`;
    }
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const socialLinks = [
    {
      name: 'Facebook',
      url: 'https://www.facebook.com/TimeNLifeShop',
      icon: <Facebook className="w-5 h-5 text-[#F8D0BD]" />,
    },
    {
      name: 'X',
      url: 'https://www.x.com/timenlifeshop',
      icon: <span className="font-bold text-lg text-[#F8D0BD]">X</span>,
    },
    {
      name: 'Instagram',
      url: 'https://www.instagram.com/timenlifeshop',
      icon: <Instagram className="w-5 h-5 text-[#F8D0BD]" />,
    },
    {
      name: 'LinkedIn',
      url: 'https://www.linkedin.com/timenlifeshop',
      icon: <Linkedin className="w-5 h-5 text-[#F8D0BD]" />,
    },
    {
      name: 'YouTube',
      url: 'https://www.youtube.com/@timenlifeshop',
      icon: <Youtube className="w-5 h-5 text-[#F8D0BD]" />,
    },
    {
      name: 'TikTok',
      url: 'https://www.tiktok.com/@timenlifeshop',
      icon: (
        <svg className="w-5 h-5 overflow-visible" viewBox="0 0 24 24" fill="none">
          {/* Cyan chromatic layer */}
          <path
            d="M16.6 5.82a4.4 4.4 0 0 1-3.14-3.52H10.7v11.5a2.5 2.5 0 1 1-2.5-2.5c.24 0 .47.04.68.12V8.58A5.3 5.3 0 0 0 8.2 8.5a5.3 5.3 0 1 0 5.3 5.3V8.12a7.2 7.2 0 0 0 4.1 1.28V6.6a4.4 4.4 0 0 1-1-.78z"
            fill="#25F4EE"
            transform="translate(-0.8, -0.4)"
          />
          {/* Pink/Red chromatic layer */}
          <path
            d="M16.6 5.82a4.4 4.4 0 0 1-3.14-3.52H10.7v11.5a2.5 2.5 0 1 1-2.5-2.5c.24 0 .47.04.68.12V8.58A5.3 5.3 0 0 0 8.2 8.5a5.3 5.3 0 1 0 5.3 5.3V8.12a7.2 7.2 0 0 0 4.1 1.28V6.6a4.4 4.4 0 0 1-1-.78z"
            fill="#FE2C55"
            transform="translate(0.8, 0.4)"
          />
          {/* Main White Note */}
          <path
            d="M16.6 5.82a4.4 4.4 0 0 1-3.14-3.52H10.7v11.5a2.5 2.5 0 1 1-2.5-2.5c.24 0 .47.04.68.12V8.58A5.3 5.3 0 0 0 8.2 8.5a5.3 5.3 0 1 0 5.3 5.3V8.12a7.2 7.2 0 0 0 4.1 1.28V6.6a4.4 4.4 0 0 1-1-.78z"
            fill="#FFFFFF"
          />
        </svg>
      ),
    },
  ];

  return (
    <footer className="bg-[#14110F] text-stone-200 border-t border-amber-950/40 pt-12 pb-14 px-6 sm:px-10 lg:px-16 font-sans">
      <div className="max-w-4xl mx-auto space-y-10">
        {/* Newsletter Subscription Section */}
        <div className="bg-[#211A15] border border-amber-900/40 rounded-2xl p-6 sm:p-8 shadow-xl">
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
            <div className="space-y-1.5 max-w-md">
              <div className="flex items-center gap-2 text-[#F8D0BD]">
                <Mail className="w-5 h-5 text-[#C81E3D]" />
                <span className="text-xs font-bold uppercase tracking-wider">Stay Connected</span>
              </div>
              <h3 className="text-xl sm:text-2xl font-serif font-bold text-amber-50">
                Subscribe to Our Newsletter
              </h3>
              <p className="text-sm text-stone-300">
                Get exclusive promotional discount coupons, health tips & new organic arrival updates sent directly to your inbox.
              </p>
            </div>

            <form onSubmit={handleSubscribe} className="w-full md:w-auto flex-1 max-w-md space-y-2">
              <div className="flex flex-col sm:flex-row items-stretch gap-2.5">
                <div className="relative flex-1">
                  <input
                    type="email"
                    value={newsletterEmail}
                    onChange={(e) => setNewsletterEmail(e.target.value)}
                    placeholder="Enter your email address..."
                    className="w-full px-4 py-3 bg-[#14110F] border border-amber-900/50 rounded-xl text-amber-50 placeholder-stone-400 text-sm focus:outline-none focus:border-[#C81E3D] focus:ring-1 focus:ring-[#C81E3D] transition-all"
                  />
                </div>
                <button
                  type="submit"
                  disabled={isSubscribing}
                  className="px-6 py-3 bg-[#C81E3D] hover:bg-[#a81631] text-white rounded-xl font-bold text-sm transition-all duration-200 flex items-center justify-center gap-2 shadow-md hover:shadow-rose-900/40 active:scale-95 disabled:opacity-50 cursor-pointer"
                >
                  {isSubscribing ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      <span>Subscribing...</span>
                    </>
                  ) : (
                    <>
                      <span>Subscribe</span>
                      <Send className="w-4 h-4" />
                    </>
                  )}
                </button>
              </div>

              {newsletterStatus && (
                <div
                  className={`p-3 rounded-lg text-xs font-medium flex items-center gap-2 animate-in fade-in duration-200 ${
                    newsletterStatus.type === 'success'
                      ? 'bg-emerald-950/80 border border-emerald-800 text-emerald-300'
                      : newsletterStatus.type === 'info'
                      ? 'bg-amber-950/80 border border-amber-800 text-amber-200'
                      : 'bg-rose-950/80 border border-rose-800 text-rose-300'
                  }`}
                >
                  {newsletterStatus.type === 'success' ? (
                    <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                  ) : (
                    <AlertCircle className="w-4 h-4 text-amber-400 shrink-0" />
                  )}
                  <span>{newsletterStatus.message}</span>
                </div>
              )}
            </form>
          </div>
        </div>

        {/* Social Media Links Bar */}
        <div className="flex items-center gap-3.5 flex-wrap">
          {socialLinks.map((soc) => (
            <a
              key={soc.name}
              href={soc.url}
              target="_blank"
              rel="noreferrer"
              title={`Follow us on ${soc.name}`}
              className="w-12 h-12 rounded-xl bg-[#281D17] hover:bg-[#C81E3D] hover:scale-105 transition-all duration-200 flex items-center justify-center border border-amber-900/30 shadow-md cursor-pointer group"
            >
              {soc.icon}
            </a>
          ))}
        </div>

        {/* Quick Links Section */}
        <div className="space-y-4">
          <h3 className="text-xl sm:text-2xl font-serif font-semibold text-amber-50 tracking-wide">
            Quick Links
          </h3>
          <ul className="space-y-3 text-base sm:text-lg text-stone-300">
            <li>
              <a
                href="/introduction"
                onClick={(e) => handlePageClick(e, 'introduction')}
                className="hover:text-[#E53855] transition-colors cursor-pointer text-left font-normal inline-block"
              >
                Introduction
              </a>
            </li>
            <li>
              <a
                href="/about"
                onClick={(e) => handlePageClick(e, 'about-us')}
                className="hover:text-[#E53855] transition-colors cursor-pointer text-left font-normal inline-block"
              >
                know more About Us
              </a>
            </li>
            <li>
              <a
                href="/shop"
                onClick={(e) => {
                  e.preventDefault();
                  if (onNavigateShop) onNavigateShop();
                  else handlePageClick(e, 'visit-store');
                }}
                className="hover:text-[#E53855] transition-colors cursor-pointer text-left font-normal inline-block"
              >
                Visit Store
              </a>
            </li>
            <li>
              <a
                href="/contact"
                onClick={(e) => handlePageClick(e, 'contact-us')}
                className="hover:text-[#E53855] transition-colors cursor-pointer text-left font-normal inline-block"
              >
                Contact Us Details
              </a>
            </li>
            <li>
              <a
                href="/connect"
                onClick={(e) => handlePageClick(e, 'connect')}
                className="hover:text-[#E53855] transition-colors cursor-pointer text-left font-normal inline-block"
              >
                Let’s Connect
              </a>
            </li>
            <li>
              <a
                href="/track-order"
                onClick={(e) => {
                  e.preventDefault();
                  if (onOpenTracking) onOpenTracking();
                  else handlePageClick(e, 'shipping-details');
                }}
                className="hover:text-[#E53855] transition-colors cursor-pointer text-left font-normal inline-block"
              >
                Track Order &amp; Courier Status
              </a>
            </li>
          </ul>
        </div>

        {/* Important Links Section */}
        <div className="space-y-4 pt-2">
          <h3 className="text-xl sm:text-2xl font-serif font-semibold text-amber-50 tracking-wide">
            Important Links
          </h3>
          <ul className="space-y-3 text-base sm:text-lg text-stone-300">
            <li>
              <a
                href="/privacy-policy"
                onClick={(e) => handlePageClick(e, 'privacy-policy')}
                className="hover:text-[#E53855] transition-colors cursor-pointer text-left font-normal inline-block"
              >
                Privacy Policy
              </a>
            </li>
            <li>
              <a
                href="/shipping-details"
                onClick={(e) => handlePageClick(e, 'shipping-details')}
                className="hover:text-[#E53855] transition-colors cursor-pointer text-left font-normal inline-block"
              >
                Shipping Details
              </a>
            </li>
            <li>
              <a
                href="/terms-of-service"
                onClick={(e) => handlePageClick(e, 'terms-conditions')}
                className="hover:text-[#E53855] transition-colors cursor-pointer text-left font-normal inline-block"
              >
                Terms & Conditions
              </a>
            </li>
            <li>
              <a
                href="/refund-returns-policy"
                onClick={(e) => handlePageClick(e, 'refund-returns-policy')}
                className="hover:text-[#E53855] transition-colors cursor-pointer text-left font-normal inline-block"
              >
                Refund and Returns Policy:
              </a>
            </li>
          </ul>
        </div>

        {/* Bottom Copyright Notice & Credits */}
        <div className="pt-10 border-t border-amber-900/30 text-center text-sm sm:text-base text-stone-400 space-y-3 font-normal">
          <p>© {new Date().getFullYear()} TimenLife. All rights reserved.</p>
          <p>
            Powered by{' '}
            <a
              href="https://azaan-creatixcel-studio.web.app"
              target="_blank"
              rel="noreferrer"
              className="text-amber-400 hover:text-amber-300 underline font-medium transition-colors inline-flex items-center gap-1"
            >
              Azaan CreatiXcel Studio
            </a>
          </p>
        </div>
      </div>
    </footer>
  );
};