import React, { useState, useEffect } from 'react';
import { Room, Property, User } from '../types';
import { 
  ToggleLeft, ToggleRight, Search, Check, AlertCircle, Sparkles, Sliders, 
  LayoutGrid, CheckCircle, RefreshCw, Clock, Phone, Mail, MessageSquare, 
  Bell, Calendar, User as UserIcon, ShieldAlert, Plus, X, RotateCcw, AlertTriangle,
  Wrench
} from 'lucide-react';

interface RoomStatusGridProps {
  rooms: Room[];
  properties: Property[];
  currentUser: User;
  onRefresh: () => void;
}

export default function RoomStatusGrid({ rooms, properties, currentUser, onRefresh }: RoomStatusGridProps) {
  const [selectedPropertyId, setSelectedPropertyId] = useState<string>('all');
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<'all' | 'available' | 'occupied' | 'dirty_cleaning'>('all');
  const [loadingId, setLoadingId] = useState<string | null>(null);
  
  // Custom threshold for checkout warnings set by the admin (in hours)
  const [alertThreshold, setAlertThreshold] = useState<number>(1); // default 1 hour
  
  // Cleaning & Maintenance inputs
  const [roomForCleaning, setRoomForCleaning] = useState<Room | null>(null);
  const [cleaningStaffInput, setCleaningStaffInput] = useState('');
  
  const [roomForMaintenance, setRoomForMaintenance] = useState<Room | null>(null);
  const [maintenanceReasonInput, setMaintenanceReasonInput] = useState('');
  const [maintenanceStaffInput, setMaintenanceStaffInput] = useState('');

  // Selected Room for detailed management modal
  const [selectedRoomForOps, setSelectedRoomForOps] = useState<Room | null>(null);

  // Check-In Modal state
  const [showCheckInModal, setShowCheckInModal] = useState(false);
  const [checkInRoom, setCheckInRoom] = useState<Room | null>(null);
  const [guestNameInput, setGuestNameInput] = useState('');
  const [checkOutDateInput, setCheckOutDateInput] = useState('');
  const [checkOutTimeInput, setCheckOutTimeInput] = useState('12:00');

  // Simulator state
  const [activeSimulator, setActiveSimulator] = useState<{
    type: 'phone' | 'whatsapp' | 'email';
    guestName: string;
    roomNumber: string;
    checkOutTime: string;
    remainingText: string;
  } | null>(null);

  const [simulationStatus, setSimulationStatus] = useState<'ringing' | 'connected' | 'completed'>('ringing');

  // Trigger sound simulation or visual state changes for phone
  useEffect(() => {
    let timer: any;
    if (activeSimulator && activeSimulator.type === 'phone') {
      setSimulationStatus('ringing');
      timer = setTimeout(() => {
        setSimulationStatus('connected');
      }, 2500);
    }
    return () => clearTimeout(timer);
  }, [activeSimulator]);

  // Filter properties according to user role
  let myProperties = properties;
  if (currentUser.role === 'admin') {
    myProperties = properties.filter((p) => p.id === currentUser.propertyId);
  } else if (currentUser.role === 'owner') {
    myProperties = properties.filter((p) => p.ownerId === currentUser.id);
  }

  const myPropertyIds = myProperties.map((p) => p.id);
  
  // Helper to parse dates and calculate remaining time in hours
  const getHoursRemaining = (checkOutTimeStr: string | undefined) => {
    if (!checkOutTimeStr) return Infinity;
    try {
      const now = new Date();
      // Replace space with T to ensure correct ISO parsing
      const formatted = checkOutTimeStr.replace(' ', 'T');
      const checkout = new Date(formatted);
      const diffMs = checkout.getTime() - now.getTime();
      return diffMs / (1000 * 60 * 60); // returns hours remaining
    } catch (e) {
      return Infinity;
    }
  };

  const getRemainingTimeText = (hours: number) => {
    if (hours === Infinity) return '';
    if (hours < 0) {
      const positiveHours = Math.abs(hours);
      const days = Math.floor(positiveHours / 24);
      const remHours = Math.floor(positiveHours % 24);
      const mins = Math.round((positiveHours * 60) % 60);
      return `Overdue ${days > 0 ? `${days}h ` : ''}${remHours}j ${mins}m`;
    } else {
      const days = Math.floor(hours / 24);
      const remHours = Math.floor(hours % 24);
      const mins = Math.round((hours * 60) % 60);
      return `${days > 0 ? `${days}h ` : ''}${remHours}j ${mins}m`;
    }
  };

  // Filter rooms
  const filteredRooms = rooms.filter((r) => {
    const matchesPropertyScope = myPropertyIds.includes(r.propertyId);
    if (!matchesPropertyScope) return false;

    const matchesPropertySelect = selectedPropertyId === 'all' || r.propertyId === selectedPropertyId;
    const matchesSearch = r.roomNumber.toLowerCase().includes(searchQuery.toLowerCase()) || r.type.toLowerCase().includes(searchQuery.toLowerCase());
    
    let matchesStatus = true;
    if (statusFilter === 'available') {
      matchesStatus = r.status === 'available' && (!r.cleaningStatus || r.cleaningStatus === 'clean');
    } else if (statusFilter === 'occupied') {
      matchesStatus = r.status === 'occupied';
    } else if (statusFilter === 'dirty_cleaning') {
      matchesStatus = r.status === 'available' && (r.cleaningStatus === 'dirty' || r.cleaningStatus === 'cleaning');
    }

    return matchesPropertySelect && matchesSearch && matchesStatus;
  });

  // Action: Open Check-In Modal or direct Checkout
  const handleToggleStatus = (room: Room) => {
    if (room.status === 'available') {
      // Check-In
      const tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate() + 1);
      const tomorrowDateStr = tomorrow.toISOString().substring(0, 10);
      
      setGuestNameInput('');
      setCheckOutDateInput(tomorrowDateStr);
      setCheckOutTimeInput('12:00');
      setCheckInRoom(room);
      setShowCheckInModal(true);
    } else {
      // Checkout
      handleCheckOutDirect(room);
    }
  };

  // Action: Process Check-In
  const handleCheckInSubmit = async () => {
    if (!checkInRoom) return;
    if (!guestNameInput.trim()) {
      alert("Nama tamu wajib diisi!");
      return;
    }
    const checkoutStr = `${checkOutDateInput} ${checkOutTimeInput}`;
    setLoadingId(checkInRoom.id);
    setShowCheckInModal(false);
    try {
      const res = await fetch(`/api/rooms/${checkInRoom.id}/status`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          status: 'occupied',
          guestName: guestNameInput,
          checkOutTime: checkoutStr,
          cleaningStatus: 'clean',
          extendedCount: 0,
          extensionReason: ''
        }),
      });

      if (res.ok) {
        onRefresh();
        // Log action
        await fetch('/api/logs', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            type: 'user',
            message: `Check-In Berhasil: Kamar ${checkInRoom.roomNumber} disewa oleh "${guestNameInput}" sampai ${checkoutStr}.`,
            user: currentUser.fullName
          })
        });
      } else {
        const data = await res.json();
        alert(data.error || 'Gagal check-in kamar');
      }
    } catch (err) {
      alert('Koneksi ke server gagal');
    } finally {
      setLoadingId(null);
    }
  };

  // Action: Process Checkout
  const handleCheckOutDirect = async (room: Room) => {
    if (!confirm(`Apakah Anda yakin ingin check-out tamu "${room.guestName || 'Tamu'}" dari Kamar ${room.roomNumber}? Kamar akan berstatus kotor dan perlu dibersihkan.`)) {
      return;
    }
    setLoadingId(room.id);
    try {
      const res = await fetch(`/api/rooms/${room.id}/status`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          status: 'available',
          cleaningStatus: 'dirty' // Auto kotor setelah checkout
        }),
      });

      if (res.ok) {
        onRefresh();
        if (selectedRoomForOps?.id === room.id) {
          setSelectedRoomForOps(null);
        }
        // Log action
        await fetch('/api/logs', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            type: 'user',
            message: `Check-Out Sukses: Tamu dari Kamar ${room.roomNumber} telah keluar. Kamar ditandai KOTOR dan butuh tim kebersihan.`,
            user: currentUser.fullName
          })
        });
      } else {
        alert('Gagal memproses check-out');
      }
    } catch (err) {
      alert('Koneksi ke server gagal');
    } finally {
      setLoadingId(null);
    }
  };

  // Action: Update Cleaning Status
  const handleUpdateCleaningStatus = async (room: Room, newCleaningStatus: 'clean' | 'dirty' | 'cleaning') => {
    setLoadingId(room.id);
    try {
      const res = await fetch(`/api/rooms/${room.id}/status`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          cleaningStatus: newCleaningStatus,
          // If cleaned, reset metadata
          ...(newCleaningStatus === 'clean' ? { guestName: '', checkOutTime: '', extensionReason: '', extendedCount: 0, cleaningStaff: '' } : {})
        }),
      });

      if (res.ok) {
        onRefresh();
        if (selectedRoomForOps?.id === room.id) {
          setSelectedRoomForOps(null);
        }
        // Log action
        let logMsg = '';
        if (newCleaningStatus === 'cleaning') {
          logMsg = `Kebersihan Kamar: Tim Kebersihan mulai membersihkan Kamar ${room.roomNumber}.`;
        } else if (newCleaningStatus === 'clean') {
          logMsg = `Kebersihan Selesai: Kamar ${room.roomNumber} bersih, wangi, dan siap ditempati tamu baru.`;
        }
        await fetch('/api/logs', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            type: 'user',
            message: logMsg,
            user: currentUser.fullName
          })
        });
      } else {
        alert('Gagal memperbarui status kebersihan');
      }
    } catch (err) {
      alert('Koneksi ke server gagal');
    } finally {
      setLoadingId(null);
    }
  };

  const submitCleaningAssignment = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!roomForCleaning) return;
    setLoadingId(roomForCleaning.id);
    try {
      const res = await fetch(`/api/rooms/${roomForCleaning.id}/status`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          cleaningStatus: 'cleaning',
          cleaningStaff: cleaningStaffInput || 'Tim Kebersihan Standar'
        }),
      });

      if (res.ok) {
        onRefresh();
        // Log action
        await fetch('/api/logs', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            type: 'user',
            message: `Kebersihan Kamar: ${cleaningStaffInput || 'Tim Kebersihan Standar'} mulai membersihkan Kamar ${roomForCleaning.roomNumber}.`,
            user: currentUser.fullName
          })
        });
        setRoomForCleaning(null);
      }
    } catch (err) {
      alert('Koneksi ke server gagal');
    } finally {
      setLoadingId(null);
    }
  };

  const submitStartMaintenance = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!roomForMaintenance) return;
    setLoadingId(roomForMaintenance.id);
    try {
      const res = await fetch(`/api/rooms/${roomForMaintenance.id}/status`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          status: 'maintenance',
          maintenanceReason: maintenanceReasonInput || 'Perbaikan Rutin',
          maintenanceStaff: maintenanceStaffInput || 'Tim Teknisi Lapangan'
        }),
      });

      if (res.ok) {
        onRefresh();
        // Log action
        await fetch('/api/logs', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            type: 'user',
            message: `Maintenance Mulai: Kamar ${roomForMaintenance.roomNumber} masuk status perbaikan oleh ${maintenanceStaffInput || 'Tim Teknisi Lapangan'}. Masalah: ${maintenanceReasonInput || 'Perbaikan Rutin'}`,
            user: currentUser.fullName
          })
        });
        setRoomForMaintenance(null);
      }
    } catch (err) {
      alert('Koneksi ke server gagal');
    } finally {
      setLoadingId(null);
    }
  };

  const handleFinishMaintenance = async (room: Room) => {
    if (!confirm(`Apakah Anda yakin perbaikan untuk Kamar ${room.roomNumber} telah selesai? Kamar akan dialihkan ke status butuh pembersihan.`)) return;
    setLoadingId(room.id);
    try {
      const res = await fetch(`/api/rooms/${room.id}/status`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          status: 'available',
          cleaningStatus: 'dirty',
          maintenanceReason: '',
          maintenanceStaff: '',
          cleaningStaff: ''
        }),
      });

      if (res.ok) {
        onRefresh();
        // Log action
        await fetch('/api/logs', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            type: 'user',
            message: `Maintenance Selesai: Perbaikan Kamar ${room.roomNumber} telah rampung. Kamar dialihkan ke tim kebersihan (Kamar KOTOR).`,
            user: currentUser.fullName
          })
        });
      }
    } catch (err) {
      alert('Koneksi ke server gagal');
    } finally {
      setLoadingId(null);
    }
  };

  // Action: Extend Stay (Standard or Quick 1 Hour Pick-up Delay)
  const handleExtendStay = async (room: Room, type: '1hour' | '1day') => {
    let currentCheckoutStr = room.checkOutTime;
    let baseTime = new Date();
    
    if (currentCheckoutStr) {
      baseTime = new Date(currentCheckoutStr.replace(' ', 'T'));
    }
    
    let newCheckout: Date;
    let reason = '';
    
    if (type === '1hour') {
      newCheckout = new Date(baseTime.getTime() + (60 * 60 * 1000));
      reason = 'Menunggu Jemputan';
    } else {
      newCheckout = new Date(baseTime.getTime() + (24 * 60 * 60 * 1000));
      reason = 'Perpanjangan Sewa Tambahan';
    }

    const year = newCheckout.getFullYear();
    const month = String(newCheckout.getMonth() + 1).padStart(2, '0');
    const date = String(newCheckout.getDate()).padStart(2, '0');
    const hours = String(newCheckout.getHours()).padStart(2, '0');
    const minutes = String(newCheckout.getMinutes()).padStart(2, '0');
    const newCheckoutStr = `${year}-${month}-${date} ${hours}:${minutes}`;

    setLoadingId(room.id);
    try {
      const res = await fetch(`/api/rooms/${room.id}/status`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          checkOutTime: newCheckoutStr,
          extensionReason: reason,
          extendedCount: (room.extendedCount || 0) + 1
        }),
      });

      if (res.ok) {
        onRefresh();
        if (selectedRoomForOps?.id === room.id) {
          // Update local modal view
          setSelectedRoomForOps({
            ...selectedRoomForOps,
            checkOutTime: newCheckoutStr,
            extensionReason: reason,
            extendedCount: (room.extendedCount || 0) + 1
          });
        }
        // Log action
        await fetch('/api/logs', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            type: 'user',
            message: `Perpanjangan Sewa: Kamar ${room.roomNumber} diperpanjang s/d ${newCheckoutStr} (${reason}).`,
            user: currentUser.fullName
          })
        });
        
        alert(`Berhasil memperpanjang sewa Kamar ${room.roomNumber} sampai ${newCheckoutStr} (${reason})!`);
      } else {
        alert('Gagal memperpanjang sewa');
      }
    } catch (err) {
      alert('Koneksi ke server gagal');
    } finally {
      setLoadingId(null);
    }
  };

  // Trigger simulated notification overlay
  const triggerSimulation = (type: 'phone' | 'whatsapp' | 'email', room: Room) => {
    const hours = getHoursRemaining(room.checkOutTime);
    const remText = getRemainingTimeText(hours);
    
    setActiveSimulator({
      type,
      guestName: room.guestName || 'Tamu',
      roomNumber: room.roomNumber,
      checkOutTime: room.checkOutTime || '-',
      remainingText: remText
    });
  };

  const getPropertyName = (id: string) => {
    return properties.find(p => p.id === id)?.name || 'Properti';
  };

  // Calculations for total status banners
  const totalAvailable = rooms.filter(r => myPropertyIds.includes(r.propertyId) && r.status === 'available' && (!r.cleaningStatus || r.cleaningStatus === 'clean')).length;
  const totalOccupied = rooms.filter(r => myPropertyIds.includes(r.propertyId) && r.status === 'occupied').length;
  const totalDirtyOrCleaning = rooms.filter(r => myPropertyIds.includes(r.propertyId) && r.status === 'available' && (r.cleaningStatus === 'dirty' || r.cleaningStatus === 'cleaning')).length;

  return (
    <div className="space-y-6">
      {/* Header Stat Overview */}
      <div className="bg-white p-5 rounded-2xl border border-slate-100 shadow-xs space-y-4">
        <div className="flex flex-col lg:flex-row justify-between lg:items-center gap-4">
          <div>
            <h3 className="font-sans font-bold text-lg text-gray-900 flex items-center gap-2">
              <Clock className="h-5 w-5 text-blue-600 animate-pulse" />
              <span>Papan Operasional Kamar & Unit</span>
            </h3>
            <p className="text-xs text-gray-400">
              Pantau hunian real-time, sisa waktu sewa, pengingat otomatis check-out (<span className="text-amber-600 font-semibold">{alertThreshold} jam</span>), dan penugasan kebersihan.
            </p>
          </div>
          
          <div className="flex flex-wrap items-center gap-2 text-xs">
            {/* Setting Alarm Check-Out */}
            <div className="bg-slate-50 border border-slate-100 px-3 py-1.5 rounded-xl flex items-center space-x-2">
              <span className="font-bold text-gray-500">Alert Admin:</span>
              <select
                value={alertThreshold}
                onChange={(e) => setAlertThreshold(Number(e.target.value))}
                className="bg-transparent border-0 font-bold text-blue-600 focus:ring-0 py-0 cursor-pointer text-xs"
              >
                <option value={0.5}>30 Menit</option>
                <option value={1}>1 Jam</option>
                <option value={2}>2 Jam</option>
                <option value={3}>3 Jam</option>
              </select>
            </div>

            <div className="bg-emerald-50 text-emerald-800 px-3 py-1.5 rounded-xl border border-emerald-100 flex items-center space-x-1.5 font-bold">
              <span className="h-2 w-2 rounded-full bg-emerald-500"></span>
              <span>Tersedia: {totalAvailable}</span>
            </div>
            
            <div className="bg-rose-50 text-rose-800 px-3 py-1.5 rounded-xl border border-rose-100 flex items-center space-x-1.5 font-bold">
              <span className="h-2 w-2 rounded-full bg-rose-500"></span>
              <span>Terisi: {totalOccupied}</span>
            </div>

            <div className="bg-amber-50 text-amber-800 px-3 py-1.5 rounded-xl border border-amber-100 flex items-center space-x-1.5 font-bold">
              <span className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></span>
              <span>Pembersihan: {totalDirtyOrCleaning}</span>
            </div>
          </div>
        </div>

        {/* Filters bar */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-3 pt-2 border-t border-gray-50">
          <div>
            <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Pilih Gedung / Properti</label>
            <select
              value={selectedPropertyId}
              onChange={(e) => setSelectedPropertyId(e.target.value)}
              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-xs bg-white focus:outline-hidden focus:border-blue-500"
            >
              <option value="all">Semua Properti ({myProperties.length})</option>
              {myProperties.map(p => (
                <option key={p.id} value={p.id}>{p.name}</option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Filter Kamar</label>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value as any)}
              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-xs bg-white focus:outline-hidden focus:border-blue-500"
            >
              <option value="all">Semua Status Kamar</option>
              <option value="available">Kamar Bersih & Kosong (Hijau)</option>
              <option value="occupied">Kamar Tersewa / Terisi (Merah)</option>
              <option value="dirty_cleaning">Kotor / Proses Bersih-bersih (Kuning)</option>
            </select>
          </div>

          <div>
            <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Cari No Kamar / Kelas</label>
            <div className="relative">
              <input
                type="text"
                placeholder="Cari nomor kamar..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full px-3 py-2 pl-8 border border-gray-200 rounded-lg text-xs focus:outline-hidden focus:border-blue-500"
              />
              <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-gray-400" />
            </div>
          </div>

          <div className="flex items-end">
            <button 
              onClick={onRefresh}
              className="w-full py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xs rounded-lg flex items-center justify-center space-x-1.5 transition-colors"
            >
              <RefreshCw className="h-3.5 w-3.5 text-slate-500" />
              <span>Refresh Status Real-Time</span>
            </button>
          </div>
        </div>
      </div>

      {/* Pictorial Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {filteredRooms.map((room) => {
          const isOccupied = room.status === 'occupied';
          const isMaintenance = room.status === 'maintenance';
          const isDirty = room.status === 'available' && room.cleaningStatus === 'dirty';
          const isCleaning = room.status === 'available' && room.cleaningStatus === 'cleaning';
          const isCleanAvailable = room.status === 'available' && (!room.cleaningStatus || room.cleaningStatus === 'clean');
          
          const hoursLeft = getHoursRemaining(room.checkOutTime);
          const isApproachingCheckout = isOccupied && hoursLeft <= alertThreshold;
          const isOverdue = isOccupied && hoursLeft < 0;

          const defaultPic = 'https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=600&q=80';
          
          // Outer Border Theme mapping based on accurate current state
          let themeBorderColor = 'border-emerald-500 ring-2 ring-emerald-500/5 hover:shadow-emerald-100';
          if (isMaintenance) {
            themeBorderColor = 'border-orange-500 ring-2 ring-orange-500/10 hover:shadow-orange-100 bg-orange-50/5';
          } else if (isOccupied) {
            themeBorderColor = isOverdue 
              ? 'border-red-600 ring-4 ring-red-500/10 animate-pulse hover:shadow-red-200 bg-red-50/5' 
              : isApproachingCheckout 
                ? 'border-amber-500 ring-2 ring-amber-500/10 hover:shadow-amber-100 bg-amber-50/5' 
                : 'border-rose-500 ring-2 ring-rose-500/5 hover:shadow-rose-100 bg-rose-50/5';
          } else if (isDirty || isCleaning) {
            themeBorderColor = isCleaning 
              ? 'border-blue-400 ring-2 ring-blue-500/5 hover:shadow-blue-100 bg-blue-50/5'
              : 'border-amber-400 ring-2 ring-amber-400/5 hover:shadow-amber-100 bg-amber-50/5';
          }

          return (
            <div
              key={room.id}
              className={`bg-white rounded-2xl border-2 overflow-hidden shadow-xs transition-all duration-300 relative group flex flex-col justify-between ${themeBorderColor}`}
            >
              {/* Image & Top Banner */}
              <div className="relative h-32 w-full bg-slate-100 overflow-hidden shrink-0">
                <img
                  src={room.imageUrl || defaultPic}
                  alt={`Unit ${room.roomNumber}`}
                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                  referrerPolicy="no-referrer"
                />
                {/* Dark Overlay gradient */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-black/5" />
                
                {/* Top badges */}
                <div className="absolute top-2.5 left-2.5 right-2.5 flex justify-between items-center">
                  {isOccupied && (
                    <span className={`text-[9px] font-extrabold uppercase px-2 py-0.5 rounded-full text-white tracking-wider shadow-sm ${
                      isOverdue ? 'bg-red-600 animate-pulse' : isApproachingCheckout ? 'bg-amber-500' : 'bg-rose-600'
                    }`}>
                      {isOverdue ? '⚠️ OVERDUE CHECKOUT' : isApproachingCheckout ? '⏳ MENDEKATI CHECKOUT' : '🔴 TERISI / OCCUPIED'}
                    </span>
                  )}
                  
                  {isCleanAvailable && (
                    <span className="text-[9px] font-extrabold uppercase px-2 py-0.5 rounded-full text-white bg-emerald-600 tracking-wider shadow-sm">
                      🟢 KOSONG & BERSIH
                    </span>
                  )}

                  {isMaintenance && (
                    <span className="text-[9px] font-extrabold uppercase px-2 py-0.5 rounded-full text-white bg-orange-600 tracking-wider shadow-sm">
                      🛠️ MAINTENANCE
                    </span>
                  )}

                  {(isDirty || isCleaning) && (
                    <span className={`text-[9px] font-extrabold uppercase px-2 py-0.5 rounded-full text-white tracking-wider shadow-sm ${
                      isCleaning ? 'bg-blue-500' : 'bg-amber-600'
                    }`}>
                      {isCleaning ? '🧹 SEDANG DIBERSIHKAN' : '⚠️ BUTUH TIM KEBERSIHAN'}
                    </span>
                  )}
                  
                  <span className="text-[10px] font-extrabold text-white bg-black/40 px-2 py-0.5 rounded-md backdrop-blur-xs">
                    {room.type}
                  </span>
                </div>

                {/* Bottom title inside Image */}
                <div className="absolute bottom-2 left-2.5 text-white">
                  <span className="text-2xl font-black block tracking-tight">
                    Unit {room.roomNumber}
                  </span>
                  <span className="text-[10px] text-white/80 block font-medium truncate max-w-[180px]">
                    {getPropertyName(room.propertyId)}
                  </span>
                </div>
              </div>

              {/* Body stats */}
              <div className="p-3.5 space-y-3 flex-grow flex flex-col justify-between">
                <div className="space-y-1.5 text-xs text-gray-500">
                  <div className="flex justify-between items-center">
                    <span className="font-semibold">Lokasi:</span>
                    <span className="text-gray-900 font-bold truncate max-w-[120px]">{room.position || "Lantai Utama"}</span>
                  </div>
                  
                  {/* If in maintenance */}
                  {isMaintenance && (
                    <div className="bg-orange-50 p-2 rounded-xl space-y-1 text-[11px] border border-orange-100">
                      <div className="flex justify-between">
                        <span className="text-orange-600 font-bold">Masalah:</span>
                        <span className="text-gray-800 font-extrabold truncate max-w-[120px]">{room.maintenanceReason || 'Perbaikan Rutin'}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-orange-600 font-bold">Teknisi:</span>
                        <span className="text-gray-800 font-semibold">{room.maintenanceStaff || 'Tim Teknisi'}</span>
                      </div>
                    </div>
                  )}

                  {/* If being cleaned, show cleaning staff */}
                  {isCleaning && room.cleaningStaff && (
                    <div className="bg-blue-50 p-2 rounded-xl space-y-1 text-[11px] border border-blue-100">
                      <div className="flex justify-between items-center">
                        <span className="text-blue-600 font-bold">🧹 Petugas:</span>
                        <span className="text-gray-800 font-extrabold">{room.cleaningStaff}</span>
                      </div>
                    </div>
                  )}
                  
                  {/* If occupied, show guest name and countdown info */}
                  {isOccupied ? (
                    <div className="bg-slate-50 p-2 rounded-xl space-y-1 text-[11px] border border-slate-100">
                      <div className="flex justify-between">
                        <span className="text-gray-400 font-medium">Tamu:</span>
                        <span className="text-gray-800 font-bold truncate max-w-[100px]">{room.guestName || '-'}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400 font-medium">Check-out:</span>
                        <span className="text-gray-800 font-semibold">{room.checkOutTime?.substring(11) || '-'}</span>
                      </div>
                      <div className="flex justify-between items-center font-semibold text-[10.5px]">
                        <span className="text-gray-400 font-medium">Sisa Waktu:</span>
                        <span className={`px-1.5 py-0.5 rounded-sm ${
                          isOverdue ? 'bg-red-100 text-red-700' : isApproachingCheckout ? 'bg-amber-100 text-amber-700 font-extrabold animate-pulse' : 'bg-slate-100 text-gray-700'
                        }`}>
                          {getRemainingTimeText(hoursLeft)}
                        </span>
                      </div>
                    </div>
                  ) : !isMaintenance ? (
                    <div className="flex justify-between items-center">
                      <span className="font-semibold">Tarif Sewa:</span>
                      <span className="text-blue-600 font-extrabold">{new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(room.priceDay)}/hari</span>
                    </div>
                  ) : null}

                  {/* Facilities list */}
                  {!isOccupied && room.facilities && room.facilities.length > 0 && (
                    <div className="pt-1.5 flex flex-wrap gap-1">
                      {room.facilities.slice(0, 3).map((f, i) => (
                        <span key={i} className="bg-slate-100 text-[9px] text-gray-500 font-bold px-1.5 py-0.5 rounded-sm">
                          {f}
                        </span>
                      ))}
                    </div>
                  )}
                </div>

                {/* Interactive Status Switcer & Operational buttons */}
                <div className="pt-2 border-t border-gray-100 flex flex-col space-y-2">
                  
                  {/* Clean and Available: can be check-in or put to maintenance */}
                  {isCleanAvailable && (
                    <div className="flex gap-1.5">
                      <button
                        onClick={() => handleToggleStatus(room)}
                        className="flex-grow py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl flex items-center justify-center space-x-1 cursor-pointer shadow-xs"
                      >
                        <Plus className="h-3.5 w-3.5" />
                        <span>🔑 Check-In Tamu</span>
                      </button>
                      <button
                        onClick={() => {
                          setRoomForMaintenance(room);
                          setMaintenanceReasonInput('');
                          setMaintenanceStaffInput('');
                        }}
                        className="p-1.5 bg-gray-50 hover:bg-orange-50 hover:text-orange-600 hover:border-orange-200 text-gray-500 rounded-xl border border-gray-200 transition cursor-pointer"
                        title="Mulai Maintenance"
                      >
                        <Wrench className="h-4 w-4" />
                      </button>
                    </div>
                  )}

                  {/* Occupied: detailed operational buttons */}
                  {isOccupied && (
                    <div className="grid grid-cols-2 gap-1.5">
                      <button
                        onClick={() => setSelectedRoomForOps(room)}
                        className="py-1.5 bg-blue-50 hover:bg-blue-100 text-blue-700 font-bold text-[11px] rounded-xl flex items-center justify-center space-x-1 cursor-pointer border border-blue-100"
                      >
                        <Sliders className="h-3 w-3" />
                        <span>Kelola</span>
                      </button>
                      <button
                        onClick={() => handleCheckOutDirect(room)}
                        className="py-1.5 bg-rose-600 hover:bg-rose-700 text-white font-bold text-[11px] rounded-xl flex items-center justify-center space-x-1 cursor-pointer shadow-xs"
                      >
                        <X className="h-3 w-3" />
                        <span>Checkout</span>
                      </button>
                    </div>
                  )}

                  {/* Dirty Room: cleaning assignment */}
                  {isDirty && (
                    <div className="flex gap-1.5">
                      <button
                        onClick={() => {
                          setRoomForCleaning(room);
                          setCleaningStaffInput('Tim Kebersihan Utama');
                        }}
                        className="flex-grow py-1.5 bg-amber-500 hover:bg-amber-600 text-white font-bold text-xs rounded-xl flex items-center justify-center space-x-1 cursor-pointer shadow-xs"
                      >
                        <RefreshCw className="h-3.5 w-3.5 animate-spin-slow" />
                        <span>🧹 Kirim Tim</span>
                      </button>
                      <button
                        onClick={() => {
                          setRoomForMaintenance(room);
                          setMaintenanceReasonInput('');
                          setMaintenanceStaffInput('');
                        }}
                        className="p-1.5 bg-gray-50 hover:bg-orange-50 hover:text-orange-600 hover:border-orange-200 text-gray-500 rounded-xl border border-gray-200 transition cursor-pointer"
                        title="Mulai Maintenance"
                      >
                        <Wrench className="h-4 w-4" />
                      </button>
                    </div>
                  )}

                  {/* Cleaning Room: finishing assignment */}
                  {isCleaning && (
                    <button
                      onClick={() => handleUpdateCleaningStatus(room, 'clean')}
                      className="w-full py-1.5 bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs rounded-xl flex items-center justify-center space-x-1 cursor-pointer shadow-xs animate-pulse"
                    >
                      <CheckCircle className="h-3.5 w-3.5" />
                      <span>✨ Selesai Dibersihkan</span>
                    </button>
                  )}

                  {/* Maintenance Room: finishing assignment */}
                  {isMaintenance && (
                    <button
                      onClick={() => handleFinishMaintenance(room)}
                      className="w-full py-1.5 bg-orange-600 hover:bg-orange-700 text-white font-bold text-xs rounded-xl flex items-center justify-center space-x-1 cursor-pointer shadow-xs"
                    >
                      <CheckCircle className="h-3.5 w-3.5" />
                      <span>✨ Selesai Perbaikan</span>
                    </button>
                  )}
                  
                  {isOccupied && isApproachingCheckout && (
                    <div className="text-[10px] text-amber-600 font-extrabold flex items-center justify-center space-x-1 py-0.5 bg-amber-50 rounded-lg animate-pulse border border-amber-100">
                      <Bell className="h-3 w-3 text-amber-500" />
                      <span>Waktunya checkout mendekati!</span>
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}

        {filteredRooms.length === 0 && (
          <div className="col-span-full bg-white p-16 text-center rounded-2xl border border-dashed border-gray-200">
            <LayoutGrid className="h-12 w-12 text-gray-300 mx-auto" />
            <h4 className="font-bold text-gray-800 mt-3 text-sm">Tidak Ada Kamar Sesuai Kriteria</h4>
            <p className="text-xs text-gray-400 mt-1">Coba sesuaikan pilihan properti, status, atau filter kamar Anda.</p>
          </div>
        )}
      </div>

      {/* MODAL 1: CHECK-IN SETUP */}
      {showCheckInModal && checkInRoom && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-black/60 flex items-center justify-center p-4 backdrop-blur-xs">
          <div className="bg-white rounded-2xl border border-slate-100 shadow-xl max-w-md w-full p-6 space-y-4">
            <div className="flex justify-between items-center border-b border-slate-100 pb-3">
              <h3 className="font-sans font-extrabold text-base text-slate-800 flex items-center space-x-2">
                <Plus className="h-5 w-5 text-emerald-600" />
                <span>Form Check-In Tamu: Unit {checkInRoom.roomNumber}</span>
              </h3>
              <button 
                onClick={() => setShowCheckInModal(false)}
                className="text-slate-400 hover:text-slate-600 p-1"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            <div className="space-y-3.5 text-xs">
              <div>
                <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Nama Tamu / Pelanggan</label>
                <input 
                  type="text" 
                  value={guestNameInput}
                  onChange={(e) => setGuestNameInput(e.target.value)}
                  placeholder="Masukkan nama lengkap tamu..."
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-blue-500"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Tanggal Check-out</label>
                  <input 
                    type="date" 
                    value={checkOutDateInput}
                    onChange={(e) => setCheckOutDateInput(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Waktu Check-out</label>
                  <input 
                    type="time" 
                    value={checkOutTimeInput}
                    onChange={(e) => setCheckOutTimeInput(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-blue-500"
                  />
                </div>
              </div>

              <div className="bg-blue-50/50 p-3 rounded-xl border border-blue-100 space-y-1.5 text-slate-700">
                <span className="font-bold block text-[10.5px] uppercase tracking-wider text-blue-800">Detail Tarif Unit</span>
                <div className="flex justify-between">
                  <span>Tipe Kamar:</span>
                  <span className="font-bold text-slate-800">{checkInRoom.type}</span>
                </div>
                <div className="flex justify-between">
                  <span>Biaya / Hari:</span>
                  <span className="font-bold text-blue-600">
                    {new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(checkInRoom.priceDay)}
                  </span>
                </div>
              </div>
            </div>

            <div className="pt-3 border-t border-slate-100 flex justify-end space-x-2">
              <button 
                onClick={() => setShowCheckInModal(false)}
                className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xs rounded-xl"
              >
                Batal
              </button>
              <button 
                onClick={handleCheckInSubmit}
                className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl shadow-xs"
              >
                Konfirmasi Check-In
              </button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL 2: OPERATIONS & LIFE CYCLE MANAGEMENT MODAL (Checkouts, Alerts, Extensions) */}
      {selectedRoomForOps && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-black/60 flex items-center justify-center p-4 backdrop-blur-xs">
          <div className="bg-white rounded-2xl border border-slate-100 shadow-xl max-w-lg w-full p-6 space-y-5">
            <div className="flex justify-between items-center border-b border-slate-100 pb-3">
              <div className="space-y-0.5">
                <h3 className="font-sans font-extrabold text-base text-slate-800">
                  Operasional Unit {selectedRoomForOps.roomNumber}
                </h3>
                <p className="text-[10px] text-gray-400">
                  {getPropertyName(selectedRoomForOps.propertyId)} • {selectedRoomForOps.type}
                </p>
              </div>
              <button 
                onClick={() => setSelectedRoomForOps(null)}
                className="text-slate-400 hover:text-slate-600 p-1"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            {/* Main Info Blocks */}
            <div className="grid grid-cols-2 gap-3 text-xs">
              <div className="bg-rose-50/50 border border-rose-100 p-3 rounded-xl space-y-1">
                <span className="text-[10px] font-bold text-rose-800 uppercase block tracking-wider">Penyewa Aktif</span>
                <span className="text-sm font-black text-slate-800 block">{selectedRoomForOps.guestName || 'Tamu'}</span>
                <span className="text-gray-500 text-[10.5px] block">Check-out: {selectedRoomForOps.checkOutTime || '-'}</span>
              </div>

              <div className="bg-slate-50 border border-slate-100 p-3 rounded-xl space-y-1">
                <span className="text-[10px] font-bold text-slate-500 uppercase block tracking-wider">Status Waktu Sewa</span>
                <span className={`text-sm font-black block ${
                  getHoursRemaining(selectedRoomForOps.checkOutTime) < 0 ? 'text-red-600 animate-pulse' : 'text-gray-800'
                }`}>
                  {getRemainingTimeText(getHoursRemaining(selectedRoomForOps.checkOutTime))}
                </span>
                <span className="text-gray-500 text-[10.5px] block">
                  {getHoursRemaining(selectedRoomForOps.checkOutTime) < 0 ? 'Keterlambatan Checkout' : 'Sebelum Checkout'}
                </span>
              </div>
            </div>

            {/* section 1: triggers / alarms simulation */}
            <div className="space-y-2 text-xs">
              <span className="font-bold text-gray-800 uppercase text-[10px] tracking-wider block">1. Simulasikan & Kirim Alarm Pengingat</span>
              <div className="grid grid-cols-3 gap-2">
                <button
                  onClick={() => triggerSimulation('phone', selectedRoomForOps)}
                  className="py-2.5 bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-xl font-bold flex flex-col items-center justify-center space-y-1 border border-blue-100 transition-colors"
                >
                  <Phone className="h-4.5 w-4.5" />
                  <span>Telepon Suara</span>
                </button>

                <button
                  onClick={() => triggerSimulation('whatsapp', selectedRoomForOps)}
                  className="py-2.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 rounded-xl font-bold flex flex-col items-center justify-center space-y-1 border border-emerald-100 transition-colors"
                >
                  <MessageSquare className="h-4.5 w-4.5" />
                  <span>WhatsApp</span>
                </button>

                <button
                  onClick={() => triggerSimulation('email', selectedRoomForOps)}
                  className="py-2.5 bg-purple-50 hover:bg-purple-100 text-purple-700 rounded-xl font-bold flex flex-col items-center justify-center space-y-1 border border-purple-100 transition-colors"
                >
                  <Mail className="h-4.5 w-4.5" />
                  <span>Email Resmi</span>
                </button>
              </div>
            </div>

            {/* section 2: extensions */}
            <div className="space-y-2 text-xs">
              <span className="font-bold text-gray-800 uppercase text-[10px] tracking-wider block">2. Alur Perpanjangan Tinggal (Guest Extension)</span>
              
              {selectedRoomForOps.extendedCount && selectedRoomForOps.extendedCount > 0 ? (
                <div className="bg-amber-50 border border-amber-100 p-2 rounded-xl text-[10.5px] text-amber-800 font-medium">
                  ⚠️ Kamar ini telah diperpanjang sebanyak <b>{selectedRoomForOps.extendedCount} kali</b>. Alasan terakhir: "{selectedRoomForOps.extensionReason || '-'}"
                </div>
              ) : null}

              <div className="grid grid-cols-2 gap-2">
                {/* 1 hour request wait for pickup */}
                <button
                  onClick={() => handleExtendStay(selectedRoomForOps, '1hour')}
                  disabled={loadingId !== null}
                  className="py-2.5 bg-amber-500 hover:bg-amber-600 text-white font-extrabold rounded-xl flex flex-col items-center justify-center text-center leading-tight transition-colors"
                >
                  <Clock className="h-4 w-4 mb-0.5" />
                  <span>Minta Waktu 1 Jam</span>
                  <span className="text-[8.5px] font-bold opacity-90">(Menunggu Jemputan)</span>
                </button>

                {/* 24 hours standard extension */}
                <button
                  onClick={() => handleExtendStay(selectedRoomForOps, '1day')}
                  disabled={loadingId !== null}
                  className="py-2.5 bg-slate-900 hover:bg-slate-800 text-white font-extrabold rounded-xl flex flex-col items-center justify-center text-center leading-tight transition-colors"
                >
                  <Calendar className="h-4 w-4 mb-0.5" />
                  <span>Perpanjang 24 Jam</span>
                  <span className="text-[8.5px] font-bold opacity-90">(Standard 1 Hari)</span>
                </button>
              </div>
            </div>

            {/* section 3: manual check-out */}
            <div className="space-y-2 text-xs pt-2 border-t border-slate-100">
              <div className="flex justify-between items-center">
                <span className="font-bold text-gray-800 uppercase text-[10px] tracking-wider">3. Check-Out & Pembersihan</span>
                <span className="text-[10px] text-gray-400">Tim kebersihan akan otomatis dipanggil</span>
              </div>
              <button
                onClick={() => handleCheckOutDirect(selectedRoomForOps)}
                disabled={loadingId !== null}
                className="w-full py-2.5 bg-rose-600 hover:bg-rose-700 text-white font-black rounded-xl text-center flex items-center justify-center space-x-1 shadow-md cursor-pointer"
              >
                <X className="h-4 w-4" />
                <span>Proses Check-Out Sekarang & Set Kotor</span>
              </button>
            </div>
          </div>
        </div>
      )}

      {/* OVERLAY SIMULATOR MODALS FOR FULL DEMO EXPERIENCE */}
      {activeSimulator && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-black/75 flex items-center justify-center p-4 backdrop-blur-md">
          <div className="bg-slate-900 text-white rounded-3xl border border-slate-800 max-w-sm w-full overflow-hidden shadow-2xl relative">
            
            {/* Simulator Header Branding */}
            <div className="bg-slate-800 px-4 py-3 border-b border-slate-700 flex justify-between items-center text-xs">
              <div className="flex items-center space-x-2">
                <Sparkles className="h-4 w-4 text-amber-500 animate-pulse" />
                <span className="font-extrabold tracking-widest text-[10px] text-amber-400 uppercase">Simulator Alarm Hub</span>
              </div>
              <button 
                onClick={() => setActiveSimulator(null)}
                className="text-slate-400 hover:text-white bg-slate-700/50 p-1 rounded-full"
              >
                <X className="h-4 w-4" />
              </button>
            </div>

            {/* PHONE CALL SIMULATOR */}
            {activeSimulator.type === 'phone' && (
              <div className="p-8 flex flex-col items-center text-center space-y-6">
                {simulationStatus === 'ringing' ? (
                  <>
                    <div className="relative">
                      <div className="h-20 w-20 rounded-full bg-blue-600/20 absolute -inset-4 animate-ping"></div>
                      <div className="h-20 w-20 rounded-full bg-blue-600 flex items-center justify-center shadow-xl">
                        <Phone className="h-10 w-10 text-white animate-bounce" />
                      </div>
                    </div>
                    <div className="space-y-1">
                      <h4 className="font-extrabold text-base">Panggilan Keluar Otomatis...</h4>
                      <p className="text-xs text-blue-400 font-bold animate-pulse">Menghubungi {activeSimulator.guestName} ({activeSimulator.roomNumber})</p>
                    </div>
                    <p className="text-[11px] text-slate-400 italic">Sistem IVR pintar sedang menginisiasi panggilan telepon pengingat...</p>
                  </>
                ) : (
                  <>
                    <div className="h-20 w-20 rounded-full bg-green-600 flex items-center justify-center shadow-xl">
                      <Phone className="h-10 w-10 text-white" />
                    </div>
                    <div className="space-y-1">
                      <h4 className="font-extrabold text-base text-green-400">Panggilan Terhubung! 📞</h4>
                      <p className="text-xs text-slate-400">Durasi: 00:08</p>
                    </div>
                    <div className="bg-slate-800 p-4 rounded-2xl text-[11px] text-left border border-slate-700 font-mono text-slate-300 leading-relaxed w-full">
                      <span className="text-blue-400 font-extrabold block mb-1">🤖 [SUARA ROBOT PINTAR]:</span>
                      "Halo, selamat siang Kak <b>{activeSimulator.guestName}</b>. Kami dari Manajemen Properti mengingatkan bahwa sewa Anda untuk <b>Unit {activeSimulator.roomNumber}</b> akan berakhir dalam waktu <b>{activeSimulator.remainingText}</b> lagi. Jika membutuhkan perpanjangan, Anda bisa mengajukannya langsung. Terima kasih!"
                    </div>
                    <div className="flex justify-center w-full">
                      <button 
                        onClick={() => setActiveSimulator(null)}
                        className="px-6 py-2 bg-red-600 hover:bg-red-700 text-white font-bold text-xs rounded-full cursor-pointer transition-colors flex items-center space-x-1.5"
                      >
                        <X className="h-4 w-4" />
                        <span>Akhiri Panggilan</span>
                      </button>
                    </div>
                  </>
                )}
              </div>
            )}

            {/* WHATSAPP MESSAGE SIMULATOR */}
            {activeSimulator.type === 'whatsapp' && (
              <div className="bg-slate-950 p-4 space-y-4">
                <div className="flex items-center space-x-3 bg-slate-900 p-3 rounded-2xl border border-slate-800">
                  <div className="h-10 w-10 rounded-full bg-green-600 flex items-center justify-center font-bold text-sm text-white">
                    PM
                  </div>
                  <div>
                    <h5 className="font-black text-xs">Sistem Notifikasi Properti</h5>
                    <span className="text-[10px] text-green-400">Online</span>
                  </div>
                </div>

                <div className="space-y-2">
                  <span className="text-[10px] font-bold text-slate-500 block text-center uppercase">Hari Ini</span>
                  
                  {/* Whatsapp Bubble */}
                  <div className="bg-[#0b141a] border border-slate-800 p-4 rounded-2xl rounded-tl-xs max-w-[90%] text-xs text-slate-200 space-y-2 shadow-lg">
                    <p className="leading-relaxed">
                      Halo Kak <b>{activeSimulator.guestName}</b>, kami dari Manajemen Layanan Properti. 🙏😊
                    </p>
                    <p className="leading-relaxed">
                      Mengingatkan bahwa masa tinggal Kakak di <b>Unit {activeSimulator.roomNumber}</b> akan berakhir dalam <b>{activeSimulator.remainingText}</b> lagi (pada jam <b>{activeSimulator.checkOutTime?.substring(11) || '12:00'}</b>).
                    </p>
                    <p className="leading-relaxed">
                      Jika Kakak ingin mengajukan <b>perpanjangan</b> (misalnya 1 jam karena menunggu jemputan, atau perpanjangan hari), mohon segera informasikan melalui aplikasi atau balas pesan ini. Terima kasih!
                    </p>
                    <span className="text-[9px] text-slate-500 block text-right font-mono">11:15 ✓✓</span>
                  </div>
                </div>

                <div className="pt-2 border-t border-slate-800 flex justify-end">
                  <button
                    onClick={() => setActiveSimulator(null)}
                    className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white font-bold text-xs rounded-xl cursor-pointer"
                  >
                    Tutup Simulasi WA
                  </button>
                </div>
              </div>
            )}

            {/* EMAIL SIMULATOR */}
            {activeSimulator.type === 'email' && (
              <div className="p-5 space-y-4 bg-slate-950 text-slate-200">
                <div className="space-y-1 pb-3 border-b border-slate-800 text-xs">
                  <div><span className="text-slate-500 font-bold">Dari:</span> notifications@propertymanager.com</div>
                  <div><span className="text-slate-500 font-bold">Untuk:</span> {activeSimulator.guestName.toLowerCase().replace(' ', '')}@email.com</div>
                  <div><span className="text-slate-500 font-bold">Subjek:</span> ⏳ [PENTING] Pengingat Batas Waktu Check-Out Unit {activeSimulator.roomNumber}</div>
                </div>

                <div className="bg-slate-900 p-4 rounded-2xl border border-slate-800 text-xs text-slate-300 space-y-3 leading-relaxed">
                  <p>Yth. Bapak/Ibu <b>{activeSimulator.guestName}</b>,</p>
                  <p>
                    Terima kasih telah mempercayakan akomodasi Anda di properti kami. Melalui email otomatis ini, kami ingin menginformasikan bahwa waktu check-out terjadwal Anda untuk <b>Unit {activeSimulator.roomNumber}</b> adalah dalam <b>{activeSimulator.remainingText}</b> lagi (jam <b>{activeSimulator.checkOutTime}</b>).
                  </p>
                  <p>
                    Jika Anda memerlukan tambahan waktu atau perpanjangan tinggal (misal menunggu penjemput karena kendaraan telat), silakan lakukan pengajuan melalui portal aplikasi atau hubungi Front Desk kami sesegera mungkin.
                  </p>
                  <p className="pt-2 border-t border-slate-800 text-[10px] text-slate-400">
                    Hormat kami,<br />
                    <b>Manajemen Operasional Properti</b>
                  </p>
                </div>

                <div className="flex justify-end">
                  <button
                    onClick={() => setActiveSimulator(null)}
                    className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white font-bold text-xs rounded-xl cursor-pointer"
                  >
                    Tutup Simulasi Email
                  </button>
                </div>
              </div>
            )}

          </div>
        </div>
      )}

      {/* MODAL: ASSIGN CLEANING STAFF */}
      {roomForCleaning && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-black/60 flex items-center justify-center p-4 backdrop-blur-xs animate-in fade-in duration-200">
          <form onSubmit={submitCleaningAssignment} className="bg-white rounded-2xl border border-slate-100 shadow-xl max-w-sm w-full p-5 space-y-4">
            <div className="flex justify-between items-center border-b border-slate-100 pb-2.5">
              <h3 className="font-sans font-extrabold text-sm text-slate-800 flex items-center space-x-2">
                <RefreshCw className="h-4.5 w-4.5 text-amber-500 animate-spin-slow" />
                <span>Kirim Tim Kebersihan: Unit {roomForCleaning.roomNumber}</span>
              </h3>
              <button 
                type="button"
                onClick={() => setRoomForCleaning(null)}
                className="text-slate-400 hover:text-slate-600 p-1 cursor-pointer"
              >
                <X className="h-4.5 w-4.5" />
              </button>
            </div>

            <div className="space-y-3.5 text-xs text-slate-600">
              <p className="leading-relaxed">
                Silakan pilih atau ketik nama petugas/tim kebersihan yang akan ditugaskan untuk membersihkan kamar ini agar statusnya terekam di sistem real-time.
              </p>
              <div>
                <label className="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Nama Tim / Petugas Kebersihan</label>
                <input 
                  type="text" 
                  value={cleaningStaffInput}
                  onChange={(e) => setCleaningStaffInput(e.target.value)}
                  placeholder="Masukkan nama petugas (misal: Tim Rudi, Siti)..."
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs text-gray-800 focus:outline-none focus:border-indigo-500 transition-colors"
                  required
                />
              </div>

              {/* Suggestions */}
              <div className="space-y-1">
                <span className="text-[10px] text-gray-400 font-bold block uppercase tracking-wider">Rekomendasi Petugas:</span>
                <div className="flex flex-wrap gap-1.5">
                  {['Tim Rudi', 'Tim Siti', 'Tim Agus', 'Tim Budi'].map((name) => (
                    <button
                      key={name}
                      type="button"
                      onClick={() => setCleaningStaffInput(name)}
                      className="px-2 py-1 bg-slate-50 hover:bg-indigo-50 border border-slate-200 hover:border-indigo-200 text-[10px] text-gray-600 font-medium rounded-lg transition"
                    >
                      {name}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            <div className="flex justify-end gap-2 pt-2 border-t border-slate-50">
              <button
                type="button"
                onClick={() => setRoomForCleaning(null)}
                className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-lg cursor-pointer transition text-xs"
              >
                Batal
              </button>
              <button
                type="submit"
                className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-lg cursor-pointer transition text-xs flex items-center space-x-1.5"
              >
                <span>Tugaskan Tim</span>
              </button>
            </div>
          </form>
        </div>
      )}

      {/* MODAL: START MAINTENANCE */}
      {roomForMaintenance && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-black/60 flex items-center justify-center p-4 backdrop-blur-xs animate-in fade-in duration-200">
          <form onSubmit={submitStartMaintenance} className="bg-white rounded-2xl border border-slate-100 shadow-xl max-w-sm w-full p-5 space-y-4">
            <div className="flex justify-between items-center border-b border-slate-100 pb-2.5">
              <h3 className="font-sans font-extrabold text-sm text-slate-800 flex items-center space-x-2">
                <Wrench className="h-4.5 w-4.5 text-orange-500" />
                <span>Masuk Maintenance: Unit {roomForMaintenance.roomNumber}</span>
              </h3>
              <button 
                type="button"
                onClick={() => setRoomForMaintenance(null)}
                className="text-slate-400 hover:text-slate-600 p-1 cursor-pointer"
              >
                <X className="h-4.5 w-4.5" />
              </button>
            </div>

            <div className="space-y-3.5 text-xs text-slate-600">
              <p className="leading-relaxed">
                Ubah status unit kamar ke maintenance untuk mencegah check-in tamu baru hingga masa perbaikan dan pemeliharaan selesai dilakukan.
              </p>
              <div>
                <label className="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Masalah / Deskripsi Perbaikan</label>
                <input 
                  type="text" 
                  value={maintenanceReasonInput}
                  onChange={(e) => setMaintenanceReasonInput(e.target.value)}
                  placeholder="Misal: AC bocor, Keran air rusak..."
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs text-gray-800 focus:outline-none focus:border-indigo-500 transition-colors"
                  required
                />
              </div>
              <div>
                <label className="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Teknisi / Petugas Penanggung Jawab</label>
                <input 
                  type="text" 
                  value={maintenanceStaffInput}
                  onChange={(e) => setMaintenanceStaffInput(e.target.value)}
                  placeholder="Misal: Pak Hendri, Tim Teknisi..."
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs text-gray-800 focus:outline-none focus:border-indigo-500 transition-colors"
                  required
                />
              </div>
            </div>

            <div className="flex justify-end gap-2 pt-2 border-t border-slate-50">
              <button
                type="button"
                onClick={() => setRoomForMaintenance(null)}
                className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-lg cursor-pointer transition text-xs"
              >
                Batal
              </button>
              <button
                type="submit"
                className="px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-lg cursor-pointer transition text-xs"
              >
                Mulai Perbaikan
              </button>
            </div>
          </form>
        </div>
      )}

    </div>
  );
}