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

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

const FacebookIcon = () => (
    <svg className="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
    </svg>
);

const InstagramIcon = () => (
    <svg className="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
    </svg>
);

const YouTubeIcon = () => (
    <svg className="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
        <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
    </svg>
);

const GoogleIcon = () => (
    <svg className="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
    </svg>
);

const getSocialIcon = (platform: string) => {
    switch (platform.toLowerCase()) {
        case 'facebook':
            return <FacebookIcon />;
        case 'instagram':
            return <InstagramIcon />;
        case 'youtube':
            return <YouTubeIcon />;
        case 'google':
        case 'google_my_business':
            return <GoogleIcon />;
        default:
            return null;
    }
};

const COLUMN_TITLES = ['Home', 'Services', 'Locations', 'About Us'];

export const FooterHome = ({
    config,
    companyInformation,
    websitePhotos,
}: FooterHomeProps) => {
    const currentYear = new Date().getFullYear();
    
    // Get footer navigation from config
    const footerColumns = config?.navigation?.footer || [];
    
    // Build logo from props data
    const logoImage = getLogoUrl(websitePhotos);
    const companyName = companyInformation?.company_name || '';
    const logoText = companyName?.charAt(0)?.toUpperCase() || '';
    const logo = (logoText || logoImage) ? {
        text: logoText,
        href: '/',
        image: logoImage,
    } : undefined;
    
    // Build about text
    const aboutText = companyInformation?.about_text_markdown || companyInformation?.description_markdown;
    
    // Build contact info
    const address = [
        companyInformation?.primary_address_line_1,
        companyInformation?.primary_address_line_2,
        companyInformation?.primary_city,
        companyInformation?.primary_state,
        companyInformation?.primary_zip_code
    ].filter(Boolean).join(', ') || undefined;
    
    const contactInfo = (address || companyInformation?.primary_phone || companyInformation?.primary_email) ? {
        address,
        phone: companyInformation?.primary_phone,
        email: companyInformation?.primary_email,
    } : undefined;
    
    // Build social links
    const socialLinksArray = [];
    if (companyInformation?.facebook_url) socialLinksArray.push({ platform: 'facebook', url: companyInformation.facebook_url });
    if (companyInformation?.twitter_url) socialLinksArray.push({ platform: 'twitter', url: companyInformation.twitter_url });
    if (companyInformation?.linkedin_url) socialLinksArray.push({ platform: 'linkedin', url: companyInformation.linkedin_url });
    if (companyInformation?.instagram_url) socialLinksArray.push({ platform: 'instagram', url: companyInformation.instagram_url });
    if (companyInformation?.youtube_url) socialLinksArray.push({ platform: 'youtube', url: companyInformation.youtube_url });
    if (companyInformation?.pinterest_url) socialLinksArray.push({ platform: 'pinterest', url: companyInformation.pinterest_url });
    if (companyInformation?.tiktok_url) socialLinksArray.push({ platform: 'tiktok', url: companyInformation.tiktok_url });
    if (companyInformation?.google_my_business_url) socialLinksArray.push({ platform: 'google_my_business', url: companyInformation.google_my_business_url });
    if (companyInformation?.yelp_url) socialLinksArray.push({ platform: 'yelp', url: companyInformation.yelp_url });
    if (companyInformation?.tripadvisor_url) socialLinksArray.push({ platform: 'tripadvisor', url: companyInformation.tripadvisor_url });
    const socialLinks = socialLinksArray.length > 0 ? socialLinksArray : undefined;
    
    // Build legal links
    const legalLinks = [
        { label: 'Privacy Policy', href: '/privacy-policy/' },
        { label: 'Terms of Service', href: '/terms-of-service/' },
        { label: 'Cookie Policy', href: '/cookie-policy/' },
        { label: 'Accessibility', href: '/accessibility/' },
        { label: 'Sitemap', href: '/sitemap.xml' },
    ];
    
    // Build copyright text
    const copyrightText = `© ${currentYear} ${companyInformation?.company_name || 'Company Name'}. All rights reserved.`;

    return (
        <footer className="bg-gray-900 text-white py-12">
            <div className="container mx-auto px-4 md:px-8">
                <div className="grid lg:grid-cols-6 gap-8">
                    {/* Company Info */}
                    <div className="lg:col-span-2">
                        <div className="flex items-center space-x-2 mb-6">
                            <Link href={logo?.href || '/'} className="flex items-center space-x-2">
                                {logo?.image ? (
                                    <Image 
                                        src={logo.image} 
                                        alt={companyName || 'Logo'}
                                        className="h-10 w-10 object-contain"
                                        width={40}
                                        height={40}
                                    />
                                ) : (
                                    <div className="h-10 w-10 bg-blue-600 rounded-lg flex items-center justify-center">
                                        <span className="text-white font-bold text-lg">
                                            {logoText}
                                        </span>
                                    </div>
                                )}
                                <span className="text-2xl font-bold text-white">{companyName}</span>
                            </Link>
                        </div>
                        
                        {aboutText && (
                            <p className="text-gray-300 mb-6 max-w-md">
                                {aboutText}
                            </p>
                        )}
                        
                        {/* Contact Info */}
                        {contactInfo && (
                            <div className="space-y-3 mb-6">
                                {contactInfo.address && (
                                    <div className="flex items-center space-x-3">
                                        <svg className="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                                            <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
                                        </svg>
                                        <span className="text-gray-300">{contactInfo.address}</span>
                                    </div>
                                )}
                                
                                {contactInfo.phone && (
                                    <div className="flex items-center space-x-3">
                                        <svg className="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                                        </svg>
                                        <a href={`tel:${contactInfo.phone}`} className="text-gray-300 hover:text-white transition-colors">
                                            {contactInfo.phone}
                                        </a>
                                    </div>
                                )}
                                
                                {contactInfo.email && (
                                    <div className="flex items-center space-x-3">
                                        <svg className="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                                        </svg>
                                        <a href={`mailto:${contactInfo.email}`} className="text-gray-300 hover:text-white transition-colors">
                                            {contactInfo.email}
                                        </a>
                                    </div>
                                )}
                            </div>
                        )}
                        
                        {/* Social Links */}
                        {socialLinks && socialLinks.length > 0 && (
                            <div className="flex space-x-4">
                                {socialLinks.map((social, index) => (
                                    <a
                                        key={index}
                                        href={social.url}
                                        className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-300 hover:bg-blue-600 hover:text-white transition-colors shrink-0"
                                        aria-label={social.platform}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                    >
                                        <span className="flex items-center justify-center">
                                            {getSocialIcon(social.platform)}
                                        </span>
                                    </a>
                                ))}
                            </div>
                        )}
                    </div>
                    
                    {/* Navigation Columns */}
                    {footerColumns.map((column, colIndex) => (
                        <div key={colIndex}>
                            <h3 className="text-white font-semibold mb-4">
                                {COLUMN_TITLES[colIndex] || `Column ${colIndex + 1}`}
                            </h3>
                            <ul className="space-y-2">
                                {column.map((link, linkIndex) => (
                                    <li key={linkIndex}>
                                        <Link
                                            href={link.href}
                                            className="text-gray-300 hover:text-white transition-colors"
                                        >
                                            {link.label}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>
                
                {/* Bottom Bar */}
                <div className="border-t border-gray-800 py-8 mt-8">
                    <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                        <div className="text-gray-400 text-sm">
                            {copyrightText}
                        </div>
                        {legalLinks && legalLinks.length > 0 && (
                            <div className="flex space-x-6 text-sm">
                                {legalLinks.map((link, index) => (
                                    <Link 
                                        key={index}
                                        href={link.href} 
                                        className="text-gray-400 hover:text-white transition-colors"
                                    >
                                        {link.label}
                                    </Link>
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </footer>
    );
};
