import React, { useState } from 'react';
import { 
  Calendar as CalendarIcon, 
  ChevronLeft, 
  ChevronRight, 
  Plus, 
  LogOut, 
  User as UserIcon, 
  Clock, 
  Trash2,
  ShieldAlert,
  Mail,
  List,
  Phone,
  CreditCard,
  Edit2,
  DollarSign
} from 'lucide-react';

export default function App() {
  // --- STATE ---
  const [currentUser, setCurrentUser] = useState(null); 
  const [currentDate, setCurrentDate] = useState(new Date());
  const [bookings, setBookings] = useState([
    { id: 1, date: new Date().toISOString().split('T')[0], time: '10:00', clientName: 'Acme Corp', clientPhone: '9876543210', clientEmail: 'contact@acme.com', service: 'Pre Wedding', packageType: 'Cinematic Video + Photo', totalAmount: 50000, advance: 20000, balance: 30000, addedBy: 'admin' },
    { id: 2, date: new Date().toISOString().split('T')[0], time: '14:30', clientName: 'Jane Doe', clientPhone: '9123456780', clientEmail: 'jane@example.com', service: 'Maternity', packageType: 'Elegant Gown Session', totalAmount: 15000, advance: 15000, balance: 0, addedBy: 'user' },
  ]);
  
  // Modals
  const [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
  const [isEmailDraftOpen, setIsEmailDraftOpen] = useState(false);
  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
  
  // Form/Draft states
  const [selectedDate, setSelectedDate] = useState('');
  const [selectedService, setSelectedService] = useState(''); 
  const [draftData, setDraftData] = useState(null);
  const [paymentEditData, setPaymentEditData] = useState(null);

  // UI states
  const [currentView, setCurrentView] = useState('calendar'); 
  const [notification, setNotification] = useState('');

  // The Studio Clicks - Package Definitions
  const packagesData = {
    "Pre Birthday": [
      "Silver Pre-Birthday Package - ₹4,999", 
      "Gold Pre-Birthday Package - ₹7,999", 
      "Platinum Pre-Birthday Package - ₹13,999"
    ],
    "New Born": [
      "Silver Newborn Package - ₹5,999", 
      "Premium Newborn Package - ₹7,999"
    ],
    "Maternity": [
      "Silver Maternity Photoshoot - ₹4,999", 
      "Gold Maternity Photoshoot - ₹8,999", 
      "Platinum Maternity Photoshoot - ₹14,000"
    ],
    "Pre Wedding": ["1-Day Local Shoot", "Destination Shoot", "Cinematic Video + Photo"],
    "Birthday Events": ["Standard Event Coverage", "Premium (Candid + Traditional)", "Luxury (Photo, Video, Drone)"]
  };

  // --- AUTHENTICATION ---
  const handleLogin = (username, password) => {
    if (username === 'admin' && password === 'admin') {
      setCurrentUser({ username: 'Admin', role: 'admin' });
    } else if (username && password) {
      setCurrentUser({ username: username, role: 'user' });
    } else {
      alert("Please enter both username and password.");
    }
  };

  const handleLogout = () => setCurrentUser(null);

  // --- CALENDAR LOGIC ---
  const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
  const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();

  const prevMonth = () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
  const nextMonth = () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
  const todayMonth = () => setCurrentDate(new Date());

  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();
  const daysInMonth = getDaysInMonth(year, month);
  const firstDayIndex = getFirstDayOfMonth(year, month);

  const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

  // --- BOOKING LOGIC ---
  const openAddModal = (dateStr = '') => {
    setSelectedDate(dateStr);
    setSelectedService(''); 
    setIsBookingModalOpen(true);
  };

  const handlePrepareBooking = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    const totalAmount = parseFloat(formData.get('totalAmount')) || 0;
    const advance = parseFloat(formData.get('advance')) || 0;
    const balance = totalAmount - advance;

    const newBooking = {
      id: Date.now(),
      date: formData.get('date'),
      time: formData.get('time'),
      clientName: formData.get('clientName'),
      clientPhone: formData.get('clientPhone'),
      clientEmail: formData.get('clientEmail'),
      service: formData.get('service'),
      packageType: formData.get('packageType'),
      totalAmount: totalAmount,
      advance: advance,
      balance: balance,
      addedBy: currentUser.username
    };

    // Prepare Email Draft
    const emailSubject = `Booking Confirmation - ${newBooking.service} with The Studio Clicks`;
    const emailBody = `Dear ${newBooking.clientName},

Thank you for choosing The Studio Clicks! Your booking is confirmed.

Booking Details:
- Date: ${newBooking.date}
- Time: ${newBooking.time}
- Shoot Type: ${newBooking.service}
- Package: ${newBooking.packageType}

Payment Summary:
- Total Amount: ₹${newBooking.totalAmount}
- Advance Paid: ₹${newBooking.advance}
- Balance Due: ₹${newBooking.balance}

We look forward to capturing your special moments!

Best Regards,
The Studio Clicks Team`;

    setDraftData({ booking: newBooking, emailSubject, emailBody });
    setIsBookingModalOpen(false);
    setIsEmailDraftOpen(true); // Open draft instead of saving immediately
  };

  const handleSaveAndSendEmail = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const finalSubject = formData.get('emailSubject');
    const finalBody = formData.get('emailBody');

    // Save booking
    setBookings([...bookings, draftData.booking]);
    setIsEmailDraftOpen(false);
    
    // Trigger local email client
    window.location.href = `mailto:${draftData.booking.clientEmail}?subject=${encodeURIComponent(finalSubject)}&body=${encodeURIComponent(finalBody)}`;

    // Show Notification
    setNotification(`Booking Saved! Email app opened for ${draftData.booking.clientEmail}`);
    setTimeout(() => setNotification(''), 4500);
  };

  const handleDeleteBooking = (id) => {
    setBookings(bookings.filter(b => b.id !== id));
  };

  // --- PAYMENT UPDATE LOGIC ---
  const openPaymentModal = (booking) => {
    setPaymentEditData(booking);
    setIsPaymentModalOpen(true);
  };

  const handleUpdatePayment = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const additionalPayment = parseFloat(formData.get('additionalPayment')) || 0;
    
    setBookings(bookings.map(b => {
      if(b.id === paymentEditData.id) {
        const newAdvance = b.advance + additionalPayment;
        const newBalance = b.totalAmount - newAdvance;
        return { ...b, advance: newAdvance, balance: newBalance };
      }
      return b;
    }));

    setIsPaymentModalOpen(false);
    setNotification('Payment updated successfully!');
    setTimeout(() => setNotification(''), 4500);
  };

  // --- RENDER LOGIN SCREEN ---
  if (!currentUser) {
    return <LoginScreen onLogin={handleLogin} />;
  }

  // --- RENDER MAIN APP ---
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col font-sans text-gray-800">
      {/* Navbar */}
      <header className="bg-white shadow-sm border-b border-gray-200 px-6 py-4 flex justify-between items-center sticky top-0 z-10">
        <div className="flex items-center space-x-2 text-indigo-600">
          <CalendarIcon size={24} />
          <h1 className="text-xl font-bold text-gray-900 hidden sm:block">The Studio Clicks Portal</h1>
          <h1 className="text-xl font-bold text-gray-900 sm:hidden">Studio Portal</h1>
        </div>

        {/* View Toggle */}
        <div className="flex bg-gray-100 p-1 rounded-lg">
          <button 
            onClick={() => setCurrentView('calendar')}
            className={`px-3 py-1.5 rounded-md text-sm font-medium flex items-center space-x-2 transition-colors ${currentView === 'calendar' ? 'bg-white shadow-sm text-indigo-600' : 'text-gray-500 hover:text-gray-700'}`}
          >
            <CalendarIcon size={16} />
            <span className="hidden sm:inline">Calendar</span>
          </button>
          <button 
            onClick={() => setCurrentView('list')}
            className={`px-3 py-1.5 rounded-md text-sm font-medium flex items-center space-x-2 transition-colors ${currentView === 'list' ? 'bg-white shadow-sm text-indigo-600' : 'text-gray-500 hover:text-gray-700'}`}
          >
            <List size={16} />
            <span className="hidden sm:inline">All Bookings</span>
          </button>
        </div>

        <div className="flex items-center space-x-4">
          <div className="hidden sm:flex items-center space-x-2 text-sm">
            <div className={`p-1.5 rounded-full ${currentUser.role === 'admin' ? 'bg-amber-100 text-amber-700' : 'bg-indigo-100 text-indigo-700'}`}>
              {currentUser.role === 'admin' ? <ShieldAlert size={16} /> : <UserIcon size={16} />}
            </div>
            <div>
              <p className="font-medium text-gray-900">{currentUser.username}</p>
              <p className="text-xs text-gray-500 capitalize">{currentUser.role} Account</p>
            </div>
          </div>
          <button 
            onClick={handleLogout}
            className="p-2 text-gray-500 hover:bg-gray-100 hover:text-red-600 rounded-md transition-colors"
            title="Logout"
          >
            <LogOut size={20} />
          </button>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 p-4 md:p-8 max-w-7xl mx-auto w-full relative">
        
        {/* Toast Notification */}
        {notification && (
          <div className="fixed top-20 right-4 bg-emerald-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2 animate-in fade-in slide-in-from-top-5">
            <Mail size={18} />
            <span className="font-medium text-sm">{notification}</span>
          </div>
        )}

        {/* Header Controls */}
        <div className="flex flex-col md:flex-row justify-between items-center mb-6 space-y-4 md:space-y-0 mt-2">
          {currentView === 'calendar' ? (
            <div className="flex items-center space-x-4 bg-white p-2 rounded-lg shadow-sm border border-gray-200 w-full md:w-auto justify-center">
              <button onClick={prevMonth} className="p-1 hover:bg-gray-100 rounded-md transition-colors"><ChevronLeft size={20} /></button>
              <h2 className="text-lg font-semibold w-40 text-center">
                {monthNames[month]} {year}
              </h2>
              <button onClick={nextMonth} className="p-1 hover:bg-gray-100 rounded-md transition-colors"><ChevronRight size={20} /></button>
              <button onClick={todayMonth} className="text-sm px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md font-medium ml-2 transition-colors">Today</button>
            </div>
          ) : (
            <div className="flex items-center space-x-4 bg-white p-2 rounded-lg shadow-sm border border-gray-200 w-full md:w-auto">
               <h2 className="text-lg font-semibold px-4">Booking Directory & Payments</h2>
            </div>
          )}

          <button 
            onClick={() => openAddModal(new Date().toISOString().split('T')[0])}
            className="flex items-center justify-center space-x-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg shadow-sm transition-colors w-full md:w-auto"
          >
            <Plus size={18} />
            <span>New Booking</span>
          </button>
        </div>

        {currentView === 'calendar' ? (
          /* Calendar Grid View */
          <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div className="grid grid-cols-7 bg-gray-50 border-b border-gray-200">
              {dayNames.map(day => (
                <div key={day} className="py-3 text-center text-sm font-semibold text-gray-500 uppercase tracking-wider">
                  {day}
                </div>
              ))}
            </div>

            <div className="grid grid-cols-7 auto-rows-fr">
              {Array.from({ length: firstDayIndex }).map((_, i) => (
                <div key={`empty-${i}`} className="min-h-[120px] p-2 border-b border-r border-gray-100 bg-gray-50/50 hidden sm:block"></div>
              ))}

              {Array.from({ length: daysInMonth }).map((_, i) => {
                const day = i + 1;
                const dateString = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                const isToday = dateString === new Date().toISOString().split('T')[0];
                const dayBookings = bookings.filter(b => b.date === dateString).sort((a, b) => a.time.localeCompare(b.time));

                return (
                  <div 
                    key={day} 
                    className={`min-h-[100px] sm:min-h-[120px] p-1 sm:p-2 border-b border-r border-gray-100 relative group transition-colors hover:bg-indigo-50/30 ${isToday ? 'bg-indigo-50/10' : ''}`}
                  >
                    <div className="flex justify-between items-start mb-1">
                      <span className={`text-sm font-medium w-6 h-6 sm:w-7 sm:h-7 flex items-center justify-center rounded-full ${isToday ? 'bg-indigo-600 text-white shadow-md' : 'text-gray-700'}`}>
                        {day}
                      </span>
                      <button 
                        onClick={() => openAddModal(dateString)}
                        className="opacity-0 group-hover:opacity-100 p-1 text-gray-400 hover:text-indigo-600 transition-opacity hidden sm:block"
                      >
                        <Plus size={16} />
                      </button>
                    </div>
                    
                    <div className="space-y-1 mt-1 sm:mt-2">
                      {dayBookings.map(booking => (
                        <div 
                          key={booking.id} 
                          className={`text-xs p-1.5 rounded-md border flex flex-col gap-1 shadow-sm
                            ${booking.balance > 0 ? 'bg-orange-50 border-orange-200 text-orange-900' : 'bg-emerald-50 border-emerald-200 text-emerald-900'}
                          `}
                        >
                          <div className="flex justify-between items-center">
                            <span className="font-semibold truncate">{booking.time}</span>
                            <div className="flex items-center space-x-1 sm:space-x-2">
                               <span title={booking.balance > 0 ? `Balance Due: ₹${booking.balance}` : 'Fully Paid'}>
                                  <DollarSign size={12} className={booking.balance > 0 ? 'text-orange-500' : 'text-emerald-500'} />
                               </span>
                            </div>
                          </div>
                          <div className="truncate font-medium">{booking.clientName}</div>
                          <div className="truncate text-[10px] opacity-80 hidden sm:block">{booking.service}</div>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
            <div className="p-4 bg-gray-50 border-t border-gray-200 text-xs text-gray-500 flex gap-4 justify-center sm:justify-start">
                <div className="flex items-center gap-1"><div className="w-3 h-3 rounded bg-emerald-100 border border-emerald-200"></div> Fully Paid</div>
                <div className="flex items-center gap-1"><div className="w-3 h-3 rounded bg-orange-100 border border-orange-200"></div> Balance Pending</div>
            </div>
          </div>
        ) : (
          /* List View / Data Table */
          <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-sm text-left text-gray-500">
                <thead className="text-xs text-gray-700 uppercase bg-gray-50 border-b border-gray-200">
                  <tr>
                    <th className="px-6 py-3">Date & Time</th>
                    <th className="px-6 py-3">Client Information</th>
                    <th className="px-6 py-3">Shoot & Package</th>
                    <th className="px-6 py-3">Payment Status</th>
                    <th className="px-6 py-3 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {bookings.sort((a, b) => new Date(`${a.date}T${a.time}`) - new Date(`${b.date}T${b.time}`)).map(booking => (
                    <tr key={booking.id} className="bg-white border-b hover:bg-gray-50">
                      <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                        <div className="flex items-center space-x-2"><CalendarIcon size={14} className="text-gray-400"/> <span>{booking.date}</span></div>
                        <div className="flex items-center space-x-2 mt-1"><Clock size={14} className="text-gray-400"/> <span>{booking.time}</span></div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="font-semibold text-gray-900">{booking.clientName}</div>
                        <div className="text-xs text-gray-600 flex items-center gap-1 mt-1">
                          <Phone size={12}/> {booking.clientPhone}
                        </div>
                        <div className="text-xs text-indigo-600 flex items-center gap-1 mt-1">
                          <Mail size={12}/> {booking.clientEmail}
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="font-medium text-gray-700">{booking.service}</div>
                        <div className="mt-1 text-xs">
                          <span className="px-2 py-0.5 bg-indigo-50 text-indigo-700 border border-indigo-100 rounded">
                            {booking.packageType || 'Custom'}
                          </span>
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-xs space-y-1">
                           <div className="flex justify-between w-32"><span className="text-gray-500">Total:</span> <span className="font-medium text-gray-900">₹{booking.totalAmount}</span></div>
                           <div className="flex justify-between w-32"><span className="text-gray-500">Advance:</span> <span className="text-emerald-600 font-medium">₹{booking.advance}</span></div>
                           <div className="flex justify-between w-32 pt-1 border-t border-gray-100">
                             <span className="text-gray-500">Balance:</span> 
                             <span className={`font-bold ${booking.balance > 0 ? 'text-red-500' : 'text-emerald-500'}`}>
                               ₹{booking.balance}
                             </span>
                           </div>
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="flex items-center justify-end space-x-2">
                           <button 
                            onClick={() => openPaymentModal(booking)}
                            className="text-indigo-600 hover:text-indigo-800 p-2 bg-indigo-50 hover:bg-indigo-100 rounded-md transition-colors flex items-center gap-1"
                            title="Update Payment Balance"
                          >
                            <CreditCard size={14} /> <span className="text-xs font-medium">Pay</span>
                          </button>
                          {(currentUser.role === 'admin' || currentUser.username === booking.addedBy) && (
                            <button 
                              onClick={() => handleDeleteBooking(booking.id)}
                              className="text-red-500 hover:text-red-700 p-2 bg-red-50 hover:bg-red-100 rounded-md transition-colors"
                              title="Delete booking"
                            >
                              <Trash2 size={16} />
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                  {bookings.length === 0 && (
                    <tr>
                      <td colSpan="5" className="px-6 py-8 text-center text-gray-500">No bookings have been scheduled yet.</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </main>

      {/* 1. Add Booking Form Modal */}
      {isBookingModalOpen && (
        <div className="fixed inset-0 bg-gray-900/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden animate-in fade-in zoom-in duration-200 max-h-[90vh] flex flex-col">
            <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50 shrink-0">
              <h3 className="text-lg font-semibold text-gray-900">New Client Booking</h3>
              <button onClick={() => setIsBookingModalOpen(false)} className="text-gray-400 hover:text-gray-600">&times;</button>
            </div>
            
            <form onSubmit={handlePrepareBooking} className="p-6 overflow-y-auto space-y-4">
              
              {/* Date & Time */}
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <label className="text-sm font-medium text-gray-700">Date <span className="text-red-500">*</span></label>
                  <input type="date" name="date" defaultValue={selectedDate} required className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
                </div>
                <div className="space-y-1">
                  <label className="text-sm font-medium text-gray-700">Time <span className="text-red-500">*</span></label>
                  <input type="time" name="time" required className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
                </div>
              </div>

              {/* Client Info */}
              <div className="space-y-1">
                <label className="text-sm font-medium text-gray-700">Client Name <span className="text-red-500">*</span></label>
                <input type="text" name="clientName" required placeholder="e.g. Acme Corp" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <label className="text-sm font-medium text-gray-700">Mobile Number <span className="text-red-500">*</span></label>
                  <input type="tel" name="clientPhone" required placeholder="10-digit number" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
                </div>
                <div className="space-y-1">
                  <label className="text-sm font-medium text-gray-700">Email Address <span className="text-red-500">*</span></label>
                  <input type="email" name="clientEmail" required placeholder="client@example.com" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
                </div>
              </div>

              {/* Shoot & Package */}
              <div className="grid grid-cols-2 gap-4 border-t border-gray-100 pt-4">
                <div className="space-y-1">
                  <label className="text-sm font-medium text-gray-700">Shoot Type <span className="text-red-500">*</span></label>
                  <select name="service" required value={selectedService} onChange={(e) => setSelectedService(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white">
                    <option value="">Select category...</option>
                    <option value="Pre Birthday">Pre Birthday</option>
                    <option value="New Born">New Born</option>
                    <option value="Maternity">Maternity</option>
                    <option value="Pre Wedding">Pre Wedding</option>
                    <option value="Birthday Events">Birthday Events</option>
                  </select>
                </div>

                <div className="space-y-1">
                  <label className="text-sm font-medium text-gray-700">Package Details <span className="text-red-500">*</span></label>
                  <select name="packageType" required={!!selectedService} disabled={!selectedService} className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white disabled:bg-gray-100">
                    <option value="">{selectedService ? 'Select package...' : 'Select shoot type first'}</option>
                    {selectedService && packagesData[selectedService]?.map(pkg => (
                      <option key={pkg} value={pkg}>{pkg}</option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Payments */}
              <div className="grid grid-cols-2 gap-4 bg-gray-50 p-3 rounded-md border border-gray-200">
                <div className="space-y-1">
                  <label className="text-sm font-medium text-gray-700">Total Amount (₹) <span className="text-red-500">*</span></label>
                  <input type="number" name="totalAmount" min="0" required placeholder="e.g. 15000" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
                </div>
                <div className="space-y-1">
                  <label className="text-sm font-medium text-gray-700">Advance Paid (₹) <span className="text-red-500">*</span></label>
                  <input type="number" name="advance" min="0" required defaultValue="0" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
                </div>
              </div>

              <div className="pt-4 flex justify-end space-x-3 border-t border-gray-100 mt-6 shrink-0">
                <button type="button" onClick={() => setIsBookingModalOpen(false)} className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">Cancel</button>
                <button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 flex items-center space-x-2">
                  <span>Continue to Email Draft</span>
                  <ChevronRight size={16} />
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* 2. Email Draft Modal */}
      {isEmailDraftOpen && draftData && (
        <div className="fixed inset-0 bg-gray-900/60 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg overflow-hidden animate-in fade-in zoom-in duration-200">
            <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-indigo-50">
              <div className="flex items-center space-x-2 text-indigo-800">
                <Edit2 size={18} />
                <h3 className="text-lg font-semibold">Review Email Draft</h3>
              </div>
              <button onClick={() => setIsEmailDraftOpen(false)} className="text-indigo-400 hover:text-indigo-600">&times;</button>
            </div>
            
            <form onSubmit={handleSaveAndSendEmail} className="p-6 space-y-4">
              <div className="space-y-1">
                <label className="text-xs font-semibold text-gray-500 uppercase">To</label>
                <div className="text-sm font-medium text-gray-900 bg-gray-50 px-3 py-2 rounded border border-gray-200">{draftData.booking.clientEmail}</div>
              </div>
              
              <div className="space-y-1">
                <label className="text-xs font-semibold text-gray-500 uppercase">Subject</label>
                <input 
                  type="text" 
                  name="emailSubject" 
                  defaultValue={draftData.emailSubject}
                  required
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                />
              </div>

              <div className="space-y-1">
                <label className="text-xs font-semibold text-gray-500 uppercase">Message Body</label>
                <textarea 
                  name="emailBody" 
                  rows="8"
                  defaultValue={draftData.emailBody}
                  required
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm font-mono text-xs"
                ></textarea>
                <p className="text-xs text-gray-500 pt-1">You can edit the message above before sending. Clicking send will open your default mail app.</p>
              </div>

              <div className="pt-4 flex justify-end space-x-3 border-t border-gray-100 mt-6">
                <button type="button" onClick={() => setIsEmailDraftOpen(false)} className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">Cancel</button>
                <button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 flex items-center space-x-2">
                  <Mail size={16} />
                  <span>Send via Email App & Save</span>
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* 3. Update Payment Modal */}
      {isPaymentModalOpen && paymentEditData && (
        <div className="fixed inset-0 bg-gray-900/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-sm overflow-hidden animate-in fade-in zoom-in duration-200">
            <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
              <h3 className="text-lg font-semibold text-gray-900">Update Payment</h3>
              <button onClick={() => setIsPaymentModalOpen(false)} className="text-gray-400 hover:text-gray-600">&times;</button>
            </div>
            
            <form onSubmit={handleUpdatePayment} className="p-6 space-y-4">
              <div className="text-sm space-y-2 mb-4">
                <p><span className="text-gray-500">Client:</span> <span className="font-semibold">{paymentEditData.clientName}</span></p>
                <p><span className="text-gray-500">Total Amount:</span> <span className="font-semibold">₹{paymentEditData.totalAmount}</span></p>
                <p><span className="text-gray-500">Currently Paid:</span> <span className="font-semibold text-emerald-600">₹{paymentEditData.advance}</span></p>
                <div className="p-2 bg-orange-50 text-orange-800 rounded border border-orange-200 mt-2">
                   <span className="font-semibold">Balance Pending: ₹{paymentEditData.balance}</span>
                </div>
              </div>

              {paymentEditData.balance > 0 ? (
                <div className="space-y-1">
                  <label className="text-sm font-medium text-gray-700">Add New Payment Received (₹)</label>
                  <input 
                    type="number" 
                    name="additionalPayment" 
                    min="1" 
                    max={paymentEditData.balance} 
                    required
                    placeholder={`Max ₹${paymentEditData.balance}`}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                  />
                </div>
              ) : (
                <div className="text-center p-4 bg-emerald-50 text-emerald-700 rounded-lg">
                  Booking is fully paid!
                </div>
              )}

              <div className="pt-4 flex justify-end space-x-3 border-t border-gray-100 mt-6">
                <button type="button" onClick={() => setIsPaymentModalOpen(false)} className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">Close</button>
                {paymentEditData.balance > 0 && (
                  <button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
                    Update Balance
                  </button>
                )}
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

// --- SEPARATE LOGIN COMPONENT ---
function LoginScreen({ onLogin }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onLogin(username, password);
  };

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
      <div className="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden">
        <div className="bg-indigo-600 p-8 text-center">
          <CalendarIcon className="w-12 h-12 text-white mx-auto mb-4" />
          <h2 className="text-3xl font-bold text-white mb-2">The Studio Clicks Portal</h2>
          <p className="text-indigo-100">Sign in to manage client bookings & payments</p>
        </div>
        
        <div className="p-8">
          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
                placeholder="Enter username"
                required
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
                placeholder="Enter password"
                required
              />
            </div>

            <button
              type="submit"
              className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg shadow-md transition-colors duration-200"
            >
              Sign In
            </button>
          </form>

          <div className="mt-8 pt-6 border-t border-gray-100 bg-gray-50 -mx-8 -mb-8 p-8 text-sm text-gray-600">
            <p className="font-semibold mb-2">Demo Credentials:</p>
            <ul className="space-y-1">
              <li><span className="font-mono bg-gray-200 px-1 rounded">admin</span> / <span className="font-mono bg-gray-200 px-1 rounded">admin</span></li>
              <li><span className="font-mono bg-gray-200 px-1 rounded">user</span> / <span className="font-mono bg-gray-200 px-1 rounded">user</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}