'use client'

import Link from 'next/link'
import Image from 'next/image'
import Container from '@/components/frontend/Container'
import {
  FaFacebook,
  FaInstagram,
  FaPhone,
  FaEnvelope,
  FaMapMarkerAlt,
  FaTwitter,
  FaTiktok,
  FaWhatsapp,
  FaYoutube,
  FaPinterest,
  FaLinkedin,
  FaSnapchat,
} from 'react-icons/fa'
import type { SiteInfo } from '@/lib/db/queries/getSiteInfo'
import type { MenuItem } from '@/lib/db/queries/getMenu'
import { getMenuItemUrl } from '@/lib/menu/getMenuItemUrl'

interface FooterClientProps {
  siteInfo: SiteInfo
  quickLinks: MenuItem[]
  customerLinks: MenuItem[]
  labels: {
    description: string
    quickLinks: string
    customerService: string
    contactInfo: string
    copyright: string
  }
}

const PAYMENT_METHODS = ['EasyPaisa', 'JazzCash', 'COD', 'Bank Transfer']

export default function FooterClient({ siteInfo, quickLinks, customerLinks, labels }: FooterClientProps) {
  // Only a platform whose URL is actually set in site_settings gets an
  // icon — no dead "#" links for socials the admin hasn't configured yet.
  const socialIcons = [
    { icon: FaFacebook, key: 'facebook', href: siteInfo.socials.facebook, label: 'Facebook' },
    { icon: FaInstagram, key: 'instagram', href: siteInfo.socials.instagram, label: 'Instagram' },
    { icon: FaWhatsapp, key: 'whatsapp', href: siteInfo.whatsapp ? `https://wa.me/${siteInfo.whatsapp.replace(/[^0-9]/g, '')}` : null, label: 'WhatsApp' },
    { icon: FaTiktok, key: 'tiktok', href: siteInfo.socials.tiktok, label: 'TikTok' },
    { icon: FaTwitter, key: 'twitter', href: siteInfo.socials.twitter, label: 'Twitter' },
    { icon: FaYoutube, key: 'youtube', href: siteInfo.socials.youtube, label: 'YouTube' },
    { icon: FaPinterest, key: 'pinterest', href: siteInfo.socials.pinterest, label: 'Pinterest' },
    { icon: FaLinkedin, key: 'linkedin', href: siteInfo.socials.linkedin, label: 'LinkedIn' },
    { icon: FaSnapchat, key: 'snapchat', href: siteInfo.socials.snapchat, label: 'Snapchat' },
  ].filter((s): s is typeof s & { href: string } => Boolean(s.href))

  return (
    <footer
      className="pt-16 pb-8 mt-16"
      style={{
        backgroundColor: 'var(--dark-bg)',
        color: 'var(--gray)'
      }}
    >
      <Container>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">

          {/* Brand Section */}
          <div>
            {siteInfo.logoUrl ? (
              <div className="relative h-10 w-40 mb-4">
                <Image src={siteInfo.logoUrl} alt={siteInfo.logoAlt} fill sizes="160px" className="object-contain object-left" />
              </div>
            ) : (
              <h3
                className="text-2xl font-extrabold mb-4"
                style={{
                  background: 'linear-gradient(135deg, var(--primary, #FF7A00), var(--secondary, #2E7D32))',
                  backgroundClip: 'text',
                  WebkitBackgroundClip: 'text',
                  color: 'transparent'
                }}
              >
                {siteInfo.siteName}
              </h3>
            )}
            <p className="text-sm leading-relaxed mb-6">
              {labels.description}
            </p>
            {socialIcons.length > 0 && (
              <div className="flex gap-3 flex-wrap">
                {socialIcons.map(({ icon: Icon, key, href, label }) => (
                  <a
                    key={key}
                    href={href}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={label}
                    className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center transition-all duration-300 hover:-translate-y-1"
                    style={{ color: 'var(--gray)' }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.backgroundColor = 'var(--primary)'
                      e.currentTarget.style.color = 'white'
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.1)'
                      e.currentTarget.style.color = 'var(--gray)'
                    }}
                  >
                    <Icon size={18} />
                  </a>
                ))}
              </div>
            )}
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="text-white font-semibold mb-5">{labels.quickLinks}</h4>
            <ul className="space-y-3">
              {quickLinks.map((item) => (
                <li key={item.id}>
                  <Link
                    href={getMenuItemUrl(item)}
                    target={item.target || '_self'}
                    className="transition-all duration-300 hover:pl-2 block"
                    style={{ color: 'var(--gray)' }}
                    onMouseEnter={(e) => e.currentTarget.style.color = 'var(--primary)'}
                    onMouseLeave={(e) => e.currentTarget.style.color = 'var(--gray)'}
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Customer Service */}
          <div>
            <h4 className="text-white font-semibold mb-5">{labels.customerService}</h4>
            <ul className="space-y-3">
              {customerLinks.map((item) => (
                <li key={item.id}>
                  <Link
                    href={getMenuItemUrl(item)}
                    target={item.target || '_self'}
                    className="transition-all duration-300 hover:pl-2 block"
                    style={{ color: 'var(--gray)' }}
                    onMouseEnter={(e) => e.currentTarget.style.color = 'var(--primary)'}
                    onMouseLeave={(e) => e.currentTarget.style.color = 'var(--gray)'}
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h4 className="text-white font-semibold mb-5">{labels.contactInfo}</h4>
            <ul className="space-y-3">
              {siteInfo.phone && (
                <li className="flex items-center gap-3" style={{ color: 'var(--gray)' }}>
                  <FaPhone size={16} /> {siteInfo.phone}
                </li>
              )}
              {siteInfo.email && (
                <li className="flex items-center gap-3" style={{ color: 'var(--gray)' }}>
                  <FaEnvelope size={16} /> {siteInfo.email}
                </li>
              )}
              {siteInfo.address && (
                <li className="flex items-center gap-3" style={{ color: 'var(--gray)' }}>
                  <FaMapMarkerAlt size={16} /> {siteInfo.address}
                </li>
              )}
            </ul>
            <div className="flex gap-2 mt-5 flex-wrap">
              {PAYMENT_METHODS.map((method) => (
                <span
                  key={method}
                  className="bg-white/10 px-3 py-1 rounded-lg text-xs"
                  style={{ color: 'var(--gray, #64748b)' }}
                >
                  {method}
                </span>
              ))}
            </div>
          </div>
        </div>

        <div
          className="border-t border-gray-800 pt-8 text-center text-sm"
          style={{ color: 'var(--gray)' }}
        >
          <p>{labels.copyright}</p>
        </div>
      </Container>
    </footer>
  )
}