import { useState, useEffect } from 'react';
import { fetchBookings } from '../api';

export default function BookingList() {
  const [email, setEmail] = useState('');
  const [bookings, setBookings] = useState([]);
  const [loading, setLoading] = useState(false);
  const [searched, setSearched] = useState(false);

  const handleSearch = async (e) => {
    e.preventDefault();
    if (!email) return;
    setLoading(true);
    try {
      const data = await fetchBookings(email);
      setBookings(data);
      setSearched(true);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-2xl">
      <h1 className="text-2xl font-bold text-stone-800">My Bookings</h1>
      <p className="text-stone-500 mt-1">Enter your email to view your bookings</p>

      <form onSubmit={handleSearch} className="mt-4 flex gap-3">
        <input
          type="email"
          placeholder="your@email.com"
          value={email}
          onChange={e => setEmail(e.target.value)}
          className="flex-1 border border-stone-300 rounded px-3 py-2 text-sm"
        />
        <button
          type="submit"
          className="bg-amber-600 text-white px-4 py-2 rounded hover:bg-amber-700 transition-colors text-sm"
        >
          Search
        </button>
      </form>

      {loading && <p className="mt-4 text-stone-500">Loading...</p>}

      {searched && !loading && bookings.length === 0 && (
        <p className="mt-4 text-stone-500">No bookings found for this email.</p>
      )}

      {bookings.length > 0 && (
        <div className="mt-6 space-y-4">
          {bookings.map(booking => (
            <div key={booking.id} className="bg-white border border-stone-200 rounded-lg p-4">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="font-semibold text-stone-800">{booking.trek_name}</h3>
                  <p className="text-sm text-stone-500">{booking.destination}</p>
                </div>
                <span className={`text-xs px-2 py-1 rounded ${
                  booking.status === 'confirmed'
                    ? 'bg-green-100 text-green-700'
                    : 'bg-amber-100 text-amber-700'
                }`}>
                  {booking.status}
                </span>
              </div>
              <div className="mt-2 text-sm text-stone-600">
                <p>Group size: {booking.group_size}</p>
                <p>Date: {new Date(booking.booking_date).toLocaleDateString()}</p>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}