import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Facebook, Youtube, Linkedin, Instagram, ArrowUp, MapPin } from 'lucide-react';
import { LOGO, SOCIAL_LINKS, ADDRESSES, FOOTER_LINKS, COMPANY } from '../config/site';

// Mapa de icones das redes sociais
const socialIcons: Record<string, React.ReactNode> = {
  facebook: <Facebook className="w-5 h-5" />,
  youtube: <Youtube className="w-5 h-5" />,
  linkedin: <Linkedin className="w-5 h-5" />,
  instagram: <Instagram className="w-5 h-5" />,
};

const Footer = () => {
  const [version, setVersion] = useState('');

  useEffect(() => {
    fetch('/version.json?t=' + Date.now())
      .then(r => r.json())
      .then(data => setVersion(data.version))
      .catch(() => setVersion(''));
  }, []);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  // Filtra apenas redes sociais com URL preenchida
  const activeSocials = Object.entries(SOCIAL_LINKS)
    .filter(([, data]) => data.url)
    .map(([key, data]) => ({
      key,
      icon: data.iconSvg
        ? <div dangerouslySetInnerHTML={{ __html: data.iconSvg }} />
        : (socialIcons[key] || null),
      href: data.url,
      label: data.label,
    }));

  // Renderiza o logo (SVG inline ou imagem)
  const renderLogo = () => {
    if (LOGO.imageUrl) {
      return <img src={LOGO.imageUrl} alt={COMPANY.name} className="h-10 w-auto" />;
    }
    return (
      <div dangerouslySetInnerHTML={{ __html: LOGO.svgInline }} className="flex-shrink-0" />
    );
  };

  return (
    <footer className="bg-[#0e0e0e] text-white relative border-t border-white/5">
      {/* Main footer */}
      <div className="container-custom py-16">
        <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-12">
          {/* Brand */}
          <div className="lg:col-span-2">
            <Link to={LOGO.href} className="flex items-center gap-3 mb-6">
              {renderLogo()}
              {LOGO.text && (
                <span className="text-2xl font-bold tracking-tight">
                  {LOGO.text}
                  <span className="text-[#cbf400]">{LOGO.textHighlight}</span>
                </span>
              )}
            </Link>
            <p className="text-gray-400 mb-6 max-w-sm">
              {COMPANY.description}
            </p>

            {/* Enderecos - importados de config/site.ts */}
            {ADDRESSES.length > 0 && (
              <div className="mb-6">
                <div className="flex items-center gap-2 mb-3">
                  <MapPin className="w-4 h-4 text-[#cbf400]" />
                  <span className="text-white font-medium text-sm">Nossos Escritorios</span>
                </div>
                <div className="space-y-2 text-xs text-gray-400">
                  {ADDRESSES.map((addr, i) => (
                    <p key={i}>{addr.street} - {addr.city}/{addr.state}</p>
                  ))}
                </div>
              </div>
            )}

            {/* Social links - importados de config/site.ts */}
            {activeSocials.length > 0 && (
              <div className="flex gap-3">
                {activeSocials.map((social) => (
                  <a
                    key={social.key}
                    href={social.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={social.label}
                    className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center text-gray-400 hover:bg-[#cbf400] hover:text-[#0e0e0e] transition-colors border border-white/5"
                  >
                    {social.icon}
                  </a>
                ))}
              </div>
            )}
          </div>

          {/* Services */}
          <div>
            <h4 className="font-bold mb-4 text-white">Servicos</h4>
            <ul className="space-y-3">
              {FOOTER_LINKS.servicos.map((link, index) => (
                <li key={index}>
                  <Link
                    to={link.href}
                    className="text-gray-400 hover:text-[#cbf400] transition-colors text-sm"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Company */}
          <div>
            <h4 className="font-bold mb-4 text-white">Empresa</h4>
            <ul className="space-y-3">
              {FOOTER_LINKS.empresa.map((link, index) => (
                <li key={index}>
                  <Link
                    to={link.href}
                    className="text-gray-400 hover:text-[#cbf400] transition-colors text-sm"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Support */}
          <div>
            <h4 className="font-bold mb-4 text-white">Suporte</h4>
            <ul className="space-y-3">
              {FOOTER_LINKS.suporte.map((link, index) => (
                <li key={index}>
                  {link.href.startsWith('http') ? (
                    <a
                      href={link.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-gray-400 hover:text-[#cbf400] transition-colors text-sm"
                    >
                      {link.name}
                    </a>
                  ) : (
                    <Link
                      to={link.href}
                      className="text-gray-400 hover:text-[#cbf400] transition-colors text-sm"
                    >
                      {link.name}
                    </Link>
                  )}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="border-t border-white/5">
        <div className="container-custom py-6">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <p className="text-gray-500 text-sm">
              &copy; {new Date().getFullYear()} {COMPANY.name}. Todos os direitos reservados.
              {version && <span className="ml-2 text-gray-600 text-xs">v{version}</span>}
            </p>

            <div className="flex items-center gap-6">
              {FOOTER_LINKS.legais.map((link, index) => (
                <Link
                  key={index}
                  to={link.href}
                  className="text-gray-500 hover:text-gray-300 text-sm transition-colors"
                >
                  {link.name}
                </Link>
              ))}
            </div>

            <button
              onClick={scrollToTop}
              className="w-10 h-10 rounded-full bg-[#cbf400]/10 flex items-center justify-center text-[#cbf400] hover:bg-[#cbf400] hover:text-[#0e0e0e] transition-all"
              aria-label="Voltar ao topo"
            >
              <ArrowUp className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;