import Link from "next/link";
import Image from "next/image";
import { getLogoUrl } from '../../utils/photo-helpers';
import { getSocialIcon } from '../elements';
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 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 });
    if (companyInformation?.google_reviews_url) socialLinksArray.push({ platform: 'google_reviews', url: companyInformation.google_reviews_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>
    );
};
