import Link from "next/link";
import Image from 'next/image';
import type { CompanyInformation } from '../../types/api/company-information';
import type { SiteConfig } from '../../types/config';
import type { WebsitePhotos } from '../../types/api/website-photos';
import { getLogoUrl } from '../../utils/photo-helpers';
import { SocialIcon } from '../elements';

interface FooterHomeProps {
    config?: SiteConfig;
    companyInformation?: CompanyInformation | null;
    websitePhotos?: WebsitePhotos | null;
}

export const FooterHome = ({
    config,
    companyInformation,
    websitePhotos,
}: FooterHomeProps) => {
    const currentYear = new Date().getFullYear();
    
    const footerColumns = config?.navigation?.footer || [];
    const companyName = companyInformation?.company_name || '';
    const logoUrl = getLogoUrl(websitePhotos);
    
    const contactEmail = companyInformation?.primary_email;

    const socialLinks: { platform: string; url: string }[] = [];
    const c = companyInformation;
    if (c?.facebook_url) socialLinks.push({ platform: 'facebook', url: c.facebook_url });
    if (c?.instagram_url) socialLinks.push({ platform: 'instagram', url: c.instagram_url });
    if (c?.tiktok_url) socialLinks.push({ platform: 'tiktok', url: c.tiktok_url });
    if (c?.linkedin_url) socialLinks.push({ platform: 'linkedin', url: c.linkedin_url });
    if (c?.twitter_url) socialLinks.push({ platform: 'twitter', url: c.twitter_url });
    if (c?.youtube_url) socialLinks.push({ platform: 'youtube', url: c.youtube_url });
    if (c?.pinterest_url) socialLinks.push({ platform: 'pinterest', url: c.pinterest_url });
    if (c?.google_my_business_url) socialLinks.push({ platform: 'google_my_business', url: c.google_my_business_url });
    if (c?.yelp_url) socialLinks.push({ platform: 'yelp', url: c.yelp_url });
    if (c?.tripadvisor_url) socialLinks.push({ platform: 'tripadvisor', url: c.tripadvisor_url });
    if (c?.google_reviews_url) socialLinks.push({ platform: 'google_reviews', url: c.google_reviews_url });

    return (
        <footer className="bg-secondary py-16 md:py-20">
            <div className="mx-auto max-w-container px-4 md:px-8">
                {/* Top Section: Logo only */}
                <div className="text-center mb-12">
                    {logoUrl && (
                        <Image 
                            src={logoUrl} 
                            alt={companyName}
                            className="h-16 w-auto object-contain mx-auto"
                            width={140}
                            height={64}
                        />
                    )}
                </div>

                {/* Navigation Grid */}
                <div className="grid grid-cols-2 gap-8 md:grid-cols-4 mb-12">
                    {footerColumns.map((column, i) => (
                        <div key={i} className="text-center md:text-left">
                            <ul className="space-y-2">
                                {column.map((link, j) => (
                                    <li key={j}>
                                        <Link
                                            href={link.href}
                                            className="font-body text-sm text-secondary hover:text-brand-accent transition-colors"
                                        >
                                            {link.label}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>

                {/* Contact Info - Email only */}
                {contactEmail && (
                    <div className="text-center mb-8">
                        <p className="font-body text-sm text-secondary">
                            <a href={`mailto:${contactEmail}`} className="hover:text-brand-accent transition-colors">
                                {contactEmail}
                            </a>
                        </p>
                    </div>
                )}
                
                {/* Social Media Icons - all available profiles from company info */}
                {socialLinks.length > 0 && (
                    <div className="flex justify-center gap-6 mb-12">
                        {socialLinks.map(({ platform, url }) => (
                            <a
                                key={platform}
                                href={url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-secondary hover:text-brand-accent transition-colors"
                                aria-label={platform}
                            >
                                <SocialIcon platform={platform} className="w-6 h-6 flex-shrink-0" />
                            </a>
                        ))}
                    </div>
                )}
                
                {/* Copyright */}
                <div className="pt-8 border-t border-primary/20 text-center">
                    <p className="font-body text-sm text-tertiary">
                        © {currentYear} {companyName || 'Company Name'}. All rights reserved.
                    </p>
                </div>
            </div>
        </footer>
    );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('footer-home', 'balance', FooterHome);
