"use client";

import React from "react";
import {
  X,
  Flame,
  Film,
  PlaySquare,
  Video,
  Tv,
  ShieldAlert,
  Sparkles,
  Clapperboard,
  Globe,
  Compass,
  Award,
  Layers,
  Disc,
  Gamepad2,
  Tag,
  Send,
  MessageCircle,
  ExternalLink,
  Info,
} from "lucide-react";
import { Category } from "../types";
import {
  getSiteName,
  getTelegramUrl,
  getWhatsappChannelUrl,
} from "../config/site";

interface SideMenuProps {
  isOpen: boolean;
  onClose: () => void;
  categories: Category[];
  selectedCategory: string;
  onSelectCategory: (slug: string) => void;
}

export function SideMenu({
  isOpen,
  onClose,
  categories,
  selectedCategory,
  onSelectCategory,
}: SideMenuProps) {
  if (!isOpen) return null;

  const siteName = getSiteName();
  const tgUrl = getTelegramUrl();
  const waUrl = getWhatsappChannelUrl();

  const getCategoryIcon = (slug: string) => {
    switch (slug.toLowerCase()) {
      case "":
        return <Flame className="w-4 h-4 text-red-500" />;
      case "web":
        return <Film className="w-4 h-4 text-sky-400" />;
      case "amzn-prime-video":
        return <Video className="w-4 h-4 text-cyan-400" />;
      case "netflix":
        return <PlaySquare className="w-4 h-4 text-red-600" />;
      case "jiohotstar":
        return <Tv className="w-4 h-4 text-blue-400" />;
      case "18":
        return <ShieldAlert className="w-4 h-4 text-rose-500" />;
      case "dual-audio":
        return <Sparkles className="w-4 h-4 text-yellow-400" />;
      case "bollywood":
        return <Clapperboard className="w-4 h-4 text-emerald-400" />;
      case "hollywood":
        return <Globe className="w-4 h-4 text-indigo-400" />;
      case "tamil":
        return <Compass className="w-4 h-4 text-orange-400" />;
      case "telugu":
        return <Award className="w-4 h-4 text-amber-400" />;
      case "malayalam":
        return <Layers className="w-4 h-4 text-teal-400" />;
      case "punjabi":
        return <Disc className="w-4 h-4 text-pink-400" />;
      case "anime":
        return <Gamepad2 className="w-4 h-4 text-purple-400" />;
      default:
        return <Tag className="w-4 h-4 text-white/50" />;
    }
  };

  return (
    <div
      id="side-menu-backdrop"
      onClick={onClose}
      className="fixed inset-0 z-50 flex bg-black/80 backdrop-blur-xl animate-in fade-in duration-200"
    >
      <div
        id="side-menu-drawer"
        onClick={(e) => e.stopPropagation()}
        className="relative w-full max-w-xs sm:max-w-sm h-full bg-neutral-950/95 border-r border-white/10 flex flex-col shadow-2xl animate-in slide-in-from-left duration-300"
      >
        {/* Drawer Header */}
        <div className="flex items-center justify-between p-5 border-b border-white/10 bg-white/[0.02]">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-xl bg-red-600 flex items-center justify-center text-white shadow-md shadow-red-600/40">
              <Film className="w-4 h-4" />
            </div>
            <div>
              <h2 className="text-base font-bold text-white tracking-tight">
                {siteName}
              </h2>
              <p className="text-[11px] text-white/40">Navigation & Categories</p>
            </div>
          </div>

          <button
            id="side-menu-close-btn"
            onClick={onClose}
            aria-label="Close menu"
            className="p-2 rounded-xl bg-white/5 hover:bg-white/10 text-white/70 hover:text-white border border-white/10 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Scrollable Categories List */}
        <div className="flex-1 overflow-y-auto p-4 space-y-1.5 custom-scrollbar">
          <div className="px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-white/40">
            Browse Categories
          </div>

          {categories.map((cat) => {
            const isSelected = selectedCategory === cat.slug;
            return (
              <button
                key={cat.slug || "all"}
                id={`side-menu-cat-${cat.slug || "all"}`}
                onClick={() => {
                  onSelectCategory(cat.slug);
                  onClose();
                }}
                className={`w-full flex items-center justify-between px-3.5 py-3 rounded-2xl text-sm font-medium transition-all duration-200 ${
                  isSelected
                    ? "bg-red-600 text-white shadow-md shadow-red-600/30 border border-red-500/40"
                    : "text-white/80 hover:text-white hover:bg-white/[0.06] border border-transparent"
                }`}
              >
                <div className="flex items-center gap-3">
                  <div
                    className={`p-1.5 rounded-lg ${
                      isSelected ? "bg-white/20" : "bg-white/[0.04]"
                    }`}
                  >
                    {getCategoryIcon(cat.slug)}
                  </div>
                  <span>{cat.name}</span>
                </div>

                {isSelected && (
                  <span className="w-2 h-2 rounded-full bg-white animate-pulse" />
                )}
              </button>
            );
          })}
        </div>

        {/* Community & Social Cards */}
        <div className="p-4 border-t border-white/10 bg-white/[0.02] space-y-2.5">
          <div className="px-1 text-[11px] font-semibold uppercase tracking-wider text-white/40">
            Join Community
          </div>

          {/* Telegram Channel Card */}
          <a
            id="side-menu-telegram-card"
            href={tgUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center justify-between p-3 rounded-2xl bg-sky-600/10 hover:bg-sky-600/20 border border-sky-500/30 transition-all text-sky-400 group"
          >
            <div className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-xl bg-sky-600 text-white flex items-center justify-center shadow-sm">
                <Send className="w-4 h-4" />
              </div>
              <div className="text-left">
                <p className="text-xs font-semibold text-white group-hover:text-sky-300">
                  Telegram Group
                </p>
                <p className="text-[10px] text-white/50">Instant new release alerts</p>
              </div>
            </div>
            <ExternalLink className="w-4 h-4 text-sky-400/70 group-hover:text-sky-300" />
          </a>

          {/* WhatsApp Channel Card */}
          <a
            id="side-menu-whatsapp-card"
            href={waUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center justify-between p-3 rounded-2xl bg-emerald-600/10 hover:bg-emerald-600/20 border border-emerald-500/30 transition-all text-emerald-400 group"
          >
            <div className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-xl bg-emerald-600 text-white flex items-center justify-center shadow-sm">
                <MessageCircle className="w-4 h-4" />
              </div>
              <div className="text-left">
                <p className="text-xs font-semibold text-white group-hover:text-emerald-300">
                  WhatsApp Channel
                </p>
                <p className="text-[10px] text-white/50">Direct download updates</p>
              </div>
            </div>
            <ExternalLink className="w-4 h-4 text-emerald-400/70 group-hover:text-emerald-300" />
          </a>
        </div>
      </div>
    </div>
  );
}