import { useState, useEffect } from 'react';
import { FaDiscord, FaTelegramPlane, FaFire } from "react-icons/fa";
import {
  RiOpenaiFill,
  RiGeminiLine,
  RiStackOverflowLine,
} from "react-icons/ri";
import { Link } from "react-router-dom";

function Footer() {
  const currentYear = new Date().getFullYear();

  // State for managing logo source
  const [logoSrc, setLogoSrc] = useState('/logo.png');
  const [showTextLogo, setShowTextLogo] = useState(false);

  // Effect to check local logo availability on mount
  useEffect(() => {
    const img = new Image();
    img.onload = () => setLogoSrc('/logo.png');
    img.onerror = () => setLogoSrc('https://campfiregg.ru/logo.png');
    img.src = '/logo.png';
  }, []);

  const handleExternalLogoError = () => {
    setShowTextLogo(true);
  };

  return (
    <footer className="bg-campfire-darker py-12 mt-20">
      <div className="container-custom">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Brand */}
          <div className="col-span-1 md:col-span-1">
            <Link to="/" className="flex items-center">
              {showTextLogo ? (
                <span className="text-campfire-primary text-xl font-bold">CampFire мнеие</span>
              ) : (
                <img
                  src={logoSrc}
                  alt="CampFire мнеие"
                  className="h-8 object-contain"
                  onError={handleExternalLogoError}
                />
              )}
            </Link>
            <p className="mt-4 text-campfire-light/60">
              Делаем хорошо, но на отъебись.
            </p>
            <div className="flex mt-6 space-x-4">
              <a
                href="#"
                className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
              >
                <FaDiscord size={20} />
              </a>
              <a
                href="#"
                className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
              >
                <FaTelegramPlane size={20} />
              </a>
              <a
                href="#"
                className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
              >
                <FaFire size={20} />
              </a>
            </div>
          </div>

          {/* Navigation */}
          <div className="col-span-1">
            <h3 className="text-lg font-semibold mb-4 text-campfire-light">Атлас</h3>
            <ul className="space-y-2">
              <li>
                <Link
                  to="/"
                  className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
                >
                  Главная
                </Link>
              </li>
              <li>
                <Link
                  to="/catalog?type=movie"
                  className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
                >
                  Фильмы
                </Link>
              </li>
              <li>
                <Link
                  to="/catalog?type=tv"
                  className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
                >
                  Сериалы
                </Link>
              </li>
              <li>
                <Link
                  to="/catalog?type=game"
                  className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
                >
                  Игры
                </Link>
              </li>
              <li>
                <Link
                  to="/catalog?type=anime"
                  className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
                >
                  Аниме
                </Link>
              </li>
            </ul>
          </div>

          {/* Legal */}
          <div className="col-span-1">
            <h3 className="text-lg font-semibold mb-4 text-campfire-light">Правовая информация</h3>
            <ul className="space-y-2">
              <li>
                <Link
                  to="/privacy-policy"
                  className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
                >
                  Политика конфиденциальности
                </Link>
              </li>
              <li>
                <Link
                  to="/terms-of-service"
                  className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
                >
                  Условия использования
                </Link>
              </li>
              <li>
                <Link
                  to="/user-agreement"
                  className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
                >
                  Пользовательское соглашение
                </Link>
              </li>
            </ul>
          </div>

          {/* Contact */}
          <div className="col-span-1">
            <h3 className="text-lg font-semibold mb-4 text-campfire-light">Контакты</h3>
            <ul className="space-y-2">
              <li className="text-campfire-light/60">
                <span>general@campfiregg.ru</span>
              </li>
              <li>
                <Link
                  to="/support"
                  className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
                >
                  Связаться с нами
                </Link>
              </li>
              <li>
                <Link
                  to="/faq"
                  className="text-campfire-light/60 hover:text-campfire-primary transition-colors"
                >
                  FAQ
                </Link>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-campfire-dark mt-12 pt-8 text-center text-campfire-light/60">
          <p>
            &copy; {currentYear} CampFire мнеие. Никакие права не защищены.
          </p>
          <p className="mt-2 text-sm">
            <a
              href="#"
              className="text-campfire-light/60 hover:text-campfire-primary transition-colors inline-flex items-center"
            >
              VibeCoded with
              <RiStackOverflowLine className="ml-1" size={20} />
              <RiGeminiLine className="ml-1" size={20} />
              <RiOpenaiFill className="ml-1" size={20} />
            </a>
          </p>
        </div>
      </div>
    </footer>
  );
}

export default Footer;
