"use client";

import React from "react";
import {
  Film,
  Send,
  MessageCircle,
  Shield,
  Heart,
  ExternalLink,
  ChevronRight,
} from "lucide-react";
import {
  getSiteName,
  getSiteDescription,
  getTelegramUrl,
  getWhatsappChannelUrl,
  getFooterAdHtml,
  DEFAULT_CATEGORIES,
} from "../config/site";

interface FooterProps {
  onSelectCategory: (slug: string) => void;
  onHomeClick: () => void;
}

export function Footer({ onSelectCategory, onHomeClick }: FooterProps) {
  const siteName = getSiteName();
  const siteDesc = getSiteDescription();
  const tgUrl = getTelegramUrl();
  const waUrl = getWhatsappChannelUrl();
  const footerAdHtml = getFooterAdHtml();

  return (
    <footer className="w-full border-t border-white/10 bg-black/90 backdrop-blur-xl mt-16 pt-12 pb-8 text-white/70">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 space-y-10">
        {/* Footer Ad if provided */}
        {footerAdHtml && (
          <div
            id="footer-custom-ad"
            className="w-full flex justify-center py-4"
            dangerouslySetInnerHTML={{ __html: footerAdHtml }}
          />
        )}

        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Col 1: Brand & Bio */}
          <div className="md:col-span-2 space-y-4">
            <button
              onClick={onHomeClick}
              className="flex items-center gap-2.5 group focus:outline-none"
            >
              <div className="w-9 h-9 rounded-xl bg-red-600 flex items-center justify-center text-white shadow-md shadow-red-600/40">
                <Film className="w-5 h-5 fill-white/20" />
              </div>
              <span className="text-xl font-extrabold text-white tracking-tight group-hover:text-red-400 transition-colors">
                {siteName}
              </span>
            </button>

            <p className="text-xs sm:text-sm text-white/60 leading-relaxed max-w-md">
              {siteDesc}
            </p>

            <div className="flex items-center gap-3 pt-2">
              <a
                href={tgUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 px-3.5 py-2 rounded-xl bg-sky-600/20 hover:bg-sky-600 text-sky-400 hover:text-white border border-sky-500/30 text-xs font-semibold transition-colors"
              >
                <Send className="w-3.5 h-3.5" />
                <span>Telegram</span>
              </a>

              <a
                href={waUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 px-3.5 py-2 rounded-xl bg-emerald-600/20 hover:bg-emerald-600 text-emerald-400 hover:text-white border border-emerald-500/30 text-xs font-semibold transition-colors"
              >
                <MessageCircle className="w-3.5 h-3.5" />
                <span>WhatsApp</span>
              </a>
            </div>
          </div>

          {/* Col 2: Popular Categories */}
          <div className="space-y-3">
            <h4 className="text-xs font-bold uppercase tracking-wider text-white">
              Popular Categories
            </h4>
            <ul className="space-y-2 text-xs">
              {DEFAULT_CATEGORIES.slice(1, 7).map((cat) => (
                <li key={cat.slug}>
                  <button
                    onClick={() => {
                      onSelectCategory(cat.slug);
                      window.scrollTo({ top: 0, behavior: "smooth" });
                    }}
                    className="hover:text-red-400 transition-colors flex items-center gap-1.5"
                  >
                    <ChevronRight className="w-3 h-3 text-red-500" />
                    <span>{cat.name}</span>
                  </button>
                </li>
              ))}
            </ul>
          </div>

          {/* Col 3: Languages & Regions */}
          <div className="space-y-3">
            <h4 className="text-xs font-bold uppercase tracking-wider text-white">
              Regional Releases
            </h4>
            <ul className="space-y-2 text-xs">
              {DEFAULT_CATEGORIES.slice(7, 13).map((cat) => (
                <li key={cat.slug}>
                  <button
                    onClick={() => {
                      onSelectCategory(cat.slug);
                      window.scrollTo({ top: 0, behavior: "smooth" });
                    }}
                    className="hover:text-red-400 transition-colors flex items-center gap-1.5"
                  >
                    <ChevronRight className="w-3 h-3 text-red-500" />
                    <span>{cat.name}</span>
                  </button>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Disclaimer & Copyright */}
        <div className="border-t border-white/10 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-white/40">
          <p className="text-center sm:text-left">
            Disclaimer: {siteName} does not host any media files on its servers. All contents are provided by non-affiliated third parties.
          </p>
          <div className="flex items-center gap-1 shrink-0">
            <span>&copy; {new Date().getFullYear()} {siteName}. All rights reserved.</span>
          </div>
        </div>
      </div>
    </footer>
  );
}