import React, { useState, useEffect } from 'react';
import { subscribeToTeamMembers, saveTeamMembersToFirebase } from '../services/teamService';
import {
  Lock,
  User,
  CheckCircle2,
  XCircle,
  Trash2,
  LogOut,
  AlertTriangle,
  ShoppingBag,
  Clock,
  Search,
  MessageSquare,
  Database,
  ArrowLeft,
  Loader2,
  Printer,
  Download,
  Send,
  Truck,
  Edit,
  ChevronDown,
  ChevronUp,
  Package,
  Calendar,
  FileText,
  Mail,
  ExternalLink,
  Check,
  Building2,
  Save,
  Star,
  Camera,
  X,
  ZoomIn,
} from 'lucide-react';
import {
  getBankDetails,
  saveBankDetails,
  subscribeToBankDetails,
  BankDetails,
} from '../services/bankService';
import {
  EmailConfig,
  getStoredEmailConfig,
  saveEmailConfig,
  subscribeToEmailConfig,
  sendPaymentStatusNotificationEmail,
  resetEmailCounter,
} from '../services/emailService';
import { NewsletterManager } from './admin/NewsletterManager';
import { CouponManager } from './admin/CouponManager';
import {
  Review,
  getStoredReviews,
  updateReviewStatus,
  deleteReview,
  subscribeToReviews,
} from '../services/reviewService';
import {
  OrderRecord,
  OrderStatus,
  subscribeToOrders,
  getStoredOrders,
  updateOrderStatus,
  updatePaymentStatus,
  resendOrderEmail,
  updateOrderAdminNotes,
  createNewOrder,
} from '../services/orderService';
import { downloadOrderPDF, printOrder } from '../services/pdfService';

interface AdminPanelProps {
  onBackToStore: () => void;
}

