import React, { useState, useEffect } from 'react';
import { Calendar, Clock, Users, CheckCircle, XCircle, Phone, Euro, LogIn, UserPlus, AlertCircle, Menu, X } from 'lucide-react';

const BookingApp = () => {
  const [currentUser, setCurrentUser] = useState(null);
  const [isDriver, setIsDriver] = useState(false);
  const [view, setView] = useState('welcome');
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
  const [passengers, setPassengers] = useState([]);
  const [bookings, setBookings] = useState([]);
  const [showMenu, setShowMenu] = useState(false);
  const [confirmBooking, setConfirmBooking] = useState(null);

  const schedules = [
    { id: 1, time: '05:30', shift: 'Mañana', type: 'IDA', maxSeats: 4 },
    { id: 2, time: '14:10', shift: 'Mañana', type: 'VUELTA', maxSeats: 4 },
    { id: 3, time: '13:30', shift: 'Tarde', type: 'IDA', maxSeats: 4 },
    { id: 4, time: '22:10', shift: 'Tarde', type: 'VUELTA', maxSeats: 4 },
    { id: 5, time: '21:30', shift: 'Noche', type: 'IDA', maxSeats: 4 },
    { id: 6, time: '06:10', shift: 'Noche', type: 'VUELTA', maxSeats: 4 },
  ];

  useEffect(() => {
    const saved = localStorage.getItem('appData');
    if (saved) {
      const data = JSON.parse(saved);
      setPassengers(data.passengers || []);
      setBookings(data.bookings || []);
      setCurrentUser(data.currentUser);
      setIsDriver(data.isDriver || false);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('appData', JSON.stringify({
      passengers,
      bookings,
      currentUser,
      isDriver
    }));
  }, [passengers, bookings, currentUser, isDriver]);

  const getBookingsForSchedule = (scheduleId, date) => {
    return bookings.filter(b => b.scheduleId === scheduleId && b.date === date && !b.cancelled);
  };

  const getAvailableSeats = (scheduleId, date) => {
    return 4 - getBookingsForSchedule(scheduleId, date).length;
  };

  const formatDate = (dateStr) => {
    const date = new Date(dateStr);
    return date.toLocaleDateString('es-ES', { weekday: 'long', day: 'numeric', month: 'long' });
  };

  const changeDate = (days) => {
    const current = new Date(selectedDate);
    current.setDate(current.getDate() + days);
    setSelectedDate(current.toISOString().split('T')[0]);
  };

  if (view === 'welcome') {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center p-4">
        <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8">
          <div className="text-center mb-8">
            <div className="text-6xl mb-4">🚗</div>
            <h1 className="text-3xl font-bold text-gray-800 mb-2">Seseña-Illescas Express</h1>
            <p className="text-gray-600">Tu transporte diario</p>
          </div>

          <div className="space-y-3">
            <button
              onClick={() => setView('login')}
              className="w-full py-4 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700 flex items-center justify-center gap-2"
            >
              <LogIn className="w-5 h-5" />
              Iniciar Sesión
            </button>
            
            <button
              onClick={() => setView('register')}
              className="w-full py-4 bg-green-600 text-white rounded-xl font-semibold hover:bg-green-700 flex items-center justify-center gap-2"
            >
              <UserPlus className="w-5 h-5" />
              Registrarse
            </button>

            <div className="mt-6 p-4 bg-blue-50 rounded-lg">
              <p className="text-sm text-gray-600 text-center">
                💡 Debes estar aprobado para reservar
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (view === 'login') {
    return <LoginScreen 
      onBack={() => setView('welcome')}
      onLogin={(user, driver) => {
        setCurrentUser(user);
        setIsDriver(driver);
        setView('main');
      }}
      passengers={passengers}
    />;
  }

  if (view === 'register') {
    return <RegisterScreen 
      onBack={() => setView('welcome')}
      onRegister={(newPass) => {
        setPassengers([...passengers, newPass]);
        alert('Solicitud enviada. Te contactaremos pronto.');
        setView('welcome');
      }}
    />;
  }

  if (isDriver) {
    const today = new Date().toISOString().split('T')[0];
    const todayBookings = bookings.filter(b => b.date === today && !b.cancelled);
    const paid = todayBookings.filter(b => b.paid).length * 15;
    const pending = todayBookings.filter(b => !b.paid).length * 15;
    const pendingPassengers = passengers.filter(p => p.status === 'pending');

    return (
      <div className="min-h-screen bg-gray-50">
        <div className="bg-purple-600 text-white p-4 sticky top-0 z-50 shadow-lg">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-xl font-bold">👨‍✈️ Panel Conductor</h1>
              <p className="text-sm opacity-90">{formatDate(selectedDate)}</p>
            </div>
            <button
              onClick={() => setShowMenu(!showMenu)}
              className="p-2 hover:bg-purple-500 rounded-lg"
            >
              {showMenu ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
          
          {showMenu && (
            <div className="mt-4 space-y-2">
              <button
                onClick={() => {
                  setCurrentUser(null);
                  setIsDriver(false);
                  setView('welcome');
                  setShowMenu(false);
                }}
                className="w-full text-left px-4 py-2 bg-red-500 rounded-lg"
              >
                Cerrar Sesión
              </button>
            </div>
          )}
        </div>

        <div className="p-4 space-y-4">
          <div className="grid grid-cols-3 gap-3">
            <div className="bg-white p-3 rounded-lg shadow">
              <div className="text-xs text-gray-600 mb-1">Viajes</div>
              <div className="text-2xl font-bold text-blue-600">{todayBookings.length}</div>
            </div>
            <div className="bg-white p-3 rounded-lg shadow">
              <div className="text-xs text-gray-600 mb-1">Cobrado</div>
              <div className="text-2xl font-bold text-green-600">{paid}€</div>
            </div>
            <div className="bg-white p-3 rounded-lg shadow">
              <div className="text-xs text-gray-600 mb-1">Pendiente</div>
              <div className="text-2xl font-bold text-red-600">{pending}€</div>
            </div>
          </div>

          {pendingPassengers.length > 0 && (
            <div className="bg-yellow-50 border-2 border-yellow-400 rounded-lg p-4">
              <div className="flex items-center gap-2 mb-3">
                <AlertCircle className="w-5 h-5 text-yellow-600" />
                <span className="font-semibold">Solicitudes Pendientes: {pendingPassengers.length}</span>
              </div>
              {pendingPassengers.map(p => (
                <div key={p.id} className="bg-white rounded-lg p-3 mb-2">
                  <div className="font-semibold">{p.name}</div>
                  <div className="text-sm text-gray-600">{p.phone}</div>
                  <div className="text-sm text-gray-600">{p.company}</div>
                  <div className="flex gap-2 mt-2">
                    <button
                      onClick={() => {
                        setPassengers(passengers.map(pass => 
                          pass.id === p.id ? {...pass, status: 'active'} : pass
                        ));
                      }}
                      className="flex-1 py-2 bg-green-600 text-white rounded-lg text-sm font-semibold"
                    >
                      ✅ Aprobar
                    </button>
                    <button
                      onClick={() => {
                        setPassengers(passengers.filter(pass => pass.id !== p.id));
                      }}
                      className="flex-1 py-2 bg-red-600 text-white rounded-lg text-sm font-semibold"
                    >
                      ❌ Rechazar
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}

          <div className="bg-white rounded-lg shadow p-4">
            <div className="flex items-center justify-between">
              <button
                onClick={() => changeDate(-1)}
                className="px-4 py-2 bg-gray-200 rounded-lg font-semibold"
              >
                ← Ant
              </button>
              <input
                type="date"
                value={selectedDate}
                onChange={(e) => setSelectedDate(e.target.value)}
                className="px-3 py-2 border rounded-lg"
              />
              <button
                onClick={() => changeDate(1)}
                className="px-4 py-2 bg-gray-200 rounded-lg font-semibold"
              >
                Sig →
              </button>
            </div>
          </div>

          {schedules.map(schedule => {
            const tripBookings = getBookingsForSchedule(schedule.id, selectedDate);
            const available = getAvailableSeats(schedule.id, selectedDate);
            
            return (
              <div key={schedule.id} className="bg-white rounded-lg shadow p-4">
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-3">
                    <div className="bg-purple-100 px-3 py-2 rounded-lg">
                      <div className="text-xl font-bold text-purple-800">{schedule.time}</div>
                      <div className="text-xs text-purple-600">{schedule.shift}</div>
                    </div>
                    <div className="font-semibold">
                      {schedule.type === 'IDA' ? '📍 → Illescas' : '🏠 → Seseña'}
                    </div>
                  </div>
                  <div className={`px-3 py-1 rounded-lg font-bold text-sm ${
                    available === 0 ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'
                  }`}>
                    {4 - available}/4
                  </div>
                </div>

                {tripBookings.length > 0 ? (
                  <div className="space-y-2">
                    {tripBookings.map(booking => (
                      <div key={booking.id} className={`p-3 rounded-lg border-2 ${
                        booking.confirmed ? 'border-green-300 bg-green-50' : 'border-yellow-300 bg-yellow-50'
                      }`}>
                        <div className="flex items-start justify-between">
                          <div className="flex-1">
                            <div className="font-semibold text-sm">{booking.passengerName}</div>
                            <div className="text-xs text-gray-600">{booking.company}</div>
                            <div className="text-xs text-gray-600 flex items-center gap-1 mt-1">
                              <Phone className="w-3 h-3" />
                              {booking.phone}
                            </div>
                          </div>
                          
                          <div className="flex gap-1">
                            <button
                              onClick={() => {
                                setBookings(bookings.map(b => 
                                  b.id === booking.id ? {...b, confirmed: !b.confirmed} : b
                                ));
                              }}
                              className={`p-2 rounded-lg ${
                                booking.confirmed ? 'bg-green-600 text-white' : 'bg-gray-300'
                              }`}
                            >
                              <CheckCircle className="w-4 h-4" />
                            </button>
                            
                            <button
                              onClick={() => {
                                setBookings(bookings.map(b => 
                                  b.id === booking.id ? {...b, paid: !b.paid} : b
                                ));
                              }}
                              className={`p-2 rounded-lg ${
                                booking.paid ? 'bg-blue-600 text-white' : 'bg-gray-300'
                              }`}
                            >
                              <Euro className="w-4 h-4" />
                            </button>
                            
                            <button
                              onClick={() => {
                                if (window.confirm('¿Eliminar reserva?')) {
                                  setBookings(bookings.filter(b => b.id !== booking.id));
                                }
                              }}
                              className="p-2 bg-red-500 text-white rounded-lg"
                            >
                              <XCircle className="w-4 h-4" />
                            </button>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-6 text-gray-400 text-sm">
                    Sin reservas
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  const myBookings = bookings.filter(b => 
    b.passengerId === currentUser.id && 
    b.date >= new Date().toISOString().split('T')[0] && 
    !b.cancelled
  );

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-blue-600 text-white p-4 sticky top-0 z-50 shadow-lg">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-xl font-bold">🚗 Seseña-Illescas</h1>
            <p className="text-sm opacity-90">Hola, {currentUser.name.split(' ')[0]}</p>
          </div>
          <button
            onClick={() => setShowMenu(!showMenu)}
            className="p-2 hover:bg-blue-500 rounded-lg"
          >
            {showMenu ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
        
        {showMenu && (
          <div className="mt-4 space-y-2">
            <div className="bg-blue-500 rounded-lg p-3">
              <div className="text-xs opacity-75">Tu empresa</div>
              <div className="font-semibold">{currentUser.company}</div>
            </div>
            <button
              onClick={() => {
                setCurrentUser(null);
                setView('welcome');
                setShowMenu(false);
              }}
              className="w-full text-left px-4 py-2 bg-red-500 rounded-lg"
            >
              Cerrar Sesión
            </button>
          </div>
        )}
      </div>

      <div className="p-4 space-y-4">
        {myBookings.length > 0 && (
          <div className="bg-blue-50 border-2 border-blue-300 rounded-lg p-4">
            <h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
              <Calendar className="w-5 h-5" />
              Mis Próximas Reservas
            </h3>
            {myBookings.map(booking => {
              const schedule = schedules.find(s => s.id === booking.scheduleId);
              return (
                <div key={booking.id} className="bg-white rounded-lg p-3 mb-2">
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="font-semibold">{formatDate(booking.date)}</div>
                      <div className="text-sm text-gray-600">{schedule.time} - {schedule.type}</div>
                      <div className="flex gap-2 mt-1">
                        {booking.confirmed ? (
                          <span className="text-xs px-2 py-1 bg-green-100 text-green-800 rounded">
                            ✅ Confirmado
                          </span>
                        ) : (
                          <span className="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded">
                            ⏳ Pendiente
                          </span>
                        )}
                      </div>
                    </div>
                    <button
                      onClick={() => {
                        if (window.confirm('¿Cancelar reserva?')) {
                          setBookings(bookings.map(b => 
                            b.id === booking.id ? {...b, cancelled: true} : b
                          ));
                        }
                      }}
                      className="px-3 py-2 bg-red-500 text-white rounded-lg text-xs font-semibold"
                    >
                      Cancelar
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        <div className="bg-white rounded-lg shadow p-4">
          <div className="flex items-center justify-between">
            <button
              onClick={() => changeDate(-1)}
              className="px-4 py-2 bg-gray-200 rounded-lg font-semibold"
            >
              ← Ant
            </button>
            <div className="text-center flex-1">
              <div className="font-bold capitalize text-sm">{formatDate(selectedDate)}</div>
              <input
                type="date"
                value={selectedDate}
                onChange={(e) => setSelectedDate(e.target.value)}
                className="text-xs border rounded px-2 py-1 mt-1"
              />
            </div>
            <button
              onClick={() => changeDate(1)}
              className="px-4 py-2 bg-gray-200 rounded-lg font-semibold"
            >
              Sig →
            </button>
          </div>
        </div>

        {schedules.map(schedule => {
          const available = getAvailableSeats(schedule.id, selectedDate);
          const myBooking = bookings.find(b => 
            b.passengerId === currentUser.id && 
            b.scheduleId === schedule.id && 
            b.date === selectedDate && 
            !b.cancelled
          );
          
          return (
            <div key={schedule.id} className="bg-white rounded-lg shadow p-4">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-3">
                  <div>
                    <Clock className="w-6 h-6 text-blue-600 mx-auto mb-1" />
                    <div className="text-xl font-bold">{schedule.time}</div>
                    <div className="text-xs text-gray-500">{schedule.shift}</div>
                  </div>
                  <div className="font-semibold text-sm">
                    {schedule.type === 'IDA' ? '📍 → Illescas' : '🏠 → Seseña'}
                  </div>
                </div>
                
                <div className={`px-3 py-1 rounded-lg text-xs font-bold ${
                  available > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                }`}>
                  {available}/4
                </div>
              </div>

              {myBooking ? (
                <div className="bg-blue-50 border-2 border-blue-300 rounded-lg p-3 text-center">
                  <div className="font-semibold text-blue-800 text-sm">
                    ✅ Ya reservaste este horario
                  </div>
                </div>
              ) : available > 0 ? (
                <button
                  onClick={() => setConfirmBooking(schedule.id)}
                  className="w-full py-3 bg-blue-600 text-white rounded-lg font-semibold"
                >
                  Reservar Plaza
                </button>
              ) : (
                <div className="w-full py-3 bg-gray-300 text-gray-600 rounded-lg font-semibold text-center">
                  Completo
                </div>
              )}
            </div>
          );
        })}
      </div>

      {confirmBooking && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
            <h2 className="text-xl font-bold mb-4">Confirmar Reserva</h2>
            
            <div className="bg-gray-50 rounded-lg p-4 mb-4 space-y-2">
              <div className="text-sm">📅 {formatDate(selectedDate)}</div>
              <div className="text-sm">🕐 {schedules.find(s => s.id === confirmBooking)?.time}</div>
              <div className="text-sm">🏢 {currentUser.company}</div>
              <div className="text-sm">💰 15€</div>
            </div>

            <div className="flex gap-3">
              <button
                onClick={() => setConfirmBooking(null)}
                className="flex-1 py-3 bg-gray-200 rounded-lg font-semibold"
              >
                Cancelar
              </button>
              <button
                onClick={() => {
                  const newBooking = {
                    id: Date.now(),
                    passengerId: currentUser.id,
                    passengerName: currentUser.name,
                    phone: currentUser.phone,
                    company: currentUser.company,
                    scheduleId: confirmBooking,
                    date: selectedDate,
                    confirmed: false,
                    paid: false,
                    cancelled: false
                  };
                  setBookings([...bookings, newBooking]);
                  setConfirmBooking(null);
                  alert('¡Reserva creada!');
                }}
                className="flex-1 py-3 bg-blue-600 text-white rounded-lg font-semibold"
              >
                Confirmar
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const LoginScreen = ({ onBack, onLogin, passengers }) => {
  const [loginType, setLoginType] = useState('passenger');
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (loginType === 'driver') {
      if (password === '1234') {
        onLogin({ id: 'driver', name: 'Conductor' }, true);
      } else {
        alert('Contraseña incorrecta');
      }
    } else {
      const pass = passengers.find(p => p.phone === phone && p.status === 'active');
      if (pass) {
        onLogin(pass, false);
      } else {
        alert('Teléfono no encontrado o no aprobado');
      }
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center p-4">
      <form onSubmit={handleSubmit} className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8">
        <h2 className="text-2xl font-bold mb-6 text-center">Iniciar Sesión</h2>
        
        <div className="flex gap-2 mb-6">
          <button
            type="button"
            onClick={() => setLoginType('passenger')}
            className={`flex-1 py-2 rounded-lg font-semibold ${
              loginType === 'passenger' ? 'bg-blue-600 text-white' : 'bg-gray-200'
            }`}
          >
            Pasajero
          </button>
          <button
            type="button"
            onClick={() => setLoginType('driver')}
            className={`flex-1 py-2 rounded-lg font-semibold ${
              loginType === 'driver' ? 'bg-purple-600 text-white' : 'bg-gray-200'
            }`}
          >
            Conductor
          </button>
        </div>

        {loginType === 'passenger' ? (
          <div className="mb-6">
            <label className="block text-sm font-medium mb-2">Teléfono</label>
            <input
              type="tel"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              className="w-full px-4 py-3 border rounded-lg"
              placeholder="612345678"
              required
            />
          </div>
        ) : (
          <div className="mb-6">
            <label className="block text-sm font-medium mb-2">Contraseña</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full px-4 py-3 border rounded-lg"
              placeholder="••••"
              required
            />
            <p className="text-xs text-gray-500 mt-1">Contraseña: 1234</p>
          </div>
        )}

        <button
          type="submit"
          className="w-full py-3 bg-blue-600 text-white rounded-lg font-semibold mb-3"
        >
          Entrar
        </button>

        <button
          type="button"
          onClick={onBack}
          className="w-full py-3 bg-gray-200 rounded-lg font-semibold"
        >
          Volver
        </button>
      </form>
    </div>
  );
};

const RegisterScreen = ({ onBack, onRegister }) => {
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    company: '',
    shift: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.name || !formData.phone || !formData.company || !formData.shift) {
      alert('Completa todos los campos');
      return;
    }
    
    const newPass = {
      id: Date.now(),
      ...formData,
      status: 'pending',
      totalTrips: 0,
      cancellations: 0
    };
    
    onRegister(newPass);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center p-4">
      <form onSubmit={handleSubmit} className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8">
        <h2 className="text-2xl font-bold mb-6 text-center">Registro</h2>

        <div className="space-y-4 mb-6">
          <div>
            <label className="block text-sm font-medium mb-2">Nombre Completo</label>
            <input
              type="text"
              value={formData.name}
              onChange={(e) => setFormData({...formData, name: e.target.value})}
              className="w-full px-4 py-2 border rounded-lg"
              placeholder="Juan Pérez"
              required
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Teléfono (WhatsApp)</label>
            <input
              type="tel"
              value={formData.phone}
              onChange={(e) => setFormData({...formData, phone: e.target.value})}
              className="w-full px-4 py-2 border rounded-lg"
              placeholder="612345678"
              required
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">¿Dónde trabajas?</label>
            <select
              value={formData.company}
              onChange={(e) => setFormData({...formData, company: e.target.value})}
              className="w-full px-4 py-2 border rounded-lg"
              required
            >
              <option value="">Selecciona...</option>
              <option value="Amazon MAD6">Amazon MAD6</option>
              <option value="Amazon MAD4">Amazon MAD4</option>
              <option value="Arvato">Arvato</option>
              <option value="Otra">Otra</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Turno Habitual</label>
            <select
              value={formData.shift}
              onChange={(e) => setFormData({...formData, shift: e.target.value})}
              className="w-full px-4 py-2 border rounded-lg"
              required
            >
              <option value="">Selecciona...</option>
              <option value="Mañana (6-14h)">Mañana (6-14h)</option>
              <option value="Tarde (14-22h)">Tarde (14-22h)</option>
              <option value="Noche (22-6h)">Noche (22-6h)</option>
              <option value="Rotativo">Rotativo</option>
            </select>
          </div>
        </div>

        <div className="bg-yellow-50 border border-yellow-300 rounded-lg p-3 mb-6">
          <p className="text-xs text-gray-600">
            ⚠️ Tu solicitud será revisada. Te contactaremos por WhatsApp.
          </p>
        </div>

        <button
          type="submit"
          className="w-full py-3 bg-green-600 text-white rounded-lg font-semibold mb-3"
        >
          Enviar Solicitud
        </button>

        <button
          type="button"
          onClick={onBack}
          className="w-full py-3 bg-gray-200 rounded-lg font-semibold"
        >
          Volver
        </button>
      </form>
    </div>
  );
};

export default BookingApp;