"use client";

import { useEffect, useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useLocale } from '@/contexts/LocaleContext';
import { PartnerBadge } from './PartnerBadge';

type ContactSettings = {
  address?: string | null;
  phone?: string | null;
  email?: string | null;
  instagram?: string | null;
  linkedin?: string | null;
  facebook?: string | null;
  whatsapp?: string | null;
  logo?: string | null;
};

export default function Footer() {
  const { locale, t } = useLocale();
  const [contact, setContact] = useState<ContactSettings>({});
  
  // Prefixo para links
  const prefix = locale === 'pt' ? '' : `/${locale}`;

  useEffect(() => {
    const fetchSettings = async () => {
      try {
        const response = await fetch('/api/settings');
        if (response.ok) {
          const data = await response.json();
          setContact({
            address: data.address,
            phone: data.phone,
            email: data.email,
            instagram: data.instagram,
            linkedin: data.linkedin,
            facebook: data.facebook,
            whatsapp: data.whatsapp,
            logo: data.logo
          });
        }
      } catch (error) {
        console.error('Erro ao carregar configurações:', error);
      }
    };

    fetchSettings();

    // Atualizar quando settings mudar
    const handleRefresh = () => fetchSettings();
    window.addEventListener('settings:refresh', handleRefresh);
    return () => window.removeEventListener('settings:refresh', handleRefresh);
  }, []);

  return (
    <footer className="bg-secondary text-white pt-16 pb-8">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
          {/* Brand */}
          <div className="col-span-1 md:col-span-1">
            <div className="flex items-center gap-2 mb-6">
              {contact.logo ? (
                <Image 
                  src={contact.logo} 
                  alt="OCCTO Engenharia" 
                  width={150} 
                  height={50} 
                  className="object-contain h-12 w-auto"
                  unoptimized
                />
              ) : (
                <>
                  <i className="ri-building-2-fill text-4xl text-primary"></i>
                  <div className="flex items-center gap-2">
                    <span className="text-2xl font-bold font-headline">OCCTO</span>
                    <span className="text-[10px] font-bold text-primary bg-white/10 px-2 py-1 rounded-md uppercase tracking-wider">ENG.</span>
                  </div>
                </>
              )}
            </div>
            <p className="text-gray-400 mb-6">
              {t('footer.description')}
            </p>
            
            <div className="mb-6">
              <PartnerBadge />
            </div>

            <div className="flex gap-4">
              {contact.instagram && (
                <a href={contact.instagram} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                  <i className="ri-instagram-line"></i>
                </a>
              )}
              {contact.linkedin && (
                <a href={contact.linkedin} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                  <i className="ri-linkedin-fill"></i>
                </a>
              )}
              {contact.facebook && (
                <a href={contact.facebook} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                  <i className="ri-facebook-fill"></i>
                </a>
              )}
              {contact.whatsapp && (
                <a href={`https://wa.me/${contact.whatsapp.replace(/\D/g, '')}`} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                  <i className="ri-whatsapp-line"></i>
                </a>
              )}
            </div>
          </div>

          {/* Links */}
          <div>
            <h3 className="text-lg font-bold font-headline mb-6">{t('footer.quickLinks')}</h3>
            <ul className="space-y-4">
              <li><Link href={`${prefix}/`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.home')}</Link></li>
              <li><Link href={`${prefix}/sobre`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.about')}</Link></li>
              <li><Link href={`${prefix}/servicos`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.services')}</Link></li>
              <li><Link href={`${prefix}/projetos`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.projects')}</Link></li>
              <li><Link href={`${prefix}/contato`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.contact')}</Link></li>
            </ul>
          </div>

          {/* Services */}
          <div>
            <h3 className="text-lg font-bold font-headline mb-6">{t('nav.services')}</h3>
            <ul className="space-y-4">
              <li className="text-gray-400">{t('services.deviceProjects')}</li>
              <li className="text-gray-400">{t('services.implementEngineering')}</li>
              <li className="text-gray-400">{t('services.equipmentInspection')}</li>
              <li className="text-gray-400">{t('services.technicalReports')}</li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h3 className="text-lg font-bold font-headline mb-6">{t('nav.contact')}</h3>
            <ul className="space-y-4">
              {contact.address && (
                <li className="flex items-start gap-3 text-gray-400">
                  <i className="ri-map-pin-line mt-1 text-primary"></i>
                  <span>{contact.address}</span>
                </li>
              )}
              {contact.phone && (
                <li className="flex items-center gap-3 text-gray-400">
                  <i className="ri-phone-line text-primary"></i>
                  <a href={`tel:${contact.phone.replace(/\D/g, '')}`} className="hover:text-primary transition-colors">
                    {contact.phone}
                  </a>
                </li>
              )}
              {contact.email && (
                <li className="flex items-center gap-3 text-gray-400">
                  <i className="ri-mail-line text-primary"></i>
                  <a href={`mailto:${contact.email}`} className="hover:text-primary transition-colors">
                    {contact.email}
                  </a>
                </li>
              )}
              {!contact.address && !contact.phone && !contact.email && (
                <li className="text-gray-500 text-sm italic">
                  Informações de contato não configuradas
                </li>
              )}
            </ul>
          </div>
        </div>

        <div className="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
          <div className="flex flex-col items-center md:items-start gap-2">
            <p className="text-gray-500 text-sm">
              © {new Date().getFullYear()} OCCTO Engenharia. {t('footer.rights')}
            </p>
            <p className="text-gray-500 text-xs">
              Desenvolvido por{' '}
              <a 
                href="https://wa.me/5513998030036" 
                target="_blank" 
                rel="noopener noreferrer"
                className="text-primary hover:underline font-medium"
              >
                idealpages
              </a>
            </p>
          </div>
          <div className="flex gap-6 text-sm text-gray-500">
            <Link href={`${prefix}/privacidade`} className="hover:text-white">{t('footer.privacyPolicy')}</Link>
            <Link href={`${prefix}/termos`} className="hover:text-white">{t('footer.termsOfUse')}</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}