export const AdminPanel: React.FC<AdminPanelProps> = ({ onBackToStore }) => {
  // Auth State
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(() => {
    return sessionStorage.getItem('tnl_admin_auth') === 'true';
  });
  const [username, setUsername] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [loginError, setLoginError] = useState<string>('');
  const [failedAttempts, setFailedAttempts] = useState<number>(0);

  // Dashboard Active Tab
  const [activeTab, setActiveTab] = useState<'orders' | 'newsletter' | 'coupons' | 'reviews' | 'products' | 'bank' | 'email' | 'team'>('orders');

  // Team Management State
  const [teamMembersList, setTeamMembersList] = useState<any[]>([]);
  const [isSavingTeam, setIsSavingTeam] = useState<boolean>(false);
  const [teamSaveNotice, setTeamSaveNotice] = useState<string | null>(null);

  useEffect(() => {
    const unsub = subscribeToTeamMembers((members) => {
      if (Array.isArray(members) && members.length > 0) {
        setTeamMembersList(members);
      }
    });
    return () => unsub();
  }, []);

  // Bank Transfer Details Settings State
  const [bankForm, setBankForm] = useState<BankDetails>(() => getBankDetails());
  const [bankSaveNotice, setBankSaveNotice] = useState<string | null>(null);
  const [isSavingBank, setIsSavingBank] = useState<boolean>(false);

  // EmailJS Credentials Settings State
  const [emailForm, setEmailForm] = useState<EmailConfig>(() => getStoredEmailConfig());
  const [emailSaveNotice, setEmailSaveNotice] = useState<string | null>(null);
  const [isSavingEmail, setIsSavingEmail] = useState<boolean>(false);

  // Reviews State
  const [reviews, setReviews] = useState<Review[]>(() => getStoredReviews());
  const [isLoadingReviews, setIsLoadingReviews] = useState<boolean>(true);
  const [reviewFilter, setReviewFilter] = useState<'all' | 'pending' | 'approved' | 'rejected'>('all');
  const [reviewSearchQuery, setReviewSearchQuery] = useState<string>('');
  const [previewImageUrl, setPreviewImageUrl] = useState<string | null>(null);

  // Orders State
  const [orders, setOrders] = useState<OrderRecord[]>(() => getStoredOrders());
  const [isLoadingOrders, setIsLoadingOrders] = useState<boolean>(true);
  const [orderFilterStatus, setOrderFilterStatus] = useState<string>('all');
  const [orderFilterDate, setOrderFilterDate] = useState<string>('all');
  const [orderSearchQuery, setOrderSearchQuery] = useState<string>('');
  const [viewingProofOrder, setViewingProofOrder] = useState<OrderRecord | null>(null);
  const [expandedOrderId, setExpandedOrderId] = useState<string | null>(null);

  // Dispatch Modal State
  const [dispatchModalOrder, setDispatchModalOrder] = useState<OrderRecord | null>(null);
  const [selectedCourier, setSelectedCourier] = useState<'Leopards' | 'PostEx'>('Leopards');
  const [trackingNumber, setTrackingNumber] = useState<string>('');
  const [dispatchNote, setDispatchNote] = useState<string>('');
  const [isUpdatingDispatch, setIsUpdatingDispatch] = useState<boolean>(false);

  // Re-send Email State
  const [emailSendingOrderId, setEmailSendingOrderId] = useState<string | null>(null);
  const [emailSendNotice, setEmailSendNotice] = useState<string | null>(null);

  // Admin Notes Editing
  const [editingNotesOrderId, setEditingNotesOrderId] = useState<string | null>(null);
  const [notesText, setNotesText] = useState<string>('');

  const handleUpdatePaymentStatusAndEmail = async (
    orderRecord: OrderRecord,
    newPaymentStatus: 'Pending Verification' | 'Payment Verified' | 'Payment Rejected'
  ) => {
    const updatedOrder = await updatePaymentStatus(orderRecord.id, newPaymentStatus);
    if (updatedOrder) {
      setOrders((prev) => prev.map((o) => o.id === orderRecord.id ? updatedOrder : o));
      if (viewingProofOrder?.id === orderRecord.id) {
        setViewingProofOrder(updatedOrder);
      }
      // Automatically send payment status update email to customer & all admin emails
      sendPaymentStatusNotificationEmail(updatedOrder, newPaymentStatus).catch((err) => {
        console.warn('Failed to send payment status notification email:', err);
      });
    }
  };

  useEffect(() => {
    // Reviews Real-Time Listener
    setIsLoadingReviews(true);
    const unsubReviews = subscribeToReviews((updatedList) => {
      setReviews(Array.isArray(updatedList) ? updatedList : []);
      setIsLoadingReviews(false);
    });

    // Orders Real-Time Listener
    setIsLoadingOrders(true);
    const unsubOrders = subscribeToOrders((updatedList) => {
      setOrders(Array.isArray(updatedList) ? updatedList : []);
      setIsLoadingOrders(false);
    });

    // Bank Details Listener
    const unsubBank = subscribeToBankDetails((details) => {
      setBankForm(details);
    });

    // EmailJS Config Listener
    const unsubEmail = subscribeToEmailConfig((config) => {
      setEmailForm(config);
    });

    return () => {
      unsubReviews();
      unsubOrders();
      unsubBank();
      unsubEmail();
    };
  }, []);

  const handleSaveBankDetails = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSavingBank(true);
    setBankSaveNotice(null);
    try {
      await saveBankDetails(bankForm);
      setBankSaveNotice('Bank Transfer Details successfully updated in Firebase & Local Storage!');
      setTimeout(() => setBankSaveNotice(null), 4000);
    } catch (err) {
      alert('Failed to save bank details. Please check connection.');
    } finally {
      setIsSavingBank(false);
    }
  };

  const handleSaveEmailConfig = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSavingEmail(true);
    setEmailSaveNotice(null);
    try {
      await saveEmailConfig(emailForm);
      setEmailSaveNotice('EmailJS Settings successfully saved to Firebase Firestore & Local Storage!');
      setTimeout(() => setEmailSaveNotice(null), 4000);
    } catch (err) {
      alert('Failed to save EmailJS settings. Please check connection.');
    } finally {
      setIsSavingEmail(false);
    }
  };

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    setLoginError('');

    if (failedAttempts >= 5) {
      setLoginError('Too many failed attempts. Please wait 15 minutes or refresh.');
      return;
    }

    if (
      (username.toLowerCase() === 'info@timenlife.com' ||
        username.toLowerCase() === 'admin' ||
        username.toLowerCase() === 'owner' ||
        username.toLowerCase() === 'tnl_admin') &&
      (password === 'Info@123$Time' ||
        password === 'admin12345' ||
        password === 'timenlife2026' ||
        password === 'TimeNLife@Secure2026#Admin' ||
        password === 'tnl_admin_key_92')
    ) {
      setIsAuthenticated(true);
      sessionStorage.setItem('tnl_admin_auth', 'true');
      setLoginError('');
    } else {
      setFailedAttempts((prev) => prev + 1);
      setLoginError('Invalid username or password. Access denied.');
    }
  };

  const handleLogout = () => {
    setIsAuthenticated(false);
    sessionStorage.removeItem('tnl_admin_auth');
  };

  // Review handlers
  const handleApproveReview = (reviewId: string) => {
    const updated = updateReviewStatus(reviewId, 'approved');
    setReviews(updated);
  };

  const handleRejectReview = (reviewId: string) => {
    const updated = updateReviewStatus(reviewId, 'rejected');
    setReviews(updated);
  };

  const handleDeleteReview = (reviewId: string) => {
    if (window.confirm('Are you sure you want to permanently delete this review?')) {
      const updated = deleteReview(reviewId);
      setReviews(updated);
    }
  };

  // Order Status Change Handler
  const handleStatusChange = async (order: OrderRecord, newStatus: OrderStatus) => {
    if (newStatus === 'Dispatched') {
      // Open Dispatch Modal to ask for courier & tracking #
      setDispatchModalOrder(order);
      setSelectedCourier('Leopards');
      setTrackingNumber('');
      setDispatchNote('');
      return;
    }

    if (newStatus === 'Processing') {
      const confirmMsg = `Change order #${order.id} status to PROCESSING?\nThis will automatically save in Firebase and send a Processing Email to ${order.customer.email}.`;
      if (!window.confirm(confirmMsg)) return;
    }

    await updateOrderStatus(order.id, newStatus);
  };

  const handleConfirmDispatch = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!dispatchModalOrder) return;
    if (!trackingNumber.trim()) {
      alert('Please enter a valid Tracking Number.');
      return;
    }

    setIsUpdatingDispatch(true);
    await updateOrderStatus(
      dispatchModalOrder.id,
      'Dispatched',
      {
        courierName: selectedCourier,
        trackingNumber: trackingNumber.trim(),
      },
      dispatchNote.trim() || undefined
    );
    setIsUpdatingDispatch(false);
    setDispatchModalOrder(null);
  };

  const handleResendEmail = async (order: OrderRecord, emailType: 'confirmation' | 'processing' | 'dispatch') => {
    setEmailSendingOrderId(order.id);
    setEmailSendNotice(null);

    const success = await resendOrderEmail(order, emailType);
    setEmailSendingOrderId(null);

    if (success) {
      setEmailSendNotice(`Successfully re-sent ${emailType.toUpperCase()} email for order #${order.id}!`);
      setTimeout(() => setEmailSendNotice(null), 4000);
    } else {
      alert(`Failed to send ${emailType} email. Please check EmailJS setup or internet connection.`);
    }
  };

  const handleSaveAdminNotes = async (orderId: string) => {
    await updateOrderAdminNotes(orderId, notesText);
    setEditingNotesOrderId(null);
  };

  const handleCreateTestOrder = async () => {
    const testData = {
      customer: {
        name: 'Demo Customer',
        companyName: 'Time N Life Test',
        email: 'customer.test@timenlife.com',
        phone: '03009988776',
        whatsapp: '03009988776',
        address: 'Test House #10, Block 4, Gulshan-e-Iqbal',
        city: 'Karachi',
        province: 'Sindh',
        postalCode: '75300',
        country: 'Pakistan',
        notes: 'Admin generated test order',
      },
      items: [
        {
          productId: 101,
          productName: 'Shilajit Pure Resin 30g Gold Grade',
          image: 'https://timenlife.com/wp-content/uploads/2025/01/TimeNLifeLogo-300x300-1.png',
          strength: '100% Pure Organic',
          packing: '30g Jar',
          quantity: 1,
          unitPrice: 3500,
          totalPrice: 3500,
        },
      ],
      totals: {
        totalItems: 1,
        subtotal: 3500,
        shippingCharges: 0,
        discount: 0,
        grandTotal: 3500,
      },
    };
    await createNewOrder(testData);
    alert('Test order created successfully!');
  };

  // Filtered Orders
  const filteredOrders = orders.filter((o) => {
    const statusVal = o.status ? o.status.toLowerCase() : 'booking';
    const matchesStatus = orderFilterStatus === 'all' ? true : statusVal === orderFilterStatus.toLowerCase();

    let matchesDate = true;
    if (orderFilterDate === 'today') {
      const orderDate = new Date(o.createdAt || Date.now()).toDateString();
      const today = new Date().toDateString();
      matchesDate = orderDate === today;
    } else if (orderFilterDate === '7days') {
      const diff = (new Date().getTime() - new Date(o.createdAt || Date.now()).getTime()) / (1000 * 3600 * 24);
      matchesDate = diff <= 7;
    } else if (orderFilterDate === '30days') {
      const diff = (new Date().getTime() - new Date(o.createdAt || Date.now()).getTime()) / (1000 * 3600 * 24);
      matchesDate = diff <= 30;
    }

    const q = orderSearchQuery.toLowerCase().trim();
    const customerName = o.customer?.name || '';
    const customerEmail = o.customer?.email || '';
    const customerPhone = o.customer?.phone || '';
    const customerCity = o.customer?.city || '';
    const trackingNo = o.courierInfo?.trackingNumber || '';

    const matchesSearch =
      !q ||
      (o.id && o.id.toLowerCase().includes(q)) ||
      customerName.toLowerCase().includes(q) ||
      customerEmail.toLowerCase().includes(q) ||
      customerPhone.includes(q) ||
      customerCity.toLowerCase().includes(q) ||
      trackingNo.toLowerCase().includes(q);

    return matchesStatus && matchesDate && matchesSearch;
  });

  // Review Counters & Filtered List
  const pendingReviewsCount = reviews.filter((r) => r.status === 'pending').length;
  const approvedReviewsCount = reviews.filter((r) => r.status === 'approved').length;
  const rejectedReviewsCount = reviews.filter((r) => r.status === 'rejected').length;

  const filteredReviews = reviews.filter((r) => {
    const matchesStatus = reviewFilter === 'all' ? true : r.status === reviewFilter;
    const q = reviewSearchQuery.toLowerCase().trim();
    const matchesSearch =
      !q ||
      r.authorName.toLowerCase().includes(q) ||
      r.authorEmail.toLowerCase().includes(q) ||
      r.comment.toLowerCase().includes(q) ||
      (r.productName && r.productName.toLowerCase().includes(q));
    return matchesStatus && matchesSearch;
  });

  // Order Counters
  const bookingOrdersCount = orders.filter((o) => o.status === 'Booking').length;
  const processingOrdersCount = orders.filter((o) => o.status === 'Processing').length;
  const dispatchedOrdersCount = orders.filter((o) => o.status === 'Dispatched').length;

  if (!isAuthenticated) {
    return (
      <div className="min-h-screen bg-[#1E1915] text-amber-50 flex flex-col items-center justify-center p-4 font-sans">
        <div className="absolute top-6 left-6">
          <button
            onClick={onBackToStore}
            className="inline-flex items-center gap-2 text-xs font-bold text-amber-200/80 hover:text-white bg-white/5 border border-amber-500/20 px-3.5 py-2 rounded-xl transition-colors cursor-pointer"
          >
            <ArrowLeft className="w-4 h-4" />
            <span>Return to Store</span>
          </button>
        </div>

        <div className="max-w-md w-full bg-[#2A231D] rounded-3xl border border-[#D4AF37]/30 shadow-2xl p-8 space-y-6">
          <div className="text-center space-y-2">
            <div className="w-14 h-14 mx-auto bg-[#C81E3D]/20 border border-[#C81E3D]/40 rounded-2xl flex items-center justify-center text-[#FF859B]">
              <Lock className="w-7 h-7" />
            </div>
            <h1 className="text-2xl font-bold font-playfair text-amber-50">Admin Order Portal</h1>
            <p className="text-xs text-amber-200/70">
              Secret Path: <code className="bg-black/40 px-2 py-0.5 rounded text-[#D4AF37]">/tnl-secret-portal-x92</code>
            </p>
          </div>

          <form onSubmit={handleLogin} className="space-y-4 text-xs">
            {loginError && (
              <div className="p-3 bg-rose-950/80 border border-rose-500/40 text-rose-200 rounded-xl flex items-center gap-2">
                <AlertTriangle className="w-4 h-4 text-rose-400 shrink-0" />
                <span>{loginError}</span>
              </div>
            )}

            <div className="space-y-1">
              <label className="font-bold text-amber-200/90 uppercase tracking-wider block">Admin Username</label>
              <div className="relative">
                <User className="w-4 h-4 text-slate-400 absolute left-3 top-3" />
                <input
                  type="text"
                  required
                  placeholder="info@timenlife.com"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  className="w-full bg-black/40 border border-amber-900/50 rounded-xl py-2.5 pl-9 pr-3 text-white placeholder-slate-500 focus:outline-none focus:border-[#D4AF37]"
                />
              </div>
            </div>

            <div className="space-y-1">
              <label className="font-bold text-amber-200/90 uppercase tracking-wider block">Password</label>
              <div className="relative">
                <Lock className="w-4 h-4 text-slate-400 absolute left-3 top-3" />
                <input
                  type="password"
                  required
                  placeholder="••••••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full bg-black/40 border border-amber-900/50 rounded-xl py-2.5 pl-9 pr-3 text-white placeholder-slate-500 focus:outline-none focus:border-[#D4AF37]"
                />
              </div>
            </div>

            <button
              type="submit"
              className="w-full py-3 bg-[#C81E3D] hover:bg-[#A6142E] text-white font-bold rounded-xl uppercase tracking-wider text-xs transition-all shadow-md cursor-pointer mt-2"
            >
              Log In To Order System
            </button>
          </form>

          <div className="p-3 bg-amber-900/20 border border-amber-500/20 rounded-xl text-[11px] text-amber-200/80 leading-relaxed text-center">
            🔒 Protected Order Management System connected to Firebase Firestore & EmailJS.
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#FCF8F5] font-sans pb-20">
      
      {/* Top Header */}
      <div className="bg-[#1E1915] text-amber-50 border-b border-[#D4AF37]/30 sticky top-0 z-40 shadow-md">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <button
              onClick={onBackToStore}
              className="p-2 rounded-xl bg-white/10 text-amber-200 hover:text-white transition-colors cursor-pointer"
              title="Return to Store Front"
            >
              <ArrowLeft className="w-5 h-5" />
            </button>
            
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-xl font-bold font-playfair text-amber-50">
                  Time N Life Order Booking & Email System
                </h1>
                <span className="bg-[#C81E3D] text-white text-[10px] font-bold px-2 py-0.5 rounded-full uppercase flex items-center gap-1">
                  <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" /> LIVE FIREBASE
                </span>
              </div>
              <p className="text-xs text-amber-200/70">
                Logged in as Admin • Real-time Firestore Sync Active
              </p>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={handleLogout}
              className="inline-flex items-center gap-1.5 px-3.5 py-2 bg-rose-950/80 hover:bg-rose-900 text-rose-200 border border-rose-800 rounded-xl text-xs font-bold transition-all cursor-pointer"
            >
              <LogOut className="w-4 h-4" />
              <span>Logout</span>
            </button>
          </div>
        </div>
      </div>

      {/* Main Container */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6 space-y-6">
        
        {/* Email Send Notice */}
        {emailSendNotice && (
          <div className="p-4 bg-emerald-100 border border-emerald-300 text-emerald-900 rounded-2xl flex items-center gap-2 text-xs font-bold animate-in fade-in">
            <Check className="w-4 h-4 text-emerald-700" />
            <span>{emailSendNotice}</span>
          </div>
        )}

        {/* Navigation Tabs */}
        <div className="flex flex-wrap items-center gap-2 border-b border-[#F2E5D9] pb-4">
          <button
            onClick={() => setActiveTab('orders')}
            className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all cursor-pointer ${
              activeTab === 'orders'
                ? 'bg-[#C81E3D] text-white shadow-md'
                : 'bg-white text-slate-700 hover:bg-rose-50 border border-[#E8D9CC]'
            }`}
          >
            <ShoppingBag className="w-4 h-4" />
            <span>Order Booking System</span>
            {bookingOrdersCount > 0 && (
              <span className="bg-amber-400 text-slate-900 text-[10px] font-extrabold px-2 py-0.5 rounded-full">
                {bookingOrdersCount} NEW
              </span>
            )}
          </button>

          <button
            onClick={() => setActiveTab('newsletter')}
            className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all cursor-pointer ${
              activeTab === 'newsletter'
                ? 'bg-[#C81E3D] text-white shadow-md'
                : 'bg-white text-slate-700 hover:bg-rose-50 border border-[#E8D9CC]'
            }`}
          >
            <Mail className="w-4 h-4 text-emerald-600" />
            <span>Newsletter Marketing</span>
          </button>

          <button
            onClick={() => setActiveTab('coupons')}
            className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all cursor-pointer ${
              activeTab === 'coupons'
                ? 'bg-[#C81E3D] text-white shadow-md'
                : 'bg-white text-slate-700 hover:bg-rose-50 border border-[#E8D9CC]'
            }`}
          >
            <Database className="w-4 h-4 text-amber-600" />
            <span>Coupons & Discounts</span>
          </button>

          <button
            onClick={() => setActiveTab('reviews')}
            className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all cursor-pointer ${
              activeTab === 'reviews'
                ? 'bg-[#C81E3D] text-white shadow-md'
                : 'bg-white text-slate-700 hover:bg-rose-50 border border-[#E8D9CC]'
            }`}
          >
            <MessageSquare className="w-4 h-4" />
            <span>Customer Reviews</span>
            {pendingReviewsCount > 0 && (
              <span className="bg-amber-400 text-slate-900 text-[10px] font-extrabold px-2 py-0.5 rounded-full">
                {pendingReviewsCount}
              </span>
            )}
          </button>

          <button
            onClick={() => setActiveTab('products')}
            className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all cursor-pointer ${
              activeTab === 'products'
                ? 'bg-[#C81E3D] text-white shadow-md'
                : 'bg-white text-slate-700 hover:bg-rose-50 border border-[#E8D9CC]'
            }`}
          >
            <Database className="w-4 h-4" />
            <span>Catalog Sync</span>
          </button>

          <button
            onClick={() => setActiveTab('bank')}
            className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all cursor-pointer ${
              activeTab === 'bank'
                ? 'bg-[#C81E3D] text-white shadow-md'
                : 'bg-white text-slate-700 hover:bg-rose-50 border border-[#E8D9CC]'
            }`}
          >
            <Building2 className="w-4 h-4" />
            <span>Bank Details Settings</span>
          </button>

          <button
            onClick={() => setActiveTab('email')}
            className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all cursor-pointer ${
              activeTab === 'email'
                ? 'bg-[#C81E3D] text-white shadow-md'
                : 'bg-white text-slate-700 hover:bg-rose-50 border border-[#E8D9CC]'
            }`}
          >
            <Mail className="w-4 h-4" />
            <span>EmailJS Settings</span>
          </button>

          <button
            onClick={() => setActiveTab('team')}
            className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all cursor-pointer ${
              activeTab === 'team'
                ? 'bg-[#C81E3D] text-white shadow-md'
                : 'bg-white text-slate-700 hover:bg-rose-50 border border-[#E8D9CC]'
            }`}
          >
            <User className="w-4 h-4 text-amber-600" />
            <span>Collaborative Team</span>
          </button>
        </div>

        {/* TAB 1: ORDER BOOKING SYSTEM */}
        {activeTab === 'orders' && (
          <div className="space-y-6">
            
            {/* Orders Summary Cards */}
            <div className="grid grid-cols-2 sm:grid-cols-5 gap-3 sm:gap-4">
              <div className="p-4 bg-white rounded-2xl border border-[#F2E5D9] shadow-xs space-y-1">
                <span className="text-[11px] font-bold text-slate-500 uppercase block">Total Orders</span>
                <span className="text-2xl font-bold font-playfair text-slate-900">{orders.length}</span>
                <span className="text-[10px] text-slate-400 block">In Firestore</span>
              </div>

              <div className="p-4 bg-amber-50 rounded-2xl border border-amber-200 shadow-xs space-y-1">
                <span className="text-[11px] font-bold text-amber-800 uppercase block">Booking (New)</span>
                <span className="text-2xl font-bold font-playfair text-amber-900">{bookingOrdersCount}</span>
                <span className="text-[10px] text-amber-700 block">Awaiting Processing</span>
              </div>

              <div className="p-4 bg-blue-50 rounded-2xl border border-blue-200 shadow-xs space-y-1">
                <span className="text-[11px] font-bold text-blue-800 uppercase block">Processing</span>
                <span className="text-2xl font-bold font-playfair text-blue-900">{processingOrdersCount}</span>
                <span className="text-[10px] text-blue-700 block">Warehouse Packing</span>
              </div>

              <div className="p-4 bg-purple-50 rounded-2xl border border-purple-200 shadow-xs space-y-1">
                <span className="text-[11px] font-bold text-purple-800 uppercase block">Dispatched</span>
                <span className="text-2xl font-bold font-playfair text-purple-900">{dispatchedOrdersCount}</span>
                <span className="text-[10px] text-purple-700 block">Leopards / PostEx</span>
              </div>

              <div className="p-4 bg-emerald-50 rounded-2xl border border-emerald-200 shadow-xs space-y-1 col-span-2 sm:col-span-1">
                <span className="text-[11px] font-bold text-emerald-800 uppercase block">Delivered</span>
                <span className="text-2xl font-bold font-playfair text-emerald-900">
                  {orders.filter((o) => o.status === 'Delivered').length}
                </span>
                <span className="text-[10px] text-emerald-700 block">Completed</span>
              </div>
            </div>

            {/* Filter & Search Controls */}
            <div className="p-4 bg-white rounded-2xl border border-[#F2E5D9] shadow-xs flex flex-col md:flex-row items-center justify-between gap-4">
              
              <div className="flex flex-wrap items-center gap-2 text-xs w-full md:w-auto">
                {/* Status Selector */}
                <select
                  value={orderFilterStatus}
                  onChange={(e) => setOrderFilterStatus(e.target.value)}
                  className="px-3 py-2 bg-slate-50 border border-slate-300 rounded-xl font-bold text-slate-800 focus:outline-none"
                >
                  <option value="all">All Statuses ({orders.length})</option>
                  <option value="booking">Booking ({bookingOrdersCount})</option>
                  <option value="processing">Processing ({processingOrdersCount})</option>
                  <option value="dispatched">Dispatched ({dispatchedOrdersCount})</option>
                  <option value="delivered">Delivered</option>
                  <option value="cancelled">Cancelled</option>
                </select>

                {/* Date Selector */}
                <select
                  value={orderFilterDate}
                  onChange={(e) => setOrderFilterDate(e.target.value)}
                  className="px-3 py-2 bg-slate-50 border border-slate-300 rounded-xl font-bold text-slate-800 focus:outline-none"
                >
                  <option value="all">All Dates</option>
                  <option value="today">Today</option>
                  <option value="7days">Past 7 Days</option>
                  <option value="30days">Past 30 Days</option>
                </select>
              </div>

              {/* Search Bar & Actions */}
              <div className="flex items-center gap-2 w-full md:w-auto">
                <div className="relative w-full md:w-80">
                  <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-3" />
                  <input
                    type="text"
                    placeholder="Search Order ID, Customer Name, Email, Phone, City..."
                    value={orderSearchQuery}
                    onChange={(e) => setOrderSearchQuery(e.target.value)}
                    className="w-full bg-slate-50 border border-slate-300 rounded-xl py-2 pl-10 pr-3 text-xs focus:outline-none focus:border-[#C81E3D]"
                  />
                </div>

                <button
                  onClick={handleCreateTestOrder}
                  className="px-3.5 py-2 bg-[#C81E3D] hover:bg-[#A6142E] text-white font-bold rounded-xl text-xs uppercase tracking-wider transition-colors shrink-0 cursor-pointer"
                  title="Generate a sample test order to verify system"
                >
                  + Test Order
                </button>
              </div>

            </div>

            {/* Orders List */}
            <div className="space-y-4">
              {isLoadingOrders ? (
                <div className="p-12 bg-white rounded-2xl border border-[#F2E5D9] text-center flex flex-col items-center justify-center gap-2">
                  <Loader2 className="w-8 h-8 animate-spin text-[#C81E3D]" />
                  <p className="text-sm font-bold text-slate-700">Fetching live orders from Firestore...</p>
                </div>
              ) : filteredOrders.length === 0 ? (
                <div className="p-12 bg-white rounded-2xl border border-[#F2E5D9] text-center space-y-2">
                  <ShoppingBag className="w-10 h-10 text-slate-300 mx-auto" />
                  <p className="text-sm font-bold text-slate-700">No orders found matching filters.</p>
                </div>
              ) : (
                filteredOrders.map((order) => {
                  const isExpanded = expandedOrderId === order.id;

                  return (
                    <div
                      key={order.id}
                      className="bg-white rounded-2xl border border-[#F2E5D9] shadow-xs overflow-hidden transition-all hover:shadow-md"
                    >
                      {/* Card Summary Header */}
                      <div className="p-4 sm:p-5 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 bg-white border-b border-slate-100">
                        <div className="space-y-1">
                          <div className="flex flex-wrap items-center gap-2">
                            <span className="font-extrabold text-sm font-mono text-[#C81E3D] bg-rose-50 px-2.5 py-0.5 rounded-lg border border-rose-200">
                              #{order.id}
                            </span>
                            
                            {/* Status Badge */}
                            <span
                              className={`text-[11px] font-extrabold uppercase px-3 py-0.5 rounded-full flex items-center gap-1 ${
                                order.status === 'Booking'
                                  ? 'bg-amber-100 text-amber-800 border border-amber-300'
                                  : order.status === 'Processing'
                                  ? 'bg-blue-100 text-blue-800 border border-blue-300'
                                  : order.status === 'Dispatched'
                                  ? 'bg-purple-100 text-purple-800 border border-purple-300'
                                  : order.status === 'Delivered'
                                  ? 'bg-emerald-100 text-emerald-800 border border-emerald-300'
                                  : 'bg-slate-100 text-slate-700 border border-slate-300'
                              }`}
                            >
                              <Clock className="w-3 h-3" />
                              {order.status}
                            </span>

                            <span className="text-xs text-slate-400">
                              • {new Date(order.createdAt).toLocaleString('en-PK')}
                            </span>
                          </div>

                          <div className="text-xs text-slate-800 flex flex-wrap items-center gap-x-3 gap-y-1 pt-1 font-medium">
                            <span>
                              <strong>Customer:</strong> {order.customer.name}
                            </span>
                            <span>
                              <strong>Phone:</strong> <span className="font-mono">{order.customer.phone}</span>
                            </span>
                            <span>
                              <strong>City:</strong> {order.customer.city}
                            </span>
                            <span>
                              <strong>Items:</strong> {order.totals.totalItems}
                            </span>
                            <span className="font-bold text-[#C81E3D] text-sm">
                              Rs {order.totals.grandTotal.toLocaleString('en-PK')}
                            </span>
                          </div>
                        </div>

                        {/* Quick Controls */}
                        <div className="flex flex-wrap items-center gap-2 shrink-0 w-full md:w-auto justify-between md:justify-end">
                          <select
                            value={order.status}
                            onChange={(e) => handleStatusChange(order, e.target.value as OrderStatus)}
                            className="text-xs font-bold px-3 py-1.5 bg-slate-100 hover:bg-slate-200 border border-slate-300 rounded-xl cursor-pointer outline-none"
                          >
                            <option value="Booking">Status: Booking</option>
                            <option value="Processing">Status: Processing</option>
                            <option value="Dispatched">Status: Dispatched</option>
                            <option value="Delivered">Status: Delivered</option>
                            <option value="Cancelled">Status: Cancelled</option>
                          </select>

                          <button
                            onClick={() => setExpandedOrderId(isExpanded ? null : order.id)}
                            className="inline-flex items-center gap-1 text-xs font-bold px-3 py-1.5 bg-slate-800 text-amber-100 hover:bg-slate-900 rounded-xl cursor-pointer"
                          >
                            <span>{isExpanded ? 'Hide Details' : 'View Full Order'}</span>
                            {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                          </button>
                        </div>
                      </div>

                      {/* Expandable Detailed View */}
                      {isExpanded && (
                        <div className="p-5 bg-[#FAF5F0] border-t border-[#E8D9CC] space-y-6 text-xs animate-in fade-in">
                          
                          {/* Grid 1: Customer Details, Payment Verification & Courier Info */}
                          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                            
                            {/* Customer Details Box */}
                            <div className="bg-white p-4 rounded-2xl border border-[#E8D9CC] space-y-2">
                              <h4 className="font-bold text-slate-800 uppercase tracking-wider border-b pb-1.5 flex items-center gap-1.5">
                                <User className="w-4 h-4 text-[#C81E3D]" /> Customer & Contact Details
                              </h4>
                              <div className="space-y-1 text-slate-700">
                                <div><strong>Name:</strong> {order.customer.name} {order.customer.companyName ? `(${order.customer.companyName})` : ''}</div>
                                <div><strong>Email:</strong> {order.customer.email}</div>
                                <div><strong>Mobile:</strong> <span className="font-mono">{order.customer.phone}</span></div>
                                {order.customer.whatsapp && <div><strong>WhatsApp:</strong> <span className="font-mono">{order.customer.whatsapp}</span></div>}
                                <div><strong>Address:</strong> {order.customer.address}</div>
                                <div><strong>City / Province:</strong> {order.customer.city}, {order.customer.province || 'Pakistan'} {order.customer.postalCode ? `(${order.customer.postalCode})` : ''}</div>
                                {order.customer.notes && <div className="p-2 bg-amber-50 rounded-xl border border-amber-200 mt-2"><strong>Notes:</strong> {order.customer.notes}</div>}
                              </div>
                            </div>

                            {/* Payment & Verification Box */}
                            <div className="bg-white p-4 rounded-2xl border border-[#E8D9CC] space-y-3">
                              <h4 className="font-bold text-slate-800 uppercase tracking-wider border-b pb-1.5 flex items-center justify-between">
                                <span className="flex items-center gap-1.5">
                                  <Building2 className="w-4 h-4 text-[#C81E3D]" /> Payment & Verification
                                </span>
                                <span className={`text-[10px] font-extrabold px-2 py-0.5 rounded-full uppercase ${
                                  order.paymentStatus === 'Payment Verified' ? 'bg-emerald-100 text-emerald-800 border border-emerald-300' :
                                  order.paymentStatus === 'Payment Rejected' ? 'bg-rose-100 text-rose-800 border border-rose-300' :
                                  'bg-amber-100 text-amber-900 border border-amber-300'
                                }`}>
                                  {order.paymentStatus || 'Pending Verification'}
                                </span>
                              </h4>

                              <div className="space-y-1.5 text-slate-700 text-xs">
                                <div><strong>Payment Method:</strong> <span className="font-bold text-slate-900">{order.paymentMethod}</span></div>
                                {order.qrPaymentAmount && (
                                  <div><strong>QR Amount:</strong> <span className="font-bold text-emerald-700">Rs {order.qrPaymentAmount.toLocaleString('en-PK')}</span></div>
                                )}
                                {order.paymentProofUploadedAt && (
                                  <div><strong>Uploaded:</strong> <span className="text-slate-500">{new Date(order.paymentProofUploadedAt).toLocaleString('en-PK')}</span></div>
                                )}
                              </div>

                              {/* Payment Proof Button */}
                              {order.paymentProof ? (
                                <div className="pt-2 border-t border-slate-100 flex items-center justify-between gap-2">
                                  <div className="flex items-center gap-2 overflow-hidden">
                                    <img src={order.paymentProof} alt="Proof Thumbnail" className="w-9 h-9 object-cover rounded-lg border border-slate-200 shrink-0" />
                                    <span className="text-[11px] font-semibold text-slate-700 truncate">Proof Uploaded</span>
                                  </div>
                                  <button
                                    onClick={() => setViewingProofOrder(order)}
                                    className="px-3 py-1.5 bg-slate-900 hover:bg-slate-800 text-white font-bold rounded-xl text-xs flex items-center gap-1 cursor-pointer transition-colors shrink-0"
                                  >
                                    <Camera className="w-3.5 h-3.5" />
                                    <span>View Proof</span>
                                  </button>
                                </div>
                              ) : (
                                <div className="p-2 bg-slate-50 rounded-xl text-slate-400 italic text-[11px] text-center border border-slate-100">
                                  No payment proof uploaded.
                                </div>
                              )}

                              {/* Verification Quick Action Buttons */}
                              <div className="pt-2 border-t border-slate-100 space-y-1.5">
                                <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider block">Update Verification Status:</span>
                                <div className="flex flex-wrap gap-1.5">
                                  <button
                                    onClick={() => handleUpdatePaymentStatusAndEmail(order, 'Payment Verified')}
                                    disabled={order.paymentStatus === 'Payment Verified'}
                                    className="px-2.5 py-1 bg-emerald-600 hover:bg-emerald-700 disabled:opacity-40 text-white font-bold text-[10px] rounded-lg cursor-pointer transition-colors"
                                  >
                                    ✓ Verify Payment
                                  </button>
                                  <button
                                    onClick={() => handleUpdatePaymentStatusAndEmail(order, 'Payment Rejected')}
                                    disabled={order.paymentStatus === 'Payment Rejected'}
                                    className="px-2.5 py-1 bg-rose-600 hover:bg-rose-700 disabled:opacity-40 text-white font-bold text-[10px] rounded-lg cursor-pointer transition-colors"
                                  >
                                    ✕ Reject
                                  </button>
                                  <button
                                    onClick={() => handleUpdatePaymentStatusAndEmail(order, 'Pending Verification')}
                                    disabled={order.paymentStatus === 'Pending Verification' || !order.paymentStatus}
                                    className="px-2.5 py-1 bg-amber-500 hover:bg-amber-600 disabled:opacity-40 text-white font-bold text-[10px] rounded-lg cursor-pointer transition-colors"
                                  >
                                    Pending
                                  </button>
                                </div>
                              </div>
                            </div>

                            {/* Courier & Tracking Info */}
                            <div className="bg-white p-4 rounded-2xl border border-[#E8D9CC] space-y-2">
                              <h4 className="font-bold text-slate-800 uppercase tracking-wider border-b pb-1.5 flex items-center justify-between">
                                <span className="flex items-center gap-1.5">
                                  <Truck className="w-4 h-4 text-[#C81E3D]" /> Courier & Dispatch Details
                                </span>
                                {order.courierInfo?.courierName && (
                                  <span className="text-[10px] font-extrabold bg-purple-100 text-purple-800 px-2 py-0.5 rounded-full uppercase">
                                    {order.courierInfo.courierName}
                                  </span>
                                )}
                              </h4>

                              {order.courierInfo && order.courierInfo.trackingNumber ? (
                                <div className="space-y-2 text-slate-700">
                                  <div><strong>Courier Partner:</strong> {order.courierInfo.courierName}</div>
                                  <div><strong>Tracking Number (CN):</strong> <span className="font-mono font-bold text-[#C81E3D]">{order.courierInfo.trackingNumber}</span></div>
                                  <div className="pt-1">
                                    <a
                                      href={order.courierInfo.trackingLink}
                                      target="_blank"
                                      rel="noopener noreferrer"
                                      className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl text-xs"
                                    >
                                      <span>Track Shipment Online</span>
                                      <ExternalLink className="w-3.5 h-3.5" />
                                    </a>
                                  </div>
                                </div>
                              ) : (
                                <div className="p-3 bg-slate-50 rounded-xl text-slate-500 italic text-center">
                                  No courier assigned yet. When status is set to "Dispatched", you will select Leopards or PostEx and enter the tracking number.
                                </div>
                              )}

                              {/* Email Delivery Status */}
                              <div className="pt-2 border-t border-slate-100 space-y-1">
                                <span className="font-bold text-slate-800 block text-[11px] uppercase">Automated Email Status:</span>
                                <div className="flex flex-wrap gap-1.5 text-[10px]">
                                  <span className={`px-2 py-0.5 rounded-full font-bold ${order.emailStatus.confirmationSent ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-500'}`}>
                                    Confirmation Email: {order.emailStatus.confirmationSent ? 'Sent ✓' : 'Pending'}
                                  </span>
                                  <span className={`px-2 py-0.5 rounded-full font-bold ${order.emailStatus.processingSent ? 'bg-blue-100 text-blue-800' : 'bg-slate-100 text-slate-500'}`}>
                                    Processing Email: {order.emailStatus.processingSent ? 'Sent ✓' : 'Pending'}
                                  </span>
                                  <span className={`px-2 py-0.5 rounded-full font-bold ${order.emailStatus.dispatchSent ? 'bg-purple-100 text-purple-800' : 'bg-slate-100 text-slate-500'}`}>
                                    Dispatch Email: {order.emailStatus.dispatchSent ? 'Sent ✓' : 'Pending'}
                                  </span>
                                </div>
                              </div>

                            </div>

                          </div>

                          {/* Products Table */}
                          <div className="bg-white p-4 rounded-2xl border border-[#E8D9CC] space-y-3">
                            <h4 className="font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
                              <Package className="w-4 h-4 text-[#C81E3D]" /> Ordered Items ({order.items.length})
                            </h4>

                            <div className="overflow-x-auto">
                              <table className="w-full text-left text-xs text-slate-700">
                                <thead>
                                  <tr className="bg-slate-100 text-slate-800 font-bold uppercase text-[10px] border-b">
                                    <th className="p-2">Image</th>
                                    <th className="p-2">Product Name</th>
                                    <th className="p-2">Strength</th>
                                    <th className="p-2">Packing</th>
                                    <th className="p-2 text-center">Qty</th>
                                    <th className="p-2 text-right">Unit Price</th>
                                    <th className="p-2 text-right">Total</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {order.items.map((item, idx) => (
                                    <tr key={idx} className="border-b border-slate-100">
                                      <td className="p-2">
                                        <img
                                          src={item.image}
                                          alt={item.productName}
                                          className="w-10 h-10 object-cover rounded-lg border border-slate-200"
                                        />
                                      </td>
                                      <td className="p-2 font-semibold text-slate-900">{item.productName}</td>
                                      <td className="p-2 text-slate-500">{item.strength || '-'}</td>
                                      <td className="p-2 text-slate-500">{item.packing || '-'}</td>
                                      <td className="p-2 text-center font-bold">{item.quantity}</td>
                                      <td className="p-2 text-right">Rs {item.unitPrice.toLocaleString('en-PK')}</td>
                                      <td className="p-2 text-right font-bold text-[#C81E3D]">Rs {item.totalPrice.toLocaleString('en-PK')}</td>
                                    </tr>
                                  ))}
                                </tbody>
                              </table>
                            </div>

                            <div className="flex justify-end pt-2">
                              <div className="bg-slate-50 p-3 rounded-xl border border-slate-200 text-right space-y-1 font-mono text-xs w-64">
                                <div>Subtotal: Rs {order.totals.subtotal.toLocaleString('en-PK')}</div>
                                <div>Shipping: Rs {order.totals.shippingCharges.toLocaleString('en-PK')}</div>
                                {order.totals.discount > 0 && <div className="text-emerald-700">Discount: -Rs {order.totals.discount.toLocaleString('en-PK')}</div>}
                                <div className="text-sm font-bold font-sans text-[#C81E3D] pt-1 border-t">
                                  Grand Total: Rs {order.totals.grandTotal.toLocaleString('en-PK')}
                                </div>
                              </div>
                            </div>
                          </div>

                          {/* Actions & Admin Notes Row */}
                          <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-2">
                            
                            {/* PDF & Email Actions */}
                            <div className="flex flex-wrap items-center gap-2">
                              <button
                                onClick={() => downloadOrderPDF(order)}
                                className="px-3.5 py-2 bg-amber-900 hover:bg-amber-950 text-white font-bold rounded-xl flex items-center gap-1.5 cursor-pointer"
                              >
                                <Download className="w-3.5 h-3.5" />
                                <span>Download PDF</span>
                              </button>

                              <button
                                onClick={() => printOrder(order)}
                                className="px-3.5 py-2 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl flex items-center gap-1.5 cursor-pointer"
                              >
                                <Printer className="w-3.5 h-3.5" />
                                <span>Print Order</span>
                              </button>

                              {/* Re-send Email buttons */}
                              <button
                                disabled={emailSendingOrderId === order.id}
                                onClick={() => handleResendEmail(order, 'confirmation')}
                                className="px-3 py-2 bg-rose-50 hover:bg-rose-100 text-[#C81E3D] border border-rose-200 font-bold rounded-xl flex items-center gap-1.5 cursor-pointer"
                              >
                                <Send className="w-3.5 h-3.5" />
                                <span>Re-send Confirmation</span>
                              </button>

                              {order.status === 'Processing' && (
                                <button
                                  disabled={emailSendingOrderId === order.id}
                                  onClick={() => handleResendEmail(order, 'processing')}
                                  className="px-3 py-2 bg-blue-50 hover:bg-blue-100 text-blue-800 border border-blue-200 font-bold rounded-xl flex items-center gap-1.5 cursor-pointer"
                                >
                                  <Send className="w-3.5 h-3.5" />
                                  <span>Re-send Processing Email</span>
                                </button>
                              )}

                              {order.status === 'Dispatched' && (
                                <button
                                  disabled={emailSendingOrderId === order.id}
                                  onClick={() => handleResendEmail(order, 'dispatch')}
                                  className="px-3 py-2 bg-purple-50 hover:bg-purple-100 text-purple-800 border border-purple-200 font-bold rounded-xl flex items-center gap-1.5 cursor-pointer"
                                >
                                  <Send className="w-3.5 h-3.5" />
                                  <span>Re-send Dispatch Email</span>
                                </button>
                              )}
                            </div>

                          </div>

                        </div>
                      )}

                    </div>
                  );
                })
              )}
            </div>

          </div>
        )}

        {/* TAB 2: REVIEWS */}
        {activeTab === 'reviews' && (
          <div className="space-y-6">
            {/* Stat Cards */}
            <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
              <div className="p-5 bg-white rounded-2xl border border-[#F2E5D9] shadow-xs space-y-1">
                <span className="text-xs font-bold text-slate-500 uppercase block">Total Reviews</span>
                <span className="text-2xl font-bold font-playfair text-slate-900">{reviews.length}</span>
              </div>
              <div className="p-5 bg-amber-50 rounded-2xl border border-amber-200 shadow-xs space-y-1">
                <span className="text-xs font-bold text-amber-800 uppercase block">Pending Approval</span>
                <span className="text-2xl font-bold font-playfair text-amber-900">{pendingReviewsCount}</span>
              </div>
              <div className="p-5 bg-emerald-50 rounded-2xl border border-emerald-200 shadow-xs space-y-1">
                <span className="text-xs font-bold text-emerald-800 uppercase block">Approved</span>
                <span className="text-2xl font-bold font-playfair text-emerald-900">{approvedReviewsCount}</span>
              </div>
              <div className="p-5 bg-rose-50 rounded-2xl border border-rose-200 shadow-xs space-y-1">
                <span className="text-xs font-bold text-rose-800 uppercase block">Rejected / Spam</span>
                <span className="text-2xl font-bold font-playfair text-rose-900">{rejectedReviewsCount}</span>
              </div>
            </div>

            {/* Filter & Search Bar */}
            <div className="bg-white p-4 rounded-2xl border border-[#F2E5D9] flex flex-col md:flex-row items-center justify-between gap-4">
              <div className="flex flex-wrap items-center gap-2 w-full md:w-auto">
                {(['all', 'pending', 'approved', 'rejected'] as const).map((st) => (
                  <button
                    key={st}
                    onClick={() => setReviewFilter(st)}
                    className={`px-3.5 py-1.5 rounded-xl text-xs font-bold capitalize transition-colors cursor-pointer ${
                      reviewFilter === st
                        ? 'bg-[#C81E3D] text-white shadow-xs'
                        : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
                    }`}
                  >
                    {st === 'all' ? `All Reviews (${reviews.length})` : `${st} (${reviews.filter(r => r.status === st).length})`}
                  </button>
                ))}
              </div>

              <div className="relative w-full md:w-64">
                <Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
                <input
                  type="text"
                  placeholder="Search reviews..."
                  value={reviewSearchQuery}
                  onChange={(e) => setReviewSearchQuery(e.target.value)}
                  className="w-full pl-9 pr-3 py-1.5 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:border-[#C81E3D] outline-none"
                />
              </div>
            </div>

            {/* Reviews List */}
            <div className="space-y-4">
              {isLoadingReviews ? (
                <div className="p-12 bg-white rounded-2xl border border-[#F2E5D9] text-center flex flex-col items-center justify-center gap-2">
                  <Loader2 className="w-8 h-8 animate-spin text-[#C81E3D]" />
                  <p className="text-sm font-bold text-slate-700">Loading reviews from database...</p>
                </div>
              ) : filteredReviews.length === 0 ? (
                <div className="p-12 bg-white rounded-2xl border border-[#F2E5D9] text-center space-y-2">
                  <MessageSquare className="w-10 h-10 text-slate-300 mx-auto" />
                  <p className="text-sm font-bold text-slate-700">No reviews found matching filter.</p>
                </div>
              ) : (
                filteredReviews.map((rev) => (
                  <div key={rev.id} className="p-5 bg-white rounded-2xl border border-[#F2E5D9] space-y-3 shadow-xs">
                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-slate-100 pb-3">
                      <div className="space-y-1">
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="font-extrabold text-sm text-slate-900">{rev.authorName}</span>
                          <span className="text-xs text-slate-400 font-mono">({rev.authorEmail})</span>
                          <span className="text-xs text-slate-400">• {rev.date}</span>
                        </div>

                        {/* Star Rating & Product Badge */}
                        <div className="flex items-center gap-3">
                          <div className="flex items-center gap-0.5">
                            {[1, 2, 3, 4, 5].map((star) => (
                              <Star
                                key={star}
                                className={`w-3.5 h-3.5 ${
                                  star <= rev.rating ? 'text-amber-400 fill-amber-400' : 'text-slate-200'
                                }`}
                              />
                            ))}
                          </div>
                          {rev.productName && (
                            <span className="text-[11px] font-bold text-slate-600 bg-slate-100 px-2 py-0.5 rounded-md">
                              Product: {rev.productName}
                            </span>
                          )}
                        </div>
                      </div>

                      <div className="flex items-center gap-2">
                        <span
                          className={`text-[11px] font-extrabold uppercase px-3 py-1 rounded-full ${
                            rev.status === 'approved'
                              ? 'bg-emerald-100 text-emerald-800 border border-emerald-300'
                              : rev.status === 'rejected'
                              ? 'bg-rose-100 text-rose-800 border border-rose-300'
                              : 'bg-amber-100 text-amber-800 border border-amber-300 animate-pulse'
                          }`}
                        >
                          {rev.status === 'pending' ? 'Pending Approval' : rev.status}
                        </span>
                      </div>
                    </div>

                    <p className="text-xs text-slate-700 font-sans leading-relaxed bg-[#FAF5F0] p-3 rounded-xl border border-[#F2E5D9]">
                      "{rev.comment}"
                    </p>

                    {/* Customer Attached Photos */}
                    {rev.images && rev.images.length > 0 && (
                      <div className="p-3 bg-stone-50 rounded-xl border border-stone-200 space-y-2">
                        <div className="flex items-center justify-between text-xs font-bold text-slate-800">
                          <span className="flex items-center gap-1.5 text-[#C81E3D]">
                            <Camera className="w-4 h-4" />
                            <span>Customer Uploaded Review Photos ({rev.images.length})</span>
                          </span>
                          <span className="text-[10px] text-slate-500 font-normal">Click photo to view full size</span>
                        </div>

                        <div className="flex flex-wrap gap-2.5 pt-1">
                          {rev.images.map((imgUrl, imgIdx) => (
                            <button
                              key={imgIdx}
                              type="button"
                              onClick={() => setPreviewImageUrl(imgUrl)}
                              className="w-20 h-20 rounded-xl overflow-hidden border border-stone-300 hover:border-[#C81E3D] transition-all relative group bg-white shrink-0 cursor-pointer shadow-xs hover:shadow-md"
                              title="Click to view full photo"
                            >
                              <img
                                src={imgUrl}
                                alt={`Customer photo ${imgIdx + 1}`}
                                className="w-full h-full object-cover group-hover:scale-105 transition-transform"
                              />
                              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white">
                                <ZoomIn className="w-5 h-5" />
                              </div>
                            </button>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* Action Controls */}
                    <div className="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
                      {rev.status !== 'approved' && (
                        <button
                          onClick={() => handleApproveReview(rev.id)}
                          className="px-4 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl transition-colors cursor-pointer flex items-center gap-1 shadow-xs"
                        >
                          <Check className="w-3.5 h-3.5" />
                          <span>Approve Review</span>
                        </button>
                      )}
                      {rev.status !== 'rejected' && (
                        <button
                          onClick={() => handleRejectReview(rev.id)}
                          className="px-3 py-1.5 bg-amber-600 hover:bg-amber-700 text-white font-bold text-xs rounded-xl transition-colors cursor-pointer flex items-center gap-1"
                        >
                          <AlertTriangle className="w-3.5 h-3.5" />
                          <span>Mark as Spam</span>
                        </button>
                      )}
                      <button
                        onClick={() => handleDeleteReview(rev.id)}
                        className="px-3 py-1.5 bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 font-bold text-xs rounded-xl transition-colors cursor-pointer flex items-center gap-1"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                        <span>Delete</span>
                      </button>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
        )}

        {/* TAB 3: PRODUCTS */}
        {activeTab === 'products' && (
          <div className="p-8 bg-white rounded-3xl border border-[#F2E5D9] space-y-4">
            <h3 className="text-xl font-bold font-playfair text-slate-900">WooCommerce Catalog Status</h3>
            <p className="text-xs text-slate-600">Connected live to <code className="text-[#C81E3D]">timenlife.shop REST API</code> with cached fallback.</p>
          </div>
        )}

        {/* TAB 4: BANK TRANSFER DETAILS SETTINGS */}
        {activeTab === 'bank' && (
          <div className="bg-white rounded-3xl border border-[#F2E5D9] p-6 sm:p-8 space-y-6 animate-in fade-in">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-100 pb-4">
              <div>
                <h3 className="text-lg font-bold font-playfair text-slate-900 flex items-center gap-2">
                  <Building2 className="w-5 h-5 text-[#C81E3D]" />
                  <span>Bank Account & Payment Transfer Configuration</span>
                </h3>
                <p className="text-xs text-slate-500 mt-1">
                  Configure your bank account, IBAN, EasyPaisa, and JazzCash details. These will automatically appear on customer PDF invoices, confirmation emails, and checkout modal when Bank Transfer is selected.
                </p>
              </div>
            </div>

            {bankSaveNotice && (
              <div className="p-4 bg-emerald-100 border border-emerald-300 text-emerald-900 rounded-2xl flex items-center gap-2 text-xs font-bold animate-in fade-in">
                <Check className="w-4 h-4 text-emerald-700" />
                <span>{bankSaveNotice}</span>
              </div>
            )}

            <form onSubmit={handleSaveBankDetails} className="space-y-5 text-xs">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block font-bold text-slate-700 mb-1">Bank Name *</label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. Meezan Bank Limited / HBL / Faysal Bank"
                    value={bankForm.bankName}
                    onChange={(e) => setBankForm({ ...bankForm, bankName: e.target.value })}
                    className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none font-medium"
                  />
                </div>

                <div>
                  <label className="block font-bold text-slate-700 mb-1">Account Title / Owner Name *</label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. Time N Life"
                    value={bankForm.accountTitle}
                    onChange={(e) => setBankForm({ ...bankForm, accountTitle: e.target.value })}
                    className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none font-medium"
                  />
                </div>

                <div>
                  <label className="block font-bold text-slate-700 mb-1">Account Number *</label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. 01010103928102"
                    value={bankForm.accountNumber}
                    onChange={(e) => setBankForm({ ...bankForm, accountNumber: e.target.value })}
                    className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                  />
                </div>

                <div>
                  <label className="block font-bold text-slate-700 mb-1">IBAN Number *</label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. PK89MEZN0001010103928102"
                    value={bankForm.iban}
                    onChange={(e) => setBankForm({ ...bankForm, iban: e.target.value })}
                    className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                  />
                </div>
              </div>

              <div>
                <label className="block font-bold text-slate-700 mb-1">Customer Payment Instructions / Note</label>
                <textarea
                  rows={3}
                  placeholder="Instructions for customer when sending payment screenshot..."
                  value={bankForm.instructions}
                  onChange={(e) => setBankForm({ ...bankForm, instructions: e.target.value })}
                  className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                />
              </div>

              <div className="pt-3">
                <button
                  type="submit"
                  disabled={isSavingBank}
                  className="px-6 py-3 bg-[#C81E3D] hover:bg-[#a61530] text-white font-bold text-xs uppercase tracking-wider rounded-xl shadow-md transition-colors flex items-center gap-2 cursor-pointer disabled:opacity-50"
                >
                  {isSavingBank ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      <span>Saving Bank Details to Firebase...</span>
                    </>
                  ) : (
                    <>
                      <Save className="w-4 h-4" />
                      <span>Save & Sync Bank Details</span>
                    </>
                  )}
                </button>
              </div>
            </form>
          </div>
        )}

        {/* TAB 5: EMAILJS SETTINGS */}
        {activeTab === 'email' && (
          <div className="bg-white rounded-3xl border border-[#F2E5D9] p-6 sm:p-8 shadow-xs space-y-6">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-[#F2E5D9] pb-5">
              <div>
                <h2 className="text-xl font-bold font-playfair text-slate-900 flex items-center gap-2">
                  <Mail className="w-6 h-6 text-[#C81E3D]" />
                  <span>EmailJS Credentials & Firebase Integration</span>
                </h2>
                <p className="text-xs text-slate-500 mt-1">
                  Configure EmailJS credentials stored in Firebase Firestore. Updates apply in real-time across all sessions.
                </p>
              </div>

              <span className="bg-emerald-50 text-emerald-800 border border-emerald-200 text-[11px] font-bold px-3 py-1 rounded-xl flex items-center gap-1.5 self-start sm:self-auto">
                <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
                Synced with Firebase Firestore
              </span>
            </div>

            {emailSaveNotice && (
              <div className="p-4 bg-emerald-100 border border-emerald-300 text-emerald-900 rounded-2xl flex items-center gap-2 text-xs font-bold animate-in fade-in">
                <Check className="w-4 h-4 text-emerald-700" />
                <span>{emailSaveNotice}</span>
              </div>
            )}

            <form onSubmit={handleSaveEmailConfig} className="space-y-8 max-w-4xl">
              
              {/* PRIMARY EMAIL ACCOUNT */}
              <div className="bg-white border-2 border-slate-200 rounded-2xl p-6 space-y-5 shadow-sm">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-100 pb-4">
                  <div>
                    <div className="flex items-center gap-2">
                      <span className="w-3 h-3 rounded-full bg-emerald-500 animate-pulse"></span>
                      <h4 className="font-bold text-slate-900 text-sm">Primary EmailJS Account (Main)</h4>
                    </div>
                    <p className="text-xs text-slate-500 mt-0.5">Primary automation channel for order receipts and status updates.</p>
                  </div>

                  {/* Usage Counter Badge */}
                  <div className="flex items-center gap-3 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2">
                    <div>
                      <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Email Quota Used</div>
                      <div className="text-xs font-mono font-bold text-slate-800">
                        {emailForm.primaryUsed || 0} / {emailForm.primaryLimit || 200}
                        <span className="text-[11px] text-emerald-700 font-sans ml-1.5 font-semibold">
                          ({Math.max(0, (emailForm.primaryLimit || 200) - (emailForm.primaryUsed || 0))} Remaining)
                        </span>
                      </div>
                    </div>
                    <button
                      type="button"
                      onClick={async () => {
                        if (confirm('Are you sure you want to reset the Primary email counter to 0?')) {
                          await resetEmailCounter('primary');
                        }
                      }}
                      className="px-2.5 py-1 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-lg text-[11px] font-bold transition-all cursor-pointer"
                    >
                      Reset Count
                    </button>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                  {/* Public Key */}
                  <div className="space-y-1.5">
                    <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                      Public Key *
                    </label>
                    <input
                      type="text"
                      required
                      placeholder="e.g. R9sYorZX3DTqi59Pk"
                      value={emailForm.publicKey}
                      onChange={(e) => setEmailForm({ ...emailForm, publicKey: e.target.value.trim() })}
                      className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-medium focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                    />
                    <p className="text-[11px] text-slate-500">Account &gt; General Settings</p>
                  </div>

                  {/* Service ID */}
                  <div className="space-y-1.5">
                    <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                      Service ID *
                    </label>
                    <input
                      type="text"
                      required
                      placeholder="e.g. service_toz6uzv"
                      value={emailForm.serviceId}
                      onChange={(e) => setEmailForm({ ...emailForm, serviceId: e.target.value.trim() })}
                      className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-medium focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                    />
                    <p className="text-[11px] text-slate-500">EmailJS Email Services tab</p>
                  </div>

                  {/* Template ID */}
                  <div className="space-y-1.5">
                    <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                      Template ID *
                    </label>
                    <input
                      type="text"
                      required
                      placeholder="e.g. template_sgcoqkp"
                      value={emailForm.templateId}
                      onChange={(e) => setEmailForm({ ...emailForm, templateId: e.target.value.trim() })}
                      className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-medium focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                    />
                    <p className="text-[11px] text-slate-500">Template ID for email body</p>
                  </div>

                  {/* Quota Limit */}
                  <div className="space-y-1.5">
                    <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                      Monthly Email Limit (Quota) *
                    </label>
                    <input
                      type="number"
                      required
                      min={0}
                      placeholder="200"
                      value={emailForm.primaryLimit ?? 200}
                      onChange={(e) => setEmailForm({ ...emailForm, primaryLimit: parseInt(e.target.value) || 0 })}
                      className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-bold focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                    />
                    <p className="text-[11px] text-slate-500">Free EmailJS account limit (Set 0 for unlimited)</p>
                  </div>
                </div>
              </div>

              {/* SECONDARY FALLBACK EMAIL ACCOUNT */}
              <div className="bg-white border-2 border-slate-200 rounded-2xl p-6 space-y-5 shadow-sm">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-100 pb-4">
                  <div className="flex items-center gap-3">
                    <input
                      type="checkbox"
                      id="enableSecondary"
                      checked={Boolean(emailForm.enableSecondary)}
                      onChange={(e) => setEmailForm({ ...emailForm, enableSecondary: e.target.checked })}
                      className="w-4 h-4 text-[#C81E3D] accent-[#C81E3D] rounded border-slate-300 focus:ring-[#C81E3D] cursor-pointer"
                    />
                    <div>
                      <label htmlFor="enableSecondary" className="font-bold text-slate-900 text-sm cursor-pointer">
                        Enable Secondary EmailJS Account (Automatic Fallback / Quota Backup)
                      </label>
                      <p className="text-xs text-slate-500 mt-0.5">
                        When Primary limit runs out or fails, emails automatically route through this account.
                      </p>
                    </div>
                  </div>

                  {emailForm.enableSecondary && (
                    <div className="flex items-center gap-3 bg-amber-50 border border-amber-200 rounded-xl px-3.5 py-2">
                      <div>
                        <div className="text-[10px] font-bold text-amber-800 uppercase tracking-wider">Secondary Quota Used</div>
                        <div className="text-xs font-mono font-bold text-slate-800">
                          {emailForm.secondaryUsed || 0} / {emailForm.secondaryLimit || 200}
                          <span className="text-[11px] text-amber-800 font-sans ml-1.5 font-semibold">
                            ({Math.max(0, (emailForm.secondaryLimit || 200) - (emailForm.secondaryUsed || 0))} Remaining)
                          </span>
                        </div>
                      </div>
                      <button
                        type="button"
                        onClick={async () => {
                          if (confirm('Are you sure you want to reset the Secondary email counter to 0?')) {
                            await resetEmailCounter('secondary');
                          }
                        }}
                        className="px-2.5 py-1 bg-amber-200 hover:bg-amber-300 text-amber-900 rounded-lg text-[11px] font-bold transition-all cursor-pointer"
                      >
                        Reset Count
                      </button>
                    </div>
                  )}
                </div>

                {emailForm.enableSecondary ? (
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5 animate-in fade-in">
                    {/* Secondary Public Key */}
                    <div className="space-y-1.5">
                      <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                        Secondary Public Key *
                      </label>
                      <input
                        type="text"
                        required={emailForm.enableSecondary}
                        placeholder="e.g. 2nd_Public_Key_Here"
                        value={emailForm.secondaryPublicKey || ''}
                        onChange={(e) => setEmailForm({ ...emailForm, secondaryPublicKey: e.target.value.trim() })}
                        className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-medium focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                      />
                      <p className="text-[11px] text-slate-500">2nd EmailJS Account Public Key</p>
                    </div>

                    {/* Secondary Service ID */}
                    <div className="space-y-1.5">
                      <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                        Secondary Service ID *
                      </label>
                      <input
                        type="text"
                        required={emailForm.enableSecondary}
                        placeholder="e.g. service_backup123"
                        value={emailForm.secondaryServiceId || ''}
                        onChange={(e) => setEmailForm({ ...emailForm, secondaryServiceId: e.target.value.trim() })}
                        className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-medium focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                      />
                      <p className="text-[11px] text-slate-500">2nd EmailJS Account Service ID</p>
                    </div>

                    {/* Secondary Template ID */}
                    <div className="space-y-1.5">
                      <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                        Secondary Template ID *
                      </label>
                      <input
                        type="text"
                        required={emailForm.enableSecondary}
                        placeholder="e.g. template_backup456"
                        value={emailForm.secondaryTemplateId || ''}
                        onChange={(e) => setEmailForm({ ...emailForm, secondaryTemplateId: e.target.value.trim() })}
                        className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-medium focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                      />
                      <p className="text-[11px] text-slate-500">2nd EmailJS Account Template ID</p>
                    </div>

                    {/* Secondary Quota Limit */}
                    <div className="space-y-1.5">
                      <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                        Secondary Monthly Email Limit (Quota) *
                      </label>
                      <input
                        type="number"
                        required={emailForm.enableSecondary}
                        min={0}
                        placeholder="200"
                        value={emailForm.secondaryLimit ?? 200}
                        onChange={(e) => setEmailForm({ ...emailForm, secondaryLimit: parseInt(e.target.value) || 0 })}
                        className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-bold focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                      />
                      <p className="text-[11px] text-slate-500">Secondary EmailJS account monthly quota</p>
                    </div>
                  </div>
                ) : (
                  <p className="text-xs text-slate-400 italic">
                    Check the box above to enter separate credentials for a 2nd EmailJS account.
                  </p>
                )}
              </div>

              {/* DEDICATED NEWSLETTER EMAILJS ACCOUNT */}
              <div className="bg-white border-2 border-purple-200 rounded-2xl p-6 space-y-5 shadow-sm">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-purple-100 pb-4">
                  <div className="flex items-center gap-3">
                    <input
                      type="checkbox"
                      id="useSeparateNewsletterAccount"
                      checked={Boolean(emailForm.useSeparateNewsletterAccount)}
                      onChange={(e) => setEmailForm({ ...emailForm, useSeparateNewsletterAccount: e.target.checked })}
                      className="w-4 h-4 text-purple-600 accent-purple-600 rounded border-slate-300 focus:ring-purple-600 cursor-pointer"
                    />
                    <div>
                      <label htmlFor="useSeparateNewsletterAccount" className="font-bold text-slate-900 text-sm cursor-pointer flex items-center gap-1.5">
                        <Mail className="w-4 h-4 text-purple-600" />
                        <span>Dedicated Newsletter EmailJS Account (Marketing Campaigns)</span>
                      </label>
                      <p className="text-xs text-slate-500 mt-0.5">
                        Separate EmailJS credentials for sending promotional newsletters &amp; bulk campaigns independently.
                      </p>
                    </div>
                  </div>

                  {emailForm.useSeparateNewsletterAccount && (
                    <div className="flex items-center gap-3 bg-purple-50 border border-purple-200 rounded-xl px-3.5 py-2">
                      <div>
                        <div className="text-[10px] font-bold text-purple-800 uppercase tracking-wider">Newsletter Quota Used</div>
                        <div className="text-xs font-mono font-bold text-slate-800">
                          {emailForm.newsletterUsed || 0} / {emailForm.newsletterLimit || 200}
                          <span className="text-[11px] text-purple-800 font-sans ml-1.5 font-semibold">
                            ({Math.max(0, (emailForm.newsletterLimit || 200) - (emailForm.newsletterUsed || 0))} Remaining)
                          </span>
                        </div>
                      </div>
                      <button
                        type="button"
                        onClick={async () => {
                          if (confirm('Are you sure you want to reset the Newsletter email counter to 0?')) {
                            await resetEmailCounter('newsletter');
                          }
                        }}
                        className="px-2.5 py-1 bg-purple-200 hover:bg-purple-300 text-purple-900 rounded-lg text-[11px] font-bold transition-all cursor-pointer"
                      >
                        Reset Count
                      </button>
                    </div>
                  )}
                </div>

                {emailForm.useSeparateNewsletterAccount ? (
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5 animate-in fade-in">
                    {/* Newsletter Public Key */}
                    <div className="space-y-1.5">
                      <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                        Newsletter Public Key *
                      </label>
                      <input
                        type="text"
                        required={emailForm.useSeparateNewsletterAccount}
                        placeholder="e.g. Newsletter_Public_Key_Here"
                        value={emailForm.newsletterPublicKey || ''}
                        onChange={(e) => setEmailForm({ ...emailForm, newsletterPublicKey: e.target.value.trim() })}
                        className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-medium focus:bg-white focus:ring-2 focus:ring-purple-600 outline-none"
                      />
                      <p className="text-[11px] text-slate-500">Separate Public Key for Newsletter EmailJS account</p>
                    </div>

                    {/* Newsletter Service ID */}
                    <div className="space-y-1.5">
                      <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                        Newsletter Service ID *
                      </label>
                      <input
                        type="text"
                        required={emailForm.useSeparateNewsletterAccount}
                        placeholder="e.g. service_newsletter123"
                        value={emailForm.newsletterServiceId || ''}
                        onChange={(e) => setEmailForm({ ...emailForm, newsletterServiceId: e.target.value.trim() })}
                        className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-medium focus:bg-white focus:ring-2 focus:ring-purple-600 outline-none"
                      />
                      <p className="text-[11px] text-slate-500">Separate Service ID for Newsletter EmailJS account</p>
                    </div>

                    {/* Newsletter Template ID */}
                    <div className="space-y-1.5">
                      <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                        Newsletter Template ID *
                      </label>
                      <input
                        type="text"
                        required={emailForm.useSeparateNewsletterAccount}
                        placeholder="e.g. template_newsletter456"
                        value={emailForm.newsletterTemplateId || ''}
                        onChange={(e) => setEmailForm({ ...emailForm, newsletterTemplateId: e.target.value.trim() })}
                        className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-medium focus:bg-white focus:ring-2 focus:ring-purple-600 outline-none"
                      />
                      <p className="text-[11px] text-slate-500">Separate Template ID for Newsletter EmailJS account</p>
                    </div>

                    {/* Newsletter Quota Limit */}
                    <div className="space-y-1.5">
                      <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                        Newsletter Monthly Email Limit (Quota) *
                      </label>
                      <input
                        type="number"
                        required={emailForm.useSeparateNewsletterAccount}
                        min={0}
                        placeholder="200"
                        value={emailForm.newsletterLimit ?? 200}
                        onChange={(e) => setEmailForm({ ...emailForm, newsletterLimit: parseInt(e.target.value) || 0 })}
                        className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-bold focus:bg-white focus:ring-2 focus:ring-purple-600 outline-none"
                      />
                      <p className="text-[11px] text-slate-500">Newsletter account monthly quota</p>
                    </div>
                  </div>
                ) : (
                  <p className="text-xs text-slate-400 italic">
                    Uncheck above if you want newsletter campaigns to share your primary order email quota.
                  </p>
                )}
              </div>

              {/* ADMIN ALERT EMAILS */}
              <div className="bg-white border-2 border-slate-200 rounded-2xl p-6 space-y-3 shadow-sm">
                <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
                  Admin Alert Emails (Comma separated) *
                </label>
                <textarea
                  rows={2}
                  required
                  placeholder="e.g. admin@timenlife.com, orders@timenlife.com"
                  value={emailForm.adminEmail}
                  onChange={(e) => setEmailForm({ ...emailForm, adminEmail: e.target.value })}
                  className="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-medium focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                />
                <p className="text-[11px] text-slate-500">
                  Separate multiple admin email addresses with commas. All listed emails will receive real-time order alerts.
                </p>
              </div>

              <div className="p-4 bg-emerald-50 border border-emerald-200 rounded-2xl text-xs text-emerald-950 space-y-1">
                <p className="font-bold flex items-center gap-1.5">
                  <span>💡 Automatic Fallback & Limit Deduction Logic:</span>
                </p>
                <p className="text-[11px] text-emerald-900 leading-relaxed">
                  Every sent email decrements 1 count from the active account limit. If the primary account reaches its limit or throws a quota error, the system seamlessly routes all subsequent customer & admin emails through your secondary account without missing any order notifications!
                </p>
              </div>

              <div className="pt-2">
                <button
                  type="submit"
                  disabled={isSavingEmail}
                  className="inline-flex items-center gap-2 px-6 py-3 bg-[#C81E3D] hover:bg-[#A6142E] text-white font-bold rounded-xl text-xs uppercase tracking-wider shadow-md transition-all cursor-pointer disabled:opacity-50"
                >
                  {isSavingEmail ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      <span>Saving to Firebase...</span>
                    </>
                  ) : (
                    <>
                      <Save className="w-4 h-4" />
                      <span>Save All Email Settings &amp; Quotas</span>
                    </>
                  )}
                </button>
              </div>
            </form>
          </div>
        )}

        {/* TAB: NEWSLETTER MARKETING */}
        {activeTab === 'newsletter' && (
          <NewsletterManager />
        )}

        {/* TAB: COUPONS & DISCOUNTS */}
        {activeTab === 'coupons' && (
          <CouponManager />
        )}

        {/* TAB: COLLABORATIVE TEAM MANAGEMENT */}
        {activeTab === 'team' && (
          <div className="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-6">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-100 pb-5">
              <div>
                <h2 className="text-xl font-bold font-serif text-slate-900 flex items-center gap-2">
                  <User className="w-5 h-5 text-amber-600" />
                  Collaborative Team Management (Executive Board)
                </h2>
                <p className="text-xs text-slate-500 mt-1">
                  Manage team member photos, roles, bios, and emails displayed on the public <strong>Our Team</strong> page.
                </p>
              </div>

              <div className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={() => {
                    const newMember = {
                      id: String(Date.now()),
                      name: 'New Executive Member',
                      role: 'Director',
                      bio: 'Executive officer contributing to Time N Life operations.',
                      imageUrl: '',
                      email: 'executive@timenlife.com',
                    };
                    setTeamMembersList([...teamMembersList, newMember]);
                  }}
                  className="px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white text-xs font-bold rounded-xl transition-all cursor-pointer flex items-center gap-1.5"
                >
                  + Add Member
                </button>

                <button
                  type="button"
                  onClick={async () => {
                    setIsSavingTeam(true);
                    try {
                      await saveTeamMembersToFirebase(teamMembersList);
                      setTeamSaveNotice('Team members and image URLs saved to Firebase & synced successfully!');
                      setTimeout(() => setTeamSaveNotice(null), 4000);
                    } catch (e) {
                      setTeamSaveNotice('Failed to update team members.');
                    } finally {
                      setIsSavingTeam(false);
                    }
                  }}
                  disabled={isSavingTeam}
                  className="px-5 py-2 bg-[#C81E3D] hover:bg-[#A6142E] text-white text-xs font-bold rounded-xl transition-all cursor-pointer flex items-center gap-1.5 shadow-md disabled:opacity-50"
                >
                  {isSavingTeam ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
                  <span>Save Changes</span>
                </button>
              </div>
            </div>

            {teamSaveNotice && (
              <div className="p-3 bg-emerald-50 border border-emerald-300 text-emerald-900 rounded-2xl text-xs font-bold flex items-center gap-2">
                <CheckCircle2 className="w-4 h-4 text-emerald-600" />
                <span>{teamSaveNotice}</span>
              </div>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {teamMembersList.map((member, idx) => (
                <div key={member.id || idx} className="p-5 rounded-2xl border border-slate-200 bg-slate-50/60 space-y-4">
                  <div className="flex items-center justify-between border-b border-slate-200/80 pb-3">
                    <span className="text-xs font-bold uppercase tracking-wider text-amber-800 bg-amber-100 px-2.5 py-0.5 rounded-full">
                      Member #{idx + 1}
                    </span>
                    <button
                      type="button"
                      onClick={() => {
                        const updated = teamMembersList.filter((_, i) => i !== idx);
                        setTeamMembersList(updated);
                      }}
                      className="p-1 text-rose-600 hover:text-rose-800 transition-colors cursor-pointer"
                      title="Remove Member"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="relative group shrink-0 w-20 h-20 rounded-2xl border border-slate-300 overflow-hidden bg-slate-200 animate-pulse flex items-center justify-center">
                      {member.imageUrl ? (
                        <img
                          src={member.imageUrl}
                          alt={member.name}
                          className="w-full h-full object-cover"
                        />
                      ) : (
                        <div className="w-full h-full bg-slate-200 animate-pulse" />
                      )}
                    </div>

                    <div className="space-y-2 flex-1">
                      <div>
                        <label className="block text-[11px] font-bold text-slate-700 uppercase">Image URL / WooCommerce Media Link</label>
                        <input
                          type="text"
                          value={member.imageUrl || ''}
                          onChange={(e) => {
                            const updated = [...teamMembersList];
                            updated[idx].imageUrl = e.target.value;
                            setTeamMembersList(updated);
                          }}
                          placeholder="https://..."
                          className="w-full px-3 py-1.5 bg-white border border-slate-300 rounded-xl text-xs outline-none focus:border-amber-500"
                        />
                      </div>

                      {/* File Upload Option */}
                      <div>
                        <label className="block text-[10px] text-slate-500 font-medium">Or Upload Photo File:</label>
                        <input
                          type="file"
                          accept="image/*"
                          onChange={(e) => {
                            const file = e.target.files?.[0];
                            if (file) {
                              const reader = new FileReader();
                              reader.onload = (uploadEvent) => {
                                const base64 = uploadEvent.target?.result as string;
                                if (base64) {
                                  const updated = [...teamMembersList];
                                  updated[idx].imageUrl = base64;
                                  setTeamMembersList(updated);
                                }
                              };
                              reader.readAsDataURL(file);
                            }
                          }}
                          className="text-[11px] text-slate-500 file:mr-2 file:py-1 file:px-2 file:rounded-lg file:border-0 file:text-[11px] file:font-semibold file:bg-amber-100 file:text-amber-800 hover:file:bg-amber-200 cursor-pointer"
                        />
                      </div>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                      <label className="block text-[11px] font-bold text-slate-700 uppercase">Full Name</label>
                      <input
                        type="text"
                        value={member.name || ''}
                        onChange={(e) => {
                          const updated = [...teamMembersList];
                          updated[idx].name = e.target.value;
                          setTeamMembersList(updated);
                        }}
                        className="w-full px-3 py-1.5 bg-white border border-slate-300 rounded-xl text-xs outline-none focus:border-amber-500 font-semibold"
                      />
                    </div>

                    <div>
                      <label className="block text-[11px] font-bold text-slate-700 uppercase">Designation / Role</label>
                      <input
                        type="text"
                        value={member.role || ''}
                        onChange={(e) => {
                          const updated = [...teamMembersList];
                          updated[idx].role = e.target.value;
                          setTeamMembersList(updated);
                        }}
                        className="w-full px-3 py-1.5 bg-white border border-slate-300 rounded-xl text-xs outline-none focus:border-amber-500 text-amber-800 font-bold"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-[11px] font-bold text-slate-700 uppercase">Email Address</label>
                    <input
                      type="email"
                      value={member.email || ''}
                      onChange={(e) => {
                        const updated = [...teamMembersList];
                        updated[idx].email = e.target.value;
                        setTeamMembersList(updated);
                      }}
                      className="w-full px-3 py-1.5 bg-white border border-slate-300 rounded-xl text-xs outline-none focus:border-amber-500"
                    />
                  </div>

                  <div>
                    <label className="block text-[11px] font-bold text-slate-700 uppercase">Executive Bio</label>
                    <textarea
                      rows={2}
                      value={member.bio || ''}
                      onChange={(e) => {
                        const updated = [...teamMembersList];
                        updated[idx].bio = e.target.value;
                        setTeamMembersList(updated);
                      }}
                      className="w-full px-3 py-1.5 bg-white border border-slate-300 rounded-xl text-xs outline-none focus:border-amber-500"
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

      </div>

      {/* DISPATCH MODAL */}
      {dispatchModalOrder && (
        <div className="fixed inset-0 z-50 bg-black/75 backdrop-blur-xs flex items-center justify-center p-4 animate-in fade-in">
          <div className="bg-[#FFFDFB] w-full max-w-md rounded-3xl shadow-2xl border border-[#F2E5D9] overflow-hidden">
            
            <div className="bg-[#1C1814] text-white p-5 flex items-center justify-between border-b border-purple-900/40">
              <div className="flex items-center gap-2.5">
                <div className="p-2 bg-purple-600 text-white rounded-xl">
                  <Truck className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="font-bold text-sm text-purple-100">Dispatch Order #{dispatchModalOrder.id}</h3>
                  <p className="text-xs text-purple-200/70">Select Courier & Enter Tracking CN Number</p>
                </div>
              </div>
              <button
                onClick={() => setDispatchModalOrder(null)}
                className="p-1 text-slate-400 hover:text-white cursor-pointer"
              >
                <XCircle className="w-5 h-5" />
              </button>
            </div>

            <form onSubmit={handleConfirmDispatch} className="p-6 space-y-4 text-xs">
              
              <div>
                <label className="block font-bold text-slate-800 uppercase mb-1.5">1. Select Courier Service *</label>
                <div className="grid grid-cols-2 gap-3">
                  <button
                    type="button"
                    onClick={() => setSelectedCourier('Leopards')}
                    className={`p-3 rounded-2xl border text-center font-bold transition-all cursor-pointer ${
                      selectedCourier === 'Leopards'
                        ? 'border-purple-600 bg-purple-50 text-purple-900 shadow-xs'
                        : 'border-slate-200 bg-white text-slate-700'
                    }`}
                  >
                    Leopards Courier
                  </button>

                  <button
                    type="button"
                    onClick={() => setSelectedCourier('PostEx')}
                    className={`p-3 rounded-2xl border text-center font-bold transition-all cursor-pointer ${
                      selectedCourier === 'PostEx'
                        ? 'border-purple-600 bg-purple-50 text-purple-900 shadow-xs'
                        : 'border-slate-200 bg-white text-slate-700'
                    }`}
                  >
                    PostEx Courier
                  </button>
                </div>
              </div>

              <div>
                <label className="block font-bold text-slate-800 uppercase mb-1">2. Tracking CN Number *</label>
                <input
                  type="text"
                  required
                  placeholder={selectedCourier === 'Leopards' ? 'e.g. LCS982341029' : 'e.g. PX78491023'}
                  value={trackingNumber}
                  onChange={(e) => setTrackingNumber(e.target.value)}
                  className="w-full px-3 py-2.5 bg-white border border-slate-300 rounded-xl text-xs font-mono focus:ring-2 focus:ring-purple-600 outline-none"
                />
              </div>

              <div>
                <label className="block font-bold text-slate-800 uppercase mb-1">3. Dispatch Note (Optional)</label>
                <textarea
                  rows={2}
                  placeholder="Note for tracking or customer..."
                  value={dispatchNote}
                  onChange={(e) => setDispatchNote(e.target.value)}
                  className="w-full px-3 py-2 bg-white border border-slate-300 rounded-xl text-xs outline-none"
                />
              </div>

              <div className="p-3 bg-purple-50 border border-purple-200 rounded-xl text-[11px] text-purple-900">
                ⚡ Upon saving, status will update to <strong>Dispatched</strong> in Firebase and a Dispatch Email with tracking link will automatically be sent to <strong>{dispatchModalOrder.customer.email}</strong>.
              </div>

              <div className="flex gap-2 pt-2">
                <button
                  type="button"
                  onClick={() => setDispatchModalOrder(null)}
                  className="flex-1 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl cursor-pointer"
                >
                  Cancel
                </button>

                <button
                  type="submit"
                  disabled={isUpdatingDispatch}
                  className="flex-1 py-3 bg-purple-700 hover:bg-purple-800 text-white font-bold rounded-xl cursor-pointer disabled:opacity-50 flex items-center justify-center gap-1.5"
                >
                  {isUpdatingDispatch ? (
                    <Loader2 className="w-4 h-4 animate-spin" />
                  ) : (
                    <>
                      <Send className="w-4 h-4" />
                      <span>Confirm & Send Email</span>
                    </>
                  )}
                </button>
              </div>

            </form>

          </div>
        </div>
      )}

      {/* Review Image Lightbox Modal for Admin */}
      {previewImageUrl && (
        <div
          className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 animate-in fade-in duration-200"
          onClick={() => setPreviewImageUrl(null)}
        >
          <div
            className="relative max-w-4xl max-h-[90vh] bg-white rounded-2xl overflow-hidden shadow-2xl flex flex-col items-center p-3 sm:p-4 border border-slate-200"
            onClick={(e) => e.stopPropagation()}
          >
            <button
              onClick={() => setPreviewImageUrl(null)}
              className="absolute top-3 right-3 w-9 h-9 rounded-full bg-slate-900/80 hover:bg-slate-900 text-white flex items-center justify-center transition-colors z-10 cursor-pointer shadow-md"
              title="Close Preview"
            >
              <X className="w-5 h-5" />
            </button>

            <div className="w-full h-full flex items-center justify-center overflow-auto max-h-[80vh] rounded-xl bg-slate-950 p-2">
              <img
                src={previewImageUrl}
                alt="Customer review uploaded image preview"
                className="max-w-full max-h-[78vh] object-contain rounded-lg"
              />
            </div>

            <div className="pt-3 w-full flex items-center justify-between text-xs text-slate-500 font-sans px-2">
              <span className="flex items-center gap-1.5 font-bold text-slate-800">
                <Camera className="w-4 h-4 text-[#C81E3D]" /> Customer Uploaded Photo
              </span>
              <button
                onClick={() => setPreviewImageUrl(null)}
                className="text-[#C81E3D] hover:underline font-bold cursor-pointer"
              >
                Close Preview
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Payment Proof Verification Lightbox Modal for Admin */}
      {viewingProofOrder && (
        <div
          className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xs flex items-center justify-center p-4 animate-in fade-in duration-200"
          onClick={() => setViewingProofOrder(null)}
        >
          <div
            className="bg-white w-full max-w-3xl rounded-3xl shadow-2xl border border-slate-200 overflow-hidden flex flex-col max-h-[90vh]"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="p-4 bg-slate-900 text-white flex items-center justify-between border-b border-slate-800">
              <div>
                <h3 className="font-bold text-sm text-amber-100 flex items-center gap-2 font-playfair">
                  <Camera className="w-4 h-4 text-emerald-400" />
                  Payment Proof Verification — Order #{viewingProofOrder.id}
                </h3>
                <p className="text-[11px] text-slate-400">
                  Customer: {viewingProofOrder.customer.name} ({viewingProofOrder.customer.phone})
                </p>
              </div>
              <button
                onClick={() => setViewingProofOrder(null)}
                className="p-1.5 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition-colors cursor-pointer"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="p-6 overflow-y-auto space-y-4">
              {/* Verification Summary Header */}
              <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 bg-slate-50 p-4 rounded-2xl border border-slate-200 text-xs">
                <div>
                  <div className="font-bold text-slate-900 text-sm">
                    Payment Method: <span className="text-[#C81E3D]">{viewingProofOrder.paymentMethod}</span>
                  </div>
                  <div className="text-slate-600 mt-0.5">
                    QR Amount: <strong className="text-emerald-700">Rs {(viewingProofOrder.qrPaymentAmount || viewingProofOrder.totals.grandTotal).toLocaleString('en-PK')}</strong>
                  </div>
                  {viewingProofOrder.paymentProofUploadedAt && (
                    <div className="text-slate-500 text-[11px]">
                      Uploaded at: {new Date(viewingProofOrder.paymentProofUploadedAt).toLocaleString('en-PK')}
                    </div>
                  )}
                </div>

                <div className="flex flex-col items-end gap-2 shrink-0">
                  <div className="flex items-center gap-1.5">
                    <span className="text-[11px] font-bold text-slate-500">Verification Status:</span>
                    <span className={`px-3 py-1 rounded-full font-bold text-xs ${
                      viewingProofOrder.paymentStatus === 'Payment Verified' ? 'bg-emerald-100 text-emerald-800 border border-emerald-300' :
                      viewingProofOrder.paymentStatus === 'Payment Rejected' ? 'bg-rose-100 text-rose-800 border border-rose-300' :
                      'bg-amber-100 text-amber-900 border border-amber-300'
                    }`}>
                      {viewingProofOrder.paymentStatus || 'Pending Verification'}
                    </span>
                  </div>

                  <div className="flex items-center gap-2">
                    <button
                      onClick={() => handleUpdatePaymentStatusAndEmail(viewingProofOrder, 'Payment Verified')}
                      disabled={viewingProofOrder.paymentStatus === 'Payment Verified'}
                      className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 disabled:opacity-40 text-white font-bold text-xs rounded-xl shadow-xs transition-colors cursor-pointer"
                    >
                      ✓ Verify Payment
                    </button>
                    <button
                      onClick={() => handleUpdatePaymentStatusAndEmail(viewingProofOrder, 'Payment Rejected')}
                      disabled={viewingProofOrder.paymentStatus === 'Payment Rejected'}
                      className="px-3 py-1.5 bg-rose-600 hover:bg-rose-700 disabled:opacity-40 text-white font-bold text-xs rounded-xl shadow-xs transition-colors cursor-pointer"
                    >
                      ✕ Reject
                    </button>
                  </div>
                </div>
              </div>

              {/* Proof Image Box */}
              {viewingProofOrder.paymentProof && (
                <div className="bg-slate-900 rounded-2xl p-4 flex flex-col items-center justify-center border border-slate-800 text-center space-y-3">
                  <span className="text-xs text-slate-300 font-semibold flex items-center gap-1.5">
                    <ZoomIn className="w-4 h-4 text-emerald-400" />
                    Uploaded Payment Screenshot / Receipt
                  </span>
                  <img
                    src={viewingProofOrder.paymentProof}
                    alt="Payment Proof"
                    className="max-h-[50vh] object-contain rounded-xl border border-slate-700 shadow-xl"
                  />
                  <a
                    href={viewingProofOrder.paymentProof}
                    download={`payment-proof-${viewingProofOrder.id}.png`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-1.5 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold rounded-xl transition-colors cursor-pointer"
                  >
                    <Download className="w-4 h-4" />
                    <span>Open / Download Full Image</span>
                  </a>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

    </div>
  );
};