import Link from 'next/link';
import { Instagram, Facebook, Youtube, Twitter, Music2 } from 'lucide-react';
import type { Branding, Menu, MenuItem } from '@/types/api';

const SOCIAL_ICONS: Record<string, React.ElementType> = {
  instagram: Instagram,
  facebook: Facebook,
  youtube: Youtube,
  x: Twitter,
  tiktok: Music2,
};

const CONTACT_LABEL: Record<string, string> = { en: 'Contact', ar: 'تواصل معنا' };

const SLOT_HEADING: Record<string, Record<string, string>> = {
  footer_primary:   { en: 'Explore',  ar: 'استكشف'  },
  footer_secondary: { en: 'Company',  ar: 'الشركة'   },
};

function hrefFromItem(item: MenuItem, locale: string): string {
  switch (item.target_type) {
    case 'internal_path':
      return `/${locale}${item.target_value.startsWith('/') ? item.target_value : `/${item.target_value}`}`;
    case 'cms_page':
      return `/${locale}/p/${item.target_value}`;
    case 'category':
      return `/${locale}/c/${item.target_value}`;
    case 'occasion':
      return `/${locale}/o/${item.target_value}`;
    default:
      return item.target_value;
  }
}

type Props = { branding: Branding; primary: Menu; secondary: Menu; locale: string };

export function Footer({ branding, primary, secondary, locale }: Props) {
  const year = new Date().getFullYear();

  const social = [
    { key: 'instagram', label: 'Instagram', href: branding.social.instagram },
    { key: 'facebook', label: 'Facebook', href: branding.social.facebook },
    { key: 'tiktok', label: 'TikTok', href: branding.social.tiktok },
    { key: 'x', label: 'X', href: branding.social.x },
    { key: 'youtube', label: 'YouTube', href: branding.social.youtube },
  ].filter((s): s is { key: string; label: string; href: string } => Boolean(s.href));

  return (
    <footer className="border-t border-neutral-200 bg-white mt-16 pb-20 md:pb-0">
      <div className="mx-auto max-w-7xl px-4 py-10 grid grid-cols-2 md:grid-cols-4 gap-8 text-sm">
        <div className="col-span-2 md:col-span-1">
          <div className="font-heading font-bold text-primary-700 mb-2">{branding.site_name}</div>
          {branding.tagline ? <p className="text-neutral-500 text-xs leading-relaxed">{branding.tagline}</p> : null}
          {social.length > 0 ? (
            <div className="mt-4 flex gap-3 text-neutral-500">
              {social.map((s) => {
                const Icon = SOCIAL_ICONS[s.key];
                return (
                  <a
                    key={s.key}
                    href={s.href}
                    target="_blank"
                    rel="noreferrer"
                    aria-label={s.label}
                    className="hover:text-neutral-900 transition-colors"
                  >
                    {Icon ? <Icon className="h-4 w-4" aria-hidden /> : <span className="text-xs font-medium">{s.label}</span>}
                  </a>
                );
              })}
            </div>
          ) : null}
        </div>

        {[primary, secondary].map((menu) =>
          menu.items.length ? (
            <div key={menu.slot}>
              <div className="font-medium text-neutral-900 mb-3 text-xs uppercase tracking-wider">
                {SLOT_HEADING[menu.slot]?.[locale] ?? SLOT_HEADING[menu.slot]?.en ?? ''}
              </div>
              <ul className="space-y-2.5 text-neutral-500">
                {menu.items.map((item) => (
                  <li key={item.public_id}>
                    <Link
                      href={hrefFromItem(item, locale)}
                      className="hover:text-neutral-900 transition-colors"
                    >
                      {item.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ) : null,
        )}

        <div>
          <div className="font-medium text-neutral-900 mb-3 text-xs uppercase tracking-wider">{CONTACT_LABEL[locale] ?? CONTACT_LABEL.en}</div>
          <ul className="space-y-2.5 text-neutral-500">
            {branding.support_email ? (
              <li>
                <a href={`mailto:${branding.support_email}`} className="hover:text-neutral-900 transition-colors break-all">
                  {branding.support_email}
                </a>
              </li>
            ) : null}
            {branding.support_phone ? (
              <li>
                <a href={`tel:${branding.support_phone}`} className="hover:text-neutral-900 transition-colors">
                  {branding.support_phone}
                </a>
              </li>
            ) : null}
            {branding.whatsapp_number ? (
              <li>
                <a
                  href={`https://wa.me/${branding.whatsapp_number.replace(/\D/g, '')}`}
                  target="_blank"
                  rel="noreferrer"
                  className="hover:text-neutral-900 transition-colors"
                >
                  WhatsApp
                </a>
              </li>
            ) : null}
          </ul>
        </div>
      </div>

      <div className="border-t border-neutral-100 py-4 text-center text-xs text-neutral-400">
        &copy; {year} {branding.site_name}
      </div>
    </footer>
  );
}