import React, { useState, useEffect, useMemo } from 'react';
import {
  Shield,
  Sparkles,
  Smartphone,
  Activity,
  Search,
  Bookmark,
  Wrench,
  Zap,
  Globe2,
  Filter,
  CheckCircle2,
  Heart,
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
  History as HistoryIcon,
  Layers,
  Lock,
  Unlock,
  Key,
  Settings,
} from 'lucide-react';
import { Header } from './components/Header';
import { QuickCopyBar } from './components/QuickCopyBar';
import { DnsCard } from './components/DnsCard';
import { DnsGenerator } from './components/DnsGenerator';
import { SetupGuideModal } from './components/SetupGuideModal';
import { QrCodeModal } from './components/QrCodeModal';
import { UnlockModal } from './components/UnlockModal';
import { DnsBenchmark } from './components/DnsBenchmark';
import { DnsTester } from './components/DnsTester';
import { TroubleshootingGuide } from './components/TroubleshootingGuide';
import { SavedServers } from './components/SavedServers';
import { HistoryTab } from './components/HistoryTab';
import { AdminDashboard } from './components/AdminDashboard';
import { ALL_195_COUNTRIES } from './data/allCountriesList';
import { DnsCategory, DnsServer, CustomDnsConfig } from './types';
import { Language, TRANSLATIONS } from './data/translations';
import { getDnsTestHistory } from './utils/historyStorage';
import { getAllActiveDnsServers } from './utils/serverStorage';
import {
  isServerUnlocked,
  isGlobalUnlocked,
  setGlobalUnlocked,
} from './utils/unlockService';

