import { useEffect, useState } from 'react'
import { ROOM_TYPES } from '../constants'
import { usePosStore } from '../store/usePosStore'
import { fmt, fmtMoney } from '../utils/helpers'

function Overlay({ open, onBackdrop, children }) {
  if (!open) return null
  return (
    <div
      className="overlay open"
      role="presentation"
      onClick={(e) => e.target === e.currentTarget && onBackdrop?.()}
    >
      {children}
    </div>
  )
}

export default function Modals() {
  const modalOpen = usePosStore((s) => s.modalOpen)
  const closeModal = usePosStore((s) => s.closeModal)

  const selectedRoom = usePosStore((s) => s.selectedRoom)
  const bookings = usePosStore((s) => s.bookings)
  const changeRoomStatus = usePosStore((s) => s.changeRoomStatus)
  const bookFromRoomModal = usePosStore((s) => s.bookFromRoomModal)

  const currentBooking = usePosStore((s) => s.currentBooking)
  const doCheckin = usePosStore((s) => s.doCheckin)
  const showCheckoutModal = usePosStore((s) => s.showCheckoutModal)
  const printCurrentReceipt = usePosStore((s) => s.printCurrentReceipt)
  const finalizeCheckout = usePosStore((s) => s.finalizeCheckout)

  const receiptBooking = usePosStore((s) => s.receiptBooking)
  const receiptTotals = usePosStore((s) => s.receiptTotals)

  const instructors = usePosStore((s) => s.instructors)
  const addDive = usePosStore((s) => s.addDive)
  const addEquipment = usePosStore((s) => s.addEquipment)
  const addInstructor = usePosStore((s) => s.addInstructor)
  const addAgent = usePosStore((s) => s.addAgent)
  const addTrip = usePosStore((s) => s.addTrip)
  const addEvent = usePosStore((s) => s.addEvent)

  const [rmStatus, setRmStatus] = useState('available')

  useEffect(() => {
    if (modalOpen === 'room' && selectedRoom) {
      const s = selectedRoom.status
      setRmStatus(s === 'maintenance' || s === 'blocked' ? s : 'available')
    }
  }, [modalOpen, selectedRoom])
  const [coExtra, setCoExtra] = useState(0)
  const [coDisc, setCoDisc] = useState(0)
  const [coPay, setCoPay] = useState('cash')

  const [diveForm, setDiveForm] = useState({
    date: '',
    time: '08:00',
    type: 'Fun Dive',
    boat: 'Boat A',
    instructor: '',
    maxDivers: 8,
  })

  const [eqForm, setEqForm] = useState({ name: '', cat: 'BCD', total: 5, rate: 30 })
  const [insForm, setInsForm] = useState({
    name: '',
    role: 'Instructor',
    cert: '',
    commission: 50,
  })
  const [agForm, setAgForm] = useState({
    name: '',
    code: '',
    type: 'percent',
    rate: 10,
  })
  const [tripForm, setTripForm] = useState({
    date: '',
    time: '',
    route: '',
    capacity: 20,
    rate: 30,
  })
  const [evForm, setEvForm] = useState({
    name: '',
    date: '',
    pax: 10,
    total: 0,
    deposit: 0,
  })

  const bk = selectedRoom?.currentBooking ? bookings.find((b) => b.id === selectedRoom.currentBooking) : null
  const rt = selectedRoom ? ROOM_TYPES.find((t) => t.type === selectedRoom.type) : null

  return (
    <>
      <Overlay open={modalOpen === 'room'} onBackdrop={closeModal}>
        <div className="modal">
          <div className="modal-header">
            <div className="modal-title">{selectedRoom ? `Room ${selectedRoom.id}` : 'Room'}</div>
            <button type="button" className="modal-close" onClick={closeModal}>
              ✕
            </button>
          </div>
          {selectedRoom && (
            <>
              <div className="g2 mb16" style={{ fontSize: '0.82rem' }}>
                <div>
                  <div className="text-muted">Type</div>
                  <div>{selectedRoom.type}</div>
                </div>
                <div>
                  <div className="text-muted">Max Pax</div>
                  <div>{selectedRoom.maxPax}</div>
                </div>
                <div>
                  <div className="text-muted">Weekday Rate</div>
                  <div>RM {rt?.rate.weekday ?? '-'}</div>
                </div>
                <div>
                  <div className="text-muted">Weekend Rate</div>
                  <div>RM {rt?.rate.weekend ?? '-'}</div>
                </div>
              </div>
              <div className="fgroup mb16">
                <label className="lbl">Current Status</label>
                {selectedRoom.status === 'occupied' ? (
                  <div className="text-muted" style={{ padding: '8px 0' }}>
                    Occupied — status clears when guest checks out
                  </div>
                ) : (
                  <select value={rmStatus} onChange={(e) => setRmStatus(e.target.value)}>
                    <option value="available">Available</option>
                    <option value="maintenance">Maintenance</option>
                    <option value="blocked">Blocked</option>
                  </select>
                )}
              </div>
              {bk ? (
                <div className="invoice">
                  <div className="inv-section-title">Current Booking</div>
                  <div className="inv-row">
                    <span>Guest</span>
                    <span>{bk.guestName}</span>
                  </div>
                  <div className="inv-row">
                    <span>Stay</span>
                    <span>
                      {fmt(bk.checkin)} → {fmt(bk.checkout)}
                    </span>
                  </div>
                  <div className="inv-row">
                    <span>Pax</span>
                    <span>{(bk.pax?.adult || 0) + (bk.pax?.kid || 0) + (bk.pax?.elderly || 0)}</span>
                  </div>
                </div>
              ) : null}
              <div className="modal-actions">
                <button type="button" className="btn btn-ghost" onClick={closeModal}>
                  Close
                </button>
                {selectedRoom.status !== 'occupied' && (
                  <button
                    type="button"
                    className="btn btn-gold"
                    onClick={() => changeRoomStatus(rmStatus)}
                  >
                    Change Status
                  </button>
                )}
                {selectedRoom.status === 'available' && (
                  <button type="button" className="btn btn-primary" onClick={bookFromRoomModal}>
                    Book This Room
                  </button>
                )}
              </div>
            </>
          )}
        </div>
      </Overlay>

      <Overlay open={modalOpen === 'booking-detail'} onBackdrop={closeModal}>
        <div className="modal modal-lg">
          <div className="modal-header">
            <div className="modal-title">{currentBooking ? `Booking ${currentBooking.id}` : ''}</div>
            <button type="button" className="modal-close" onClick={closeModal}>
              ✕
            </button>
          </div>
          {currentBooking && (
            <>
              <div className="g2 mb16" style={{ fontSize: '0.82rem' }}>
                <div>
                  <div className="text-muted section-label">Guest Info</div>
                  <div className="mb8">
                    <strong>{currentBooking.guestName}</strong> · {currentBooking.nationality}
                  </div>
                  <div className="text-muted">
                    {currentBooking.phone || ''} {currentBooking.email ? `· ${currentBooking.email}` : ''}
                  </div>
                  <div className="text-muted">IC/Passport: {currentBooking.ic || '-'}</div>
                </div>
                <div>
                  <div className="text-muted section-label">Stay Info</div>
                  <div className="mb8">
                    Room <strong>{currentBooking.room}</strong> · {currentBooking.nights} nights
                  </div>
                  <div>
                    {fmt(currentBooking.checkin)} → {fmt(currentBooking.checkout)}
                  </div>
                  <div className="text-muted mt8">
                    Package: {currentBooking.packageType || '-'}{' '}
                    {currentBooking.course ? `| Course: ${currentBooking.course}` : ''}
                  </div>
                </div>
              </div>
              <div className="invoice">
                <div className="inv-row">
                  <span>Room Charges</span>
                  <span>{fmtMoney((currentBooking.fees?.baseRate || 280) * currentBooking.nights)}</span>
                </div>
                {(currentBooking.addons || []).map((a) => (
                  <div key={a.id} className="inv-row sub">
                    <span>{a.name}</span>
                    <span>+{fmtMoney(a.price)}</span>
                  </div>
                ))}
                <div className="inv-row sub">
                  <span>Tourism Tax</span>
                  <span>+{fmtMoney(currentBooking.fees?.tourismTax || 0)}</span>
                </div>
                <div className="inv-row sub">
                  <span>Gratuity (RM 5 per person)</span>
                  <span>+{fmtMoney(currentBooking.fees?.gratuity || 0)}</span>
                </div>
                <div className="inv-row total">
                  <span>TOTAL</span>
                  <span>{fmtMoney(currentBooking.totalAmount)}</span>
                </div>
                <div className="inv-row sub">
                  <span>Paid via {currentBooking.payMethod}</span>
                  <span>{fmtMoney(currentBooking.amountPaid)}</span>
                </div>
              </div>
              <div className="mt12">
                <span className={`pill ${currentBooking.status === 'confirmed' ? 'pill-blue' : ''}`}>
                  {currentBooking.status}
                </span>
              </div>
              <div className="modal-actions">
                <button type="button" className="btn btn-ghost" onClick={closeModal}>
                  Close
                </button>
                {currentBooking.status === 'confirmed' && (
                  <button type="button" className="btn btn-success" onClick={() => doCheckin()}>
                    ✅ Check In
                  </button>
                )}
                {currentBooking.status === 'checked-in' && (
                  <button type="button" className="btn btn-coral" onClick={() => showCheckoutModal()}>
                    🚪 Check Out
                  </button>
                )}
                <button type="button" className="btn btn-primary" onClick={() => printCurrentReceipt()}>
                  🖨 Print Invoice
                </button>
              </div>
            </>
          )}
        </div>
      </Overlay>

      <Overlay open={modalOpen === 'checkout'} onBackdrop={closeModal}>
        <div className="modal">
          <div className="modal-header">
            <div className="modal-title">Process Check-out & Payment</div>
            <button type="button" className="modal-close" onClick={closeModal}>
              ✕
            </button>
          </div>
          {currentBooking && (
            <>
              <div className="invoice mb16">
                <div className="inv-row">
                  <span>Guest</span>
                  <span>{currentBooking.guestName}</span>
                </div>
                <div className="inv-row">
                  <span>Room</span>
                  <span>{currentBooking.room}</span>
                </div>
                <div className="inv-row">
                  <span>Stay</span>
                  <span>
                    {fmt(currentBooking.checkin)} → {fmt(currentBooking.checkout)}
                  </span>
                </div>
                <div className="inv-row total">
                  <span>Total Due</span>
                  <span>{fmtMoney(currentBooking.totalAmount)}</span>
                </div>
                <div className="inv-row sub">
                  <span>Already Paid</span>
                  <span>{fmtMoney(currentBooking.amountPaid)}</span>
                </div>
                <div className="inv-row total">
                  <span>Balance</span>
                  <span>{fmtMoney(currentBooking.totalAmount - currentBooking.amountPaid)}</span>
                </div>
              </div>
              <div className="fgroup mb16">
                <label className="lbl">Extra Charges (RM)</label>
                <input
                  type="number"
                  value={coExtra}
                  step="0.01"
                  onChange={(e) => setCoExtra(+e.target.value)}
                />
              </div>
              <div className="fgroup mb16">
                <label className="lbl">Discount (RM)</label>
                <input
                  type="number"
                  value={coDisc}
                  step="0.01"
                  onChange={(e) => setCoDisc(+e.target.value)}
                />
              </div>
              <div className="fgroup">
                <label className="lbl">Payment Method</label>
                <select value={coPay} onChange={(e) => setCoPay(e.target.value)}>
                  <option value="cash">Cash</option>
                  <option value="fpx">FPX</option>
                  <option value="card">Card</option>
                  <option value="wallet">Wallet</option>
                </select>
              </div>
              <div className="modal-actions">
                <button type="button" className="btn btn-ghost" onClick={closeModal}>
                  Cancel
                </button>
                <button
                  type="button"
                  className="btn btn-success"
                  onClick={() => finalizeCheckout(coExtra, coDisc, coPay)}
                >
                  ✅ Confirm & Generate Receipt
                </button>
              </div>
            </>
          )}
        </div>
      </Overlay>

      <Overlay open={modalOpen === 'receipt'} onBackdrop={closeModal}>
        <div className="modal">
          <div className="modal-header">
            <div className="modal-title">Receipt / Invoice</div>
            <button type="button" className="modal-close" onClick={closeModal}>
              ✕
            </button>
          </div>
          {receiptBooking && (
            <div className="invoice">
              <div className="inv-header">
                <div>
                  <div className="inv-logo">The One Tenggol Island Resort</div>
                  <div className="text-muted" style={{ fontSize: '0.7rem' }}>
                    Tioman Island, Malaysia
                  </div>
                </div>
                <div className="inv-meta">
                  <div className="fw6">{receiptBooking.id}</div>
                  <div>{new Date().toLocaleDateString('en-MY')}</div>
                </div>
              </div>
              <hr className="inv-divider" />
              <div className="inv-row">
                <span>Guest</span>
                <span>{receiptBooking.guestName}</span>
              </div>
              <div className="inv-row">
                <span>Nationality</span>
                <span>{receiptBooking.nationality}</span>
              </div>
              <div className="inv-row">
                <span>IC/Passport</span>
                <span>{receiptBooking.ic || '-'}</span>
              </div>
              <div className="inv-row">
                <span>Room</span>
                <span>{receiptBooking.room || '-'}</span>
              </div>
              <div className="inv-row">
                <span>Package</span>
                <span>{receiptBooking.packageType || '-'}</span>
              </div>
              <div className="inv-row">
                <span>Check-in</span>
                <span>{fmt(receiptBooking.checkin)}</span>
              </div>
              <div className="inv-row">
                <span>Check-out</span>
                <span>{fmt(receiptBooking.checkout)}</span>
              </div>
              <div className="inv-row">
                <span>Nights</span>
                <span>{receiptBooking.nights}</span>
              </div>
              <hr className="inv-divider" />
              <div className="inv-row total">
                <span>TOTAL PAID</span>
                <span>{fmtMoney(receiptTotals?.total ?? receiptBooking.totalAmount)}</span>
              </div>
              <div className="inv-row">
                <span>Payment Method</span>
                <span>{receiptBooking.payMethod}</span>
              </div>
              <div className="text-muted text-center mt16" style={{ fontSize: '0.72rem' }}>
                Thank you for choosing The One Tenggol Island Resort!
                <br />
                We hope to see you again on the island 🏝
              </div>
            </div>
          )}
          <div className="modal-actions">
            <button type="button" className="btn btn-ghost" onClick={closeModal}>
              Close
            </button>
            <button type="button" className="btn btn-primary" onClick={() => window.print()}>
              🖨 Print
            </button>
          </div>
        </div>
      </Overlay>

      <Overlay open={modalOpen === 'add-dive'} onBackdrop={closeModal}>
        <div className="modal">
          <div className="modal-header">
            <div className="modal-title">Add Dive Slot</div>
            <button type="button" className="modal-close" onClick={closeModal}>
              ✕
            </button>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Date</label>
              <input
                type="date"
                value={diveForm.date}
                onChange={(e) => setDiveForm((f) => ({ ...f, date: e.target.value }))}
              />
            </div>
            <div className="fgroup">
              <label className="lbl">Time</label>
              <input
                type="time"
                value={diveForm.time}
                onChange={(e) => setDiveForm((f) => ({ ...f, time: e.target.value }))}
              />
            </div>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Type</label>
              <select
                value={diveForm.type}
                onChange={(e) => setDiveForm((f) => ({ ...f, type: e.target.value }))}
              >
                <option>Fun Dive</option>
                <option>Open Water Course</option>
                <option>Advanced Course</option>
                <option>Night Dive</option>
                <option>Discovery Dive</option>
              </select>
            </div>
            <div className="fgroup">
              <label className="lbl">Boat</label>
              <select
                value={diveForm.boat}
                onChange={(e) => setDiveForm((f) => ({ ...f, boat: e.target.value }))}
              >
                <option>Boat A</option>
                <option>Boat B</option>
                <option>Charter</option>
              </select>
            </div>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Instructor/DM</label>
              <select
                value={diveForm.instructor}
                onChange={(e) => setDiveForm((f) => ({ ...f, instructor: e.target.value }))}
              >
                <option value="">—</option>
                {instructors.map((i) => (
                  <option key={i.id} value={i.name}>
                    {i.name} ({i.role})
                  </option>
                ))}
              </select>
            </div>
            <div className="fgroup">
              <label className="lbl">Max Divers</label>
              <input
                type="number"
                value={diveForm.maxDivers}
                onChange={(e) => setDiveForm((f) => ({ ...f, maxDivers: +e.target.value }))}
              />
            </div>
          </div>
          <div className="modal-actions">
            <button type="button" className="btn btn-ghost" onClick={closeModal}>
              Cancel
            </button>
            <button
              type="button"
              className="btn btn-primary"
              onClick={() =>
                addDive({
                  date: diveForm.date,
                  time: diveForm.time,
                  type: diveForm.type,
                  boat: diveForm.boat,
                  instructor: diveForm.instructor,
                  maxDivers: diveForm.maxDivers,
                })
              }
            >
              Add Dive
            </button>
          </div>
        </div>
      </Overlay>

      <Overlay open={modalOpen === 'add-equip'} onBackdrop={closeModal}>
        <div className="modal">
          <div className="modal-header">
            <div className="modal-title">Add Equipment</div>
            <button type="button" className="modal-close" onClick={closeModal}>
              ✕
            </button>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Item Name</label>
              <input
                value={eqForm.name}
                onChange={(e) => setEqForm((f) => ({ ...f, name: e.target.value }))}
                placeholder="e.g. BCD Jacket"
              />
            </div>
            <div className="fgroup">
              <label className="lbl">Category</label>
              <select
                value={eqForm.cat}
                onChange={(e) => setEqForm((f) => ({ ...f, cat: e.target.value }))}
              >
                {['BCD', 'Regulator', 'Wetsuit', 'Fins', 'Mask', 'Tank', 'Computer', 'Other'].map((c) => (
                  <option key={c}>{c}</option>
                ))}
              </select>
            </div>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Total Units</label>
              <input
                type="number"
                value={eqForm.total}
                onChange={(e) => setEqForm((f) => ({ ...f, total: +e.target.value }))}
              />
            </div>
            <div className="fgroup">
              <label className="lbl">Rate/Day (RM)</label>
              <input
                type="number"
                value={eqForm.rate}
                onChange={(e) => setEqForm((f) => ({ ...f, rate: +e.target.value }))}
              />
            </div>
          </div>
          <div className="modal-actions">
            <button type="button" className="btn btn-ghost" onClick={closeModal}>
              Cancel
            </button>
            <button
              type="button"
              className="btn btn-primary"
              onClick={() =>
                addEquipment({
                  name: eqForm.name,
                  cat: eqForm.cat,
                  total: eqForm.total,
                  available: eqForm.total,
                  rate: eqForm.rate,
                })
              }
            >
              Add
            </button>
          </div>
        </div>
      </Overlay>

      <Overlay open={modalOpen === 'add-instructor'} onBackdrop={closeModal}>
        <div className="modal">
          <div className="modal-header">
            <div className="modal-title">Add Instructor / DM</div>
            <button type="button" className="modal-close" onClick={closeModal}>
              ✕
            </button>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Name</label>
              <input
                value={insForm.name}
                onChange={(e) => setInsForm((f) => ({ ...f, name: e.target.value }))}
              />
            </div>
            <div className="fgroup">
              <label className="lbl">Role</label>
              <select
                value={insForm.role}
                onChange={(e) => setInsForm((f) => ({ ...f, role: e.target.value }))}
              >
                <option>Instructor</option>
                <option>Dive Master</option>
                <option>Assistant Instructor</option>
              </select>
            </div>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Cert Level</label>
              <input
                value={insForm.cert}
                onChange={(e) => setInsForm((f) => ({ ...f, cert: e.target.value }))}
                placeholder="e.g. SSI Level 1"
              />
            </div>
            <div className="fgroup">
              <label className="lbl">Commission/Session (RM)</label>
              <input
                type="number"
                value={insForm.commission}
                onChange={(e) => setInsForm((f) => ({ ...f, commission: +e.target.value }))}
              />
            </div>
          </div>
          <div className="modal-actions">
            <button type="button" className="btn btn-ghost" onClick={closeModal}>
              Cancel
            </button>
            <button
              type="button"
              className="btn btn-primary"
              onClick={() =>
                addInstructor({
                  name: insForm.name,
                  role: insForm.role,
                  cert: insForm.cert,
                  commission: insForm.commission,
                })
              }
            >
              Add
            </button>
          </div>
        </div>
      </Overlay>

      <Overlay open={modalOpen === 'add-agent'} onBackdrop={closeModal}>
        <div className="modal">
          <div className="modal-header">
            <div className="modal-title">Add Agent</div>
            <button type="button" className="modal-close" onClick={closeModal}>
              ✕
            </button>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Agent Name / Company</label>
              <input
                value={agForm.name}
                onChange={(e) => setAgForm((f) => ({ ...f, name: e.target.value }))}
              />
            </div>
            <div className="fgroup">
              <label className="lbl">Agent Code</label>
              <input
                value={agForm.code}
                onChange={(e) => setAgForm((f) => ({ ...f, code: e.target.value }))}
                placeholder="e.g. AGT001"
              />
            </div>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Commission Type</label>
              <select
                value={agForm.type}
                onChange={(e) => setAgForm((f) => ({ ...f, type: e.target.value }))}
              >
                <option value="percent">Percentage (%)</option>
                <option value="fixed">Fixed (RM)</option>
              </select>
            </div>
            <div className="fgroup">
              <label className="lbl">Rate</label>
              <input
                type="number"
                value={agForm.rate}
                onChange={(e) => setAgForm((f) => ({ ...f, rate: +e.target.value }))}
              />
            </div>
          </div>
          <div className="modal-actions">
            <button type="button" className="btn btn-ghost" onClick={closeModal}>
              Cancel
            </button>
            <button
              type="button"
              className="btn btn-primary"
              onClick={() =>
                addAgent({
                  name: agForm.name,
                  code: agForm.code.toUpperCase(),
                  type: agForm.type,
                  rate: agForm.rate,
                })
              }
            >
              Add Agent
            </button>
          </div>
        </div>
      </Overlay>

      <Overlay open={modalOpen === 'add-trip'} onBackdrop={closeModal}>
        <div className="modal">
          <div className="modal-header">
            <div className="modal-title">Schedule Transport</div>
            <button type="button" className="modal-close" onClick={closeModal}>
              ✕
            </button>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Date</label>
              <input
                type="date"
                value={tripForm.date}
                onChange={(e) => setTripForm((f) => ({ ...f, date: e.target.value }))}
              />
            </div>
            <div className="fgroup">
              <label className="lbl">Time</label>
              <input
                type="time"
                value={tripForm.time}
                onChange={(e) => setTripForm((f) => ({ ...f, time: e.target.value }))}
              />
            </div>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Route</label>
              <input
                value={tripForm.route}
                onChange={(e) => setTripForm((f) => ({ ...f, route: e.target.value }))}
                placeholder="e.g. Mersing → Resort"
              />
            </div>
            <div className="fgroup">
              <label className="lbl">Capacity (pax)</label>
              <input
                type="number"
                value={tripForm.capacity}
                onChange={(e) => setTripForm((f) => ({ ...f, capacity: +e.target.value }))}
              />
            </div>
          </div>
          <div className="fgroup mb16">
            <label className="lbl">Rate/Pax (RM)</label>
            <input
              type="number"
              value={tripForm.rate}
              onChange={(e) => setTripForm((f) => ({ ...f, rate: +e.target.value }))}
            />
          </div>
          <div className="modal-actions">
            <button type="button" className="btn btn-ghost" onClick={closeModal}>
              Cancel
            </button>
            <button type="button" className="btn btn-primary" onClick={() => addTrip(tripForm)}>
              Schedule
            </button>
          </div>
        </div>
      </Overlay>

      <Overlay open={modalOpen === 'add-event'} onBackdrop={closeModal}>
        <div className="modal">
          <div className="modal-header">
            <div className="modal-title">Create Event / Group Booking</div>
            <button type="button" className="modal-close" onClick={closeModal}>
              ✕
            </button>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Event Name</label>
              <input
                value={evForm.name}
                onChange={(e) => setEvForm((f) => ({ ...f, name: e.target.value }))}
              />
            </div>
            <div className="fgroup">
              <label className="lbl">Event Date</label>
              <input
                type="date"
                value={evForm.date}
                onChange={(e) => setEvForm((f) => ({ ...f, date: e.target.value }))}
              />
            </div>
          </div>
          <div className="form-row">
            <div className="fgroup">
              <label className="lbl">Total Pax</label>
              <input
                type="number"
                value={evForm.pax}
                onChange={(e) => setEvForm((f) => ({ ...f, pax: +e.target.value }))}
              />
            </div>
            <div className="fgroup">
              <label className="lbl">Total Price (RM)</label>
              <input
                type="number"
                value={evForm.total}
                onChange={(e) => setEvForm((f) => ({ ...f, total: +e.target.value }))}
              />
            </div>
          </div>
          <div className="fgroup mb16">
            <label className="lbl">Deposit (RM)</label>
            <input
              type="number"
              value={evForm.deposit}
              onChange={(e) => setEvForm((f) => ({ ...f, deposit: +e.target.value }))}
            />
          </div>
          <div className="modal-actions">
            <button type="button" className="btn btn-ghost" onClick={closeModal}>
              Cancel
            </button>
            <button type="button" className="btn btn-primary" onClick={() => addEvent(evForm)}>
              Create Event
            </button>
          </div>
        </div>
      </Overlay>
    </>
  )
}
