'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useAuth } from '@/components/auth-provider';
import { db, callFunction } from '@/lib/firebase';
import { useLanguage } from '@/hooks/use-language';
import { LanguageSwitcher } from '@/components/language-switcher';
import { t } from '@/lib/i18n';
import { Loader2 } from 'lucide-react';
import SystemSettings from '@/components/system-settings';
import {
  collection,
  onSnapshot,
  query,
  orderBy,
  Timestamp,
  getDocs,
  doc,
  setDoc,
  limit as firestoreLimit,
} from 'firebase/firestore';
import { toast } from '@/hooks/use-toast';
import {
  LayoutDashboard,
  Calendar,
  Image as ImageIcon,
  Users,
  TrendingUp,
  CheckCircle,
  XCircle,
  Clock,
  AlertCircle,
  Eye,
  Settings,
  Plus,
  Search,
  Filter,
  Download,
  Share2,
  QrCode,
  DollarSign,
  BarChart3,
  ArrowUpRight,
  ArrowDownRight,
  Trash2,
  Menu,
  X,
  Shield,
  ShieldOff,
  CreditCard,
  UserCog,
} from 'lucide-react';

interface AdminEvent {
  id: string;
  name: string;
  description: string;
  eventType: string;
  status: string;
  guests: number;
  photos: number;
  createdAt: Timestamp;
  hostId: string;
  hostName: string;
  startDate: Timestamp;
  endDate: Timestamp;
  revealDate: Timestamp | null;
  coverPhoto: string | null;
  qrCode: string;
  isPrivate: boolean;
  allowGuestSharing: boolean;
  requireHostApproval: boolean;
  maxPhotosPerGuest: number;
}

interface AdminPhoto {
  id: string;
  eventId: string;
  eventName: string;
  uploadedBy: string;
  url: string;
  guestName: string;
  approvalStatus: string;
  createdAt: Timestamp;
}

interface AdminGuest {
  id: string;
  displayName: string;
  eventId: string;
  eventName: string;
  photosUploaded: number;
  joinedAt: Timestamp;
  role: string;
}

const statusColors: Record<string, string> = {
  active: 'text-emerald-400 bg-emerald-950/50 border-emerald-800',
  upcoming: 'text-amber-400 bg-amber-950/50 border-amber-800',
  ended: 'text-zinc-400 bg-zinc-900/50 border-zinc-700',
  pending: 'text-orange-400 bg-orange-950/50 border-orange-800',
};

const roleColors: Record<string, string> = {
  host: 'text-blue-400 bg-blue-950/50 border-blue-800',
  uploader: 'text-emerald-400 bg-emerald-950/50 border-emerald-800',
  viewer: 'text-zinc-400 bg-zinc-900/50 border-zinc-700',
};

const typeEmojis: Record<string, string> = {
  wedding: '💍',
  birthday: '🎂',
  trip: '✈️',
  party: '🎉',
  corporate: '🏢',
  other: '📸',
};

function formatDate(ts: Timestamp | undefined) {
  if (!ts) return 'N/A';
  const d = ts.toDate();
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
}

