/* ====================================================
 * Footer Component
 * Multi-column layout with newsletter, social links
 * ==================================================== */

'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { HiOutlineLocationMarker, HiOutlinePhone, HiOutlineMail, HiOutlineClock } from 'react-icons/hi';
import { FaFacebookF, FaYoutube, FaTiktok } from 'react-icons/fa';
import { SiZalo } from 'react-icons/si';
import { useInView } from '@/hooks';
import { useState, useEffect } from 'react';
import { coreService } from '@/services/coreService';
import { productService } from '@/services/productService';
import { SiteSetting, Category } from '@/types/api';
import { contactInfo as mockContactInfo, siteSettings as mockSiteSettings } from '@/data/mock-data';

export default function Footer() {
  const { ref, isInView } = useInView();
  const [settings, setSettings] = useState<SiteSetting | null>(null);
  const [categories, setCategories] = useState<Category[]>([]);

  useEffect(() => {
    coreService.getSettings().then(setSettings).catch(console.error);
    productService.getCategories()
      .then(res => {
        if (res && res.results) {
          setCategories(res.results);
        }
      })
      .catch(console.error);
  }, []);

  const contactData = settings || mockContactInfo;
  const copyright = settings?.copyright || mockSiteSettings.copyright;

  const quickLinks = [
    { label: 'Trang chủ', href: '/' },
    { label: 'Giới thiệu', href: '/gioi-thieu' },
    { label: 'Sản phẩm', href: '/san-pham' },
    { label: 'Tin tức', href: '/tin-tuc' },
    { label: 'Tuyển dụng', href: '/tuyen-dung' },
    { label: 'Liên hệ', href: '/lien-he' },
  ];

  const productLinks = categories.length > 0
    ? categories.map(cat => ({
        label: cat.name,
        href: `/san-pham?category=${cat.slug}`
      }))
    : [
        { label: 'Thuốc kê đơn', href: '/san-pham?category=thuoc-ke-don' },
        { label: 'Thuốc không kê đơn', href: '/san-pham?category=thuoc-khong-ke-don' },
        { label: 'Thực phẩm chức năng', href: '/san-pham?category=thuc-pham-chuc-nang' },
        { label: 'Thiết bị y tế', href: '/san-pham?category=thiet-bi-y-te' },
        { label: 'Dược mỹ phẩm', href: '/san-pham?category=duoc-my-pham' },
      ];


  const policyLinks = [
    { label: 'Chính sách bảo mật', href: '/chinh-sach/bao-mat' },
    { label: 'Điều khoản sử dụng', href: '/chinh-sach/dieu-khoan' },
    { label: 'Chính sách đổi trả', href: '/chinh-sach/doi-tra' },
  ];

  return (
    <footer ref={ref} className="bg-dark-800 text-white relative overflow-hidden">
      {/* Decorative gradient */}
      <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary-500 via-secondary-500 to-primary-400" />

      {/* Main Footer Content */}
      <div className="container-custom pt-16 pb-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-8">

          {/* Column 1: Company Info */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.5 }}
          >
            <Link href="/" className="flex items-center gap-2.5 mb-5">
              {settings?.logo_footer ? (
                <img src={settings.logo_footer} alt="Logo" className="h-10 object-contain" />
              ) : settings?.logo ? (
                <img src={settings.logo} alt="Logo" className="h-10 object-contain brightness-0 invert" />
              ) : (
                <div className="w-10 h-10 rounded-xl bg-gradient-primary flex items-center justify-center">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                    <path d="M12 2L14 6H18L15 9L16 13L12 10.5L8 13L9 9L6 6H10L12 2Z" fill="white"/>
                    <circle cx="12" cy="18" r="4" fill="white" opacity="0.8"/>
                  </svg>
                </div>
              )}
              <span className="text-xl font-bold font-heading">Vitalist Pharma</span>
            </Link>
            <p className="text-dark-200 text-sm leading-relaxed mb-5">
              Công ty dược phẩm hàng đầu Việt Nam. Chuyên sản xuất và phân phối dược phẩm chất lượng cao đạt chuẩn GMP-WHO.
            </p>
            <div className="space-y-3">
              <div className="flex items-start gap-3 text-sm text-dark-200">
                <HiOutlineLocationMarker className="w-5 h-5 text-primary-400 shrink-0 mt-0.5" />
                <span>{contactData.address}</span>
              </div>
              <div className="flex items-center gap-3 text-sm text-dark-200">
                <HiOutlinePhone className="w-5 h-5 text-primary-400 shrink-0" />
                <a href={`tel:${contactData.hotline}`} className="hover:text-primary-300 transition-colors">
                  Hotline: {contactData.hotline}
                </a>
              </div>
              <div className="flex items-center gap-3 text-sm text-dark-200">
                <HiOutlineMail className="w-5 h-5 text-primary-400 shrink-0" />
                <a href={`mailto:${contactData.email}`} className="hover:text-primary-300 transition-colors">
                  {contactData.email}
                </a>
              </div>
              <div className="flex items-center gap-3 text-sm text-dark-200">
                <HiOutlineClock className="w-5 h-5 text-primary-400 shrink-0" />
                <span>{(contactData as any).working_hours || (contactData as any).workingHours}</span>
              </div>
            </div>
          </motion.div>

          {/* Column 2: Quick Links */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.5, delay: 0.1 }}
          >
            <h4 className="text-base font-semibold mb-5 relative">
              Liên kết nhanh
              <span className="absolute -bottom-2 left-0 w-8 h-0.5 bg-primary-500 rounded-full" />
            </h4>
            <ul className="space-y-2.5 mt-4">
              {quickLinks.map((link) => (
                <li key={link.href}>
                  <Link href={link.href}
                    className="text-sm text-dark-200 hover:text-primary-300 hover:pl-1 transition-all duration-200">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </motion.div>

          {/* Column 3: Products */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <h4 className="text-base font-semibold mb-5 relative">
              Sản phẩm
              <span className="absolute -bottom-2 left-0 w-8 h-0.5 bg-secondary-500 rounded-full" />
            </h4>
            <ul className="space-y-2.5 mt-4">
              {productLinks.map((link) => (
                <li key={link.href}>
                  <Link href={link.href}
                    className="text-sm text-dark-200 hover:text-secondary-300 hover:pl-1 transition-all duration-200">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>

            <h4 className="text-base font-semibold mt-8 mb-5 relative">
              Chính sách
              <span className="absolute -bottom-2 left-0 w-8 h-0.5 bg-primary-500 rounded-full" />
            </h4>
            <ul className="space-y-2.5 mt-4">
              {policyLinks.map((link) => (
                <li key={link.href}>
                  <Link href={link.href}
                    className="text-sm text-dark-200 hover:text-primary-300 hover:pl-1 transition-all duration-200">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </motion.div>

          {/* Column 4: Newsletter + Social */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.5, delay: 0.3 }}
          >
            <h4 className="text-base font-semibold mb-5 relative">
              Đăng ký nhận tin
              <span className="absolute -bottom-2 left-0 w-8 h-0.5 bg-secondary-500 rounded-full" />
            </h4>
            <p className="text-sm text-dark-200 mb-4 mt-4">
              Nhận thông tin sản phẩm mới và ưu đãi từ Vitalist Pharma.
            </p>
            <form className="flex gap-2 mb-6" onSubmit={(e) => e.preventDefault()}>
              <input
                type="email"
                placeholder="Email của bạn"
                className="flex-1 px-4 py-2.5 bg-dark-700 border border-dark-600 rounded-lg text-sm text-white placeholder-dark-300 focus:outline-none focus:border-primary-500 transition-colors"
              />
              <button
                type="submit"
                className="px-4 py-2.5 bg-primary-500 hover:bg-primary-600 text-white text-sm font-medium rounded-lg transition-colors shrink-0"
              >
                Gửi
              </button>
            </form>

            <h4 className="text-base font-semibold mb-4">Kết nối</h4>
            <div className="flex items-center gap-3">
              {contactData.facebook && (
                <a href={contactData.facebook} target="_blank" rel="noopener noreferrer"
                   className="w-10 h-10 rounded-full bg-dark-700 flex items-center justify-center hover:bg-primary-500 transition-all duration-300 hover:-translate-y-1">
                  <FaFacebookF className="w-4 h-4" />
                </a>
              )}
              {contactData.youtube && (
                <a href={contactData.youtube} target="_blank" rel="noopener noreferrer"
                   className="w-10 h-10 rounded-full bg-dark-700 flex items-center justify-center hover:bg-red-600 transition-all duration-300 hover:-translate-y-1">
                  <FaYoutube className="w-4 h-4" />
                </a>
              )}
              {contactData.zalo && (
                <a href={contactData.zalo} target="_blank" rel="noopener noreferrer"
                   className="w-10 h-10 rounded-full bg-dark-700 flex items-center justify-center hover:bg-blue-500 transition-all duration-300 hover:-translate-y-1">
                  <SiZalo className="w-4 h-4" />
                </a>
              )}
              {contactData.tiktok && (
                <a href={contactData.tiktok} target="_blank" rel="noopener noreferrer"
                   className="w-10 h-10 rounded-full bg-dark-700 flex items-center justify-center hover:bg-dark-500 transition-all duration-300 hover:-translate-y-1">
                  <FaTiktok className="w-4 h-4" />
                </a>
              )}
            </div>
          </motion.div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-dark-700 mt-12 pt-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-sm text-dark-300">
            {copyright}
          </p>
          <div className="text-sm text-dark-400">
            Thiết kế & phát triển bởi <span className="text-primary-400">Vitalist Pharma</span>
          </div>
        </div>
      </div>

      {/* Background Pattern */}
      <div className="absolute top-0 right-0 w-96 h-96 bg-primary-500/5 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute bottom-0 left-0 w-64 h-64 bg-secondary-500/5 rounded-full blur-3xl pointer-events-none" />
    </footer>
  );
}