'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { FiCalendar, FiTruck, FiCheckSquare, FiSquare, FiMapPin, FiClock, FiSave, FiAlertCircle } from 'react-icons/fi';

interface Driver {
  id: string;
  name: string;
  email: string;
  vehiclePlate: string | null;
  vehicleModel: string | null;
  available: boolean;
}

interface Booking {
  id: string;
  bookingNumber: string;
  customerName: string;
  eventDate: string;
  eventAddress: string;
  eventCity: string;
  eventZip: string;
  setupTimeStart: string;
  setupTimeLatest: string;
  status: string;
}

export default function NewTourPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [creating, setCreating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  const [drivers, setDrivers] = useState<Driver[]>([]);
  const [bookings, setBookings] = useState<Booking[]>([]);
  
  const [tourDate, setTourDate] = useState('');
  const [selectedDriver, setSelectedDriver] = useState('');
  const [selectedBookings, setSelectedBookings] = useState<Set<string>>(new Set());
  const [optimizationType, setOptimizationType] = useState<'fastest' | 'schedule'>('fastest');

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    try {
      setLoading(true);
      setError(null);

      const [driversRes, bookingsRes] = await Promise.all([
        fetch('/api/drivers?available=true'),
        fetch('/api/bookings?status=READY_FOR_ASSIGNMENT,OPEN_FOR_DRIVERS'),
      ]);

      if (!driversRes.ok || !bookingsRes.ok) {
        throw new Error('Fehler beim Laden der Daten');
      }

      const driversData = await driversRes.json();
      const bookingsData = await bookingsRes.json();

      setDrivers(driversData.drivers || []);
      setBookings(bookingsData.bookings || []);
    } catch (err: any) {
      setError(err.message || 'Fehler beim Laden der Daten');
    } finally {
      setLoading(false);
    }
  };

  const toggleBooking = (bookingId: string) => {
    const newSelected = new Set(selectedBookings);
    if (newSelected.has(bookingId)) {
      newSelected.delete(bookingId);
    } else {
      newSelected.add(bookingId);
    }
    setSelectedBookings(newSelected);
  };

  const selectAllOnDate = () => {
    if (!tourDate) return;
    
    const targetDate = new Date(tourDate).toISOString().split('T')[0];
    const newSelected = new Set(selectedBookings);
    
    bookings.forEach((booking) => {
      const bookingDate = new Date(booking.eventDate).toISOString().split('T')[0];
      if (bookingDate === targetDate) {
        newSelected.add(booking.id);
      }
    });
    
    setSelectedBookings(newSelected);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!tourDate) {
      setError('Bitte wähle ein Tourdatum');
      return;
    }
    
    if (selectedBookings.size === 0) {
      setError('Bitte wähle mindestens eine Buchung aus');
      return;
    }

    try {
      setCreating(true);
      setError(null);

      const response = await fetch('/api/tours', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          tourDate,
          driverId: selectedDriver || null,
          bookingIds: Array.from(selectedBookings),
          optimizationType,
        }),
      });

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.error || 'Fehler beim Erstellen der Tour');
      }

      const { tour } = await response.json();
      router.push(`/dashboard/tours/${tour.id}`);
    } catch (err: any) {
      setError(err.message || 'Fehler beim Erstellen der Tour');
      setCreating(false);
    }
  };

  const groupedBookings = bookings.reduce((acc, booking) => {
    const date = new Date(booking.eventDate).toLocaleDateString('de-DE', {
      weekday: 'short',
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    });
    if (!acc[date]) acc[date] = [];
    acc[date].push(booking);
    return acc;
  }, {} as Record<string, Booking[]>);

  if (loading) {
    return (
      <div className="p-8 flex items-center justify-center">
        <div className="text-gray-400">Lade Daten...</div>
      </div>
    );
  }

  return (
    <div className="p-8 max-w-6xl mx-auto">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-white mb-2">Neue Tour erstellen</h1>
        <p className="text-gray-400">Wähle Buchungen aus und weise sie einem Fahrer zu</p>
      </div>

      {error && (
        <div className="mb-6 bg-red-500/10 border border-red-500/50 rounded-lg p-4 flex items-start gap-3">
          <FiAlertCircle className="text-red-400 mt-0.5 flex-shrink-0" size={20} />
          <div className="text-red-400">{error}</div>
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="grid md:grid-cols-2 gap-6">
          <div className="bg-gray-800/50 border border-gray-700 rounded-lg p-6">
            <label className="block text-sm font-medium text-gray-300 mb-2">
              <FiCalendar className="inline mr-2" />
              Tourdatum *
            </label>
            <input
              type="date"
              value={tourDate}
              onChange={(e) => setTourDate(e.target.value)}
              required
              className="w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:border-pink-500 focus:outline-none"
            />
            {tourDate && (
              <button
                type="button"
                onClick={selectAllOnDate}
                className="mt-2 text-sm text-pink-400 hover:text-pink-300"
              >
                Alle Buchungen an diesem Tag auswählen
              </button>
            )}
          </div>

          <div className="bg-gray-800/50 border border-gray-700 rounded-lg p-6">
            <label className="block text-sm font-medium text-gray-300 mb-2">
              <FiTruck className="inline mr-2" />
              Fahrer zuweisen (optional)
            </label>
            <select
              value={selectedDriver}
              onChange={(e) => setSelectedDriver(e.target.value)}
              className="w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:border-pink-500 focus:outline-none"
            >
              <option value="">-- Später zuweisen --</option>
              {drivers.map((driver) => (
                <option key={driver.id} value={driver.id}>
                  {driver.name}
                  {driver.vehiclePlate && ` (${driver.vehiclePlate})`}
                </option>
              ))}
            </select>
            {drivers.length === 0 && (
              <p className="mt-2 text-sm text-yellow-400">
                Keine verfügbaren Fahrer
              </p>
            )}
          </div>
        </div>

        <div className="bg-gray-800/50 border border-gray-700 rounded-lg p-6">
          <label className="block text-sm font-medium text-gray-300 mb-4">
            Route-Optimierung
          </label>
          <div className="flex gap-4">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                value="fastest"
                checked={optimizationType === 'fastest'}
                onChange={(e) => setOptimizationType(e.target.value as 'fastest')}
                className="text-pink-500 focus:ring-pink-500"
              />
              <span className="text-white">Kürzeste Route</span>
              <span className="text-gray-400 text-sm">(Entfernung)</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                value="schedule"
                checked={optimizationType === 'schedule'}
                onChange={(e) => setOptimizationType(e.target.value as 'schedule')}
                className="text-pink-500 focus:ring-pink-500"
              />
              <span className="text-white">Nach Zeitfenster</span>
              <span className="text-gray-400 text-sm">(Aufbauzeiten)</span>
            </label>
          </div>
        </div>

        <div className="bg-gray-800/50 border border-gray-700 rounded-lg p-6">
          <div className="flex items-center justify-between mb-4">
            <label className="text-sm font-medium text-gray-300">
              Buchungen auswählen * ({selectedBookings.size} ausgewählt)
            </label>
            <button
              type="button"
              onClick={() => {
                if (selectedBookings.size === bookings.length) {
                  setSelectedBookings(new Set());
                } else {
                  setSelectedBookings(new Set(bookings.map(b => b.id)));
                }
              }}
              className="text-sm text-pink-400 hover:text-pink-300"
            >
              {selectedBookings.size === bookings.length ? 'Alle abwählen' : 'Alle auswählen'}
            </button>
          </div>

          {bookings.length === 0 ? (
            <div className="text-center py-8 text-gray-400">
              <FiMapPin className="mx-auto mb-2" size={32} />
              <p>Keine verfügbaren Buchungen</p>
              <p className="text-sm mt-1">
                Buchungen müssen den Status "Bereit zur Zuweisung" oder "Offen für Fahrer" haben
              </p>
            </div>
          ) : (
            <div className="space-y-4 max-h-[500px] overflow-y-auto">
              {Object.entries(groupedBookings).map(([date, dateBookings]) => (
                <div key={date}>
                  <div className="text-sm font-medium text-gray-400 mb-2 sticky top-0 bg-gray-800/90 py-2">
                    {date}
                  </div>
                  <div className="space-y-2">
                    {dateBookings.map((booking) => (
                      <div
                        key={booking.id}
                        onClick={() => toggleBooking(booking.id)}
                        className={`
                          p-4 rounded-lg border cursor-pointer transition-all
                          ${selectedBookings.has(booking.id)
                            ? 'bg-pink-500/10 border-pink-500/50'
                            : 'bg-gray-900/50 border-gray-700 hover:border-gray-600'
                          }
                        `}
                      >
                        <div className="flex items-start gap-3">
                          <div className="mt-1">
                            {selectedBookings.has(booking.id) ? (
                              <FiCheckSquare className="text-pink-400" size={20} />
                            ) : (
                              <FiSquare className="text-gray-500" size={20} />
                            )}
                          </div>
                          
                          <div className="flex-1">
                            <div className="flex items-center gap-2 mb-1">
                              <span className="font-medium text-white">
                                {booking.bookingNumber}
                              </span>
                              <span className="text-gray-400">•</span>
                              <span className="text-gray-300">
                                {booking.customerName}
                              </span>
                            </div>
                            
                            <div className="flex items-center gap-4 text-sm text-gray-400">
                              <div className="flex items-center gap-1">
                                <FiMapPin size={14} />
                                {booking.eventCity}
                              </div>
                              <div className="flex items-center gap-1">
                                <FiClock size={14} />
                                {new Date(booking.setupTimeStart).toLocaleTimeString('de-DE', {
                                  hour: '2-digit',
                                  minute: '2-digit',
                                })}
                                {' - '}
                                {new Date(booking.setupTimeLatest).toLocaleTimeString('de-DE', {
                                  hour: '2-digit',
                                  minute: '2-digit',
                                })}
                              </div>
                            </div>
                            
                            <div className="text-sm text-gray-500 mt-1">
                              {booking.eventAddress}, {booking.eventZip} {booking.eventCity}
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="flex gap-4">
          <button
            type="button"
            onClick={() => router.back()}
            disabled={creating}
            className="px-6 py-3 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Abbrechen
          </button>
          <button
            type="submit"
            disabled={creating || selectedBookings.size === 0 || !tourDate}
            className="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-pink-600 to-red-600 text-white rounded-lg hover:from-pink-700 hover:to-red-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg"
          >
            <FiSave />
            {creating ? 'Erstelle Tour...' : 'Tour erstellen'}
          </button>
        </div>
      </form>
    </div>
  );
}