export default function App() {
  const [lang, setLang] = useState<Language>('bn');
  const [activeTab, setActiveTab] = useState<
    'servers' | 'generator' | 'guides' | 'benchmark' | 'tester' | 'history' | 'saved' | 'troubleshoot' | 'admin'
  >('servers');

  // Dynamic servers state updated via serverStorage events
  const [allDnsServers, setAllDnsServers] = useState<DnsServer[]>(() => getAllActiveDnsServers());

  useEffect(() => {
    const handleServersUpdated = () => {
      setAllDnsServers(getAllActiveDnsServers());
    };
    window.addEventListener('dns-servers-updated', handleServersUpdated);
    return () => {
      window.removeEventListener('dns-servers-updated', handleServersUpdated);
    };
  }, []);

  const [selectedCategory, setSelectedCategory] = useState<string>('all');
  const [selectedCountry, setSelectedCountry] = useState<string>('all');
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(24);

  // Unlock system state
  const [unlockModalOpen, setUnlockModalOpen] = useState<boolean>(false);
  const [unlockTargetServer, setUnlockTargetServer] = useState<DnsServer | null>(null);
  const [unlockVersion, setUnlockVersion] = useState<number>(0);

  const isUnlockedGlobally = isGlobalUnlocked();

  // Re-test preloaded state for DnsTester
  const [testerPreload, setTesterPreload] = useState<{
    domain: string;
    type: string;
    provider: string;
  } | null>(null);

  // History count state synced with sessionStorage
  const [historyCount, setHistoryCount] = useState<number>(() => {
    return getDnsTestHistory().length;
  });

  useEffect(() => {
    const updateCount = () => {
      setHistoryCount(getDnsTestHistory().length);
    };
    window.addEventListener('dns-history-updated', updateCount);
    return () => {
      window.removeEventListener('dns-history-updated', updateCount);
    };
  }, []);

  // Modal State
  const [guideModalOpen, setGuideModalOpen] = useState<boolean>(false);
  const [qrModalOpen, setQrModalOpen] = useState<boolean>(false);
  const [activeTargetHostname, setActiveTargetHostname] = useState<string>('dns.adguard-dns.com');
  const [activeTargetServerName, setActiveTargetServerName] = useState<string>('AdGuard AdBlock DNS');

  // Persistence for saved bookmarks and custom configurations
  const [savedServers, setSavedServers] = useState<DnsServer[]>(() => {
    try {
      const stored = localStorage.getItem('dns_pro_saved_servers');
      return stored ? JSON.parse(stored) : [];
    } catch {
      return [];
    }
  });

  const [customConfigs, setCustomConfigs] = useState<CustomDnsConfig[]>(() => {
    try {
      const stored = localStorage.getItem('dns_pro_custom_configs');
      return stored ? JSON.parse(stored) : [];
    } catch {
      return [];
    }
  });

  useEffect(() => {
    try {
      localStorage.setItem('dns_pro_saved_servers', JSON.stringify(savedServers));
    } catch (e) {
      console.error(e);
    }
  }, [savedServers]);

  useEffect(() => {
    try {
      localStorage.setItem('dns_pro_custom_configs', JSON.stringify(customConfigs));
    } catch (e) {
      console.error(e);
    }
  }, [customConfigs]);

  const t = TRANSLATIONS[lang];

  // Handler to request unlock for single server or global
  const handleRequestUnlock = (server?: DnsServer) => {
    setUnlockTargetServer(server || null);
    setUnlockModalOpen(true);
  };

  const handleLockAll = () => {
    setGlobalUnlocked(false);
    setUnlockVersion((v) => v + 1);
  };

  // Handler to open visual setup guide for any target DNS
  const handleOpenGuide = (hostname: string, name: string) => {
    setActiveTargetHostname(hostname);
    setActiveTargetServerName(name);
    setGuideModalOpen(true);
  };

  // Handler to open QR code modal for mobile camera scan
  const handleOpenQr = (hostname: string, name: string) => {
    setActiveTargetHostname(hostname);
    setActiveTargetServerName(name);
    setQrModalOpen(true);
  };

  // Toggle bookmarking
  const handleToggleSaveServer = (server: DnsServer) => {
    if (savedServers.some((s) => s.id === server.id)) {
      setSavedServers(savedServers.filter((s) => s.id !== server.id));
    } else {
      setSavedServers([...savedServers, server]);
    }
  };

  const handleSaveCustomConfig = (config: CustomDnsConfig) => {
    setCustomConfigs([config, ...customConfigs]);
  };

  const handleRemoveCustomConfig = (id: string) => {
    setCustomConfigs(customConfigs.filter((c) => c.id !== id));
  };

  const handleRemoveSavedServer = (id: string) => {
    setSavedServers(savedServers.filter((s) => s.id !== id));
  };

  // Reset pagination to page 1 whenever filters or search query changes
  useEffect(() => {
    setCurrentPage(1);
  }, [selectedCategory, selectedCountry, searchQuery, pageSize]);

  // Filter and search servers across the dynamic database
  const filteredServers = useMemo(() => {
    const q = searchQuery.toLowerCase().trim();
    const isAllCat = selectedCategory === 'all';
    const isAllCountry = selectedCountry === 'all';

    return allDnsServers.filter((server) => {
      // Category filter
      if (!isAllCat && server.category !== selectedCategory) {
        return false;
      }

      // Country filter
      if (!isAllCountry) {
        const countryMatch =
          server.country.toLowerCase().includes(selectedCountry.toLowerCase()) ||
          server.id.toLowerCase().startsWith(selectedCountry.toLowerCase());
        if (!countryMatch) return false;
      }

      // Search query filter
      if (!q) return true;

      return (
        server.name.toLowerCase().includes(q) ||
        (server.nameBn && server.nameBn.toLowerCase().includes(q)) ||
        server.dotHostname.toLowerCase().includes(q) ||
        server.provider.toLowerCase().includes(q) ||
        server.country.toLowerCase().includes(q) ||
        server.description.toLowerCase().includes(q) ||
        server.ipv4Primary.includes(q)
      );
    });
  }, [allDnsServers, searchQuery, selectedCategory, selectedCountry]);

  // Total pages and paginated slice
  const totalPages = Math.ceil(filteredServers.length / pageSize) || 1;
  const paginatedServers = useMemo(() => {
    const startIdx = (currentPage - 1) * pageSize;
    return filteredServers.slice(startIdx, startIdx + pageSize);
  }, [filteredServers, currentPage, pageSize]);

  const handlePageChange = (newPage: number) => {
    if (newPage >= 1 && newPage <= totalPages) {
      setCurrentPage(newPage);
      window.scrollTo({ top: 280, behavior: 'smooth' });
    }
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col font-sans selection:bg-emerald-500 selection:text-slate-950">
      {/* Top Application Navigation Bar */}
      <Header
        lang={lang}
        onLanguageChange={setLang}
        onOpenTroubleshoot={() => setActiveTab('troubleshoot')}
        onOpenAdmin={() => setActiveTab('admin')}
      />

      {/* 1-Click Quick Hostname Copy Bar for top popular servers */}
      <QuickCopyBar
        lang={lang}
        isUnlocked={isUnlockedGlobally}
        onUnlockRequest={() => handleRequestUnlock()}
        onSelectServerForGuide={(hostname, name) => handleOpenGuide(hostname, name)}
      />

      {/* Main Content Area */}
      <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 space-y-6">
        {/* Navigation Tabs */}
        <div className="flex items-center gap-1.5 overflow-x-auto pb-2 border-b border-slate-800/80 scrollbar-none">
          {[
            { id: 'servers', label: `${t.tabServers} (${allDnsServers.length.toLocaleString('bn-BD')}+)`, icon: Layers },
            { id: 'generator', label: t.tabGenerator, icon: Sparkles },
            { id: 'benchmark', label: t.tabBenchmark, icon: Activity },
            { id: 'tester', label: t.tabTester, icon: Zap },
            {
              id: 'history',
              label: `${t.tabHistory || 'টেস্ট হিস্টোরি'} ${historyCount > 0 ? `(${historyCount})` : ''}`,
              icon: HistoryIcon,
            },
            {
              id: 'saved',
              label: `${t.tabSaved} (${savedServers.length + customConfigs.length})`,
              icon: Bookmark,
            },
            { id: 'troubleshoot', label: t.tabTroubleshoot, icon: Wrench },
            {
              id: 'admin',
              label: lang === 'bn' ? '🔐 এডমিন ড্যাশবোর্ড' : '🔐 Admin Panel',
              icon: Settings,
            },
          ].map((tab) => {
            const Icon = tab.icon;
            const isActive = activeTab === tab.id;
            const isAdminTab = tab.id === 'admin';
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as any)}
                className={`py-2.5 px-4 rounded-xl text-xs sm:text-sm font-semibold flex items-center gap-2 whitespace-nowrap transition cursor-pointer ${
                  isActive
                    ? isAdminTab
                      ? 'bg-amber-500 text-slate-950 shadow-lg shadow-amber-500/20 font-bold'
                      : 'bg-emerald-600 text-white shadow-lg shadow-emerald-600/20'
                    : isAdminTab
                    ? 'text-amber-400/90 hover:text-amber-300 hover:bg-amber-950/30 border border-amber-500/30'
                    : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900 border border-transparent'
                }`}
                id={`tab-${tab.id}`}
              >
                <Icon className={`w-4 h-4 ${isActive ? (isAdminTab ? 'text-slate-950' : 'text-white') : (isAdminTab ? 'text-amber-400' : 'text-slate-400')}`} />
                <span>{tab.label}</span>
              </button>
            );
          })}
        </div>

        {/* Tab 1: All DNS Servers Directory */}
        {activeTab === 'servers' && (
          <div className="space-y-5 animate-in fade-in duration-150">
            {/* UNLOCK STATUS BANNER */}
            <div
              className={`rounded-2xl p-4 sm:p-5 border transition-all duration-200 flex flex-col sm:flex-row sm:items-center justify-between gap-4 shadow-xl ${
                !isUnlockedGlobally
                  ? 'bg-gradient-to-r from-amber-950/60 via-slate-900 to-amber-950/40 border-amber-500/40'
                  : 'bg-gradient-to-r from-emerald-950/50 via-slate-900 to-emerald-950/30 border-emerald-500/30'
              }`}
              id="dns-unlock-banner"
            >
              <div className="flex items-center gap-3.5">
                <div
                  className={`w-11 h-11 rounded-2xl flex items-center justify-center shrink-0 border ${
                    !isUnlockedGlobally
                      ? 'bg-amber-500/10 border-amber-500/30 text-amber-400'
                      : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400'
                  }`}
                >
                  {!isUnlockedGlobally ? (
                    <Lock className="w-5 h-5 animate-pulse" />
                  ) : (
                    <Unlock className="w-5 h-5" />
                  )}
                </div>
                <div>
                  <div className="flex items-center gap-2 flex-wrap">
                    <h3 className="text-sm sm:text-base font-bold text-white">
                      {!isUnlockedGlobally
                        ? lang === 'bn'
                          ? '🔒 সকল প্রাইভেট ডিএনএস সার্ভার কোড সুরক্ষিত'
                          : '🔒 Private DNS Server Hostnames Protected'
                        : lang === 'bn'
                        ? `🔓 সকল ${allDnsServers.length.toLocaleString('bn-BD')}+ ডিএনএস সার্ভার সম্পূর্ণ আনলকড`
                        : `🔓 All ${allDnsServers.length.toLocaleString()}+ DNS Servers Fully Unlocked`}
                    </h3>
                    <span
                      className={`text-[10px] font-bold px-2 py-0.5 rounded-full border uppercase tracking-wider ${
                        !isUnlockedGlobally
                          ? 'bg-amber-500/20 text-amber-300 border-amber-500/40'
                          : 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40'
                      }`}
                    >
                      {!isUnlockedGlobally ? 'Admin Code Required' : 'Access Granted'}
                    </span>
                  </div>
                  <p className="text-xs text-slate-400 mt-0.5 leading-relaxed">
                    {!isUnlockedGlobally
                      ? lang === 'bn'
                        ? 'মোবাইলে Private DNS সেট করার আসল কোড (DoT Hostname) দেখতে ও কপি করতে এডমিন কোড দিন।'
                        : 'Enter the admin access code to reveal the Private DNS hostnames and enable 1-click copy.'
                      : lang === 'bn'
                      ? 'আপনি এখন যেকোনো দেশের ও আইএসপির ডিএনএস কোড দেখতে, টেস্ট করতে এবং মোবাইলে সেটআপ করতে পারেন।'
                      : 'You can now view, copy, and set up all encrypted DNS servers on any device.'}
                  </p>
                </div>
              </div>

              <div className="flex items-center gap-2 shrink-0">
                {!isUnlockedGlobally ? (
                  <button
                    onClick={() => handleRequestUnlock()}
                    className="w-full sm:w-auto py-2.5 px-4 rounded-xl bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-slate-950 font-bold text-xs flex items-center justify-center gap-2 shadow-lg shadow-amber-500/10 transition active:scale-95 cursor-pointer"
                    id="open-global-unlock-btn"
                  >
                    <Key className="w-3.5 h-3.5" />
                    <span>
                      {lang === 'bn' ? '🔑 এডমিন কোড দিয়ে আনলক করুন' : 'Unlock with Admin Code'}
                    </span>
                  </button>
                ) : (
                  <button
                    onClick={handleLockAll}
                    className="py-2 px-3.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold border border-slate-700 flex items-center gap-1.5 transition cursor-pointer"
                    id="lock-again-btn"
                    title="Lock servers again"
                  >
                    <Lock className="w-3.5 h-3.5 text-amber-400" />
                    <span>{lang === 'bn' ? 'পুনরায় লক করুন' : 'Re-lock Servers'}</span>
                  </button>
                )}
              </div>
            </div>

            {/* Search & Category Filter Controls */}
            <div className="flex flex-col gap-4 bg-slate-900/80 p-4 sm:p-5 rounded-2xl border border-slate-800">
              <div className="flex flex-col md:flex-row items-center justify-between gap-3">
                {/* Search Field */}
                <div className="relative w-full md:flex-1">
                  <Search className="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" />
                  <input
                    type="text"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder={
                      lang === 'bn'
                        ? `${allDnsServers.length.toLocaleString('bn-BD')}+ ডিএনএস খুঁজুন (দেশ, আইএসপি, নাম বা হোস্টনেম)...`
                        : `Search ${allDnsServers.length.toLocaleString()}+ DNS servers by Country, ISP, Name or Hostname...`
                    }
                    className="w-full pl-9 pr-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs sm:text-sm focus:outline-none focus:border-emerald-500 transition"
                    id="search-dns-input"
                  />
                  {searchQuery && (
                    <button
                      onClick={() => setSearchQuery('')}
                      className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white text-xs bg-slate-800 px-1.5 py-0.5 rounded cursor-pointer"
                    >
                      Clear
                    </button>
                  )}
                </div>

                {/* Country Filter Dropdown */}
                <div className="w-full md:w-64">
                  <select
                    value={selectedCountry}
                    onChange={(e) => setSelectedCountry(e.target.value)}
                    className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs sm:text-sm focus:outline-none focus:border-emerald-500 transition cursor-pointer"
                    id="country-filter-select"
                  >
                    <option value="all">
                      {lang === 'bn'
                        ? '🌍 সকল দেশ ও অঞ্চল (All 195+ Countries)'
                        : '🌍 All Countries & Regions (195+)'}
                    </option>
                    <optgroup
                      label={lang === 'bn' ? '⭐ জনপ্রিয় দেশসমূহ' : '⭐ Popular Countries'}
                    >
                      <option key="pop-BD" value="BD">
                        🇧🇩 Bangladesh (বাংলাদেশ)
                      </option>
                      <option key="pop-IN" value="IN">
                        🇮🇳 India (ভারত)
                      </option>
                      <option key="pop-US" value="US">
                        🇺🇸 United States (যুক্তরাষ্ট্র)
                      </option>
                      <option key="pop-GB" value="GB">
                        🇬🇧 United Kingdom (যুক্তরাজ্য)
                      </option>
                      <option key="pop-CA" value="CA">
                        🇨🇦 Canada (কানাডা)
                      </option>
                      <option key="pop-DE" value="DE">
                        🇩🇪 Germany (জার্মানি)
                      </option>
                      <option key="pop-SG" value="SG">
                        🇸🇬 Singapore (সিঙ্গাপুর)
                      </option>
                      <option key="pop-SA" value="SA">
                        🇸🇦 Saudi Arabia (সৌদি আরব)
                      </option>
                      <option key="pop-AE" value="AE">
                        🇦🇪 UAE (সংযুক্ত আরব আমিরাত)
                      </option>
                    </optgroup>
                    <optgroup
                      label={
                        lang === 'bn'
                          ? '🌐 বিশ্বের সকল দেশ (A-Z)'
                          : '🌐 All 195 Countries (A-Z)'
                      }
                    >
                      {ALL_195_COUNTRIES.map((c, idx) => (
                        <option
                          key={`country-opt-${c.code}-${idx}`}
                          value={c.code}
                        >
                          {c.flag}{' '}
                          {lang === 'bn'
                            ? `${c.nameBn} (${c.name})`
                            : `${c.name} (${c.region})`}
                        </option>
                      ))}
                    </optgroup>
                  </select>
                </div>

                {/* Page Size Selector */}
                <div className="flex items-center gap-2 text-xs text-slate-400 whitespace-nowrap">
                  <span>{lang === 'bn' ? 'প্রতি পেজে:' : 'Per page:'}</span>
                  <select
                    value={pageSize}
                    onChange={(e) => setPageSize(Number(e.target.value))}
                    className="py-1.5 px-2 rounded-lg bg-slate-950 border border-slate-800 text-slate-200 text-xs focus:outline-none focus:border-emerald-500 cursor-pointer"
                  >
                    <option value={24}>24</option>
                    <option value={48}>48</option>
                    <option value={96}>96</option>
                    <option value={192}>192</option>
                  </select>
                </div>
              </div>

              {/* Category Filter Pills */}
              <div className="flex items-center gap-1.5 overflow-x-auto w-full pb-1 scrollbar-none">
                {[
                  { id: 'all', label: t.filterAll },
                  { id: 'adblock', label: t.filterAdblock },
                  { id: 'speed', label: t.filterSpeed },
                  { id: 'gaming', label: t.filterGaming },
                  { id: 'family', label: t.filterFamily },
                  { id: 'security', label: t.filterSecurity },
                  { id: 'privacy', label: t.filterPrivacy },
                  { id: 'isp', label: t.filterIsp || '📡 ISP & Telco' },
                  { id: 'custom', label: '✨ Custom' },
                ].map((cat) => (
                  <button
                    key={cat.id}
                    onClick={() => setSelectedCategory(cat.id)}
                    className={`py-1.5 px-3 rounded-lg text-xs font-semibold whitespace-nowrap transition cursor-pointer ${
                      selectedCategory === cat.id
                        ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/40'
                        : 'bg-slate-950 text-slate-400 hover:text-slate-200 border border-slate-800/80'
                    }`}
                  >
                    {cat.label}
                  </button>
                ))}
              </div>

              {/* Summary Stats & Count */}
              <div className="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-slate-800/60 text-xs text-slate-400">
                <div className="flex items-center gap-2">
                  <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-medium">
                    <CheckCircle2 className="w-3.5 h-3.5" />
                    {lang === 'bn'
                      ? `মোট পাওয়া গেছে: ${filteredServers.length.toLocaleString('bn-BD')} টি ডিএনএস`
                      : `Found ${filteredServers.length.toLocaleString()} DNS Servers`}
                  </span>
                  <span className="hidden sm:inline text-slate-500">|</span>
                  <span className="hidden sm:inline">
                    {lang === 'bn'
                      ? `পেজ ${currentPage} / ${totalPages}`
                      : `Page ${currentPage} of ${totalPages}`}
                  </span>
                </div>

                <div className="flex items-center gap-1.5 text-xs text-slate-400">
                  <span>
                    {lang === 'bn'
                      ? `দেখাচ্ছে ${((currentPage - 1) * pageSize + 1).toLocaleString('bn-BD')} - ${Math.min(currentPage * pageSize, filteredServers.length).toLocaleString('bn-BD')}`
                      : `Showing ${(currentPage - 1) * pageSize + 1}–${Math.min(currentPage * pageSize, filteredServers.length)} of ${filteredServers.length}`}
                  </span>
                </div>
              </div>
            </div>

            {/* Server Cards Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
              {paginatedServers.map((server) => {
                const isSaved = savedServers.some((s) => s.id === server.id);
                const isUnlocked = isServerUnlocked(server.id);
                return (
                  <DnsCard
                    key={server.id}
                    server={server}
                    lang={lang}
                    isUnlocked={isUnlocked}
                    onUnlockRequest={(srv) => handleRequestUnlock(srv)}
                    onOpenGuide={(hostname, name) => handleOpenGuide(hostname, name)}
                    onOpenQr={(hostname, name) => handleOpenQr(hostname, name)}
                    onTestDns={() => setActiveTab('tester')}
                    isSaved={isSaved}
                    onToggleSave={handleToggleSaveServer}
                  />
                );
              })}
            </div>

            {/* Pagination Controls */}
            {totalPages > 1 && (
              <div className="flex flex-wrap items-center justify-center gap-2 pt-6 pb-2">
                <button
                  onClick={() => handlePageChange(1)}
                  disabled={currentPage === 1}
                  className="p-2 rounded-xl bg-slate-900 border border-slate-800 text-slate-300 hover:bg-slate-800 disabled:opacity-30 disabled:pointer-events-none transition cursor-pointer"
                  title="First Page"
                >
                  <ChevronsLeft className="w-4 h-4" />
                </button>
                <button
                  onClick={() => handlePageChange(currentPage - 1)}
                  disabled={currentPage === 1}
                  className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-xs font-semibold text-slate-300 hover:bg-slate-800 disabled:opacity-30 disabled:pointer-events-none transition flex items-center gap-1 cursor-pointer"
                >
                  <ChevronLeft className="w-4 h-4" />
                  <span>{lang === 'bn' ? 'আগের পেজ' : 'Previous'}</span>
                </button>

                {/* Numbered Page Buttons */}
                <div className="flex items-center gap-1">
                  {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                    let pageNum = currentPage - 2 + i;
                    if (currentPage <= 2) pageNum = i + 1;
                    else if (currentPage >= totalPages - 2) pageNum = totalPages - 4 + i;
                    if (pageNum < 1 || pageNum > totalPages) return null;

                    const isCurrent = pageNum === currentPage;
                    return (
                      <button
                        key={pageNum}
                        onClick={() => handlePageChange(pageNum)}
                        className={`w-9 h-9 rounded-xl text-xs font-bold transition cursor-pointer ${
                          isCurrent
                            ? 'bg-emerald-600 text-white shadow-md shadow-emerald-600/20'
                            : 'bg-slate-900 border border-slate-800 text-slate-400 hover:text-white hover:bg-slate-800'
                        }`}
                      >
                        {lang === 'bn' ? pageNum.toLocaleString('bn-BD') : pageNum}
                      </button>
                    );
                  })}
                </div>

                <button
                  onClick={() => handlePageChange(currentPage + 1)}
                  disabled={currentPage === totalPages}
                  className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-xs font-semibold text-slate-300 hover:bg-slate-800 disabled:opacity-30 disabled:pointer-events-none transition flex items-center gap-1 cursor-pointer"
                >
                  <span>{lang === 'bn' ? 'পরের পেজ' : 'Next'}</span>
                  <ChevronRight className="w-4 h-4" />
                </button>
                <button
                  onClick={() => handlePageChange(totalPages)}
                  disabled={currentPage === totalPages}
                  className="p-2 rounded-xl bg-slate-900 border border-slate-800 text-slate-300 hover:bg-slate-800 disabled:opacity-30 disabled:pointer-events-none transition cursor-pointer"
                  title="Last Page"
                >
                  <ChevronsRight className="w-4 h-4" />
                </button>
              </div>
            )}

            {filteredServers.length === 0 && (
              <div className="text-center py-16 bg-slate-900/60 rounded-3xl border border-slate-800/80 p-8">
                <Search className="w-12 h-12 text-slate-600 mx-auto mb-3" />
                <p className="text-base font-semibold text-slate-300">
                  {lang === 'bn' ? 'কোনো ডিএনএস সার্ভার পাওয়া যায়নি' : 'No DNS servers found'}
                </p>
                <p className="text-xs text-slate-500 max-w-sm mx-auto mt-1">
                  {lang === 'bn'
                    ? 'আপনার সার্চ কুয়েরি পরিবর্তন করুন অথবা অন্য ক্যাটাগরি সিলেক্ট করুন।'
                    : 'Try changing your search query or reset the filter selection.'}
                </p>
                <button
                  onClick={() => {
                    setSearchQuery('');
                    setSelectedCategory('all');
                    setSelectedCountry('all');
                  }}
                  className="mt-3 py-1.5 px-4 rounded-xl bg-slate-800 text-xs text-slate-200 font-semibold hover:bg-slate-700 transition cursor-pointer"
                >
                  {lang === 'bn' ? 'সব ফিল্টার রিসেট করুন' : 'Reset All Filters'}
                </button>
              </div>
            )}
          </div>
        )}

        {/* Tab 2: Custom DNS Generator */}
        {activeTab === 'generator' && (
          <div className="animate-in fade-in duration-150">
            <DnsGenerator
              lang={lang}
              onOpenGuide={(hostname, name) => handleOpenGuide(hostname, name)}
              onOpenQr={(hostname, name) => handleOpenQr(hostname, name)}
              onSaveCustomConfig={handleSaveCustomConfig}
            />
          </div>
        )}

        {/* Tab 3: Speed Benchmark */}
        {activeTab === 'benchmark' && (
          <div className="animate-in fade-in duration-150">
            <DnsBenchmark
              lang={lang}
              onSelectHostname={(dot, name) => handleOpenGuide(dot, name)}
            />
          </div>
        )}

        {/* Tab 4: DNS Lookup & Tester */}
        {activeTab === 'tester' && (
          <div className="animate-in fade-in duration-150">
            <DnsTester
              lang={lang}
              initialQueryDomain={testerPreload?.domain}
              initialRecordType={testerPreload?.type}
              initialProvider={testerPreload?.provider}
              onNavigateHistory={() => setActiveTab('history')}
            />
          </div>
        )}

        {/* Tab 5: History of Last 10 DNS Tests */}
        {activeTab === 'history' && (
          <div className="animate-in fade-in duration-150">
            <HistoryTab
              lang={lang}
              onReTestQuery={(domain, type, provider) => {
                setTesterPreload({ domain, type, provider });
                setActiveTab('tester');
              }}
              onNavigateTester={() => {
                setTesterPreload(null);
                setActiveTab('tester');
              }}
            />
          </div>
        )}

        {/* Tab 6: Saved / Bookmarked DNS Servers */}
        {activeTab === 'saved' && (
          <div className="animate-in fade-in duration-150">
            <SavedServers
              lang={lang}
              savedServers={savedServers}
              customConfigs={customConfigs}
              isUnlocked={isUnlockedGlobally}
              onUnlockRequest={(srv) => handleRequestUnlock(srv)}
              onOpenGuide={(hostname, name) => handleOpenGuide(hostname, name)}
              onOpenQr={(hostname, name) => handleOpenQr(hostname, name)}
              onRemoveSavedServer={handleRemoveSavedServer}
              onRemoveCustomConfig={handleRemoveCustomConfig}
              onOpenGenerator={() => setActiveTab('generator')}
            />
          </div>
        )}

        {/* Tab 7: Troubleshoot & Fix Errors */}
        {activeTab === 'troubleshoot' && (
          <div className="animate-in fade-in duration-150">
            <TroubleshootingGuide lang={lang} />
          </div>
        )}

        {/* Tab 8: Secure Admin Dashboard */}
        {activeTab === 'admin' && (
          <div className="animate-in fade-in duration-150">
            <AdminDashboard
              lang={lang}
              onNavigateHome={() => setActiveTab('servers')}
            />
          </div>
        )}
      </main>

      {/* Visual Step-by-Step Setup Guide Modal */}
      <SetupGuideModal
        isOpen={guideModalOpen}
        onClose={() => setGuideModalOpen(false)}
        targetHostname={activeTargetHostname}
        serverName={activeTargetServerName}
        lang={lang}
      />

      {/* QR Code Quick Scan Modal */}
      <QrCodeModal
        isOpen={qrModalOpen}
        onClose={() => setQrModalOpen(false)}
        targetHostname={activeTargetHostname}
        serverName={activeTargetServerName}
        lang={lang}
      />

      {/* Admin Unlock Code Modal */}
      <UnlockModal
        isOpen={unlockModalOpen}
        onClose={() => setUnlockModalOpen(false)}
        targetServer={unlockTargetServer}
        lang={lang}
        onSuccess={() => setUnlockVersion((v) => v + 1)}
      />

      {/* Footer */}
      <footer className="mt-auto border-t border-slate-800/80 bg-slate-900/60 py-8 text-center text-xs text-slate-500">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-2">
          <div className="flex items-center justify-center gap-2">
            <div className="w-2 h-2 rounded-full bg-emerald-400" />
            <span className="text-slate-400 font-medium">
              5,400+ Verified Private DNS Servers Database • TLS 1.3 / DoT / DoH Active
            </span>
          </div>
          <p>
            {lang === 'bn'
              ? 'মোবাইল প্রাইভেট ডিএনএস (Android Private DNS & iOS Encrypted DNS Profile) হাব। ১০০% কার্যকরী ও ভেরিফাইড।'
              : 'Mobile Private DNS Hub for Android 9+ & iOS 14+. Works reliably with zero-configuration.'}
          </p>
        </div>
      </footer>
    </div>
  );
}