'use client';

import { signOut } from 'next-auth/react';
import { FiHome, FiTruck, FiMapPin, FiSettings, FiLogOut, FiCalendar } from 'react-icons/fi';
import Link from 'next/link';

interface DriverDashboardProps {
  user: any;
  myTours: any[];
  availableTours: any[];
}

export default function DriverDashboard({ user, myTours, availableTours }: DriverDashboardProps) {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="flex flex-col md:flex-row">
        <aside className="w-full md:w-64 bg-gray-900 text-white shadow-lg min-h-screen">
          <div className="p-6 border-b border-gray-700">
            <h1 className="text-xl font-bold">
              SaveTheMoment <span className="text-red-500">Atlas</span>
            </h1>
            <p className="text-sm text-gray-400 mt-1">{user?.name}</p>
            <span className="inline-block mt-2 px-3 py-1 bg-gray-800 text-xs rounded-full">Fahrer</span>
          </div>

          <nav className="p-4 space-y-2">
            <Link href="/driver" className="flex items-center gap-3 px-4 py-3 bg-gray-800 rounded-lg font-medium">
              <FiHome /> Übersicht
            </Link>
            <Link href="/driver/tours" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-800 rounded-lg">
              <FiTruck /> Meine Touren
            </Link>
            <Link href="/driver/available" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-800 rounded-lg">
              <FiCalendar /> Verfügbare Touren
            </Link>
            <Link href="/driver/settings" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-800 rounded-lg">
              <FiSettings /> Einstellungen
            </Link>
          </nav>

          <div className="absolute bottom-4 left-4 right-4 md:right-auto md:w-56">
            <button
              onClick={() => signOut({ callbackUrl: '/' })}
              className="flex items-center gap-3 px-4 py-3 hover:bg-gray-800 rounded-lg w-full"
            >
              <FiLogOut /> Abmelden
            </button>
          </div>
        </aside>

        <main className="flex-1 p-4 md:p-8">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-3xl font-bold text-gray-900 mb-8">Fahrer Dashboard</h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
              <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-gray-600">Meine Touren</p>
                    <p className="text-3xl font-bold text-gray-900 mt-2">{myTours.length}</p>
                  </div>
                  <div className="bg-green-100 p-3 rounded-lg">
                    <FiTruck className="text-2xl text-green-600" />
                  </div>
                </div>
              </div>

              <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-gray-600">Verfügbare Touren</p>
                    <p className="text-3xl font-bold text-gray-900 mt-2">{availableTours.length}</p>
                  </div>
                  <div className="bg-blue-100 p-3 rounded-lg">
                    <FiCalendar className="text-2xl text-blue-600" />
                  </div>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                <h3 className="text-xl font-bold text-gray-900 mb-4">Meine nächsten Touren</h3>
                {myTours.length === 0 ? (
                  <p className="text-gray-500 text-center py-8">Keine Touren zugewiesen</p>
                ) : (
                  <div className="space-y-4">
                    {myTours.map((tour) => (
                      <div key={tour.id} className="p-4 bg-green-50 border border-green-200 rounded-lg">
                        <div className="flex justify-between items-start mb-2">
                          <p className="font-semibold text-gray-900">
                            {new Date(tour.tourDate).toLocaleDateString('de-DE', {
                              weekday: 'long',
                              year: 'numeric',
                              month: 'long',
                              day: 'numeric',
                            })}
                          </p>
                          <span className="px-3 py-1 bg-green-600 text-white text-xs rounded-full">
                            {tour.bookings.length} Stops
                          </span>
                        </div>
                        <div className="text-sm text-gray-600 space-y-1">
                          {tour.bookings.slice(0, 3).map((booking: any) => (
                            <div key={booking.id} className="flex items-center gap-2">
                              <FiMapPin className="text-green-600" />
                              <span>{booking.eventCity} - {booking.customerName}</span>
                            </div>
                          ))}
                          {tour.bookings.length > 3 && (
                            <p className="text-xs text-gray-500 ml-6">
                              + {tour.bookings.length - 3} weitere
                            </p>
                          )}
                        </div>
                        <div className="mt-4">
                          <Link
                            href={`/driver/tours/${tour.id}`}
                            className="block w-full text-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
                          >
                            Details & Navigation
                          </Link>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                <h3 className="text-xl font-bold text-gray-900 mb-4">Verfügbare Touren</h3>
                {availableTours.length === 0 ? (
                  <p className="text-gray-500 text-center py-8">Keine verfügbaren Touren</p>
                ) : (
                  <div className="space-y-4">
                    {availableTours.map((tour) => (
                      <div key={tour.id} className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                        <div className="flex justify-between items-start mb-2">
                          <p className="font-semibold text-gray-900">
                            {new Date(tour.tourDate).toLocaleDateString('de-DE', {
                              weekday: 'short',
                              month: 'short',
                              day: 'numeric',
                            })}
                          </p>
                          <span className="px-3 py-1 bg-blue-600 text-white text-xs rounded-full">
                            {tour.bookings.length} Stops
                          </span>
                        </div>
                        <div className="text-sm text-gray-600 mb-3">
                          {tour.bookings.slice(0, 2).map((booking: any) => (
                            <div key={booking.id} className="flex items-center gap-2">
                              <FiMapPin className="text-blue-600" />
                              <span>{booking.eventCity}</span>
                            </div>
                          ))}
                        </div>
                        <button className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                          Tour übernehmen
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}