import { useState, useEffect } from 'react';
import { Calendar, UserCircle, LogIn, Menu, X, BedDouble, Clock, Search, Mail, Lock } from 'lucide-react';

// Rooms data
const ROOMS_DATA = [
  {
    id: 1,
    name: 'Orzah Royal Suite',
    price: 399,
    image: 'https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&q=80',
    description: 'Luxurious suite with panoramic city views',
    capacity: 2,
  },
  {
    id: 2,
    name: 'Orzah Presidential Suite',
    price: 599,
    image: 'https://images.unsplash.com/photo-1591088398332-8a7791972843?auto=format&fit=crop&q=80',
    description: 'Ultimate luxury with private butler service',
    capacity: 4,
  },
  {
    id: 3,
    name: 'Orzah Grand Villa',
    price: 899,
    image: 'https://images.unsplash.com/photo-1596394516093-501ba68a0ba6?auto=format&fit=crop&q=80',
    description: 'Exclusive villa with private pool',
    capacity: 6,
  },
];

// Authentication Modal Component
const AuthModal = ({ isOpen, onClose, onSuccess }) => {
  const [isSignUp, setIsSignUp] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: ''
  });
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    try {
      const endpoint = isSignUp ? '/api/auth/signup' : '/api/auth/login';
      const response = await fetch(endpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      const data = await response.json();

      if (response.ok) {
        localStorage.setItem('token', data.token);
        onSuccess(data.user);
      } else {
        setError(data.message || 'Authentication failed');
      }
    } catch (err) {
      setError('An error occurred. Please try again.');
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
      <div className="bg-white w-full max-w-md p-8 rounded-lg relative">
        <button
          onClick={onClose}
          className="absolute right-4 top-4 text-gray-500 hover:text-gray-700"
        >
          <X size={24} />
        </button>
        
        <h2 className="text-2xl font-bold text-center mb-6">
          {isSignUp ? 'Create Account' : 'Welcome Back'}
        </h2>
        
        {error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            {error}
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          {isSignUp && (
            <div className="relative">
              <UserCircle className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
              <input
                type="text"
                placeholder="Full Name"
                className="w-full pl-10 pr-4 py-2 border rounded"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                required
              />
            </div>
          )}
          
          <div className="relative">
            <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
            <input
              type="email"
              placeholder="Email"
              className="w-full pl-10 pr-4 py-2 border rounded"
              value={formData.email}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              required
            />
          </div>
          
          <div className="relative">
            <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
            <input
              type="password"
              placeholder="Password"
              className="w-full pl-10 pr-4 py-2 border rounded"
              value={formData.password}
              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
              required
            />
          </div>
          
          <button
            type="submit"
            className="w-full bg-[#C8A45D] text-white py-2 rounded hover:bg-[#B89451]"
          >
            {isSignUp ? 'Sign Up' : 'Sign In'}
          </button>
        </form>

        <p className="text-center mt-4">
          {isSignUp ? 'Already have an account?' : "Don't have an account?"}{' '}
          <button
            className="text-[#C8A45D] hover:underline"
            onClick={() => setIsSignUp(!isSignUp)}
          >
            {isSignUp ? 'Sign In' : 'Sign Up'}
          </button>
        </p>
      </div>
    </div>
  );
};

// Booking Modal Component
const BookingModal = ({ isOpen, onClose, room, dates, guests, currentUser }) => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  const handleBooking = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');

    try {
      const response = await fetch('/api/bookings', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`,
        },
        body: JSON.stringify({
          roomId: room.id,
          checkIn: dates.checkIn,
          checkOut: dates.checkOut,
          guests,
        }),
      });

      const data = await response.json();

      if (response.ok) {
        setSuccess(true);
        setTimeout(() => {
          onClose();
        }, 2000);
      } else {
        setError(data.message || 'Booking failed');
      }
    } catch (err) {
      setError('An error occurred. Please try again.');
    } finally {
      setIsLoading(false);
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
      <div className="bg-white w-full max-w-md p-8 rounded-lg">
        <button
          onClick={onClose}
          className="absolute right-4 top-4 text-gray-500 hover:text-gray-700"
        >
          <X size={24} />
        </button>

        <h2 className="text-2xl font-bold text-center mb-6">Confirm Booking</h2>
        
        {error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            {error}
          </div>
        )}

        {success ? (
          <div className="text-center text-green-600">
            <p className="text-xl mb-4">Booking Confirmed!</p>
            <p>Thank you for choosing Orzah International</p>
          </div>
        ) : (
          <form onSubmit={handleBooking} className="space-y-4">
            <div className="space-y-2">
              <p className="font-semibold">{room.name}</p>
              <p className="text-gray-600">${room.price} per night</p>
              <p className="text-gray-600">Check-in: {dates.checkIn}</p>
              <p className="text-gray-600">Check-out: {dates.checkOut}</p>
              <p className="text-gray-600">Guests: {guests}</p>
            </div>

            <button
              type="submit"
              disabled={isLoading}
              className="w-full bg-[#C8A45D] text-white py-2 rounded hover:bg-[#B89451] disabled:opacity-50"
            >
              {isLoading ? 'Processing...' : 'Confirm Booking'}
            </button>
          </form>
        )}
      </div>
    </div>
  );
};

// Main App Component
export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
  const [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
  const [selectedRoom, setSelectedRoom] = useState(null);
  const [currentUser, setCurrentUser] = useState(null);
  const [searchDates, setSearchDates] = useState({ checkIn: '', checkOut: '' });
  const [guests, setGuests] = useState(1);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      fetchUserData(token);
    }
  }, []);

  const fetchUserData = async (token) => {
    try {
      const response = await fetch('/api/user', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });
      if (response.ok) {
        const userData = await response.json();
        setCurrentUser(userData);
      }
    } catch (error) {
      console.error('Error fetching user data:', error);
    }
  };

  const handleLogout = () => {
    localStorage.removeItem('token');
    setCurrentUser(null);
  };

  const handleBooking = (room) => {
    if (!currentUser) {
      setIsAuthModalOpen(true);
    } else {
      setSelectedRoom(room);
      setIsBookingModalOpen(true);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Navigation */}
      <nav className="bg-[#1A1A1A] text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16 items-center">
            <div className="flex-shrink-0 flex items-center">
              <h1 className="text-2xl font-bold">
                <span className="text-[#C8A45D]">ORZAH</span>
                <span className="text-sm font-light ml-2">INTERNATIONAL</span>
              </h1>
            </div>
            
            <div className="hidden md:flex items-center space-x-8">
              <a href="#rooms" className="text-gray-300 hover:text-[#C8A45D] flex items-center gap-2">
                <BedDouble size={20} />
                Suites
              </a>
              {currentUser && (
                <a href="#bookings" className="text-gray-300 hover:text-[#C8A45D] flex items-center gap-2">
                  <Calendar size={20} />
                  My Bookings
                </a>
              )}
              {currentUser ? (
                <div className="flex items-center gap-4">
                  <span className="text-[#C8A45D]">Welcome, {currentUser.name}</span>
                  <button
                    onClick={handleLogout}
                    className="bg-[#C8A45D] text-black px-4 py-2 rounded-none hover:bg-[#B89451] transition duration-300"
                  >
                    Logout
                  </button>
                </div>
              ) : (
                <button
                  onClick={() => setIsAuthModalOpen(true)}
                  className="bg-[#C8A45D] text-black px-4 py-2 rounded-none hover:bg-[#B89451] flex items-center gap-2 transition duration-300"
                >
                  <LogIn size={20} />
                  Sign In
                </button>
              )}
            </div>

            <div className="md:hidden">
              <button
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="text-gray-300"
              >
                {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
          </div>
        </div>
      </nav>

      {/* Mobile Menu */}
      {isMenuOpen && (
        <div className="md:hidden bg-[#1A1A1A] text-white">
          <div className="px-4 pt-2 pb-3 space-y-1">
            <a href="#rooms" className="block px-3 py-2 text-gray-300 hover:text-[#C8A45D]">Suites</a>
            {currentUser && (
              <a href="#bookings" className="block px-3 py-2 text-gray-300 hover:text-[#C8A45D]">My Bookings</a>
            )}
            <button
              onClick={() => setIsAuthModalOpen(true)}
              className="block w-full text-left px-3 py-2 text-gray-300 hover:text-[#C8A45D]"
            >
              {currentUser ? 'Account' : 'Sign In'}
            </button>
          </div>
        </div>
      )}

      {/* Hero Section */}
      <div className="relative bg-black h-[600px]">
        <img
          src="https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?auto=format&fit=crop&q=80"
          alt="Orzah International Hotel"
          className="w-full h-full object-cover opacity-50"
        />
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="text-center text-white">
            <h2 className="text-5xl md:text-6xl font-light mb-4">WELCOME TO <span className="text-[#C8A45D]">ORZAH</span></h2>
            <p className="text-xl mb-8 font-light">WHERE LUXURY MEETS EXCELLENCE</p>
            
            {/* Search Box */}
            <div className="bg-white/95 backdrop-blur-sm p-8 rounded-none shadow-2xl max-w-3xl mx-4">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                  <label className="block text-gray-700 text-sm font-medium mb-2">Check In</label>
                  <input
                    type="date"
                    className="w-full px-4 py-2 border border-gray-300 text-gray-700 focus:border-[#C8A45D] outline-none"
                    value={searchDates.checkIn}
                    onChange={(e) => setSearchDates({...searchDates, checkIn: e.target.value})}
                  />
                </div>
                <div>
                  <label className="block text-gray-700 text-sm font-medium mb-2">Check Out</label>
                  <input
                    type="date"
                    className="w-full px-4 py-2 border border-gray-300 text-gray-700 focus:border-[#C8A45D] outline-none"
                    value={searchDates.checkOut}
                    onChange={(e) => setSearchDates({...searchDates, checkOut: e.target.value})}
                  />
                </div>
                <div>
                  <label className="block text-gray-700 text-sm font-medium mb-2">Guests</label>
                  <select
                    className="w-full px-4 py-2 border border-gray-300 text-gray-700 focus:border-[#C8A45D] outline-none"
                    value={guests}
                    onChange={(e) => setGuests(Number(e.target.value))}
                  >
                    {[1,2,3,4,5,6].map(num => (
                      <option key={num} value={num}>{num} {num === 1 ? 'Guest' : 'Guests'}</option>
                    ))}
                  </select>
                </div>
              </div>
              <button className="w-full mt-6 bg-[#C8A45D] text-black py-3 hover:bg-[#B89451] flex items-center justify-center gap-2 transition duration-300">
                <Search size={20} />
                SEARCH AVAILABILITY
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Available Rooms Section */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16" id="rooms">
        <h2 className="text-3xl font-light text-gray-900 mb-2">LUXURY ACCOMMODATIONS</h2>
        <div className="w-20 h-1 bg-[#C8A45D] mb-12"></div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {ROOMS_DATA.map((room) => (
            <div key={room.id} className="bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
              <img
                src={room.image}
                alt={room.name}
                className="w-full h-64 object-cover"
              />
              <div className="p-8">
                <h3 className="text-xl font-semibold text-gray-900 mb-2">{room.name}</h3>
                <p className="text-gray-600 mb-4">{room.description}</p>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <UserCircle size={20} className="text-[#C8A45D]" />
                    <span className="text-gray-600">Up to {room.capacity} guests</span>
                  </div>
                  <p className="text-xl font-bold text-[#C8A45D]">${room.price}/night</p>
                </div>
                <button
                  onClick={() => handleBooking(room)}
                  className="w-full mt-6 bg-[#1A1A1A] text-white py-3 hover:bg-[#C8A45D] hover:text-black transition duration-300"
                >
                  RESERVE NOW
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Modals */}
      {isAuthModalOpen && (
        <AuthModal
          isOpen={isAuthModalOpen}
          onClose={() => setIsAuthModalOpen(false)}
          onSuccess={(userData) => {
            setCurrentUser(userData);
            setIsAuthModalOpen(false);
          }}
        />
      )}

      {isBookingModalOpen && (
        <BookingModal
          isOpen={isBookingModalOpen}
          onClose={() => setIsBookingModalOpen(false)}
          room={selectedRoom}
          dates={searchDates}
          guests={guests}
          currentUser={currentUser}
        />
      )}
    </div>
  );
}