import { useQuery } from '@tanstack/react-query';
import { supabase } from '@/integrations/supabase/client';
import { Link } from 'react-router-dom';
import { Phone, Mail, MapPin, Clock, Facebook, Instagram, Linkedin, Twitter, Youtube, Shield } from 'lucide-react';
import { useFooterBlock, defaultFooterData } from '@/hooks/useGlobalBlocks';
import { useBranding } from '@/providers/BrandingProvider';
import { useTheme } from 'next-themes';
import { FooterSectionId, FooterVariant } from '@/types/cms';

interface NavPage {
  id: string;
  title: string;
  slug: string;
}

export function PublicFooter() {
  const { data: footerBlock } = useFooterBlock();
  const settings = footerBlock?.data || defaultFooterData;
  const { branding } = useBranding();
  const { resolvedTheme } = useTheme();
  const variant: FooterVariant = settings?.variant || 'full';
  
  const { data: pages = [] } = useQuery({
    queryKey: ['public-nav-pages'],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('pages')
        .select('id, title, slug, menu_order')
        .eq('status', 'published')
        .eq('show_in_menu', true)
        .is('deleted_at', null)
        .order('menu_order', { ascending: true })
        .order('title', { ascending: true });

      if (error) throw error;
      return (data || []) as NavPage[];
    },
    staleTime: 1000 * 60 * 5,
  });

  const phoneLink = settings?.phone?.replace(/[^+\d]/g, '') || '';
  const brandName = branding?.organizationName || 'Organization';
  const brandTagline = branding?.brandTagline || '';
  const brandInitial = brandName.charAt(0);

  // Determine which sections to show based on variant
  const showBrand = settings?.showBrand !== false;
  const showQuickLinks = variant !== 'minimal' && settings?.showQuickLinks !== false && pages.length > 0;
  const showContact = variant !== 'minimal' && settings?.showContact !== false && (settings?.phone || settings?.email || settings?.address || settings?.postalCode);
  const showHours = variant === 'full' && settings?.showHours !== false && (settings?.weekdayHours || settings?.weekendHours);
  
  // Section order
  const sectionOrder: FooterSectionId[] = settings?.sectionOrder || ['brand', 'quickLinks', 'contact', 'hours'];
  
  // Check visibility for each section
  const sectionVisibility: Record<FooterSectionId, boolean> = {
    brand: showBrand,
    quickLinks: showQuickLinks,
    contact: !!showContact,
    hours: !!showHours,
  };
  
  // Calculate grid columns based on visible sections
  const visibleSections = sectionOrder.filter(id => sectionVisibility[id]).length;
  
  // Minimal variant: single column centered
  // Full/Enterprise: responsive grid
  const getGridCols = () => {
    if (variant === 'minimal') return 'grid-cols-1 max-w-md mx-auto text-center';
    if (visibleSections === 1) return 'grid-cols-1';
    if (visibleSections === 2) return 'grid-cols-1 md:grid-cols-2';
    if (visibleSections === 3) return 'grid-cols-1 md:grid-cols-3';
    return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4';
  };

  // Footer logo handling
  const footerLogo = resolvedTheme === 'dark' 
    ? (branding?.logo || branding?.logoDark)
    : (branding?.logoDark || branding?.logo);
  const hasFooterLogo = !!footerLogo;

  // Section components
  const renderSection = (sectionId: FooterSectionId) => {
    if (!sectionVisibility[sectionId]) return null;
    
    switch (sectionId) {
      case 'brand':
        return (
          <div key="brand" className={variant === 'minimal' ? 'flex flex-col items-center' : ''}>
            <div className={`flex items-center gap-3 mb-4 ${variant === 'minimal' ? 'justify-center' : ''}`}>
              {hasFooterLogo ? (
                <img 
                  src={footerLogo} 
                  alt={brandName} 
                  className="h-10 max-w-[200px] object-contain"
                />
              ) : (
                <>
                  <div className="h-10 w-10 rounded-lg bg-primary-foreground/20 flex items-center justify-center">
                    <span className="font-serif font-bold text-xl">{brandInitial}</span>
                  </div>
                  <span className="font-serif font-bold text-xl">{brandName}</span>
                </>
              )}
            </div>
            {brandTagline && (
              <p className="text-primary-foreground/80 text-sm leading-relaxed">
                {brandTagline}
              </p>
            )}
          </div>
        );
      
      case 'quickLinks':
        return (
          <div key="quickLinks">
            <h3 className="font-serif font-bold text-lg mb-4">Quick Links</h3>
            <nav className="flex flex-col gap-2">
              {pages.slice(0, 6).map((page) => (
                <Link
                  key={page.id}
                  to={page.slug === 'hem' ? '/' : `/${page.slug}`}
                  className="text-primary-foreground/80 hover:text-primary-foreground text-sm transition-colors"
                >
                  {page.title}
                </Link>
              ))}
            </nav>
          </div>
        );
      
      case 'contact':
        return (
          <div key="contact">
            <h3 className="font-serif font-bold text-lg mb-4">Contact</h3>
            <div className="flex flex-col gap-3">
              {settings?.phone && (
                <a
                  href={`tel:${phoneLink}`}
                  className="flex items-center gap-3 text-primary-foreground/80 hover:text-primary-foreground text-sm transition-colors"
                >
                  <Phone className="h-4 w-4 flex-shrink-0" />
                  <span>{settings.phone}</span>
                </a>
              )}
              {settings?.email && (
                <a
                  href={`mailto:${settings.email}`}
                  className="flex items-center gap-3 text-primary-foreground/80 hover:text-primary-foreground text-sm transition-colors"
                >
                  <Mail className="h-4 w-4 flex-shrink-0" />
                  <span>{settings.email}</span>
                </a>
              )}
              {(settings?.address || settings?.postalCode) && (
                <div className="flex items-start gap-3 text-primary-foreground/80 text-sm">
                  <MapPin className="h-4 w-4 flex-shrink-0 mt-0.5" />
                  <span>
                    {settings?.address && <>{settings.address}<br /></>}
                    {settings?.postalCode}
                  </span>
                </div>
              )}
            </div>
          </div>
        );
      
      case 'hours':
        return (
          <div key="hours">
            <h3 className="font-serif font-bold text-lg mb-4">Opening Hours</h3>
            <div className="flex flex-col gap-2 text-sm text-primary-foreground/80">
              <div className="flex items-center gap-3">
                <Clock className="h-4 w-4 flex-shrink-0" />
                <span>Monday–Friday</span>
              </div>
              <p className="ml-7">{settings?.weekdayHours || '–'}</p>
              <p className="ml-7 mt-2">Saturday–Sunday: {settings?.weekendHours || '–'}</p>
            </div>
          </div>
        );
      
      default:
        return null;
    }
  };

  // Compliance badges for enterprise variant
  const renderComplianceBadges = () => {
    if (variant !== 'enterprise' || !settings?.showComplianceBadges) return null;
    
    const badges = settings.complianceBadges || ['SOC2', 'GDPR', 'ISO27001'];
    
    return (
      <div className="flex items-center justify-center gap-4 py-4 border-t border-primary-foreground/20 mt-8">
        <Shield className="h-4 w-4 text-primary-foreground/60" />
        <div className="flex gap-3">
          {badges.map((badge) => (
            <span 
              key={badge}
              className="text-xs font-medium px-2 py-1 rounded bg-primary-foreground/10 text-primary-foreground/80"
            >
              {badge}
            </span>
          ))}
        </div>
      </div>
    );
  };

  // Get container padding based on variant
  const getContainerPadding = () => {
    if (variant === 'minimal') return 'py-8';
    if (variant === 'enterprise') return 'py-16';
    return 'py-12';
  };

  return (
    <footer className="bg-primary text-primary-foreground mt-16">
      <div className={`container mx-auto px-6 ${getContainerPadding()}`}>
        <div className={`grid ${getGridCols()} gap-8`}>
          {sectionOrder.map(renderSection)}
        </div>

        {/* Compliance badges for enterprise */}
        {renderComplianceBadges()}

        {/* Bottom bar */}
        <div className={`border-t border-primary-foreground/20 ${variant === 'minimal' ? 'mt-6 pt-4' : 'mt-10 pt-6'} flex flex-col md:flex-row justify-between items-center gap-4`}>
          <p className="text-sm text-primary-foreground/60">
            © {new Date().getFullYear()} {brandName}. All rights reserved.
          </p>
          
          {/* Social Media Links */}
          {(settings?.facebook || settings?.instagram || settings?.linkedin || settings?.twitter || settings?.youtube) && (
            <div className="flex gap-4">
              {settings?.facebook && (
                <a
                  href={settings.facebook}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-foreground/60 hover:text-primary-foreground transition-colors"
                  aria-label="Facebook"
                >
                  <Facebook className="h-5 w-5" />
                </a>
              )}
              {settings?.instagram && (
                <a
                  href={settings.instagram}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-foreground/60 hover:text-primary-foreground transition-colors"
                  aria-label="Instagram"
                >
                  <Instagram className="h-5 w-5" />
                </a>
              )}
              {settings?.linkedin && (
                <a
                  href={settings.linkedin}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-foreground/60 hover:text-primary-foreground transition-colors"
                  aria-label="LinkedIn"
                >
                  <Linkedin className="h-5 w-5" />
                </a>
              )}
              {settings?.twitter && (
                <a
                  href={settings.twitter}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-foreground/60 hover:text-primary-foreground transition-colors"
                  aria-label="Twitter / X"
                >
                  <Twitter className="h-5 w-5" />
                </a>
              )}
              {settings?.youtube && (
                <a
                  href={settings.youtube}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary-foreground/60 hover:text-primary-foreground transition-colors"
                  aria-label="YouTube"
                >
                  <Youtube className="h-5 w-5" />
                </a>
              )}
            </div>
          )}
          
          {settings?.legalLinks && settings.legalLinks.filter(l => l.enabled).length > 0 && (
            <div className="flex gap-6 text-sm text-primary-foreground/60">
              {settings.legalLinks.filter(l => l.enabled).map((link) => (
                <Link
                  key={link.id}
                  to={link.url}
                  className="hover:text-primary-foreground transition-colors"
                >
                  {link.label}
                </Link>
              ))}
            </div>
          )}
        </div>
      </div>
    </footer>
  );
}