'use client';

import { useState } from 'react';
import { FiPlus, FiEye, FiEdit } from 'react-icons/fi';
import Link from 'next/link';
import { formatDate } from '@/lib/date-utils';

interface BookingsTableProps {
  bookings: any[];
  locations: any[];
  user: any;
}

export default function BookingsTable({ bookings, locations, user }: BookingsTableProps) {
  const [statusFilter, setStatusFilter] = useState('ALL');
  const [locationFilter, setLocationFilter] = useState('ALL');
  const [searchTerm, setSearchTerm] = useState('');

  const filteredBookings = bookings.filter(booking => {
    if (statusFilter !== 'ALL' && booking.status !== statusFilter) return false;
    if (locationFilter !== 'ALL' && booking.location.slug !== locationFilter) return false;
    if (searchTerm) {
      const search = searchTerm.toLowerCase();
      return (
        booking.customerName.toLowerCase().includes(search) ||
        booking.customerEmail.toLowerCase().includes(search) ||
        booking.bookingNumber.toLowerCase().includes(search) ||
        booking.eventCity.toLowerCase().includes(search)
      );
    }
    return true;
  });

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'RESERVED': return 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/50';
      case 'CONFIRMED': return 'bg-green-500/20 text-green-400 border border-green-500/50';
      case 'COMPLETED': return 'bg-blue-500/20 text-blue-400 border border-blue-500/50';
      case 'CANCELLED': return 'bg-red-500/20 text-red-400 border border-red-500/50';
      default: return 'bg-gray-500/20 text-gray-400 border border-gray-500/50';
    }
  };

  const getStatusLabel = (status: string) => {
    switch (status) {
      case 'RESERVED': return 'Reserviert';
      case 'CONFIRMED': return 'Bestätigt';
      case 'COMPLETED': return 'Abgeschlossen';
      case 'CANCELLED': return 'Storniert';
      default: return status;
    }
  };

  const stats = {
    total: bookings.length,
    reserved: bookings.filter(b => b.status === 'RESERVED').length,
    confirmed: bookings.filter(b => b.status === 'CONFIRMED').length,
    completed: bookings.filter(b => b.status === 'COMPLETED').length,
  };

  return (
    <div className="max-w-7xl mx-auto">
      <div className="flex justify-between items-center mb-8">
        <div>
          <h2 className="text-3xl font-bold text-white">Buchungen</h2>
          <p className="text-gray-400 mt-1">Alle Buchungsanfragen im Überblick</p>
        </div>
        <Link
          href="/dashboard/bookings/new"
          className="flex items-center gap-2 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"
        >
          <FiPlus /> Neue Buchung
        </Link>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
          <p className="text-sm text-gray-400">Gesamt</p>
          <p className="text-3xl font-bold text-white mt-2">{stats.total}</p>
        </div>
        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
          <p className="text-sm text-gray-400">Reserviert</p>
          <p className="text-3xl font-bold text-yellow-400 mt-2">{stats.reserved}</p>
        </div>
        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
          <p className="text-sm text-gray-400">Bestätigt</p>
          <p className="text-3xl font-bold text-green-400 mt-2">{stats.confirmed}</p>
        </div>
        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
          <p className="text-sm text-gray-400">Abgeschlossen</p>
          <p className="text-3xl font-bold text-blue-400 mt-2">{stats.completed}</p>
        </div>
      </div>

      <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 flex-col md:flex-row gap-4 mb-6">
          <div className="flex-1">
            <input
              type="text"
              placeholder="Suche nach Name, E-Mail, Buchungsnummer..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(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-red-500 focus:border-transparent placeholder-gray-400"
            />
          </div>
          <div className="flex gap-4">
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
            >
              <option value="ALL">Alle Status</option>
              <option value="RESERVED">Reserviert</option>
              <option value="CONFIRMED">Bestätigt</option>
              <option value="COMPLETED">Abgeschlossen</option>
              <option value="CANCELLED">Storniert</option>
            </select>
            <select
              value={locationFilter}
              onChange={(e) => setLocationFilter(e.target.value)}
              className="px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
            >
              <option value="ALL">Alle Standorte</option>
              {locations.map(loc => (
                <option key={loc.id} value={loc.slug}>{loc.name}</option>
              ))}
            </select>
          </div>
        </div>

        {filteredBookings.length === 0 ? (
          <div className="text-center py-12">
            <p className="text-gray-400">Keine Buchungen gefunden</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-700">
                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Buchungsnr.</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Kunde</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Event</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Standort</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Datum</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Status</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Aktionen</th>
                </tr>
              </thead>
              <tbody>
                {filteredBookings.map(booking => (
                  <tr 
                    key={booking.id} 
                    onClick={() => window.location.href = `/dashboard/bookings/${booking.id}`}
                    className="border-b border-gray-700 hover:bg-gray-700/50 transition-colors cursor-pointer"
                  >
                    <td className="py-4 px-4">
                      <span className="font-mono text-sm text-white">{booking.bookingNumber}</span>
                    </td>
                    <td className="py-4 px-4">
                      <div>
                        <p className="font-semibold text-white">{booking.customerName}</p>
                        <p className="text-sm text-gray-400">{booking.customerEmail}</p>
                      </div>
                    </td>
                    <td className="py-4 px-4">
                      <div>
                        <p className="text-white">{booking.eventCity}</p>
                        {booking.eventLocation && (
                          <p className="text-sm text-gray-400">{booking.eventLocation}</p>
                        )}
                      </div>
                    </td>
                    <td className="py-4 px-4">
                      <span className="text-white">{booking.location.name}</span>
                    </td>
                    <td className="py-4 px-4">
                      <span className="text-white">
                        {formatDate(booking.eventDate)}
                      </span>
                    </td>
                    <td className="py-4 px-4">
                      <span className={`inline-block px-3 py-1 text-xs font-semibold rounded-full ${getStatusColor(booking.status)}`}>
                        {getStatusLabel(booking.status)}
                      </span>
                    </td>
                    <td className="py-4 px-4" onClick={(e) => e.stopPropagation()}>
                      <div className="flex gap-2">
                        <Link
                          href={`/dashboard/bookings/${booking.id}`}
                          className="p-2 text-blue-400 hover:bg-blue-500/20 rounded-lg transition-colors"
                          title="Details anzeigen"
                        >
                          <FiEye />
                        </Link>
                        <Link
                          href={`/dashboard/bookings/${booking.id}`}
                          className="p-2 text-gray-400 hover:bg-gray-700 rounded-lg transition-colors"
                          title="Bearbeiten"
                        >
                          <FiEdit />
                        </Link>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}