'use client';

import { FiCalendar, FiCamera, FiBell } from 'react-icons/fi';
import Link from 'next/link';
import { formatDate } from '@/lib/date-utils';

interface DashboardContentProps {
  user: any;
  stats: {
    totalBookings: number;
    reservedBookings: number;
    confirmedBookings: number;
    completedBookings: number;
    totalLocations: number;
    totalPhotoboxes: number;
    totalDrivers: number;
  };
  recentBookings: any[];
}

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;
  }
};

export default function DashboardContent({ user, stats, recentBookings }: DashboardContentProps) {
  return (
    <div className="max-w-7xl mx-auto">
      <div className="flex justify-between items-center mb-8">
        <h2 className="text-3xl font-bold text-white">Dashboard</h2>
        <button className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-gray-700 to-gray-800 border border-gray-600 text-white rounded-lg hover:from-gray-600 hover:to-gray-700 transition-all">
          <FiBell /> Benachrichtigungen
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg: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">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-400">Gesamt Buchungen</p>
              <p className="text-3xl font-bold text-white mt-2">{stats.totalBookings}</p>
            </div>
            <div className="bg-blue-500/20 p-3 rounded-lg">
              <FiCalendar className="text-2xl text-blue-400" />
            </div>
          </div>
        </div>

        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-400">Reserviert</p>
              <p className="text-3xl font-bold text-yellow-400 mt-2">{stats.reservedBookings}</p>
            </div>
            <div className="bg-yellow-500/20 p-3 rounded-lg">
              <FiCalendar className="text-2xl text-yellow-400" />
            </div>
          </div>
        </div>

        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-400">Bestätigt</p>
              <p className="text-3xl font-bold text-green-400 mt-2">{stats.confirmedBookings}</p>
            </div>
            <div className="bg-green-500/20 p-3 rounded-lg">
              <FiCalendar className="text-2xl text-green-400" />
            </div>
          </div>
        </div>

        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-400">Aktive Fotoboxen</p>
              <p className="text-3xl font-bold text-white mt-2">{stats.totalPhotoboxes}</p>
            </div>
            <div className="bg-purple-500/20 p-3 rounded-lg">
              <FiCamera className="text-2xl text-purple-400" />
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
          <h3 className="text-xl font-bold text-white mb-4">Letzte Buchungen</h3>
          {recentBookings.length === 0 ? (
            <p className="text-gray-400 text-center py-8">Noch keine Buchungen vorhanden</p>
          ) : (
            <div className="space-y-4">
              {recentBookings.map((booking) => (
                <Link 
                  key={booking.id} 
                  href={`/dashboard/bookings/${booking.id}`}
                  className="flex items-center justify-between p-4 bg-gray-700/50 border border-gray-600 rounded-lg hover:bg-gray-700 hover:border-gray-500 transition-all cursor-pointer"
                >
                  <div>
                    <p className="font-semibold text-white">{booking.customerName}</p>
                    <p className="text-sm text-gray-400">{booking.eventCity} - {booking.location.name}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm text-gray-400">
                      {formatDate(booking.eventDate)}
                    </p>
                    <span className={`inline-block px-3 py-1 text-xs font-semibold rounded-full border ${
                      booking.status === 'CONFIRMED' ? 'bg-green-500/20 text-green-400 border-green-500/50' :
                      booking.status === 'RESERVED' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50' :
                      'bg-gray-500/20 text-gray-400 border-gray-500/50'
                    }`}>
                      {getStatusLabel(booking.status)}
                    </span>
                  </div>
                </Link>
              ))}
            </div>
          )}
        </div>

        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
          <h3 className="text-xl font-bold text-white mb-4">Schnellzugriff</h3>
          <div className="space-y-3">
            <Link href="/dashboard/bookings/new" className="block w-full px-4 py-3 bg-gradient-to-r from-red-600 to-pink-600 text-white rounded-lg font-semibold text-center hover:from-red-700 hover:to-pink-700 transition-all shadow-lg">
              Neue Buchung
            </Link>
            <Link href="/dashboard/tours/plan" className="block w-full px-4 py-3 bg-gradient-to-r from-gray-700 to-gray-800 text-white rounded-lg font-semibold text-center hover:from-gray-600 hover:to-gray-700 transition-all">
              Touren planen
            </Link>
            <Link href="/dashboard/photoboxes" className="block w-full px-4 py-3 border border-gray-600 text-gray-300 rounded-lg font-semibold text-center hover:bg-gray-700/50 hover:border-gray-500 transition-all">
              Verfügbarkeit prüfen
            </Link>
          </div>

          <div className="mt-6 pt-6 border-t border-gray-700">
            <h4 className="font-semibold text-white mb-3">Systeminfo</h4>
            <div className="space-y-2 text-sm text-gray-400">
              <div className="flex justify-between">
                <span>Standorte:</span>
                <span className="font-semibold text-white">{stats.totalLocations}</span>
              </div>
              <div className="flex justify-between">
                <span>Fahrer:</span>
                <span className="font-semibold text-white">{stats.totalDrivers}</span>
              </div>
              <div className="flex justify-between">
                <span>Fotoboxen:</span>
                <span className="font-semibold text-white">{stats.totalPhotoboxes}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}