import React, { useState } from 'react';
import { Search, User, Hotel, CheckCircle, AlertCircle } from 'lucide-react';
import { bookingService, Booking } from '../../services/api';
import { toast } from 'react-toastify';
import Loading from '../../components/common/Loading';

interface GuestInfo {
  name: string;
  id_number: string;
  phone: string;
}

const CheckInPage: React.FC = () => {
  const [bookingNumber, setBookingNumber] = useState('');
  const [booking, setBooking] = useState<Booking | null>(null);
  const [loading, setLoading] = useState(false);
  const [searching, setSearching] = useState(false);
  const [actualRoomNumber, setActualRoomNumber] = useState('');
  const [guests, setGuests] = useState<GuestInfo[]>([{ name: '', id_number: '', phone: '' }]);
  const [extraPersons, setExtraPersons] = useState(0);
  const [children, setChildren] = useState(0);
  const [additionalFee, setAdditionalFee] = useState(0);

  const handleSearch = async () => {
    if (!bookingNumber.trim()) {
      toast.error('Please enter booking number');
      return;
    }

    try {
      setSearching(true);
      const response = await bookingService.checkBookingByNumber(bookingNumber);
      setBooking(response.data.booking);
      setActualRoomNumber(response.data.booking.room?.room_number || '');
      toast.success('Booking found');
    } catch (error: any) {
      toast.error(error.response?.data?.message || 'Booking not found');
      setBooking(null);
    } finally {
      setSearching(false);
    }
  };

  const handleAddGuest = () => {
    setGuests([...guests, { name: '', id_number: '', phone: '' }]);
  };

  const handleRemoveGuest = (index: number) => {
    if (guests.length > 1) {
      setGuests(guests.filter((_, i) => i !== index));
    }
  };

  const handleGuestChange = (index: number, field: keyof GuestInfo, value: string) => {
    const newGuests = [...guests];
    newGuests[index][field] = value;
    setGuests(newGuests);
  };

  const calculateAdditionalFee = () => {
    // Logic to calculate additional fees: children and extra person
    const extraPersonFee = extraPersons * 200000; // 200k/person
    const childrenFee = children * 100000; // 100k/child
    const total = extraPersonFee + childrenFee;
    setAdditionalFee(total);
    return total;
  };

  const handleCheckIn = async () => {
    if (!booking) return;

    // Validate
    if (!actualRoomNumber.trim()) {
      toast.error('Please enter actual room number');
      return;
    }

    const mainGuest = guests[0];
    if (!mainGuest.name || !mainGuest.id_number || !mainGuest.phone) {
      toast.error('Please fill in all main guest information');
      return;
    }

    try {
      setLoading(true);
      // Calculate additional fee
      calculateAdditionalFee();

      await bookingService.updateBooking(booking.id, {
        status: 'checked_in',
        // Can send additional data about guests, room_number, additional_fee
      } as any);

      toast.success('Check-in successful');
      
      // Reset form
      setBooking(null);
      setBookingNumber('');
      setActualRoomNumber('');
      setGuests([{ name: '', id_number: '', phone: '' }]);
      setExtraPersons(0);
      setChildren(0);
      setAdditionalFee(0);
    } catch (error: any) {
      toast.error(error.response?.data?.message || 'An error occurred during check-in');
    } finally {
      setLoading(false);
    }
  };

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
  };

  if (loading) {
    return <Loading />;
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Check-in</h1>
          <p className="text-gray-500 mt-1">Customer check-in process</p>
        </div>
      </div>

      {/* Search Booking */}
      <div className="bg-white p-6 rounded-lg shadow-sm">
        <h2 className="text-lg font-semibold mb-4">1. Search booking</h2>
        <div className="flex gap-4">
          <div className="flex-1 relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              type="text"
              value={bookingNumber}
              onChange={(e) => setBookingNumber(e.target.value)}
              onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
              placeholder="Enter booking number"
              className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
            />
          </div>
          <button
            onClick={handleSearch}
            disabled={searching}
            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 flex items-center gap-2"
          >
            {searching ? 'Searching...' : 'Search'}
          </button>
        </div>
      </div>

      {/* Booking Info */}
      {booking && (
        <>
          <div className="bg-white p-6 rounded-lg shadow-sm">
            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-green-600" />
              2. Booking Information
            </h2>
            <div className="grid grid-cols-2 gap-6">
              <div>
                <div className="space-y-3">
                  <div className="flex justify-between">
                    <span className="text-gray-600">Booking Number:</span>
                    <span className="font-semibold">{booking.booking_number}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">Customer:</span>
                    <span className="font-semibold">{booking.user?.full_name}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">Email:</span>
                    <span>{booking.user?.email}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">Phone:</span>
                    <span>{booking.user?.phone_number || 'N/A'}</span>
                  </div>
                </div>
              </div>
              <div>
                <div className="space-y-3">
                  <div className="flex justify-between">
                    <span className="text-gray-600">Room Type:</span>
                    <span className="font-semibold">{booking.room?.room_type?.name || 'N/A'}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">Check-in:</span>
                    <span>{booking.check_in_date ? new Date(booking.check_in_date).toLocaleDateString('en-US') : 'N/A'}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">Check-out:</span>
                    <span>{booking.check_out_date ? new Date(booking.check_out_date).toLocaleDateString('en-US') : 'N/A'}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">Number of Guests:</span>
                    <span>{booking.guest_count} guest(s)</span>
                  </div>
                </div>
              </div>
            </div>

            {booking.status !== 'confirmed' && (
              <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg flex items-start gap-2">
                <AlertCircle className="w-5 h-5 text-yellow-600 mt-0.5" />
                <div>
                  <p className="text-sm text-yellow-800 font-medium">Warning</p>
                  <p className="text-sm text-yellow-700">
                    Booking status: <span className="font-semibold">{booking.status}</span>. 
                    Only check-in confirmed bookings.
                  </p>
                </div>
              </div>
            )}
          </div>

          {/* Assign Room */}
          <div className="bg-white p-6 rounded-lg shadow-sm">
            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
              <Hotel className="w-5 h-5 text-blue-600" />
              3. Assign Actual Room Number
            </h2>
            <div className="max-w-md">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Room Number <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={actualRoomNumber}
                onChange={(e) => setActualRoomNumber(e.target.value)}
                placeholder="VD: 101, 202, 305"
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
              />
              <p className="text-xs text-gray-500 mt-1">
                Enter the actual room number to assign to the guest
              </p>
            </div>
          </div>

          {/* Guest Information */}
          <div className="bg-white p-6 rounded-lg shadow-sm">
            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
              <User className="w-5 h-5 text-purple-600" />
              4. Guest Information
            </h2>
            <div className="space-y-4">
              {guests.map((guest, index) => (
                <div key={index} className="p-4 border border-gray-200 rounded-lg">
                  <div className="flex justify-between items-center mb-3">
                    <h3 className="font-medium">
                      {index === 0 ? 'Main Guest' : `Guest ${index + 1}`}
                      {index === 0 && <span className="text-red-500 ml-1">*</span>}
                    </h3>
                    {index > 0 && (
                      <button
                        onClick={() => handleRemoveGuest(index)}
                        className="text-red-600 hover:text-red-800 text-sm"
                      >
                        Remove
                      </button>
                    )}
                  </div>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <label className="block text-sm text-gray-700 mb-1">
                        Full Name {index === 0 && <span className="text-red-500">*</span>}
                      </label>
                      <input
                        type="text"
                        value={guest.name}
                        onChange={(e) => handleGuestChange(index, 'name', e.target.value)}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                        placeholder="Nguyễn Văn A"
                      />
                    </div>
                    <div>
                      <label className="block text-sm text-gray-700 mb-1">
                        ID Number {index === 0 && <span className="text-red-500">*</span>}
                      </label>
                      <input
                        type="text"
                        value={guest.id_number}
                        onChange={(e) => handleGuestChange(index, 'id_number', e.target.value)}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                        placeholder="001234567890"
                      />
                    </div>
                    <div>
                      <label className="block text-sm text-gray-700 mb-1">
                        Phone Number {index === 0 && <span className="text-red-500">*</span>}
                      </label>
                      <input
                        type="tel"
                        value={guest.phone}
                        onChange={(e) => handleGuestChange(index, 'phone', e.target.value)}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                        placeholder="0912345678"
                      />
                    </div>
                  </div>
                </div>
              ))}
              <button
                onClick={handleAddGuest}
                className="text-blue-600 hover:text-blue-800 text-sm font-medium"
              >
                + Add Guest
              </button>
            </div>
          </div>

          {/* Additional Charges */}
          <div className="bg-white p-6 rounded-lg shadow-sm">
            <h2 className="text-lg font-semibold mb-4">5. Additional Fees (if any)</h2>
            <div className="grid grid-cols-3 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Extra Persons
                </label>
                <input
                  type="number"
                  min="0"
                  value={extraPersons}
                  onChange={(e) => {
                    setExtraPersons(parseInt(e.target.value) || 0);
                    calculateAdditionalFee();
                  }}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                />
                <p className="text-xs text-gray-500 mt-1">200,000 VND/person</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Number of Children
                </label>
                <input
                  type="number"
                  min="0"
                  value={children}
                  onChange={(e) => {
                    setChildren(parseInt(e.target.value) || 0);
                    calculateAdditionalFee();
                  }}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                />
                <p className="text-xs text-gray-500 mt-1">100,000 VND/child</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Total Additional Fee
                </label>
                <div className="px-4 py-2 bg-gray-50 border border-gray-300 rounded-lg text-lg font-semibold text-blue-600">
                  {formatCurrency(calculateAdditionalFee())}
                </div>
              </div>
            </div>
          </div>

          {/* Summary & Action */}
          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-lg border border-blue-200">
            <div className="flex justify-between items-center">
              <div>
                <h3 className="text-lg font-semibold text-gray-900">Confirm Check-in</h3>
                <p className="text-sm text-gray-600 mt-1">
                  Guest: <span className="font-medium">{booking.user?.full_name}</span> | 
                  Room: <span className="font-medium">{actualRoomNumber || 'Not assigned'}</span>
                  {additionalFee > 0 && (
                    <> | Additional Fee: <span className="font-medium text-red-600">{formatCurrency(additionalFee)}</span></>
                  )}
                </p>
              </div>
              <button
                onClick={handleCheckIn}
                disabled={!actualRoomNumber || !guests[0].name || booking.status !== 'confirmed'}
                className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-semibold flex items-center gap-2"
              >
                <CheckCircle className="w-5 h-5" />
                Confirm Check-in
              </button>
            </div>
          </div>
        </>
      )}

      {/* Empty State */}
      {!booking && !searching && (
        <div className="bg-gray-50 rounded-lg p-12 text-center">
          <Search className="w-16 h-16 text-gray-400 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">
            No booking selected
          </h3>
          <p className="text-gray-600">
            Please enter booking number above to start check-in process
          </p>
        </div>
      )}
    </div>
  );
};

export default CheckInPage;