function timeAgo(ts: Timestamp | undefined) {
  if (!ts) return 'N/A';
  const seconds = Math.floor((Date.now() - ts.toDate().getTime()) / 1000);
  if (seconds < 60) return `${seconds}s ago`;
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes}m ago`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  return `${days}d ago`;
}

export default function AdminDashboard() {
  const router = useRouter();
  const { user, loading: authLoading, isAdmin } = useAuth();
  const { lang } = useLanguage();
  const [activeTab, setActiveTab] = useState('overview');
  const [searchQuery, setSearchQuery] = useState('');

  // Real data states
  const [events, setEvents] = useState<AdminEvent[]>([]);
  const [pendingPhotos, setPendingPhotos] = useState<AdminPhoto[]>([]);
  const [guests, setGuests] = useState<AdminGuest[]>([]);
  const [dataLoading, setDataLoading] = useState(true);
  const [selectedEvent, setSelectedEvent] = useState<AdminEvent | null>(null);
  const [selectedPhotos, setSelectedPhotos] = useState<string[]>([]);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // Users & Payments
  const [allUsers, setAllUsers] = useState<any[]>([]);
  const [usersLoading, setUsersLoading] = useState(false);
  const [payments, setPayments] = useState<any[]>([]);
  const [paymentsLoading, setPaymentsLoading] = useState(false);
  const [promotingUid, setPromotingUid] = useState<string | null>(null);

  useEffect(() => {
    if (!authLoading) {
      if (!user) {
        router.push('/auth?redirect=/admin');
      } else if (!isAdmin) {
        router.push('/dashboard');
      }
    }
  }, [user, authLoading, isAdmin, router]);

  // Fetch events
  useEffect(() => {
    if (!user || !isAdmin) return;
    setDataLoading(true);
    const q = query(collection(db, 'events'), orderBy('createdAt', 'desc'));
    const unsub = onSnapshot(q, (snapshot) => {
      const eventsData = snapshot.docs.map((docSnap) => {
        const d = docSnap.data();
        return {
          id: docSnap.id,
          name: d.name || 'Untitled',
          description: d.description || '',
          eventType: d.eventType || 'other',
          status: d.status || 'active',
          guests: d.guests || 0,
          photos: d.photos || 0,
          createdAt: d.createdAt,
          hostId: d.hostId || '',
          hostName: d.hostName || '',
          startDate: d.startDate,
          endDate: d.endDate,
          revealDate: d.revealDate || null,
          coverPhoto: d.coverPhoto || null,
          qrCode: d.qrCode || docSnap.id,
          isPrivate: d.isPrivate !== false,
          allowGuestSharing: d.allowGuestSharing !== false,
          requireHostApproval: d.requireHostApproval === true,
          maxPhotosPerGuest: d.maxPhotosPerGuest || 10,
        } as AdminEvent;
      });
      setEvents(eventsData);
      if (eventsData.length === 0) setDataLoading(false);
    });
    return () => unsub();
  }, [user, isAdmin]);

  // Fetch pending photos across all events with proper cleanup
  useEffect(() => {
    if (!user || !isAdmin || events.length === 0) return;
    const pendingMap = new Map<string, AdminPhoto>();
    const unsubscribers: (() => void)[] = [];

    events.forEach((event) => {
      const photosRef = collection(db, 'events', event.id, 'photos');
      const unsub = onSnapshot(photosRef, (photoSnap) => {
        photoSnap.docChanges().forEach((change) => {
          const pd = change.doc.data();
          const key = `${event.id}-${change.doc.id}`;
          if (change.type === 'removed' || pd.approvalStatus !== 'pending') {
            pendingMap.delete(key);
          } else {
            pendingMap.set(key, {
              id: change.doc.id,
              eventId: event.id,
              eventName: event.name,
              uploadedBy: pd.uploadedBy || '',
              url: pd.url || '',
              guestName: pd.guestName || 'Guest',
              approvalStatus: pd.approvalStatus,
              createdAt: pd.createdAt,
            });
          }
        });
        const sorted = Array.from(pendingMap.values()).sort(
          (a, b) => (b.createdAt?.seconds || 0) - (a.createdAt?.seconds || 0)
        );
        setPendingPhotos(sorted);
        setDataLoading(false);
      });
      unsubscribers.push(unsub);
    });

    return () => {
      unsubscribers.forEach((u) => u());
    };
  }, [user, isAdmin, events]);

  // Fetch guests across all events with proper cleanup
  useEffect(() => {
    if (!user || !isAdmin || events.length === 0) return;
    const guestMap = new Map<string, AdminGuest>();
    const unsubscribers: (() => void)[] = [];

    events.forEach((event) => {
      const guestsRef = collection(db, 'events', event.id, 'guests');
      const unsub = onSnapshot(guestsRef, (guestSnap) => {
        guestSnap.docChanges().forEach((change) => {
          const gd = change.doc.data();
          const key = `${event.id}-${change.doc.id}`;
          if (change.type === 'removed') {
            guestMap.delete(key);
          } else {
            guestMap.set(key, {
              id: change.doc.id,
              displayName: gd.displayName || 'Guest',
              eventId: event.id,
              eventName: event.name,
              photosUploaded: gd.photosUploaded || 0,
              joinedAt: gd.joinedAt,
              role: gd.role || 'uploader',
            });
          }
        });
        const sorted = Array.from(guestMap.values()).sort(
          (a, b) => (b.joinedAt?.seconds || 0) - (a.joinedAt?.seconds || 0)
        );
        setGuests(sorted);
      });
      unsubscribers.push(unsub);
    });

    return () => {
      unsubscribers.forEach((u) => u());
    };
  }, [user, isAdmin, events]);

  const handleApprove = async (photoId: string, eventId: string) => {
    try {
      const reviewFn = callFunction('reviewPhoto');
      await reviewFn({ eventId, photoId, action: 'approve' });
      toast({ title: t(lang, 'approve') + 'd', variant: 'success' });
    } catch (err: any) {
      toast({ title: err.message || 'Failed to approve', variant: 'destructive' });
    }
  };

  const handleReject = async (photoId: string, eventId: string) => {
    try {
      const reviewFn = callFunction('reviewPhoto');
      await reviewFn({ eventId, photoId, action: 'reject' });
      toast({ title: t(lang, 'reject') + 'ed', variant: 'success' });
    } catch (err: any) {
      toast({ title: err.message || 'Failed to reject', variant: 'destructive' });
    }
  };

  const handleBulkApprove = async () => {
    if (selectedPhotos.length === 0) return;
    try {
      const reviewFn = callFunction('reviewPhoto');
      await Promise.all(
        selectedPhotos.map((photoId) => {
          const photo = pendingPhotos.find((p) => p.id === photoId);
          if (photo) {
            return reviewFn({ eventId: photo.eventId, photoId, action: 'approve' });
          }
          return Promise.resolve();
        })
      );
      toast({ title: `${selectedPhotos.length} photos approved`, variant: 'success' });
      setSelectedPhotos([]);
    } catch (err: any) {
      toast({ title: err.message || 'Failed to approve photos', variant: 'destructive' });
    }
  };

  const handleBulkReject = async () => {
    if (selectedPhotos.length === 0) return;
    try {
      const reviewFn = callFunction('reviewPhoto');
      await Promise.all(
        selectedPhotos.map((photoId) => {
          const photo = pendingPhotos.find((p) => p.id === photoId);
          if (photo) {
            return reviewFn({ eventId: photo.eventId, photoId, action: 'reject' });
          }
          return Promise.resolve();
        })
      );
      toast({ title: `${selectedPhotos.length} photos rejected`, variant: 'success' });
      setSelectedPhotos([]);
    } catch (err: any) {
      toast({ title: err.message || 'Failed to reject photos', variant: 'destructive' });
    }
  };

  const handleRemoveGuest = async (guestId: string, eventId: string) => {
    try {
      const removeFn = callFunction('removeGuest');
      await removeFn({ eventId, guestId });
      toast({ title: 'Guest removed', variant: 'success' });
    } catch (err: any) {
      toast({ title: err.message || 'Failed to remove guest', variant: 'destructive' });
    }
  };

  const totalPhotos = events.reduce((sum, e) => sum + (e.photos || 0), 0);
  const totalGuests = events.reduce((sum, e) => sum + (e.guests || 0), 0);

  // Load users when tab becomes active
  useEffect(() => {
    if (activeTab !== 'users' || !user || !isAdmin) return;
    if (allUsers.length > 0) return;
    setUsersLoading(true);
    getDocs(query(collection(db, 'users'), orderBy('createdAt', 'desc'))).then((snap) => {
      const users = snap.docs.map((d) => {
        const data = d.data();
        return {
          uid: d.id,
          phoneNumber: data.phoneNumber || '',
          displayName: data.displayName || null,
          isAdmin: data.isAdmin || false,
          createdAt: data.createdAt || null,
          passwordSet: data.passwordSet || false,
        };
      });
      setAllUsers(users);
    }).catch((err: any) => {
      toast({ title: err.message || 'Failed to load users', variant: 'destructive' });
    }).finally(() => setUsersLoading(false));
  }, [activeTab, user, isAdmin]);

  // Load payments when tab becomes active
  useEffect(() => {
    if (activeTab !== 'payments' || !user || !isAdmin) return;
    if (payments.length > 0) return;
    setPaymentsLoading(true);
    getDocs(query(collection(db, 'payments'), orderBy('createdAt', 'desc'), firestoreLimit(100))).then((snap) => {
      const items = snap.docs.map((d) => ({ id: d.id, ...d.data() }));
      setPayments(items);
    }).catch((err: any) => {
      toast({ title: err.message || 'Failed to load payments', variant: 'destructive' });
    }).finally(() => setPaymentsLoading(false));
  }, [activeTab, user, isAdmin]);

  const handleToggleAdmin = async (targetUid: string, currentlyAdmin: boolean) => {
    if (!confirm(currentlyAdmin ? 'Remove admin role from this user?' : 'Grant admin role to this user?')) return;
    setPromotingUid(targetUid);
    try {
      await setDoc(doc(db, 'users', targetUid), { isAdmin: !currentlyAdmin }, { merge: true });
      setAllUsers((prev) => prev.map((u) => u.uid === targetUid ? { ...u, isAdmin: !currentlyAdmin } : u));
      toast({ title: currentlyAdmin ? 'Admin role removed' : 'Admin role granted', variant: 'success' });
    } catch (err: any) {
      toast({ title: err.message || 'Failed', variant: 'destructive' });
    } finally {
      setPromotingUid(null);
    }
  };

  if (authLoading || dataLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <Loader2 className="h-8 w-8 animate-spin text-zinc-500" />
      </div>
    );
  }

  if (!user || !isAdmin) return null;

  const tabs = [
    { id: 'overview', label: t(lang, 'overview'), icon: LayoutDashboard },
    { id: 'events', label: t(lang, 'events'), icon: Calendar },
    { id: 'photos', label: t(lang, 'approvalQueue'), icon: ImageIcon },
    { id: 'guests', label: t(lang, 'guests'), icon: Users },
    { id: 'users', label: lang === 'ar' ? 'المستخدمون' : 'Users', icon: UserCog },
    { id: 'payments', label: lang === 'ar' ? 'المدفوعات' : 'Payments', icon: CreditCard },
    { id: 'analytics', label: t(lang, 'analytics'), icon: BarChart3 },
    { id: 'settings', label: 'System', icon: Settings },
  ];

  return (
    <div className="min-h-screen bg-background text-white" dir={lang === 'ar' ? 'rtl' : 'ltr'}>
      {/* Sidebar + Header */}
      <div className="flex">
        {/* Sidebar */}
        {/* Mobile overlay */}
        {mobileMenuOpen && (
          <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm lg:hidden" onClick={() => setMobileMenuOpen(false)} />
        )}
        <aside className={`w-64 min-h-screen border-zinc-800/50 bg-background fixed top-0 z-50 transition-transform duration-200 ${lang === 'ar' ? 'right-0 border-l' : 'left-0 border-r'} ${mobileMenuOpen ? 'translate-x-0' : lang === 'ar' ? 'translate-x-full' : '-translate-x-full'} lg:translate-x-0 lg:block`}>
          <div className="p-6">
            <Link href="/" className="text-xl font-bold tracking-tight">
              Momira <span className="text-zinc-500 text-sm font-normal">Admin</span>
            </Link>
          </div>
          <nav className="px-3 space-y-1">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => { setActiveTab(tab.id); setMobileMenuOpen(false); }}
                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors ${
                  activeTab === tab.id
                    ? 'bg-zinc-800 text-white'
                    : 'text-zinc-400 hover:text-white hover:bg-zinc-800/50'
                }`}
              >
                <tab.icon className="h-4 w-4" />
                {tab.label}
                {tab.id === 'photos' && pendingPhotos.length > 0 && (
                  <span className="ms-auto bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full">
                    {pendingPhotos.length}
                  </span>
                )}
              </button>
            ))}
          </nav>
          <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-zinc-800/50">
            <Link
              href="/event/create"
              className="flex items-center justify-center gap-2 w-full h-10 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-xl text-sm font-medium hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md shadow-indigo-500/20"
            >
              <Plus className="h-4 w-4" />
              {t(lang, 'newEvent')}
            </Link>
          </div>
        </aside>

        {/* Main Content */}
        <main className={`flex-1 ${lang === 'ar' ? 'lg:mr-64' : 'lg:ml-64'}`}>
          {/* Top bar */}
          <header className="sticky top-0 z-30 border-b border-zinc-800/50 bg-background/80 backdrop-blur-md">
            <div className="flex items-center justify-between h-16 px-6">
              <div className="flex items-center gap-4 lg:hidden">
                <button onClick={() => setMobileMenuOpen(true)} className="h-9 w-9 rounded-lg bg-zinc-800 flex items-center justify-center hover:bg-zinc-700 transition-colors">
                  <Menu className="h-5 w-5" />
                </button>
                <Link href="/" className="text-lg font-bold">Momira</Link>
              </div>
              <div className="hidden sm:flex items-center gap-3 flex-1 max-w-md ms-8">
                <Search className="h-4 w-4 text-zinc-500 absolute ms-3 pointer-events-none" />
                <input
                  type="text"
                  placeholder="Search events, guests, photos..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full h-10 ps-10 pe-4 bg-zinc-900/50 border border-zinc-800 rounded-xl text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-zinc-600"
                />
              </div>
              <div className="flex items-center gap-3">
                <Link href="/dashboard" className="text-sm text-zinc-400 hover:text-white transition-colors">
                  Back to App
                </Link>
                <Link
                  href="/settings"
                  className="h-8 px-3 rounded-full bg-zinc-800 flex items-center justify-center text-xs font-medium hover:bg-zinc-700 transition-colors"
                >
                  {user?.phoneNumber || 'Admin'}
                </Link>
              </div>
            </div>
          </header>

          <div className="p-6 max-w-7xl mx-auto">
            {/* Overview Tab */}
            {activeTab === 'overview' && (
              <div className="space-y-6">
                {/* Stats */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                  {[
                  { label: t(lang, 'totalEvents'), value: events.length, change: '+0%', up: true, icon: Calendar },
                  { label: t(lang, 'totalPhotos'), value: totalPhotos.toLocaleString(), change: '+0%', up: true, icon: ImageIcon },
                  { label: t(lang, 'activeGuests'), value: totalGuests.toLocaleString(), change: '+0%', up: true, icon: Users },
                  { label: t(lang, 'pendingPhotos'), value: pendingPhotos.length, change: '+0%', up: true, icon: Clock },
                ].map((stat) => (
                    <div
                      key={stat.label}
                      className="p-5 rounded-2xl border border-zinc-800/50 bg-zinc-900/20"
                    >
                      <div className="flex items-center justify-between mb-3">
                        <div className="h-10 w-10 rounded-xl bg-zinc-800 flex items-center justify-center">
                          <stat.icon className="h-5 w-5 text-zinc-400" />
                        </div>
                        <span
                          className={`flex items-center gap-1 text-xs font-medium ${
                            stat.up ? 'text-emerald-400' : 'text-red-400'
                          }`}
                        >
                          {stat.up ? <ArrowUpRight className="h-3 w-3" /> : <ArrowDownRight className="h-3 w-3" />}
                          {stat.change}
                        </span>
                      </div>
                      <div className="text-2xl font-bold">{stat.value}</div>
                      <div className="text-sm text-zinc-500 mt-0.5">{stat.label}</div>
                    </div>
                  ))}
                </div>

                {/* Duplicate Detection */}
                {(() => {
                  const duplicates: AdminPhoto[][] = [];
                  const grouped = new Map<string, AdminPhoto[]>();
                  pendingPhotos.forEach((p) => {
                    const key = `${p.eventId}_${p.uploadedBy}`;
                    if (!grouped.has(key)) grouped.set(key, []);
                    grouped.get(key)!.push(p);
                  });
                  grouped.forEach((group) => {
                    group.sort((a, b) => (b.createdAt?.seconds || 0) - (a.createdAt?.seconds || 0));
                    for (let i = 0; i < group.length - 1; i++) {
                      const batch: AdminPhoto[] = [group[i]];
                      for (let j = i + 1; j < group.length; j++) {
                        const diff = (group[i].createdAt?.seconds || 0) - (group[j].createdAt?.seconds || 0);
                        if (diff <= 300) batch.push(group[j]);
                        else break;
                      }
                      if (batch.length > 1) duplicates.push(batch);
                      i += batch.length - 1;
                    }
                  });
                  if (duplicates.length === 0) return null;
                  return (
                    <div className="rounded-2xl border border-red-900/30 bg-red-950/10 p-5">
                      <div className="flex items-center gap-2 mb-3">
                        <AlertCircle className="h-4 w-4 text-red-400" />
                        <h3 className="font-semibold text-red-300">Potential Duplicates</h3>
                        <span className="bg-red-500/10 text-red-400 text-xs font-medium px-2 py-0.5 rounded-full">{duplicates.length} groups</span>
                      </div>
                      <div className="space-y-3">
                          {duplicates.slice(0, 3).map((group, idx) => (
                            <div key={idx} className="flex items-center gap-2 overflow-x-auto">
                              {group.map((p) => (
                                <img key={p.id} src={p.url} alt="" className="h-16 w-16 rounded-lg object-cover border border-red-900/30" />
                              ))}
                              <span className="text-xs text-red-400 whitespace-nowrap">{group.length} photos &lt; 5min</span>
                            </div>
                          ))}
                        </div>
                    </div>
                  );
                })()}

                {/* Two columns: Approval Queue + Recent Guests */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  {/* Approval Queue */}
                  <div className="rounded-2xl border border-zinc-800/50 bg-zinc-900/20">
                    <div className="flex items-center justify-between p-5 border-b border-zinc-800/50">
                      <div className="flex items-center gap-2">
                        <Clock className="h-4 w-4 text-amber-400" />
                        <h3 className="font-semibold">{t(lang, 'approvalQueue')}</h3>
                        <span className="bg-amber-500/10 text-amber-400 text-xs font-medium px-2 py-0.5 rounded-full">
                          {pendingPhotos.length} {t(lang, 'pending').toLowerCase()}
                        </span>
                      </div>
                      <button
                        onClick={() => setActiveTab('photos')}
                        className="text-xs text-zinc-400 hover:text-white transition-colors"
                      >
                        View All
                      </button>
                    </div>
                    <div className="divide-y divide-zinc-800/50">
                      {pendingPhotos.slice(0, 3).map((photo) => (
                        <div key={photo.id} className="flex items-center gap-3 p-4 hover:bg-zinc-800/20 transition-colors">
                          <img
                            src={photo.url}
                            alt=""
                            className="h-12 w-12 rounded-lg object-cover"
                          />
                          <div className="flex-1 min-w-0">
                            <div className="text-sm font-medium truncate">{photo.eventName}</div>
                            <div className="text-xs text-zinc-500">{photo.guestName} · {timeAgo(photo.createdAt)}</div>
                          </div>
                          <div className="flex items-center gap-1">
                            <button
                              onClick={() => handleApprove(photo.id, photo.eventId)}
                              className="h-8 w-8 rounded-lg bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 flex items-center justify-center transition-colors"
                            >
                              <CheckCircle className="h-4 w-4" />
                            </button>
                            <button
                              onClick={() => handleReject(photo.id, photo.eventId)}
                              className="h-8 w-8 rounded-lg bg-red-500/10 text-red-400 hover:bg-red-500/20 flex items-center justify-center transition-colors"
                            >
                              <XCircle className="h-4 w-4" />
                            </button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Recent Guests */}
                  <div className="rounded-2xl border border-zinc-800/50 bg-zinc-900/20">
                    <div className="flex items-center justify-between p-5 border-b border-zinc-800/50">
                      <div className="flex items-center gap-2">
                        <Users className="h-4 w-4 text-violet-400" />
                        <h3 className="font-semibold">{t(lang, 'recentGuests')}</h3>
                      </div>
                      <button
                        onClick={() => setActiveTab('guests')}
                        className="text-xs text-zinc-400 hover:text-white transition-colors"
                      >
                        View All
                      </button>
                    </div>
                    <div className="divide-y divide-zinc-800/50">
                      {guests.map((guest, i) => (
                        <div key={i} className="flex items-center gap-3 p-4 hover:bg-zinc-800/20 transition-colors">
                          <div className="h-10 w-10 rounded-full bg-zinc-800 flex items-center justify-center text-sm font-medium shrink-0">
                            {guest.displayName.charAt(0)}
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="text-sm font-medium">{guest.displayName}</div>
                            <div className="text-xs text-zinc-500 truncate">{guest.eventName}</div>
                          </div>
                          <div className="text-end">
                            <div className="text-xs text-zinc-400">{guest.photosUploaded} photos</div>
                            <div className="text-[10px] text-zinc-600">{timeAgo(guest.joinedAt)}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Recent Events */}
                <div className="rounded-2xl border border-zinc-800/50 bg-zinc-900/20">
                  <div className="flex items-center justify-between p-5 border-b border-zinc-800/50">
                    <div className="flex items-center gap-2">
                      <Calendar className="h-4 w-4 text-blue-400" />
                      <h3 className="font-semibold">Recent Events</h3>
                    </div>
                    <button
                      onClick={() => setActiveTab('events')}
                      className="text-xs text-zinc-400 hover:text-white transition-colors"
                    >
                      View All
                    </button>
                  </div>
                  <div className="overflow-x-auto">
                    <table className="w-full">
                      <thead>
                        <tr className="text-xs text-zinc-500 border-b border-zinc-800/50">
                          <th className="text-start font-medium px-5 py-3">Event</th>
                          <th className="text-start font-medium px-5 py-3">Host</th>
                          <th className="text-start font-medium px-5 py-3">Date</th>
                          <th className="text-start font-medium px-5 py-3">Guests</th>
                          <th className="text-start font-medium px-5 py-3">Photos</th>
                          <th className="text-start font-medium px-5 py-3">Status</th>
                          <th className="text-end font-medium px-5 py-3">Actions</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-zinc-800/50">
                        {events.slice(0, 5).map((event) => (
                          <tr key={event.id} className="hover:bg-zinc-800/20 transition-colors">
                            <td className="px-5 py-3">
                              <div className="flex items-center gap-3">
                                <span className="text-lg">{typeEmojis[event.eventType]}</span>
                                <span className="text-sm font-medium">{event.name}</span>
                              </div>
                            </td>
                            <td className="px-5 py-3 text-sm text-zinc-400">{event.hostId}</td>
                            <td className="px-5 py-3 text-sm text-zinc-400">{formatDate(event.createdAt)}</td>
                            <td className="px-5 py-3 text-sm">{event.guests}</td>
                            <td className="px-5 py-3 text-sm">{event.photos}</td>
                            <td className="px-5 py-3">
                              <span className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border ${statusColors[event.status]}`}>
                                {event.status}
                              </span>
                            </td>
                            <td className="px-5 py-3 text-end">
                              <button
                                onClick={() => setSelectedEvent(event)}
                                className="inline-flex items-center gap-1 text-xs text-zinc-400 hover:text-white transition-colors"
                                title="View event"
                              >
                                <Eye className="h-3.5 w-3.5" />
                                View
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            )}

            {/* Events Tab */}
            {activeTab === 'events' && (
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h2 className="text-xl font-bold">{t(lang, 'allEvents')}</h2>
                  <div className="flex items-center gap-2">
                    <button className="inline-flex items-center gap-2 h-9 px-4 rounded-xl border border-zinc-800 text-sm text-zinc-400 hover:text-white hover:border-zinc-600 transition-colors">
                      <Filter className="h-4 w-4" />
                      Filter
                    </button>
                    <button className="inline-flex items-center gap-2 h-9 px-4 rounded-xl border border-zinc-800 text-sm text-zinc-400 hover:text-white hover:border-zinc-600 transition-colors">
                      <Download className="h-4 w-4" />
                      Export
                    </button>
                  </div>
                </div>
                <div className="rounded-2xl border border-zinc-800/50 bg-zinc-900/20 overflow-hidden">
                  <table className="w-full">
                    <thead>
                      <tr className="text-xs text-zinc-500 border-b border-zinc-800/50 bg-zinc-900/40">
                        <th className="text-start font-medium px-5 py-3">Event</th>
                        <th className="text-start font-medium px-5 py-3">Host</th>
                        <th className="text-start font-medium px-5 py-3">Date</th>
                        <th className="text-start font-medium px-5 py-3">Guests</th>
                        <th className="text-start font-medium px-5 py-3">Photos</th>
                        <th className="text-start font-medium px-5 py-3">Status</th>
                        <th className="text-end font-medium px-5 py-3">Actions</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-zinc-800/50">
                      {events.map((event) => (
                        <tr key={event.id} className="hover:bg-zinc-800/20 transition-colors">
                          <td className="px-5 py-4">
                            <div className="flex items-center gap-3">
                              <span className="text-lg">{typeEmojis[event.eventType]}</span>
                              <div>
                                <div className="text-sm font-medium">{event.name}</div>
                                <div className="text-xs text-zinc-500">{event.id}</div>
                              </div>
                            </div>
                          </td>
                          <td className="px-5 py-4 text-sm text-zinc-400">{event.hostId}</td>
                          <td className="px-5 py-4 text-sm text-zinc-400">{formatDate(event.createdAt)}</td>
                          <td className="px-5 py-4 text-sm">{event.guests}</td>
                          <td className="px-5 py-4 text-sm">{event.photos}</td>
                          <td className="px-5 py-4">
                            <span className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border ${statusColors[event.status]}`}>
                              {event.status}
                            </span>
                          </td>
                          <td className="px-5 py-4 text-end">
                            <div className="flex items-center justify-end gap-2">
                              <button
                                onClick={() => setSelectedEvent(event)}
                                className="inline-flex items-center gap-1 text-xs text-zinc-400 hover:text-white transition-colors"
                                title="View event"
                              >
                                <Eye className="h-3.5 w-3.5" />
                              </button>
                              <button
                                onClick={() => setSelectedEvent(event)}
                                className="inline-flex items-center gap-1 text-xs text-zinc-400 hover:text-white transition-colors"
                                title="Edit event"
                              >
                                <Settings className="h-3.5 w-3.5" />
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}

            {/* Photos Tab */}
            {activeTab === 'photos' && (
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h2 className="text-xl font-bold">{t(lang, 'photoApproval')}</h2>
                  {selectedPhotos.length > 0 && (
                    <div className="flex items-center gap-2">
                      <span className="text-sm text-zinc-400">{selectedPhotos.length} selected</span>
                      <button
                        onClick={handleBulkApprove}
                        className="inline-flex items-center gap-2 h-9 px-4 rounded-xl bg-emerald-600 text-white text-sm hover:bg-emerald-700 transition-colors"
                      >
                        <CheckCircle className="h-4 w-4" />
                        Approve All
                      </button>
                      <button
                        onClick={handleBulkReject}
                        className="inline-flex items-center gap-2 h-9 px-4 rounded-xl bg-red-600 text-white text-sm hover:bg-red-700 transition-colors"
                      >
                        <XCircle className="h-4 w-4" />
                        Reject All
                      </button>
                    </div>
                  )}
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                  {pendingPhotos.map((photo) => (
                    <div key={photo.id} className={`rounded-2xl border bg-zinc-900/20 overflow-hidden group ${selectedPhotos.includes(photo.id) ? 'border-emerald-500 ring-1 ring-emerald-500' : 'border-zinc-800/50'}`}>
                      <div className="relative aspect-square">
                        <input
                          type="checkbox"
                          checked={selectedPhotos.includes(photo.id)}
                          onChange={(e) => {
                            if (e.target.checked) {
                              setSelectedPhotos([...selectedPhotos, photo.id]);
                            } else {
                              setSelectedPhotos(selectedPhotos.filter(id => id !== photo.id));
                            }
                          }}
                          className="absolute top-3 left-3 h-5 w-5 rounded border-zinc-600 bg-zinc-900 text-emerald-500 focus:ring-emerald-500 focus:ring-offset-0 z-10 cursor-pointer"
                        />
                        <img
                          src={photo.url}
                          alt=""
                          className="w-full h-full object-cover"
                        />
                        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                          <button
                            onClick={() => handleApprove(photo.id, photo.eventId)}
                            className="h-10 w-10 rounded-full bg-emerald-500 text-white flex items-center justify-center hover:bg-emerald-600 transition-colors"
                          >
                            <CheckCircle className="h-5 w-5" />
                          </button>
                          <button
                            onClick={() => handleReject(photo.id, photo.eventId)}
                            className="h-10 w-10 rounded-full bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition-colors"
                          >
                            <XCircle className="h-5 w-5" />
                          </button>
                        </div>
                      </div>
                      <div className="p-4">
                        <div className="text-sm font-medium truncate">{photo.eventName}</div>
                        <div className="text-xs text-zinc-500 mt-0.5">{photo.guestName} · {timeAgo(photo.createdAt)}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Guests Tab */}
            {activeTab === 'guests' && (
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h2 className="text-xl font-bold">{t(lang, 'guestManagement')}</h2>
                  <button className="inline-flex items-center gap-2 h-9 px-4 rounded-xl border border-zinc-800 text-sm text-zinc-400 hover:text-white hover:border-zinc-600 transition-colors">
                    <Download className="h-4 w-4" />
                    Export
                  </button>
                </div>
                <div className="rounded-2xl border border-zinc-800/50 bg-zinc-900/20 overflow-hidden">
                  <table className="w-full">
                    <thead>
                      <tr className="text-xs text-zinc-500 border-b border-zinc-800/50 bg-zinc-900/40">
                        <th className="text-start font-medium px-5 py-3">Guest</th>
                        <th className="text-start font-medium px-5 py-3">Event</th>
                        <th className="text-start font-medium px-5 py-3">Joined</th>
                        <th className="text-start font-medium px-5 py-3">Photos</th>
                        <th className="text-start font-medium px-5 py-3">Status</th>
                        <th className="text-end font-medium px-5 py-3">Actions</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-zinc-800/50">
                      {guests.map((guest, i) => (
                        <tr key={i} className="hover:bg-zinc-800/20 transition-colors">
                          <td className="px-5 py-4">
                            <div className="flex items-center gap-3">
                              <div className="h-9 w-9 rounded-full bg-zinc-800 flex items-center justify-center text-sm font-medium">
                                {guest.displayName.charAt(0)}
                              </div>
                              <span className="text-sm font-medium">{guest.displayName}</span>
                            </div>
                          </td>
                          <td className="px-5 py-4 text-sm text-zinc-400">{guest.eventName}</td>
                          <td className="px-5 py-4 text-sm text-zinc-400">{timeAgo(guest.joinedAt)}</td>
                          <td className="px-5 py-4 text-sm">{guest.photosUploaded}</td>
                          <td className="px-5 py-4">
                            <span className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border ${roleColors[guest.role] || statusColors[guest.role] || 'text-zinc-400 bg-zinc-900/50 border-zinc-700'}`}>
                              {guest.role}
                            </span>
                          </td>
                          <td className="px-5 py-4 text-end">
                            <button
                              onClick={() => handleRemoveGuest(guest.id, guest.eventId)}
                              className="inline-flex items-center gap-1 text-xs text-red-400 hover:text-red-300 transition-colors"
                              title="Remove guest"
                            >
                              <Trash2 className="h-4 w-4" />
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}

            {/* Event Detail Modal */}
            {selectedEvent && (
              <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm overflow-y-auto">
                <div className="w-full max-w-2xl rounded-2xl border border-zinc-800 bg-zinc-900 p-6 space-y-4 my-8">
                  <div className="flex items-center justify-between">
                    <div>
                      <h3 className="text-xl font-bold">{selectedEvent.name}</h3>
                      {selectedEvent.description && (
                        <p className="text-sm text-zinc-500 mt-1">{selectedEvent.description}</p>
                      )}
                    </div>
                    <button
                      onClick={() => setSelectedEvent(null)}
                      className="h-8 w-8 rounded-lg bg-zinc-800 flex items-center justify-center text-zinc-400 hover:text-white transition-colors"
                    >
                      <XCircle className="h-4 w-4" />
                    </button>
                  </div>

                  {/* Cover Photo */}
                  {selectedEvent.coverPhoto && (
                    <div className="rounded-xl overflow-hidden">
                      <img src={selectedEvent.coverPhoto} alt="Cover" className="w-full h-40 object-cover" />
                    </div>
                  )}

                  {/* Core Info */}
                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                    <div className="p-3 rounded-xl bg-zinc-800/50">
                      <div className="text-xs text-zinc-500">Type</div>
                      <div className="text-sm font-medium">{typeEmojis[selectedEvent.eventType]} {selectedEvent.eventType}</div>
                    </div>
                    <div className="p-3 rounded-xl bg-zinc-800/50">
                      <div className="text-xs text-zinc-500">Status</div>
                      <span className={`text-xs ${statusColors[selectedEvent.status] || 'text-zinc-400'}`}>{selectedEvent.status}</span>
                    </div>
                    <div className="p-3 rounded-xl bg-zinc-800/50">
                      <div className="text-xs text-zinc-500">Guests</div>
                      <div className="text-sm font-medium">{selectedEvent.guests}</div>
                    </div>
                    <div className="p-3 rounded-xl bg-zinc-800/50">
                      <div className="text-xs text-zinc-500">Photos</div>
                      <div className="text-sm font-medium">{selectedEvent.photos}</div>
                    </div>
                    <div className="p-3 rounded-xl bg-zinc-800/50">
                      <div className="text-xs text-zinc-500">Max Photos/Guest</div>
                      <div className="text-sm font-medium">{selectedEvent.maxPhotosPerGuest}</div>
                    </div>
                    <div className="p-3 rounded-xl bg-zinc-800/50">
                      <div className="text-xs text-zinc-500">Approval</div>
                      <div className="text-sm font-medium">{selectedEvent.requireHostApproval ? 'Required' : 'Auto'}</div>
                    </div>
                  </div>

                  {/* Dates */}
                  <div className="space-y-2">
                    <h4 className="text-sm font-semibold text-zinc-300">Dates</h4>
                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                      <div className="p-3 rounded-xl bg-zinc-800/50">
                        <div className="text-xs text-zinc-500">Start Date</div>
                        <div className="text-sm font-medium">{formatDate(selectedEvent.startDate)}</div>
                      </div>
                      <div className="p-3 rounded-xl bg-zinc-800/50">
                        <div className="text-xs text-zinc-500">End Date</div>
                        <div className="text-sm font-medium">{formatDate(selectedEvent.endDate)}</div>
                      </div>
                      <div className="p-3 rounded-xl bg-zinc-800/50">
                        <div className="text-xs text-zinc-500">Reveal Date</div>
                        <div className="text-sm font-medium">{selectedEvent.revealDate ? formatDate(selectedEvent.revealDate) : 'None'}</div>
                      </div>
                    </div>
                  </div>

                  {/* Settings */}
                  <div className="space-y-2">
                    <h4 className="text-sm font-semibold text-zinc-300">Settings</h4>
                    <div className="grid grid-cols-2 gap-3">
                      <div className="p-3 rounded-xl bg-zinc-800/50 flex items-center justify-between">
                        <span className="text-xs text-zinc-500">Private Event</span>
                        <span className={`text-xs font-medium ${selectedEvent.isPrivate ? 'text-emerald-400' : 'text-zinc-500'}`}>{selectedEvent.isPrivate ? 'Yes' : 'No'}</span>
                      </div>
                      <div className="p-3 rounded-xl bg-zinc-800/50 flex items-center justify-between">
                        <span className="text-xs text-zinc-500">Guest Sharing</span>
                        <span className={`text-xs font-medium ${selectedEvent.allowGuestSharing ? 'text-emerald-400' : 'text-zinc-500'}`}>{selectedEvent.allowGuestSharing ? 'On' : 'Off'}</span>
                      </div>
                    </div>
                  </div>

                  {/* IDs */}
                  <div className="space-y-2">
                    <h4 className="text-sm font-semibold text-zinc-300">Identifiers</h4>
                    <div className="grid grid-cols-1 gap-2">
                      <div className="p-3 rounded-xl bg-zinc-800/50 flex items-center justify-between">
                        <div>
                          <div className="text-xs text-zinc-500">Event ID</div>
                          <div className="text-sm font-mono">{selectedEvent.id}</div>
                        </div>
                        <button
                          onClick={() => { navigator.clipboard.writeText(selectedEvent.id); toast({ title: 'Copied!', variant: 'success' }); }}
                          className="h-7 px-2 rounded-lg bg-zinc-700 text-xs hover:bg-zinc-600 transition-colors"
                        >Copy</button>
                      </div>
                      <div className="p-3 rounded-xl bg-zinc-800/50 flex items-center justify-between">
                        <div>
                          <div className="text-xs text-zinc-500">QR Code</div>
                          <div className="text-sm font-mono">{selectedEvent.qrCode}</div>
                        </div>
                        <button
                          onClick={() => { navigator.clipboard.writeText(selectedEvent.qrCode); toast({ title: 'Copied!', variant: 'success' }); }}
                          className="h-7 px-2 rounded-lg bg-zinc-700 text-xs hover:bg-zinc-600 transition-colors"
                        >Copy</button>
                      </div>
                      <div className="p-3 rounded-xl bg-zinc-800/50">
                        <div className="text-xs text-zinc-500">Host</div>
                        <div className="text-sm font-medium">{selectedEvent.hostName || 'Unknown'}</div>
                        <div className="text-xs font-mono text-zinc-600">{selectedEvent.hostId}</div>
                      </div>
                    </div>
                  </div>

                  {/* Links */}
                  <div className="space-y-2">
                    <h4 className="text-sm font-semibold text-zinc-300">Links</h4>
                    <div className="flex flex-wrap gap-2">
                      <Link
                        href={`/event/${selectedEvent.id}`}
                        target="_blank"
                        className="inline-flex items-center gap-1.5 h-9 px-4 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-xs font-medium hover:from-indigo-600 hover:to-purple-700 transition-all"
                      >
                        <Eye className="h-3.5 w-3.5" />
                        View Event
                      </Link>
                      <Link
                        href={`/qr?event=${selectedEvent.id}`}
                        target="_blank"
                        className="inline-flex items-center gap-1.5 h-9 px-4 rounded-xl border border-zinc-700 text-zinc-300 text-xs font-medium hover:border-zinc-500 transition-colors"
                      >
                        <QrCode className="h-3.5 w-3.5" />
                        QR Page
                      </Link>
                      <button
                        onClick={() => { const url = `${typeof window !== 'undefined' ? window.location.origin : ''}/event/${selectedEvent.id}`; navigator.clipboard.writeText(url); toast({ title: 'Event URL copied!', variant: 'success' }); }}
                        className="inline-flex items-center gap-1.5 h-9 px-4 rounded-xl border border-zinc-700 text-zinc-300 text-xs font-medium hover:border-zinc-500 transition-colors"
                      >
                        <Share2 className="h-3.5 w-3.5" />
                        Copy Link
                      </button>
                    </div>
                  </div>

                  <div className="flex gap-2 pt-2">
                    <button
                      onClick={() => setSelectedEvent(null)}
                      className="flex-1 h-10 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium text-sm hover:from-indigo-600 hover:to-purple-700 transition-all"
                    >
                      Close
                    </button>
                  </div>
                </div>
              </div>
            )}

            {/* Analytics Tab */}
            {activeTab === 'analytics' && (
              <div className="space-y-6">
                <h2 className="text-xl font-bold">{t(lang, 'analytics')}</h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                  {[
                    { label: t(lang, 'totalEvents'), value: events.length, icon: Calendar, color: 'text-blue-400' },
                    { label: t(lang, 'totalPhotos'), value: totalPhotos, icon: ImageIcon, color: 'text-emerald-400' },
                    { label: t(lang, 'activeGuests'), value: totalGuests, icon: Users, color: 'text-violet-400' },
                    { label: t(lang, 'pendingPhotos'), value: pendingPhotos.length, icon: Clock, color: 'text-amber-400' },
                  ].map((stat) => (
                    <div key={stat.label} className="p-5 rounded-2xl border border-zinc-800/50 bg-zinc-900/20">
                      <div className="flex items-center gap-2 mb-2">
                        <stat.icon className={`h-4 w-4 ${stat.color}`} />
                        <span className="text-xs text-zinc-500">{stat.label}</span>
                      </div>
                      <div className="text-2xl font-bold">{stat.value}</div>
                    </div>
                  ))}
                </div>

                {/* Computed Metrics */}
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                  {[
                    {
                      label: 'Avg Photos per Event',
                      value: events.length > 0 ? Math.round(totalPhotos / events.length) : 0,
                    },
                    {
                      label: 'Avg Guests per Event',
                      value: events.length > 0 ? Math.round(totalGuests / events.length) : 0,
                    },
                    {
                      label: 'Photo Approval Rate',
                      value: totalPhotos > 0 ? Math.round(((totalPhotos - pendingPhotos.length) / totalPhotos) * 100) + '%' : '0%',
                    },
                  ].map((metric) => (
                    <div key={metric.label} className="p-5 rounded-2xl border border-zinc-800/50 bg-zinc-900/20">
                      <div className="text-sm text-zinc-500 mb-1">{metric.label}</div>
                      <div className="text-2xl font-bold">{metric.value}</div>
                    </div>
                  ))}
                </div>

                {/* Events by Type */}
                <div className="rounded-2xl border border-zinc-800/50 bg-zinc-900/20 p-6">
                  <h3 className="font-semibold mb-4">Events by Type</h3>
                  <div className="space-y-3">
                    {Object.entries(
                      events.reduce((acc, e) => {
                        acc[e.eventType] = (acc[e.eventType] || 0) + 1;
                        return acc;
                      }, {} as Record<string, number>)
                    ).sort((a, b) => b[1] - a[1]).map(([type, count]) => (
                      <div key={type} className="flex items-center gap-3">
                        <span className="text-lg w-6">{typeEmojis[type] || '📸'}</span>
                        <span className="text-sm capitalize w-24">{type}</span>
                        <div className="flex-1 h-2 rounded-full bg-zinc-800 overflow-hidden">
                          <div
                            className="h-full rounded-full bg-zinc-600"
                            style={{ width: `${events.length > 0 ? (count / events.length) * 100 : 0}%` }}
                          />
                        </div>
                        <span className="text-xs text-zinc-500 w-8 text-end">{count}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {/* Users Tab */}
            {activeTab === 'users' && (
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h2 className="text-xl font-bold">{lang === 'ar' ? 'إدارة المستخدمين' : 'User Management'}</h2>
                  <span className="text-sm text-zinc-500">{allUsers.length} {lang === 'ar' ? 'مستخدم' : 'users'}</span>
                </div>
                {usersLoading ? (
                  <div className="flex items-center justify-center py-12">
                    <Loader2 className="h-6 w-6 animate-spin text-zinc-400" />
                  </div>
                ) : (
                  <div className="rounded-2xl border border-zinc-800/50 bg-zinc-900/20 overflow-hidden">
                    <table className="w-full">
                      <thead>
                        <tr className="text-xs text-zinc-500 border-b border-zinc-800/50 bg-zinc-900/40">
                          <th className="text-start font-medium px-5 py-3">{lang === 'ar' ? 'المستخدم' : 'User'}</th>
                          <th className="text-start font-medium px-5 py-3">{lang === 'ar' ? 'الهاتف' : 'Phone'}</th>
                          <th className="text-start font-medium px-5 py-3">{lang === 'ar' ? 'الانضمام' : 'Joined'}</th>
                          <th className="text-start font-medium px-5 py-3">{lang === 'ar' ? 'كلمة المرور' : 'Password'}</th>
                          <th className="text-start font-medium px-5 py-3">{lang === 'ar' ? 'الدور' : 'Role'}</th>
                          <th className="text-end font-medium px-5 py-3">{lang === 'ar' ? 'إجراءات' : 'Actions'}</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-zinc-800/50">
                        {allUsers.map((u) => (
                          <tr key={u.uid} className="hover:bg-zinc-800/20 transition-colors">
                            <td className="px-5 py-4">
                              <div className="flex items-center gap-3">
                                <div className="h-9 w-9 rounded-full bg-zinc-800 flex items-center justify-center text-sm font-medium shrink-0">
                                  {(u.displayName || u.phoneNumber || '?').charAt(0)}
                                </div>
                                <div>
                                  <div className="text-sm font-medium">{u.displayName || 'No name'}</div>
                                  <div className="text-xs text-zinc-600 font-mono">{u.uid.slice(0, 12)}...</div>
                                </div>
                              </div>
                            </td>
                            <td className="px-5 py-4 text-sm text-zinc-400 font-mono">{u.phoneNumber || '—'}</td>
                            <td className="px-5 py-4 text-sm text-zinc-400">
                              {u.createdAt?.seconds ? new Date(u.createdAt.seconds * 1000).toLocaleDateString() : '—'}
                            </td>
                            <td className="px-5 py-4">
                              {u.passwordSet ? (
                                <span className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border text-emerald-400 bg-emerald-950/50 border-emerald-800">Set</span>
                              ) : (
                                <span className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border text-zinc-500 bg-zinc-900/50 border-zinc-700">None</span>
                              )}
                            </td>
                            <td className="px-5 py-4">
                              {u.isAdmin ? (
                                <span className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border text-amber-400 bg-amber-950/50 border-amber-800 flex items-center gap-1 w-fit">
                                  <Shield className="h-3 w-3" /> Admin
                                </span>
                              ) : (
                                <span className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border text-zinc-400 bg-zinc-900/50 border-zinc-700">User</span>
                              )}
                            </td>
                            <td className="px-5 py-4 text-end">
                              {u.uid !== user?.uid && (
                                <button
                                  onClick={() => handleToggleAdmin(u.uid, u.isAdmin)}
                                  disabled={promotingUid === u.uid}
                                  className={`inline-flex items-center gap-1 text-xs px-3 py-1.5 rounded-lg transition-colors disabled:opacity-50 ${
                                    u.isAdmin
                                      ? 'text-red-400 hover:bg-red-500/10'
                                      : 'text-indigo-400 hover:bg-indigo-500/10'
                                  }`}
                                  title={u.isAdmin ? 'Remove admin' : 'Make admin'}
                                >
                                  {promotingUid === u.uid ? (
                                    <Loader2 className="h-3 w-3 animate-spin" />
                                  ) : u.isAdmin ? (
                                    <><ShieldOff className="h-3 w-3" /> Remove Admin</>
                                  ) : (
                                    <><Shield className="h-3 w-3" /> Make Admin</>
                                  )}
                                </button>
                              )}
                              {u.uid === user?.uid && (
                                <span className="text-xs text-zinc-600">{lang === 'ar' ? 'أنت' : 'You'}</span>
                              )}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            )}

            {/* Payments Tab */}
            {activeTab === 'payments' && (
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h2 className="text-xl font-bold">{lang === 'ar' ? 'سجل المدفوعات' : 'Payment History'}</h2>
                  <span className="text-sm text-zinc-500">{payments.length} {lang === 'ar' ? 'عملية' : 'transactions'}</span>
                </div>
                {paymentsLoading ? (
                  <div className="flex items-center justify-center py-12">
                    <Loader2 className="h-6 w-6 animate-spin text-zinc-400" />
                  </div>
                ) : payments.length === 0 ? (
                  <div className="text-center py-16">
                    <CreditCard className="h-12 w-12 text-zinc-700 mx-auto mb-4" />
                    <h3 className="text-lg font-semibold mb-1 text-zinc-400">{lang === 'ar' ? 'لا توجد مدفوعات بعد' : 'No payments yet'}</h3>
                    <p className="text-zinc-600 text-sm">{lang === 'ar' ? 'ستظهر المدفوعات هنا بعد أول عملية شراء' : 'Payments will appear here after the first purchase'}</p>
                  </div>
                ) : (
                  <div className="rounded-2xl border border-zinc-800/50 bg-zinc-900/20 overflow-hidden">
                    <table className="w-full">
                      <thead>
                        <tr className="text-xs text-zinc-500 border-b border-zinc-800/50 bg-zinc-900/40">
                          <th className="text-start font-medium px-5 py-3">{lang === 'ar' ? 'المناسبة' : 'Event'}</th>
                          <th className="text-start font-medium px-5 py-3">{lang === 'ar' ? 'المستخدم' : 'User'}</th>
                          <th className="text-start font-medium px-5 py-3">{lang === 'ar' ? 'الباقة' : 'Tier'}</th>
                          <th className="text-start font-medium px-5 py-3">{lang === 'ar' ? 'المبلغ' : 'Amount'}</th>
                          <th className="text-start font-medium px-5 py-3">{lang === 'ar' ? 'الحالة' : 'Status'}</th>
                          <th className="text-start font-medium px-5 py-3">{lang === 'ar' ? 'التاريخ' : 'Date'}</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-zinc-800/50">
                        {payments.map((p: any) => (
                          <tr key={p.id} className="hover:bg-zinc-800/20 transition-colors">
                            <td className="px-5 py-4 text-sm">
                              {p.eventId ? (
                                <Link href={`/event/${p.eventId}`} className="text-indigo-400 hover:text-indigo-300 transition-colors">
                                  {p.eventId.slice(0, 8)}...
                                </Link>
                              ) : '—'}
                            </td>
                            <td className="px-5 py-4 text-sm text-zinc-400 font-mono">{p.userId?.slice(0, 12) || '—'}...</td>
                            <td className="px-5 py-4">
                              <span className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border ${
                                p.tier === 'premium' ? 'text-amber-400 bg-amber-950/50 border-amber-800' :
                                p.tier === 'standard' ? 'text-indigo-400 bg-indigo-950/50 border-indigo-800' :
                                'text-zinc-400 bg-zinc-900/50 border-zinc-700'
                              }`}>
                                {p.tier || 'basic'}
                              </span>
                            </td>
                            <td className="px-5 py-4 text-sm font-medium">
                              {p.amount || 0} <span className="text-zinc-500 text-xs">{(p.currency || 'SAR').toUpperCase()}</span>
                            </td>
                            <td className="px-5 py-4">
                              <span className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border ${
                                p.status === 'completed' ? 'text-emerald-400 bg-emerald-950/50 border-emerald-800' :
                                p.status === 'pending' ? 'text-amber-400 bg-amber-950/50 border-amber-800' :
                                'text-red-400 bg-red-950/50 border-red-800'
                              }`}>
                                {p.status || 'unknown'}
                              </span>
                            </td>
                            <td className="px-5 py-4 text-sm text-zinc-400">
                              {p.createdAt?.seconds ? new Date(p.createdAt.seconds * 1000).toLocaleDateString() : '—'}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            )}

            {/* Settings Tab */}
            {activeTab === 'settings' && (
              <SystemSettings />
            )}
          </div>
        </main>
      </div>
    </div>
  );
}