'use client';

import Link from 'next/link';
import { useState, useEffect } from 'react';
import { FiCalendar, FiMapPin, FiUser, FiMail, FiPhone, FiCamera, FiTruck, FiClock, FiPlus, FiX, FiCheck, FiStar, FiFileText, FiDollarSign, FiRefreshCw, FiEdit } from 'react-icons/fi';

interface BookingDetailProps {
  booking: any;
  emails: any[];
  user: any;
}

export default function BookingDetail({ booking, emails, user }: BookingDetailProps) {
  const [setupWindows, setSetupWindows] = useState<any[]>([]);
  const [showAddWindow, setShowAddWindow] = useState(false);
  const [newWindow, setNewWindow] = useState({
    setupDate: '',
    setupTimeStart: '',
    setupTimeEnd: '',
    preferred: false,
    notes: '',
  });
  const [selectedStatus, setSelectedStatus] = useState(booking.status);
  const [syncing, setSyncing] = useState(false);
  const [actionMessage, setActionMessage] = useState('');

  useEffect(() => {
    fetchSetupWindows();
  }, [booking.id]);

  const fetchSetupWindows = async () => {
    try {
      const res = await fetch(`/api/bookings/${booking.id}/setup-windows`);
      const data = await res.json();
      setSetupWindows(data.setupWindows || []);
    } catch (error) {
      console.error('Failed to fetch setup windows:', error);
    }
  };

  const handleStatusChange = async (newStatus: string) => {
    if (!confirm(`Status wirklich zu "${getStatusLabel(newStatus)}" ändern?`)) {
      setSelectedStatus(booking.status);
      return;
    }

    try {
      const res = await fetch(`/api/bookings/${booking.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: newStatus }),
      });

      if (res.ok) {
        setActionMessage('✅ Status erfolgreich geändert');
        setTimeout(() => window.location.reload(), 1500);
      } else {
        alert('Fehler beim Ändern des Status');
        setSelectedStatus(booking.status);
      }
    } catch (error) {
      console.error('Status update error:', error);
      alert('Fehler beim Ändern des Status');
      setSelectedStatus(booking.status);
    }
  };

  const handleCalendarSync = async () => {
    setSyncing(true);
    setActionMessage('');
    
    try {
      const res = await fetch('/api/calendar/sync', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'sync-booking', bookingId: booking.id }),
      });

      const data = await res.json();
      
      if (data.success) {
        setActionMessage('✅ Mit Kalender synchronisiert');
        setTimeout(() => setActionMessage(''), 3000);
      } else {
        setActionMessage('❌ Sync fehlgeschlagen: ' + data.error);
      }
    } catch (error) {
      console.error('Calendar sync error:', error);
      setActionMessage('❌ Sync fehlgeschlagen');
    } finally {
      setSyncing(false);
    }
  };

  const handleGenerateContract = async () => {
    setActionMessage('📄 Vertrag wird generiert...');
    
    try {
      const res = await fetch(`/api/bookings/${booking.id}/contract`, {
        method: 'POST',
      });

      if (res.ok) {
        const data = await res.json();
        
        if (data.contractUrl) {
          setActionMessage('✅ Vertrag generiert! Wird heruntergeladen...');
          
          const downloadRes = await fetch(data.contractUrl);
          const blob = await downloadRes.blob();
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = data.filename;
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);
          
          setTimeout(() => setActionMessage(''), 3000);
        }
      } else {
        const error = await res.json();
        setActionMessage('❌ Fehler: ' + (error.error || 'Unbekannter Fehler'));
      }
    } catch (error: any) {
      console.error('Contract generation error:', error);
      setActionMessage('❌ Fehler beim Generieren');
    }
  };

  const handleGenerateInvoice = async () => {
    setActionMessage('💰 Rechnung wird erstellt...');
    
    try {
      const res = await fetch(`/api/bookings/${booking.id}/invoice`, {
        method: 'POST',
      });

      if (res.ok) {
        const data = await res.json();
        setActionMessage('✅ Rechnung in lexoffice erstellt');
        if (data.invoiceUrl) {
          window.open(data.invoiceUrl, '_blank');
        }
        setTimeout(() => setActionMessage(''), 3000);
      } else {
        setActionMessage('❌ Fehler beim Erstellen');
      }
    } catch (error) {
      console.error('Invoice generation error:', error);
      setActionMessage('❌ Fehler beim Erstellen');
    }
  };

  const handleSendContract = async () => {
    if (!booking.contractGenerated) {
      alert('Bitte generieren Sie zuerst den Vertrag!');
      return;
    }

    if (!confirm(`Vertrag wirklich an ${booking.customerEmail} senden?`)) {
      return;
    }

    setActionMessage('📧 Vertrag wird versendet...');
    
    try {
      const res = await fetch(`/api/bookings/${booking.id}/contract/send`, {
        method: 'POST',
      });

      const data = await res.json();
      
      if (data.success) {
        setActionMessage('✅ Vertrag per E-Mail versendet!');
        setTimeout(() => window.location.reload(), 2000);
      } else {
        setActionMessage('❌ ' + (data.error || 'Fehler beim Versenden'));
      }
    } catch (error) {
      console.error('Contract send error:', error);
      setActionMessage('❌ Fehler beim Versenden');
    }
  };

  const handleAddWindow = async (e: React.FormEvent) => {
    e.preventDefault();
    
    const setupDateObj = new Date(newWindow.setupDate);
    const [startHours, startMinutes] = newWindow.setupTimeStart.split(':');
    const [endHours, endMinutes] = newWindow.setupTimeEnd.split(':');
    
    const setupTimeStart = new Date(setupDateObj);
    setupTimeStart.setHours(parseInt(startHours), parseInt(startMinutes), 0, 0);
    
    const setupTimeEnd = new Date(setupDateObj);
    setupTimeEnd.setHours(parseInt(endHours), parseInt(endMinutes), 0, 0);

    try {
      const res = await fetch(`/api/bookings/${booking.id}/setup-windows`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          setupDate: setupDateObj.toISOString(),
          setupTimeStart: setupTimeStart.toISOString(),
          setupTimeEnd: setupTimeEnd.toISOString(),
          preferred: newWindow.preferred,
          notes: newWindow.notes,
        }),
      });

      if (res.ok) {
        setShowAddWindow(false);
        setNewWindow({
          setupDate: '',
          setupTimeStart: '',
          setupTimeEnd: '',
          preferred: false,
          notes: '',
        });
        fetchSetupWindows();
      } else {
        alert('Fehler beim Hinzufügen des Zeitfensters');
      }
    } catch (error) {
      console.error('Failed to add setup window:', error);
      alert('Fehler beim Hinzufügen des Zeitfensters');
    }
  };

  const handleDeleteWindow = async (windowId: string) => {
    if (!confirm('Zeitfenster wirklich löschen?')) return;

    try {
      const res = await fetch(`/api/bookings/${booking.id}/setup-windows?windowId=${windowId}`, {
        method: 'DELETE',
      });

      if (res.ok) {
        fetchSetupWindows();
      } else {
        alert('Fehler beim Löschen');
      }
    } catch (error) {
      console.error('Failed to delete setup window:', error);
      alert('Fehler beim Löschen');
    }
  };

  const handleTogglePreferred = async (windowId: string, currentPreferred: boolean) => {
    try {
      const res = await fetch(`/api/bookings/${booking.id}/setup-windows`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          windowId,
          preferred: !currentPreferred,
        }),
      });

      if (res.ok) {
        fetchSetupWindows();
      }
    } catch (error) {
      console.error('Failed to update setup window:', error);
    }
  };
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'RESERVED': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50';
      case 'CONFIRMED': return 'bg-green-500/20 text-green-400 border-green-500/50';
      case 'COMPLETED': return 'bg-blue-500/20 text-blue-400 border-blue-500/50';
      case 'CANCELLED': return 'bg-red-500/20 text-red-400 border-red-500/50';
      default: return 'bg-gray-500/20 text-gray-400 border-gray-500/50';
    }
  };

  const getStatusLabel = (status: string) => {
    const labels: any = {
      RESERVED: 'Reserviert',
      CONFIRMED: 'Bestätigt',
      COMPLETED: 'Abgeschlossen',
      CANCELLED: 'Storniert',
    };
    return labels[status] || status;
  };

  return (
    <div className="max-w-6xl mx-auto">
      <div className="mb-8">
        <Link href="/dashboard/bookings" className="text-sm text-gray-400 hover:text-gray-300 mb-2 inline-block transition-colors">
          ← Zurück zu Buchungen
        </Link>
        <h2 className="text-3xl font-bold text-white">Buchung {booking.bookingNumber}</h2>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          {/* Status Card */}
          <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-xl font-bold text-white">Status</h3>
              <div className={`px-4 py-2 border-2 rounded-lg font-semibold ${getStatusColor(booking.status)}`}>
                {getStatusLabel(booking.status)}
              </div>
            </div>
          </div>

          {/* Customer Data Card */}
          <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6">
            <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
              <FiUser /> Kundendaten
            </h3>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1">Name</label>
                <p className="text-white">{booking.customerName}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1">E-Mail</label>
                <p className="text-white">{booking.customerEmail}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1">Telefon</label>
                <p className="text-white">{booking.customerPhone}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1">Rechnungsart</label>
                <p className="text-white">{booking.invoiceType === 'PRIVATE' ? 'Privat' : 'Firma'}</p>
              </div>
            </div>
          </div>

          {/* Event Details Card */}
          <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6">
            <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
              <FiCalendar /> Event-Details
            </h3>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1">Datum</label>
                <p className="text-white">{new Date(booking.eventDate).toLocaleDateString('de-DE')}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1">Standort</label>
                <p className="text-white">{booking.location?.name || 'N/A'}</p>
              </div>
              <div className="col-span-2">
                <label className="block text-sm font-medium text-gray-300 mb-1">Event-Adresse</label>
                <p className="text-white">{booking.eventAddress}</p>
                <p className="text-gray-400 text-sm">{booking.eventZip} {booking.eventCity}</p>
              </div>
              <div className="col-span-2">
                <label className="block text-sm font-medium text-gray-300 mb-1">Event-Location</label>
                <p className="text-white">{booking.eventLocation}</p>
              </div>
            </div>
          </div>

          {/* Setup Windows Card */}
          <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-xl font-bold text-white flex items-center gap-2">
                <FiClock /> Aufbau-Zeitfenster
              </h3>
              <button
                onClick={() => setShowAddWindow(true)}
                className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-all flex items-center gap-1"
              >
                <FiPlus size={14} /> Hinzufügen
              </button>
            </div>

            {setupWindows.length === 0 ? (
              <p className="text-gray-400 text-center py-4">
                Keine Aufbau-Zeitfenster definiert. Standard-Aufbauzeit am Event-Tag.
              </p>
            ) : (
              <div className="space-y-3">
                {setupWindows.map((window: any) => (
                  <div
                    key={window.id}
                    className={`p-4 rounded-lg border-2 ${
                      window.selected
                        ? 'bg-green-500/10 border-green-500/50'
                        : window.preferred
                        ? 'bg-purple-500/10 border-purple-500/50'
                        : 'bg-gray-700/30 border-gray-600'
                    }`}
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <p className="text-white font-semibold">
                            {new Date(window.setupDate).toLocaleDateString('de-DE')}
                          </p>
                          {window.selected && (
                            <span className="px-2 py-0.5 bg-green-600 text-white text-xs rounded-full flex items-center gap-1">
                              <FiCheck size={12} /> Ausgewählt
                            </span>
                          )}
                          {window.preferred && !window.selected && (
                            <span className="px-2 py-0.5 bg-purple-600 text-white text-xs rounded-full flex items-center gap-1">
                              <FiStar size={12} /> Bevorzugt
                            </span>
                          )}
                        </div>
                        <p className="text-gray-300 text-sm">
                          {new Date(window.setupTimeStart).toLocaleTimeString('de-DE', {
                            hour: '2-digit',
                            minute: '2-digit',
                          })}{' '}
                          -{' '}
                          {new Date(window.setupTimeEnd).toLocaleTimeString('de-DE', {
                            hour: '2-digit',
                            minute: '2-digit',
                          })}
                        </p>
                        {window.notes && (
                          <p className="text-gray-400 text-xs mt-1">{window.notes}</p>
                        )}
                      </div>
                      <div className="flex items-center gap-2">
                        <button
                          onClick={() => handleTogglePreferred(window.id, window.preferred)}
                          className={`p-1.5 rounded transition-colors ${
                            window.preferred
                              ? 'text-purple-400 hover:text-purple-300'
                              : 'text-gray-500 hover:text-purple-400'
                          }`}
                          title={window.preferred ? 'Als bevorzugt entfernen' : 'Als bevorzugt markieren'}
                        >
                          <FiStar size={16} fill={window.preferred ? 'currentColor' : 'none'} />
                        </button>
                        <button
                          onClick={() => handleDeleteWindow(window.id)}
                          className="p-1.5 text-red-400 hover:text-red-300 rounded transition-colors"
                          title="Löschen"
                        >
                          <FiX size={16} />
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {showAddWindow && (
              <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50">
                <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl shadow-2xl max-w-lg w-full p-6 border border-gray-700">
                  <h3 className="text-xl font-bold text-white mb-4">Aufbau-Zeitfenster hinzufügen</h3>
                  <form onSubmit={handleAddWindow} className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">
                        Aufbau-Datum *
                      </label>
                      <input
                        type="date"
                        value={newWindow.setupDate}
                        onChange={(e) => setNewWindow({ ...newWindow, setupDate: e.target.value })}
                        className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-blue-500"
                        required
                      />
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-300 mb-2">
                          Start-Zeit *
                        </label>
                        <input
                          type="time"
                          value={newWindow.setupTimeStart}
                          onChange={(e) => setNewWindow({ ...newWindow, setupTimeStart: e.target.value })}
                          className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-blue-500"
                          required
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-300 mb-2">
                          End-Zeit *
                        </label>
                        <input
                          type="time"
                          value={newWindow.setupTimeEnd}
                          onChange={(e) => setNewWindow({ ...newWindow, setupTimeEnd: e.target.value })}
                          className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-blue-500"
                          required
                        />
                      </div>
                    </div>

                    <div>
                      <label className="flex items-center gap-2 text-gray-300 cursor-pointer">
                        <input
                          type="checkbox"
                          checked={newWindow.preferred}
                          onChange={(e) => setNewWindow({ ...newWindow, preferred: e.target.checked })}
                          className="w-4 h-4"
                        />
                        <span className="text-sm">Als bevorzugtes Zeitfenster markieren</span>
                      </label>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">
                        Notizen (optional)
                      </label>
                      <textarea
                        value={newWindow.notes}
                        onChange={(e) => setNewWindow({ ...newWindow, notes: e.target.value })}
                        className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-blue-500"
                        rows={2}
                        placeholder="z.B. Besondere Zugangshinweise..."
                      />
                    </div>

                    <div className="flex gap-3 pt-2">
                      <button
                        type="button"
                        onClick={() => {
                          setShowAddWindow(false);
                          setNewWindow({
                            setupDate: '',
                            setupTimeStart: '',
                            setupTimeEnd: '',
                            preferred: false,
                            notes: '',
                          });
                        }}
                        className="flex-1 px-4 py-2 bg-gray-700 text-gray-300 rounded-lg hover:bg-gray-600 font-medium"
                      >
                        Abbrechen
                      </button>
                      <button
                        type="submit"
                        className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium"
                      >
                        Hinzufügen
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            )}
          </div>

          {/* Notes Card */}
          {booking.notes && (
            <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6">
              <h3 className="text-xl font-bold text-white mb-4">Notizen</h3>
              <p className="text-gray-300 whitespace-pre-wrap">{booking.notes}</p>
            </div>
          )}

          {/* Email Correspondence Card */}
          <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-xl font-bold text-white flex items-center gap-2">
                <FiMail /> E-Mail-Korrespondenz
              </h3>
              <span className="text-sm text-gray-400">{emails.length} E-Mails</span>
            </div>

            {emails.length === 0 ? (
              <p className="text-gray-400 text-center py-4">Keine E-Mails vorhanden</p>
            ) : (
              <div className="space-y-4 max-h-96 overflow-y-auto">
                {emails.map((email: any) => (
                  <div key={email.id} className="bg-gray-700/30 rounded-lg p-4 border border-gray-600">
                    <div className="flex items-start justify-between mb-2">
                      <div className="flex-1">
                        <p className="text-white font-semibold">{email.subject}</p>
                        <p className="text-sm text-gray-400">
                          Von: {email.fromAddress} • {new Date(email.receivedAt).toLocaleDateString('de-DE', {
                            day: '2-digit',
                            month: '2-digit',
                            year: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit'
                          })}
                        </p>
                      </div>
                    </div>
                    <div className="text-sm text-gray-300 mt-2 line-clamp-3">
                      {email.textContent?.substring(0, 200)}...
                    </div>
                    <button className="mt-2 text-sm text-red-400 hover:text-red-300 transition-colors">
                      Details anzeigen →
                    </button>
                  </div>
                ))}
              </div>
            )}

            <div className="mt-4 pt-4 border-t border-gray-600">
              <button className="w-full px-4 py-2 bg-gradient-to-r from-red-600 to-pink-600 text-white rounded-lg hover:from-red-700 hover:to-pink-700 shadow-lg transition-all font-medium">
                <FiMail className="inline mr-2" />
                Neue E-Mail schreiben
              </button>
            </div>
          </div>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Photobox Card */}
          <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6">
            <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
              <FiCamera /> Fotobox
            </h3>
            <div className="space-y-2">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1">Modell</label>
                <p className="text-white">{booking.photobox?.model || 'N/A'}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1">Seriennummer</label>
                <p className="text-white">{booking.photobox?.serialNumber || 'N/A'}</p>
              </div>
            </div>
          </div>

          {/* Price Card */}
          <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6">
            <h3 className="text-xl font-bold text-white mb-4">Preis</h3>
            <p className="text-3xl font-bold text-green-400">{booking.calculatedPrice} €</p>
          </div>

          {/* Actions Card */}
          <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6">
            <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
              <FiEdit /> Aktionen
            </h3>
            
            {actionMessage && (
              <div className="mb-4 p-3 bg-blue-500/20 border border-blue-500/50 rounded-lg text-sm text-blue-300">
                {actionMessage}
              </div>
            )}

            <div className="space-y-3">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">Status ändern</label>
                <select
                  value={selectedStatus}
                  onChange={(e) => {
                    setSelectedStatus(e.target.value);
                    handleStatusChange(e.target.value);
                  }}
                  className="w-full px-3 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 text-sm"
                >
                  <option value="RESERVED">Reserviert</option>
                  <option value="CONFIRMED">Bestätigt</option>
                  <option value="COMPLETED">Abgeschlossen</option>
                  <option value="CANCELLED">Storniert</option>
                </select>
              </div>

              <button
                onClick={handleCalendarSync}
                disabled={syncing}
                className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
              >
                {syncing ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                    Synchronisiere...
                  </>
                ) : (
                  <>
                    <FiRefreshCw />
                    Kalender-Sync
                  </>
                )}
              </button>

              <button
                onClick={handleGenerateContract}
                className="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2"
              >
                <FiFileText />
                Vertrag generieren
              </button>

              {booking.contractGenerated && (
                <button
                  onClick={handleSendContract}
                  className="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2"
                >
                  <FiMail />
                  Vertrag per E-Mail senden
                </button>
              )}

              <button
                onClick={handleGenerateInvoice}
                className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2"
              >
                <FiDollarSign />
                Rechnung erstellen
              </button>
            </div>
          </div>

          {/* Tour Card */}
          {booking.tour && (
            <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6">
              <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
                <FiTruck /> Tour
              </h3>
              <div>
                {booking.tour.driver ? (
                  <p className="text-white">Fahrer: {booking.tour.driver.name}</p>
                ) : (
                  <p className="text-gray-400">Noch kein Fahrer zugewiesen</p>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}