import React, { useEffect, useState } from 'react';
import { 
  FileText,
  CreditCard,
  Tag,
  Search,
  Plus,
  Edit,
  Trash2,
  Eye,
  Filter,
  Sparkles,
  ChevronRight,
  X,
} from 'lucide-react';
import { toast } from 'react-toastify';
import Loading from '../../shared/components/Loading';
import EmptyState from '../../shared/components/EmptyState';
import Pagination from '../../shared/components/Pagination';
import { useFormatCurrency } from '../../features/payments/hooks/useFormatCurrency';
import { useCurrency } from '../../features/payments/contexts/CurrencyContext';
import { useNavigate } from 'react-router-dom';
import invoiceService, { Invoice } from '../../features/payments/services/invoiceService';
import paymentService from '../../features/payments/services/paymentService';
import type { Payment } from '../../features/payments/services/paymentService';
import promotionService, { Promotion } from '../../features/loyalty/services/promotionService';
import { getRoomTypes } from '../../features/rooms/services/roomService';
import { formatDate } from '../../shared/utils/format';

interface RoomType {
  id: number;
  name: string;
}

type BusinessTab = 'overview' | 'invoices' | 'payments' | 'promotions';

const BusinessDashboardPage: React.FC = () => {
  const { formatCurrency } = useFormatCurrency();
  const { currency } = useCurrency();
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState<BusinessTab>('overview');

  
  const [invoices, setInvoices] = useState<Invoice[]>([]);
  const [invoicesLoading, setInvoicesLoading] = useState(true);
  const [invoiceFilters, setInvoiceFilters] = useState({
    search: '',
    status: '',
  });
  const [invoicesCurrentPage, setInvoicesCurrentPage] = useState(1);
  const [invoicesTotalPages, setInvoicesTotalPages] = useState(1);
  const [invoicesTotalItems, setInvoicesTotalItems] = useState(0);
  const invoicesPerPage = 10;

  
  const [payments, setPayments] = useState<Payment[]>([]);
  const [paymentsLoading, setPaymentsLoading] = useState(true);
  const [paymentFilters, setPaymentFilters] = useState({
    search: '',
    method: '',
    from: '',
    to: '',
  });
  const [paymentsCurrentPage, setPaymentsCurrentPage] = useState(1);
  const [paymentsTotalPages, setPaymentsTotalPages] = useState(1);
  const [paymentsTotalItems, setPaymentsTotalItems] = useState(0);
  const paymentsPerPage = 5;

  
  const [promotions, setPromotions] = useState<Promotion[]>([]);
  const [promotionsLoading, setPromotionsLoading] = useState(true);
  const [showPromotionModal, setShowPromotionModal] = useState(false);
  const [editingPromotion, setEditingPromotion] = useState<Promotion | null>(null);
  const [promotionFilters, setPromotionFilters] = useState({
    search: '',
    status: '',
    type: '',
  });
  const [promotionsCurrentPage, setPromotionsCurrentPage] = useState(1);
  const [promotionsTotalPages, setPromotionsTotalPages] = useState(1);
  const [promotionsTotalItems, setPromotionsTotalItems] = useState(0);
  const promotionsPerPage = 5;

  const [promotionFormData, setPromotionFormData] = useState({
    code: '',
    name: '',
    description: '',
    discount_type: 'percentage' as 'percentage' | 'fixed',
    discount_value: 0,
    min_booking_amount: 0,
    max_discount_amount: 0,
    min_stay_days: 0,
    max_stay_days: 0,
    advance_booking_days: 0,
    max_advance_booking_days: 0,
    allowed_check_in_days: [] as number[],
    allowed_check_out_days: [] as number[],
    allowed_room_type_ids: [] as number[],
    excluded_room_type_ids: [] as number[],
    min_guests: 0,
    max_guests: 0,
    first_time_customer_only: false,
    repeat_customer_only: false,
    blackout_dates: [] as string[],
    start_date: '',
    end_date: '',
    usage_limit: 0,
    status: 'active' as 'active' | 'inactive' | 'expired',
  });
  
  const [roomTypes, setRoomTypes] = useState<RoomType[]>([]);

  useEffect(() => {
    if (activeTab === 'invoices') {
      fetchInvoices();
    } else if (activeTab === 'payments') {
      fetchPayments();
    } else if (activeTab === 'promotions') {
      fetchPromotions();
    }
  }, [activeTab, invoiceFilters, invoicesCurrentPage, paymentFilters, paymentsCurrentPage, promotionFilters, promotionsCurrentPage]);

  useEffect(() => {
    fetchRoomTypes();
  }, []);

  const fetchRoomTypes = async () => {
    try {
      const response = await getRoomTypes();
      if (response.success && response.data.room_types) {
        setRoomTypes(response.data.room_types);
      }
    } catch (error: any) {
      console.error('Failed to fetch room types:', error);
    }
  };

  useEffect(() => {
    if (activeTab === 'invoices') {
      setInvoicesCurrentPage(1);
    }
  }, [invoiceFilters]);

  useEffect(() => {
    if (activeTab === 'payments') {
      setPaymentsCurrentPage(1);
    }
  }, [paymentFilters]);

  useEffect(() => {
    if (activeTab === 'promotions') {
      setPromotionsCurrentPage(1);
    }
  }, [promotionFilters]);

  
  const fetchInvoices = async () => {
    try {
      setInvoicesLoading(true);
      const response = await invoiceService.getInvoices({
        status: invoiceFilters.status || undefined,
        page: invoicesCurrentPage,
        limit: invoicesPerPage,
      });
      
      if (response.status === 'success' && response.data) {
        let invoiceList = response.data.invoices || [];
        
        // Client-side filtering for search (only on current page results)
        // Note: This is a limitation - search only works on current page
        // For full search functionality, backend needs to support search parameter
        if (invoiceFilters.search) {
          invoiceList = invoiceList.filter((inv) =>
            inv.invoice_number.toLowerCase().includes(invoiceFilters.search.toLowerCase()) ||
            inv.customer_name.toLowerCase().includes(invoiceFilters.search.toLowerCase()) ||
            inv.customer_email.toLowerCase().includes(invoiceFilters.search.toLowerCase())
          );
        }
        
        setInvoices(invoiceList);
        // Only update pagination if not searching (to avoid incorrect counts)
        if (!invoiceFilters.search) {
          setInvoicesTotalPages(response.data.total_pages || 1);
          setInvoicesTotalItems(response.data.total || 0);
        } else {
          // When searching, keep original pagination but show filtered count
          setInvoicesTotalPages(response.data.total_pages || 1);
          setInvoicesTotalItems(response.data.total || 0);
        }
      }
    } catch (error: any) {
      toast.error(error.response?.data?.message || 'Unable to load invoices');
    } finally {
      setInvoicesLoading(false);
    }
  };

  const handleDeleteInvoice = async (id: number) => {
    if (!window.confirm('Are you sure you want to delete this invoice?')) {
      return;
    }

    try {
      await invoiceService.deleteInvoice(id);
      toast.success('Invoice deleted successfully');
      fetchInvoices();
    } catch (error: any) {
      toast.error(error.response?.data?.message || 'Unable to delete invoice');
    }
  };

  const getInvoiceStatusBadge = (status: string) => {
    const badges: Record<string, { bg: string; text: string; label: string; border: string }> = {
      draft: { bg: 'bg-gradient-to-r from-slate-50 to-gray-50', text: 'text-slate-700', label: 'Draft', border: 'border-slate-200' },
      sent: { bg: 'bg-gradient-to-r from-blue-50 to-indigo-50', text: 'text-blue-800', label: 'Sent', border: 'border-blue-200' },
      paid: { bg: 'bg-gradient-to-r from-emerald-50 to-green-50', text: 'text-emerald-800', label: 'Paid', border: 'border-emerald-200' },
      overdue: { bg: 'bg-gradient-to-r from-rose-50 to-red-50', text: 'text-rose-800', label: 'Overdue', border: 'border-rose-200' },
      cancelled: { bg: 'bg-gradient-to-r from-rose-50 to-red-50', text: 'text-rose-800', label: '❌ Canceled', border: 'border-rose-200' },
    };
    return badges[status] || badges.draft;
  };

  
  const fetchPayments = async () => {
    try {
      setPaymentsLoading(true);
      const response = await paymentService.getPayments({
        ...paymentFilters,
        page: paymentsCurrentPage,
        limit: paymentsPerPage,
      });
      setPayments(response.data.payments);
      if (response.data.pagination) {
        setPaymentsTotalPages(response.data.pagination.totalPages);
        setPaymentsTotalItems(response.data.pagination.total);
      }
    } catch (error: any) {
      toast.error(error.response?.data?.message || 'Unable to load payments list');
    } finally {
      setPaymentsLoading(false);
    }
  };

  const getPaymentMethodBadge = (method: string) => {
    const badges: Record<string, { bg: string; text: string; label: string; border: string }> = {
      cash: { bg: 'bg-gradient-to-r from-emerald-50 to-green-50', text: 'text-emerald-800', label: 'Cash', border: 'border-emerald-200' },
      bank_transfer: { bg: 'bg-gradient-to-r from-blue-50 to-indigo-50', text: 'text-blue-800', label: 'Bank transfer', border: 'border-blue-200' },
      stripe: { bg: 'bg-gradient-to-r from-indigo-50 to-purple-50', text: 'text-indigo-800', label: 'Stripe', border: 'border-indigo-200' },
      paypal: { bg: 'bg-gradient-to-r from-blue-50 to-cyan-50', text: 'text-blue-800', label: 'PayPal', border: 'border-blue-200' },
      credit_card: { bg: 'bg-gradient-to-r from-purple-50 to-pink-50', text: 'text-purple-800', label: 'Credit card', border: 'border-purple-200' },
    };
    const badge = badges[method] || badges.cash;
    return (
      <span className={`px-4 py-1.5 rounded-full text-xs font-semibold border shadow-sm ${badge.bg} ${badge.text} ${badge.border}`}>
        {badge.label}
      </span>
    );
  };

  const getPaymentStatusBadge = (status: string) => {
    const statusConfig: Record<string, { bg: string; text: string; label: string; border: string }> = {
      completed: {
        bg: 'bg-gradient-to-r from-emerald-50 to-green-50',
        text: 'text-emerald-800',
        label: '✅ Paid',
        border: 'border-emerald-200'
      },
      pending: {
        bg: 'bg-gradient-to-r from-amber-50 to-yellow-50',
        text: 'text-amber-800',
        label: '⏳ Pending',
        border: 'border-amber-200'
      },
      failed: {
        bg: 'bg-gradient-to-r from-rose-50 to-red-50',
        text: 'text-rose-800',
        label: '❌ Failed',
        border: 'border-rose-200'
      },
      refunded: {
        bg: 'bg-gradient-to-r from-slate-50 to-gray-50',
        text: 'text-slate-700',
        label: '💰 Refunded',
        border: 'border-slate-200'
      },
    };
    const config = statusConfig[status] || statusConfig.pending;
    return (
      <span className={`px-3 py-1.5 rounded-full text-xs font-semibold border shadow-sm ${config.bg} ${config.text} ${config.border}`}>
        {config.label}
      </span>
    );
  };

  
  const fetchPromotions = async () => {
    try {
      setPromotionsLoading(true);
      const response = await promotionService.getPromotions({
        ...promotionFilters,
        page: promotionsCurrentPage,
        limit: promotionsPerPage,
      });
      setPromotions(response.data.promotions);
      if (response.data.pagination) {
        setPromotionsTotalPages(response.data.pagination.totalPages);
        setPromotionsTotalItems(response.data.pagination.total);
      }
    } catch (error: any) {
      toast.error(error.response?.data?.message || 'Unable to load promotions list');
    } finally {
      setPromotionsLoading(false);
    }
  };

  const handlePromotionSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      // Prepare data, converting empty arrays to undefined and 0 values to undefined for optional fields
      const submitData: any = {
        ...promotionFormData,
        min_stay_days: promotionFormData.min_stay_days || undefined,
        max_stay_days: promotionFormData.max_stay_days || undefined,
        advance_booking_days: promotionFormData.advance_booking_days || undefined,
        max_advance_booking_days: promotionFormData.max_advance_booking_days || undefined,
        min_guests: promotionFormData.min_guests || undefined,
        max_guests: promotionFormData.max_guests || undefined,
        allowed_check_in_days: promotionFormData.allowed_check_in_days?.length ? promotionFormData.allowed_check_in_days : undefined,
        allowed_check_out_days: promotionFormData.allowed_check_out_days?.length ? promotionFormData.allowed_check_out_days : undefined,
        allowed_room_type_ids: promotionFormData.allowed_room_type_ids?.length ? promotionFormData.allowed_room_type_ids : undefined,
        excluded_room_type_ids: promotionFormData.excluded_room_type_ids?.length ? promotionFormData.excluded_room_type_ids : undefined,
        blackout_dates: promotionFormData.blackout_dates?.length ? promotionFormData.blackout_dates : undefined,
        min_booking_amount: promotionFormData.min_booking_amount || undefined,
        max_discount_amount: promotionFormData.max_discount_amount || undefined,
        usage_limit: promotionFormData.usage_limit || undefined,
      };
      
      if (editingPromotion) {
        await promotionService.updatePromotion(editingPromotion.id, submitData);
        toast.success('Promotion updated successfully');
      } else {
        await promotionService.createPromotion(submitData);
        toast.success('Promotion added successfully');
      }
      setShowPromotionModal(false);
      resetPromotionForm();
      fetchPromotions();
    } catch (error: any) {
      toast.error(error.response?.data?.message || 'An error occurred');
    }
  };

  const handleEditPromotion = (promotion: Promotion) => {
    setEditingPromotion(promotion);
    setPromotionFormData({
      code: promotion.code,
      name: promotion.name,
      description: promotion.description || '',
      discount_type: promotion.discount_type,
      discount_value: promotion.discount_value,
      min_booking_amount: promotion.min_booking_amount || 0,
      max_discount_amount: promotion.max_discount_amount || 0,
      min_stay_days: promotion.min_stay_days || 0,
      max_stay_days: promotion.max_stay_days || 0,
      advance_booking_days: promotion.advance_booking_days || 0,
      max_advance_booking_days: promotion.max_advance_booking_days || 0,
      allowed_check_in_days: promotion.allowed_check_in_days || [],
      allowed_check_out_days: promotion.allowed_check_out_days || [],
      allowed_room_type_ids: promotion.allowed_room_type_ids || [],
      excluded_room_type_ids: promotion.excluded_room_type_ids || [],
      min_guests: promotion.min_guests || 0,
      max_guests: promotion.max_guests || 0,
      first_time_customer_only: promotion.first_time_customer_only || false,
      repeat_customer_only: promotion.repeat_customer_only || false,
      blackout_dates: promotion.blackout_dates || [],
      start_date: promotion.start_date?.split('T')[0] || '',
      end_date: promotion.end_date?.split('T')[0] || '',
      usage_limit: promotion.usage_limit || 0,
      status: promotion.status,
    });
    setShowPromotionModal(true);
  };

  const handleDeletePromotion = async (id: number) => {
    if (!window.confirm('Are you sure you want to delete this promotion?')) return;
    
    try {
      await promotionService.deletePromotion(id);
      toast.success('Promotion deleted successfully');
      fetchPromotions();
    } catch (error: any) {
      toast.error(error.response?.data?.message || 'Unable to delete promotion');
    }
  };

  const resetPromotionForm = () => {
    setEditingPromotion(null);
    setPromotionFormData({
      code: '',
      name: '',
      description: '',
      discount_type: 'percentage',
      discount_value: 0,
      min_booking_amount: 0,
      max_discount_amount: 0,
      min_stay_days: 0,
      max_stay_days: 0,
      advance_booking_days: 0,
      max_advance_booking_days: 0,
      allowed_check_in_days: [],
      allowed_check_out_days: [],
      allowed_room_type_ids: [],
      excluded_room_type_ids: [],
      min_guests: 0,
      max_guests: 0,
      first_time_customer_only: false,
      repeat_customer_only: false,
      blackout_dates: [],
      start_date: '',
      end_date: '',
      usage_limit: 0,
      status: 'active',
    });
  };

  const getPromotionStatusBadge = (status: string) => {
    const badges: Record<string, { bg: string; text: string; label: string; border: string }> = {
      active: { bg: 'bg-gradient-to-r from-emerald-50 to-green-50', text: 'text-emerald-800', label: 'Active', border: 'border-emerald-200' },
      inactive: { bg: 'bg-gradient-to-r from-slate-50 to-gray-50', text: 'text-slate-700', label: 'Inactive', border: 'border-slate-200' },
      expired: { bg: 'bg-gradient-to-r from-rose-50 to-red-50', text: 'text-rose-800', label: 'Expired', border: 'border-rose-200' },
    };
    const badge = badges[status] || badges.active;
    return (
      <span className={`px-4 py-1.5 rounded-full text-xs font-semibold border shadow-sm ${badge.bg} ${badge.text} ${badge.border}`}>
        {badge.label}
      </span>
    );
  };

  const tabs = [
    { id: 'overview' as BusinessTab, label: 'Overview', icon: FileText },
    { id: 'invoices' as BusinessTab, label: 'Invoices', icon: FileText },
    { id: 'payments' as BusinessTab, label: 'Payments', icon: CreditCard },
    { id: 'promotions' as BusinessTab, label: 'Promotions', icon: Tag },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50">
      <div className="max-w-7xl mx-auto px-2 sm:px-3 md:px-4 lg:px-6 xl:px-8 py-2 sm:py-4 md:py-6 lg:py-8 space-y-3 sm:space-y-4 md:space-y-6 lg:space-y-8 animate-fade-in">
        {}
        <div className="relative">
          <div className="absolute inset-0 bg-gradient-to-r from-emerald-400/5 via-transparent to-purple-600/5 rounded-3xl blur-3xl"></div>
          <div className="relative bg-white/80 backdrop-blur-xl rounded-xl sm:rounded-2xl md:rounded-3xl shadow-2xl border border-emerald-200/30 p-3 sm:p-4 md:p-6 lg:p-8">
            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 sm:gap-6 md:gap-8">
              <div className="flex items-start gap-3 sm:gap-4 md:gap-5">
                <div className="relative flex-shrink-0">
                  <div className="absolute inset-0 bg-gradient-to-br from-emerald-400 to-purple-600 rounded-xl sm:rounded-2xl blur-lg opacity-50"></div>
                  <div className="relative p-2.5 sm:p-3 md:p-4 rounded-xl sm:rounded-2xl bg-gradient-to-br from-emerald-500 via-emerald-500 to-purple-600 shadow-xl border border-emerald-400/50">
                    <FileText className="w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8 text-white" />
                    <div className="absolute -top-1 -right-1 w-3 h-3 sm:w-4 sm:h-4 bg-gradient-to-br from-green-300 to-emerald-500 rounded-full shadow-lg animate-pulse"></div>
                  </div>
                </div>
                <div className="space-y-2 sm:space-y-3 flex-1">
                  <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
                    <h1 className="text-2xl sm:text-3xl md:text-3xl font-extrabold bg-gradient-to-r from-slate-900 via-emerald-700 to-slate-900 bg-clip-text text-transparent">
                      Business Dashboard
                    </h1>
                    <Sparkles className="w-4 h-4 sm:w-5 sm:h-5 text-emerald-500 animate-pulse" />
                  </div>
                  <p className="text-gray-600 text-xs sm:text-sm md:text-sm max-w-2xl leading-relaxed">
                    Manage invoices, payments, and promotional campaigns
                  </p>
                </div>
              </div>
            </div>

            {}
            <div className="mt-4 sm:mt-6 md:mt-8 lg:mt-10 pt-4 sm:pt-6 md:pt-8 border-t border-gradient-to-r from-transparent via-emerald-200/30 to-transparent">
              <div className="overflow-x-auto -mx-2 sm:-mx-3 px-2 sm:px-3 scrollbar-hide">
                <div className="flex gap-2 sm:gap-3 min-w-max sm:min-w-0 sm:flex-wrap">
                  {tabs.map((tab) => {
                    const Icon = tab.icon;
                    const isActive = activeTab === tab.id;
                    return (
                      <button
                        key={tab.id}
                        onClick={() => setActiveTab(tab.id)}
                        className={`
                          group relative flex items-center gap-1.5 sm:gap-2 md:gap-3 px-3 sm:px-4 md:px-6 py-2 sm:py-2.5 md:py-3.5 rounded-lg sm:rounded-xl font-semibold text-xs sm:text-sm flex-shrink-0
                          transition-all duration-300 overflow-hidden
                          ${
                            isActive
                              ? 'bg-gradient-to-r from-emerald-500 via-emerald-500 to-purple-600 text-white shadow-xl shadow-emerald-500/40 scale-105'
                              : 'bg-white/80 text-gray-700 border border-gray-200/60 hover:border-emerald-300/60 hover:bg-gradient-to-r hover:from-emerald-50/50 hover:to-purple-50/30 hover:shadow-lg hover:scale-102'
                          }
                        `}
                      >
                        {isActive && (
                          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer"></div>
                        )}
                        <Icon className={`w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5 transition-transform duration-300 flex-shrink-0 ${isActive ? 'text-white' : 'text-gray-600 group-hover:text-emerald-600 group-hover:scale-110'}`} />
                        <span className="relative z-10 whitespace-nowrap">{tab.label}</span>
                        {isActive && (
                          <div className="absolute bottom-0 left-0 right-0 h-0.5 sm:h-1 bg-gradient-to-r from-green-300 via-emerald-400 to-purple-400"></div>
                        )}
                      </button>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>

        {}
        {activeTab === 'overview' && (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8">
            <div 
              onClick={() => setActiveTab('invoices')}
              className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-blue-300/60 overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-400/10 to-transparent rounded-bl-full"></div>
              <div className="relative space-y-5">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-4">
                    <div className="relative">
                      <div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl blur-md opacity-50 group-hover:opacity-75 transition-opacity"></div>
                      <div className="relative p-3.5 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg border border-blue-400/50 group-hover:scale-110 transition-transform">
                        <FileText className="w-6 h-6 text-white" />
                      </div>
                    </div>
                    <div>
                      <h3 className="font-bold text-gray-900 text-xl mb-1">Invoices</h3>
                      <div className="h-1 w-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full"></div>
                    </div>
                  </div>
                </div>
                <p className="text-gray-600 text-sm leading-relaxed">
                  Manage and track all invoices and billing
                </p>
                <div className="pt-5 border-t border-gray-100">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500 font-medium">View Invoices</span>
                    <ChevronRight className="w-5 h-5 text-blue-600 group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </div>
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-50/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
            </div>

            <div 
              onClick={() => setActiveTab('payments')}
              className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-emerald-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-emerald-300/60 overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-emerald-400/10 to-transparent rounded-bl-full"></div>
              <div className="relative space-y-5">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-4">
                    <div className="relative">
                      <div className="absolute inset-0 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-xl blur-md opacity-50 group-hover:opacity-75 transition-opacity"></div>
                      <div className="relative p-3.5 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 shadow-lg border border-emerald-400/50 group-hover:scale-110 transition-transform">
                        <CreditCard className="w-6 h-6 text-white" />
                      </div>
                    </div>
                    <div>
                      <h3 className="font-bold text-gray-900 text-xl mb-1">Payments</h3>
                      <div className="h-1 w-12 bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full"></div>
                    </div>
                  </div>
                </div>
                <p className="text-gray-600 text-sm leading-relaxed">
                  Track payment transactions and revenue
                </p>
                <div className="pt-5 border-t border-gray-100">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500 font-medium">View Payments</span>
                    <ChevronRight className="w-5 h-5 text-emerald-600 group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </div>
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-emerald-50/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
            </div>

            <div 
              onClick={() => setActiveTab('promotions')}
              className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-purple-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-purple-300/60 overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-400/10 to-transparent rounded-bl-full"></div>
              <div className="relative space-y-5">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-4">
                    <div className="relative">
                      <div className="absolute inset-0 bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl blur-md opacity-50 group-hover:opacity-75 transition-opacity"></div>
                      <div className="relative p-3.5 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 shadow-lg border border-purple-400/50 group-hover:scale-110 transition-transform">
                        <Tag className="w-6 h-6 text-white" />
                      </div>
                    </div>
                    <div>
                      <h3 className="font-bold text-gray-900 text-xl mb-1">Promotions</h3>
                      <div className="h-1 w-12 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full"></div>
                    </div>
                  </div>
                </div>
                <p className="text-gray-600 text-sm leading-relaxed">
                  Manage discount codes and campaigns
                </p>
                <div className="pt-5 border-t border-gray-100">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500 font-medium">View Promotions</span>
                    <ChevronRight className="w-5 h-5 text-purple-600 group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </div>
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-purple-50/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
            </div>
          </div>
        )}

        {}
        {activeTab === 'invoices' && (
          <div className="space-y-8">
            {}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <div className="p-2.5 rounded-xl bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border border-blue-200/40">
                      <FileText className="w-6 h-6 text-blue-600" />
                    </div>
                    <h2 className="text-3xl font-extrabold text-gray-900">Invoice Management</h2>
                  </div>
                  <p className="text-gray-600 text-base max-w-2xl leading-relaxed">
                    Manage and track all invoices and billing information
                  </p>
                </div>
                <button
                  onClick={() => navigate('/admin/invoices/create')}
                  className="group relative px-8 py-4 bg-gradient-to-r from-emerald-500 via-emerald-500 to-purple-600 text-white font-semibold rounded-xl shadow-xl shadow-emerald-500/30 hover:shadow-2xl hover:shadow-emerald-500/40 transition-all duration-300 hover:scale-105 overflow-hidden"
                >
                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
                  <div className="relative flex items-center gap-3">
                    <Plus className="w-5 h-5" />
                    Create Invoice
                  </div>
                </button>
              </div>
            </div>

            {}
            <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-2 rounded-xl bg-gradient-to-br from-amber-500/10 to-amber-600/10 border border-amber-200/40">
                  <Filter className="w-5 h-5 text-amber-600" />
                </div>
                <h3 className="text-xl font-bold text-gray-900">Filters</h3>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="relative group">
                  <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 group-focus-within:text-emerald-500 transition-colors" />
                  <input
                    type="text"
                    placeholder="Search invoices..."
                    value={invoiceFilters.search}
                    onChange={(e) => setInvoiceFilters({ ...invoiceFilters, search: e.target.value })}
                    className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
                  />
                </div>
                <select
                  value={invoiceFilters.status}
                  onChange={(e) => setInvoiceFilters({ ...invoiceFilters, status: e.target.value })}
                  className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
                >
                  <option value="">All Statuses</option>
                  <option value="draft">Draft</option>
                  <option value="sent">Sent</option>
                  <option value="paid">Paid</option>
                  <option value="overdue">Overdue</option>
                  <option value="cancelled">Canceled</option>
                </select>
                <div className="flex items-center gap-3 px-4 py-3.5 bg-gradient-to-r from-gray-50 to-white border-2 border-gray-200 rounded-xl">
                  <Filter className="w-5 h-5 text-emerald-600" />
                  <span className="text-sm font-semibold text-gray-700">
                    {invoicesTotalItems} invoice{invoicesTotalItems !== 1 ? 's' : ''}
                  </span>
                </div>
              </div>
            </div>

            {}
            {invoicesLoading && invoices.length === 0 ? (
              <Loading fullScreen text="Loading invoices..." />
            ) : (
              <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 overflow-hidden">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gradient-to-r from-gray-50 to-gray-100">
                      <tr>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Invoice #</th>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Customer</th>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Booking</th>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Amount</th>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Status</th>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Due Date</th>
                        <th className="px-8 py-5 text-right text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Actions</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-100">
                      {invoices.length > 0 ? (
                        invoices.map((invoice) => {
                          const statusBadge = getInvoiceStatusBadge(invoice.status);
                          return (
                            <tr key={invoice.id} className="hover:bg-gray-50 transition-colors">
                              <td className="px-8 py-5 whitespace-nowrap">
                                <div className="flex items-center gap-3">
                                  <FileText className="w-5 h-5 text-emerald-600" />
                                  <span className="text-sm font-bold text-gray-900 font-mono">{invoice.invoice_number}</span>
                                </div>
                              </td>
                              <td className="px-8 py-5">
                                <div className="text-sm font-semibold text-gray-900">{invoice.customer_name}</div>
                                <div className="text-sm text-gray-500">{invoice.customer_email}</div>
                              </td>
                              <td className="px-8 py-5 whitespace-nowrap">
                                <span className="text-sm font-medium text-emerald-600">#{invoice.booking_id}</span>
                              </td>
                              <td className="px-8 py-5 whitespace-nowrap">
                                <div className="text-sm font-bold bg-gradient-to-r from-emerald-600 to-emerald-700 bg-clip-text text-transparent">
                                  {formatCurrency(invoice.total_amount)}
                                </div>
                                {invoice.balance_due > 0 && (
                                  <div className="text-xs text-rose-600 font-medium mt-1">
                                    Due: {formatCurrency(invoice.balance_due)}
                                  </div>
                                )}
                              </td>
                              <td className="px-8 py-5 whitespace-nowrap">
                                <span className={`px-4 py-1.5 text-xs font-semibold rounded-full border shadow-sm ${statusBadge.bg} ${statusBadge.text} ${statusBadge.border}`}>
                                  {statusBadge.label}
                                </span>
                              </td>
                              <td className="px-8 py-5 whitespace-nowrap text-sm text-gray-600">
                                {formatDate(invoice.due_date, 'short')}
                              </td>
                              <td className="px-8 py-5 whitespace-nowrap text-right">
                                <div className="flex items-center justify-end gap-2">
                                  <button
                                    onClick={() => navigate(`/admin/invoices/${invoice.id}`)}
                                    className="p-2 rounded-lg text-blue-600 hover:text-blue-700 hover:bg-blue-50 transition-all duration-200 shadow-sm hover:shadow-md border border-blue-200 hover:border-blue-300"
                                    title="View"
                                  >
                                    <Eye className="w-5 h-5" />
                                  </button>
                                  <button
                                    onClick={() => navigate(`/admin/invoices/${invoice.id}/edit`)}
                                    className="p-2 rounded-lg text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 transition-all duration-200 shadow-sm hover:shadow-md border border-indigo-200 hover:border-indigo-300"
                                    title="Edit"
                                  >
                                    <Edit className="w-5 h-5" />
                                  </button>
                                  <button
                                    onClick={() => handleDeleteInvoice(invoice.id)}
                                    className="p-2 rounded-lg text-rose-600 hover:text-rose-700 hover:bg-rose-50 transition-all duration-200 shadow-sm hover:shadow-md border border-rose-200 hover:border-rose-300"
                                    title="Delete"
                                  >
                                    <Trash2 className="w-5 h-5" />
                                  </button>
                                </div>
                              </td>
                            </tr>
                          );
                        })
                      ) : (
                        <tr>
                          <td colSpan={7} className="px-8 py-12 text-center">
                            <EmptyState title="No invoices found" description="Create your first invoice to get started" />
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
                {invoicesTotalPages > 1 && (
                  <div className="px-6 py-4 border-t border-gray-200">
                    <Pagination
                      currentPage={invoicesCurrentPage}
                      totalPages={invoicesTotalPages}
                      onPageChange={setInvoicesCurrentPage}
                    />
                  </div>
                )}
              </div>
            )}
          </div>
        )}

        {}
        {activeTab === 'payments' && (
          <div className="space-y-8">
            {}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="space-y-3">
                <div className="flex items-center gap-3">
                  <div className="p-2.5 rounded-xl bg-gradient-to-br from-emerald-500/10 to-green-500/10 border border-emerald-200/40">
                    <CreditCard className="w-6 h-6 text-emerald-600" />
                  </div>
                  <h2 className="text-3xl font-extrabold text-gray-900">Payment Management</h2>
                </div>
                <p className="text-gray-600 text-base max-w-2xl leading-relaxed">
                  Track payment transactions and revenue streams
                </p>
              </div>
            </div>

            {}
            <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-2 rounded-xl bg-gradient-to-br from-amber-500/10 to-amber-600/10 border border-amber-200/40">
                  <Filter className="w-5 h-5 text-amber-600" />
                </div>
                <h3 className="text-xl font-bold text-gray-900">Filters</h3>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div className="relative group">
                  <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 group-focus-within:text-emerald-500 transition-colors" />
                  <input
                    type="text"
                    placeholder="Search..."
                    value={paymentFilters.search}
                    onChange={(e) => setPaymentFilters({ ...paymentFilters, search: e.target.value })}
                    className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
                  />
                </div>
                <select
                  value={paymentFilters.method}
                  onChange={(e) => setPaymentFilters({ ...paymentFilters, method: e.target.value })}
                  className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
                >
                  <option value="">All methods</option>
                  <option value="cash">Cash</option>
                  <option value="stripe">Stripe</option>
                  <option value="credit_card">Credit card</option>
                </select>
                <input
                  type="date"
                  value={paymentFilters.from}
                  onChange={(e) => setPaymentFilters({ ...paymentFilters, from: e.target.value })}
                  className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md"
                  placeholder="From date"
                />
                <input
                  type="date"
                  value={paymentFilters.to}
                  onChange={(e) => setPaymentFilters({ ...paymentFilters, to: e.target.value })}
                  className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md"
                  placeholder="To date"
                />
              </div>
            </div>

            {}
            {paymentsLoading && payments.length === 0 ? (
              <Loading fullScreen text="Loading payments..." />
            ) : (
              <>
                <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 overflow-hidden">
                  <div className="overflow-x-auto">
                    <table className="w-full">
                      <thead className="bg-gradient-to-r from-gray-50 to-gray-100">
                        <tr>
                          <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Transaction ID</th>
                          <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Booking Number</th>
                          <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Customer</th>
                          <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Method</th>
                          <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Type</th>
                          <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Status</th>
                          <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Amount</th>
                          <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Payment Date</th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-100">
                        {payments.map((payment) => (
                          <tr key={payment.id} className="hover:bg-gray-50 transition-colors">
                            <td className="px-8 py-5 whitespace-nowrap">
                              <div className="text-sm font-bold text-gray-900 font-mono">{payment.transaction_id || `PAY-${payment.id}`}</div>
                            </td>
                            <td className="px-8 py-5 whitespace-nowrap">
                              <div className="text-sm font-semibold text-emerald-600">{payment.booking?.booking_number}</div>
                            </td>
                            <td className="px-8 py-5 whitespace-nowrap">
                              <div className="text-sm font-medium text-gray-900">
                                {payment.booking?.user?.name || 'N/A'}
                              </div>
                            </td>
                            <td className="px-8 py-5 whitespace-nowrap">
                              {getPaymentMethodBadge(payment.payment_method)}
                            </td>
                            <td className="px-8 py-5 whitespace-nowrap">
                              {payment.payment_type === 'deposit' ? (
                                <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-800 border border-amber-200">
                                  Deposit (20%)
                                </span>
                              ) : payment.payment_type === 'remaining' ? (
                                <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 border border-blue-200">
                                  Remaining
                                </span>
                              ) : (
                                <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 border border-green-200">
                                  Full Payment
                                </span>
                              )}
                            </td>
                            <td className="px-8 py-5 whitespace-nowrap">
                              {getPaymentStatusBadge(payment.payment_status)}
                            </td>
                            <td className="px-8 py-5 whitespace-nowrap">
                              <div className="text-sm font-bold bg-gradient-to-r from-emerald-600 to-emerald-700 bg-clip-text text-transparent">
                                {formatCurrency(payment.amount)}
                              </div>
                            </td>
                            <td className="px-8 py-5 whitespace-nowrap">
                              <div className="text-sm text-gray-600">
                                {new Date(payment.payment_date || payment.createdAt || '').toLocaleDateString('en-US')}
                              </div>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                  <Pagination
                    currentPage={paymentsCurrentPage}
                    totalPages={paymentsTotalPages}
                    onPageChange={setPaymentsCurrentPage}
                    totalItems={paymentsTotalItems}
                    itemsPerPage={paymentsPerPage}
                  />
                </div>

                {}
                <div className="bg-gradient-to-r from-emerald-500 via-emerald-600 to-purple-600 rounded-2xl shadow-2xl p-8 text-white">
                  <div className="flex items-center justify-between">
                    <div>
                      <h3 className="text-lg font-semibold mb-2 text-emerald-100">Total Revenue</h3>
                      <p className="text-4xl font-bold">
                        {formatCurrency(payments
                          .filter(p => p.payment_status === 'completed')
                          .reduce((sum, p) => sum + p.amount, 0))}
                      </p>
                      <p className="text-sm mt-3 text-emerald-100/90">
                        Total {payments.filter(p => p.payment_status === 'completed').length} paid transaction{payments.filter(p => p.payment_status === 'completed').length !== 1 ? 's' : ''}
                      </p>
                    </div>
                    <div className="bg-white/20 backdrop-blur-sm p-6 rounded-2xl">
                      <div className="text-5xl font-bold text-white/80">{payments.filter(p => p.payment_status === 'completed').length}</div>
                    </div>
                  </div>
                </div>
              </>
            )}
          </div>
        )}

        {}
        {activeTab === 'promotions' && (
          <div className="space-y-8">
            {}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <div className="p-2.5 rounded-xl bg-gradient-to-br from-purple-500/10 to-pink-500/10 border border-purple-200/40">
                      <Tag className="w-6 h-6 text-purple-600" />
                    </div>
                    <h2 className="text-3xl font-extrabold text-gray-900">Promotion Management</h2>
                  </div>
                  <p className="text-gray-600 text-base max-w-2xl leading-relaxed">
                    Manage discount codes and promotional campaigns
                  </p>
                </div>
                <button
                  onClick={() => {
                    resetPromotionForm();
                    setShowPromotionModal(true);
                  }}
                  className="group relative px-8 py-4 bg-gradient-to-r from-purple-500 via-purple-500 to-pink-600 text-white font-semibold rounded-xl shadow-xl shadow-purple-500/30 hover:shadow-2xl hover:shadow-purple-500/40 transition-all duration-300 hover:scale-105 overflow-hidden"
                >
                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
                  <div className="relative flex items-center gap-3">
                    <Plus className="w-5 h-5" />
                    Add Promotion
                  </div>
                </button>
              </div>
            </div>

            {}
            <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-2 rounded-xl bg-gradient-to-br from-amber-500/10 to-amber-600/10 border border-amber-200/40">
                  <Filter className="w-5 h-5 text-amber-600" />
                </div>
                <h3 className="text-xl font-bold text-gray-900">Filters</h3>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div className="relative group">
                  <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 group-focus-within:text-purple-500 transition-colors" />
                  <input
                    type="text"
                    placeholder="Search by code or name..."
                    value={promotionFilters.search}
                    onChange={(e) => setPromotionFilters({ ...promotionFilters, search: e.target.value })}
                    className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
                  />
                </div>
                <select
                  value={promotionFilters.type}
                  onChange={(e) => setPromotionFilters({ ...promotionFilters, type: e.target.value })}
                  className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
                >
                  <option value="">All Types</option>
                  <option value="percentage">Percentage</option>
                  <option value="fixed">Fixed Amount</option>
                </select>
                <select
                  value={promotionFilters.status}
                  onChange={(e) => setPromotionFilters({ ...promotionFilters, status: e.target.value })}
                  className="px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
                >
                  <option value="">All Statuses</option>
                  <option value="active">Active</option>
                  <option value="inactive">Inactive</option>
                </select>
              </div>
            </div>

            {}
            {promotionsLoading && promotions.length === 0 ? (
              <Loading fullScreen text="Loading promotions..." />
            ) : (
              <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 overflow-hidden">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gradient-to-r from-gray-50 to-gray-100">
                      <tr>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Code</th>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Program Name</th>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Value</th>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Period</th>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Used</th>
                        <th className="px-8 py-5 text-left text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Status</th>
                        <th className="px-8 py-5 text-right text-xs font-bold text-gray-700 uppercase tracking-wider border-b border-gray-200">Actions</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-100">
                      {promotions.map((promotion) => (
                        <tr key={promotion.id} className="hover:bg-gray-50 transition-colors">
                          <td className="px-8 py-5 whitespace-nowrap">
                            <div className="flex items-center gap-3">
                              <div className="p-2 bg-gradient-to-br from-purple-100 to-purple-200 rounded-lg">
                                <Tag className="w-4 h-4 text-purple-600" />
                              </div>
                              <span className="text-sm font-mono font-bold bg-gradient-to-r from-purple-600 to-purple-700 bg-clip-text text-transparent">{promotion.code}</span>
                            </div>
                          </td>
                          <td className="px-8 py-5">
                            <div className="text-sm font-semibold text-gray-900">{promotion.name}</div>
                            <div className="text-xs text-gray-500 mt-0.5">{promotion.description}</div>
                          </td>
                          <td className="px-8 py-5 whitespace-nowrap">
                            <div className="text-sm font-bold bg-gradient-to-r from-emerald-600 to-emerald-700 bg-clip-text text-transparent">
                              {promotion.discount_type === 'percentage' 
                                ? `${promotion.discount_value}%` 
                                : formatCurrency(promotion.discount_value)}
                            </div>
                          </td>
                          <td className="px-8 py-5 whitespace-nowrap">
                            <div className="text-xs text-gray-600">
                              {promotion.start_date ? new Date(promotion.start_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : 'N/A'}
                              <span className="text-gray-400 mx-1">→</span>
                              {promotion.end_date ? new Date(promotion.end_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : 'N/A'}
                            </div>
                          </td>
                          <td className="px-8 py-5 whitespace-nowrap">
                            <div className="text-sm font-medium text-gray-700">
                              <span className="text-purple-600 font-semibold">{promotion.used_count || 0}</span>
                              <span className="text-gray-400 mx-1">/</span>
                              <span className="text-gray-600">{promotion.usage_limit || '∞'}</span>
                            </div>
                          </td>
                          <td className="px-8 py-5 whitespace-nowrap">
                            {getPromotionStatusBadge(promotion.status)}
                          </td>
                          <td className="px-8 py-5 whitespace-nowrap text-right">
                            <div className="flex items-center justify-end gap-2">
                              <button
                                onClick={() => handleEditPromotion(promotion)}
                                className="p-2 rounded-lg text-blue-600 hover:text-blue-700 hover:bg-blue-50 transition-all duration-200 shadow-sm hover:shadow-md border border-blue-200 hover:border-blue-300"
                                title="Edit"
                              >
                                <Edit className="w-5 h-5" />
                              </button>
                              <button
                                onClick={() => handleDeletePromotion(promotion.id)}
                                className="p-2 rounded-lg text-rose-600 hover:text-rose-700 hover:bg-rose-50 transition-all duration-200 shadow-sm hover:shadow-md border border-rose-200 hover:border-rose-300"
                                title="Delete"
                              >
                                <Trash2 className="w-5 h-5" />
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                <Pagination
                  currentPage={promotionsCurrentPage}
                  totalPages={promotionsTotalPages}
                  onPageChange={setPromotionsCurrentPage}
                  totalItems={promotionsTotalItems}
                  itemsPerPage={promotionsPerPage}
                />
              </div>
            )}
          </div>
        )}
      </div>

      {}
      {showPromotionModal && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4">
          <div className="min-h-full flex items-center justify-center py-4">
            <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-5xl w-full my-4 flex flex-col border border-gray-200" style={{ maxHeight: 'calc(100vh - 2rem)' }}>
              <div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6 border-b border-slate-700 flex-shrink-0">
                <div className="flex justify-between items-center">
                  <div>
                    <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-purple-100 mb-1">
                      {editingPromotion ? 'Update Promotion' : 'Add New Promotion'}
                    </h2>
                    <p className="text-purple-200/80 text-xs sm:text-sm font-light">
                      {editingPromotion ? 'Modify promotion details' : 'Create a new promotion program'}
                    </p>
                  </div>
                  <button 
                    onClick={() => setShowPromotionModal(false)}
                    className="w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-xl text-purple-100 hover:text-white hover:bg-slate-700/50 transition-all duration-200 border border-slate-600 hover:border-purple-400"
                  >
                    <X className="w-5 h-5 sm:w-6 sm:h-6" />
                  </button>
                </div>
              </div>
              
              <div className="flex-1 overflow-y-auto min-h-0">
                <form onSubmit={handlePromotionSubmit} className="p-4 sm:p-6 md:p-8 space-y-4 sm:space-y-5 md:space-y-6">
                  <div className="grid grid-cols-2 gap-6">
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Code <span className="text-red-500">*</span>
                          </label>
                          <input
                            type="text"
                            value={promotionFormData.code}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, code: e.target.value.toUpperCase() })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm font-mono"
                            placeholder="e.g: SUMMER2024"
                            required
                          />
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Program Name <span className="text-red-500">*</span>
                          </label>
                          <input
                            type="text"
                            value={promotionFormData.name}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, name: e.target.value })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            placeholder="e.g: Summer Sale"
                            required
                          />
                        </div>
                      </div>

                      <div>
                        <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                          Description
                        </label>
                        <textarea
                          value={promotionFormData.description}
                          onChange={(e) => setPromotionFormData({ ...promotionFormData, description: e.target.value })}
                          className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                          rows={3}
                          placeholder="Detailed description of the program..."
                        />
                      </div>

                      <div className="grid grid-cols-2 gap-6">
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Discount Type <span className="text-red-500">*</span>
                          </label>
                          <select
                            value={promotionFormData.discount_type}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, discount_type: e.target.value as 'percentage' | 'fixed' })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm cursor-pointer"
                          >
                            <option value="percentage">Percentage (%)</option>
                            <option value="fixed">Fixed Amount ({currency})</option>
                          </select>
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Discount Value <span className="text-red-500">*</span>
                          </label>
                          <input
                            type="number"
                            value={promotionFormData.discount_value}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, discount_value: parseFloat(e.target.value) })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            min="0"
                            max={promotionFormData.discount_type === 'percentage' ? 100 : undefined}
                            required
                          />
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-6">
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Minimum Order Value ({currency})
                          </label>
                          <input
                            type="number"
                            value={promotionFormData.min_booking_amount}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, min_booking_amount: parseFloat(e.target.value) })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            min="0"
                          />
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Maximum Discount ({currency})
                          </label>
                          <input
                            type="number"
                            value={promotionFormData.max_discount_amount}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, max_discount_amount: parseFloat(e.target.value) })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            min="0"
                          />
                        </div>
                      </div>

                      {/* Enterprise Booking Conditions Section */}
                      <div className="border-t-2 border-purple-200 pt-6 mt-6">
                        <h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                          <div className="h-1 w-8 bg-gradient-to-r from-purple-400 to-purple-600 rounded-full"></div>
                          Enterprise Booking Conditions
                        </h3>
                        <p className="text-sm text-gray-600 mb-6">Configure advanced conditions for when this promotion applies</p>
                      </div>

                      <div className="grid grid-cols-2 gap-6">
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Minimum Stay (nights)
                          </label>
                          <input
                            type="number"
                            value={promotionFormData.min_stay_days || ''}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, min_stay_days: parseInt(e.target.value) || 0 })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            min="0"
                            placeholder="0 = no minimum"
                          />
                          <p className="text-xs text-gray-500 mt-1">Minimum number of nights required for booking</p>
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Advance Booking (days)
                          </label>
                          <input
                            type="number"
                            value={promotionFormData.advance_booking_days || ''}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, advance_booking_days: parseInt(e.target.value) || 0 })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            min="0"
                            placeholder="0 = no requirement"
                          />
                          <p className="text-xs text-gray-500 mt-1">Minimum days in advance the booking must be made</p>
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-6">
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Maximum Stay (nights)
                          </label>
                          <input
                            type="number"
                            value={promotionFormData.max_stay_days || ''}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, max_stay_days: parseInt(e.target.value) || 0 })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            min="0"
                            placeholder="0 = no maximum"
                          />
                          <p className="text-xs text-gray-500 mt-1">Maximum number of nights allowed for booking</p>
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Max Advance Booking (days)
                          </label>
                          <input
                            type="number"
                            value={promotionFormData.max_advance_booking_days || ''}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, max_advance_booking_days: parseInt(e.target.value) || 0 })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            min="0"
                            placeholder="0 = no maximum"
                          />
                          <p className="text-xs text-gray-500 mt-1">Maximum days in advance the booking can be made</p>
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-6">
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Allowed Check-in Days
                          </label>
                          <div className="grid grid-cols-7 gap-2">
                            {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, index) => (
                              <label key={day} className="flex items-center gap-2 cursor-pointer">
                                <input
                                  type="checkbox"
                                  checked={promotionFormData.allowed_check_in_days?.includes(index) || false}
                                  onChange={(e) => {
                                    const current = promotionFormData.allowed_check_in_days || [];
                                    if (e.target.checked) {
                                      setPromotionFormData({ ...promotionFormData, allowed_check_in_days: [...current, index] });
                                    } else {
                                      setPromotionFormData({ ...promotionFormData, allowed_check_in_days: current.filter(d => d !== index) });
                                    }
                                  }}
                                  className="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                                />
                                <span className="text-xs text-gray-700">{day}</span>
                              </label>
                            ))}
                          </div>
                          <p className="text-xs text-gray-500 mt-1">Leave empty to allow all days</p>
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Allowed Check-out Days
                          </label>
                          <div className="grid grid-cols-7 gap-2">
                            {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, index) => (
                              <label key={day} className="flex items-center gap-2 cursor-pointer">
                                <input
                                  type="checkbox"
                                  checked={promotionFormData.allowed_check_out_days?.includes(index) || false}
                                  onChange={(e) => {
                                    const current = promotionFormData.allowed_check_out_days || [];
                                    if (e.target.checked) {
                                      setPromotionFormData({ ...promotionFormData, allowed_check_out_days: [...current, index] });
                                    } else {
                                      setPromotionFormData({ ...promotionFormData, allowed_check_out_days: current.filter(d => d !== index) });
                                    }
                                  }}
                                  className="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                                />
                                <span className="text-xs text-gray-700">{day}</span>
                              </label>
                            ))}
                          </div>
                          <p className="text-xs text-gray-500 mt-1">Leave empty to allow all days</p>
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-6">
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Allowed Room Types
                          </label>
                          <select
                            multiple
                            value={promotionFormData.allowed_room_type_ids?.map(String) || []}
                            onChange={(e) => {
                              const selected = Array.from(e.target.selectedOptions, option => parseInt(option.value));
                              setPromotionFormData({ ...promotionFormData, allowed_room_type_ids: selected });
                            }}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            size={4}
                          >
                            {roomTypes.map(rt => (
                              <option key={rt.id} value={rt.id}>{rt.name}</option>
                            ))}
                          </select>
                          <p className="text-xs text-gray-500 mt-1">Hold Ctrl/Cmd to select multiple. Leave empty to allow all room types.</p>
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Excluded Room Types
                          </label>
                          <select
                            multiple
                            value={promotionFormData.excluded_room_type_ids?.map(String) || []}
                            onChange={(e) => {
                              const selected = Array.from(e.target.selectedOptions, option => parseInt(option.value));
                              setPromotionFormData({ ...promotionFormData, excluded_room_type_ids: selected });
                            }}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            size={4}
                          >
                            {roomTypes.map(rt => (
                              <option key={rt.id} value={rt.id}>{rt.name}</option>
                            ))}
                          </select>
                          <p className="text-xs text-gray-500 mt-1">Hold Ctrl/Cmd to select multiple. These room types cannot use this promotion.</p>
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-6">
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Minimum Guests
                          </label>
                          <input
                            type="number"
                            value={promotionFormData.min_guests || ''}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, min_guests: parseInt(e.target.value) || 0 })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            min="1"
                            placeholder="0 = no minimum"
                          />
                          <p className="text-xs text-gray-500 mt-1">Minimum number of guests required</p>
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Maximum Guests
                          </label>
                          <input
                            type="number"
                            value={promotionFormData.max_guests || ''}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, max_guests: parseInt(e.target.value) || 0 })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            min="1"
                            placeholder="0 = no maximum"
                          />
                          <p className="text-xs text-gray-500 mt-1">Maximum number of guests allowed</p>
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-6">
                        <div>
                          <label className="flex items-center gap-3 cursor-pointer">
                            <input
                              type="checkbox"
                              checked={promotionFormData.first_time_customer_only || false}
                              onChange={(e) => setPromotionFormData({ ...promotionFormData, first_time_customer_only: e.target.checked, repeat_customer_only: e.target.checked ? false : promotionFormData.repeat_customer_only })}
                              className="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                            />
                            <span className="text-sm font-semibold text-gray-700">First-Time Customer Only</span>
                          </label>
                          <p className="text-xs text-gray-500 mt-1 ml-8">Only available to first-time customers</p>
                        </div>
                        <div>
                          <label className="flex items-center gap-3 cursor-pointer">
                            <input
                              type="checkbox"
                              checked={promotionFormData.repeat_customer_only || false}
                              onChange={(e) => setPromotionFormData({ ...promotionFormData, repeat_customer_only: e.target.checked, first_time_customer_only: e.target.checked ? false : promotionFormData.first_time_customer_only })}
                              className="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                            />
                            <span className="text-sm font-semibold text-gray-700">Repeat Customer Only</span>
                          </label>
                          <p className="text-xs text-gray-500 mt-1 ml-8">Only available to returning customers</p>
                        </div>
                      </div>

                      <div>
                        <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                          Blackout Dates
                        </label>
                        <textarea
                          value={promotionFormData.blackout_dates?.join('\n') || ''}
                          onChange={(e) => {
                            const dates = e.target.value.split('\n').filter(d => d.trim()).map(d => d.trim());
                            setPromotionFormData({ ...promotionFormData, blackout_dates: dates });
                          }}
                          className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                          rows={3}
                          placeholder="Enter dates (one per line) in YYYY-MM-DD format&#10;Example:&#10;2024-12-25&#10;2024-12-31&#10;2025-01-01"
                        />
                        <p className="text-xs text-gray-500 mt-1">Dates when promotion doesn't apply. One date per line (YYYY-MM-DD format).</p>
                      </div>

                      {/* Dates & Status Section */}
                      <div className="border-t-2 border-purple-200 pt-6 mt-6">
                        <h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                          <div className="h-1 w-8 bg-gradient-to-r from-purple-400 to-purple-600 rounded-full"></div>
                          Promotion Period & Status
                        </h3>
                      </div>

                      <div className="grid grid-cols-2 gap-6">
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Start Date <span className="text-red-500">*</span>
                          </label>
                          <input
                            type="date"
                            value={promotionFormData.start_date}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, start_date: e.target.value })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            required
                          />
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            End Date <span className="text-red-500">*</span>
                          </label>
                          <input
                            type="date"
                            value={promotionFormData.end_date}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, end_date: e.target.value })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            required
                          />
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-6">
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Usage Limit (0 = unlimited)
                          </label>
                          <input
                            type="number"
                            value={promotionFormData.usage_limit}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, usage_limit: parseInt(e.target.value) })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                            min="0"
                          />
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
                            Status
                          </label>
                          <select
                            value={promotionFormData.status}
                            onChange={(e) => setPromotionFormData({ ...promotionFormData, status: e.target.value as 'active' | 'inactive' })}
                            className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 font-medium shadow-sm cursor-pointer"
                          >
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                          </select>
                        </div>
                      </div>

                      <div className="sticky bottom-0 bg-white border-t border-gray-200 mt-8 -mx-4 sm:-mx-6 md:-mx-8 px-4 sm:px-6 md:px-8 py-4 flex justify-end gap-3">
                        <button
                          type="button"
                          onClick={() => setShowPromotionModal(false)}
                          className="px-8 py-3 border-2 border-gray-300 rounded-xl text-gray-700 font-semibold hover:bg-gray-50 transition-all duration-200 shadow-sm hover:shadow-md"
                        >
                          Cancel
                        </button>
                        <button
                          type="submit"
                          className="px-8 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl"
                        >
                          {editingPromotion ? 'Update' : 'Create'}
                        </button>
                      </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        )}
    </div>
  );
};

export default BusinessDashboardPage;