"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Calendar, Check, Clock, X } from 'lucide-react';
import { useState } from 'react';

interface TimeSlot {
  id: string;
  time: string;
  status: 'available' | 'booked' | 'unavailable';
}

interface DayInfo {
  date: string;
  dayName: string;
  slots: TimeSlot[];
}

const mockCalendarData: DayInfo[] = [
  {
    date: '2025-01-20',
    dayName: 'Monday',
    slots: [
      { id: '1', time: '09:00 AM', status: 'available' },
      { id: '2', time: '10:00 AM', status: 'booked' },
      { id: '3', time: '11:00 AM', status: 'available' },
      { id: '4', time: '12:00 PM', status: 'unavailable' },
      { id: '5', time: '01:00 PM', status: 'available' },
      { id: '6', time: '02:00 PM', status: 'booked' },
      { id: '7', time: '03:00 PM', status: 'available' },
      { id: '8', time: '04:00 PM', status: 'available' },
    ]
  },
  {
    date: '2025-01-21',
    dayName: 'Tuesday',
    slots: [
      { id: '9', time: '09:00 AM', status: 'available' },
      { id: '10', time: '10:00 AM', status: 'available' },
      { id: '11', time: '11:00 AM', status: 'booked' },
      { id: '12', time: '12:00 PM', status: 'booked' },
      { id: '13', time: '01:00 PM', status: 'available' },
      { id: '14', time: '02:00 PM', status: 'available' },
      { id: '15', time: '03:00 PM', status: 'unavailable' },
      { id: '16', time: '04:00 PM', status: 'booked' },
    ]
  },
  {
    date: '2025-01-22',
    dayName: 'Wednesday',
    slots: [
      { id: '17', time: '09:00 AM', status: 'unavailable' },
      { id: '18', time: '10:00 AM', status: 'available' },
      { id: '19', time: '11:00 AM', status: 'available' },
      { id: '20', time: '12:00 PM', status: 'available' },
      { id: '21', time: '01:00 PM', status: 'booked' },
      { id: '22', time: '02:00 PM', status: 'available' },
      { id: '23', time: '03:00 PM', status: 'available' },
      { id: '24', time: '04:00 PM', status: 'unavailable' },
    ]
  },
  {
    date: '2025-01-23',
    dayName: 'Thursday',
    slots: [
      { id: '25', time: '09:00 AM', status: 'available' },
      { id: '26', time: '10:00 AM', status: 'booked' },
      { id: '27', time: '11:00 AM', status: 'available' },
      { id: '28', time: '12:00 PM', status: 'available' },
      { id: '29', time: '01:00 PM', status: 'available' },
      { id: '30', time: '02:00 PM', status: 'unavailable' },
      { id: '31', time: '03:00 PM', status: 'available' },
      { id: '32', time: '04:00 PM', status: 'booked' },
    ]
  },
  {
    date: '2025-01-24',
    dayName: 'Friday',
    slots: [
      { id: '33', time: '09:00 AM', status: 'available' },
      { id: '34', time: '10:00 AM', status: 'available' },
      { id: '35', time: '11:00 AM', status: 'booked' },
      { id: '36', time: '12:00 PM', status: 'available' },
      { id: '37', time: '01:00 PM', status: 'unavailable' },
      { id: '38', time: '02:00 PM', status: 'available' },
      { id: '39', time: '03:00 PM', status: 'booked' },
      { id: '40', time: '04:00 PM', status: 'available' },
    ]
  },
];

function TimeSlotButton({ slot, onSelect }: { slot: TimeSlot; onSelect: (slot: TimeSlot) => void }) {
  const getStatusClasses = () => {
    switch (slot.status) {
      case 'available':
        return 'bg-green-500 hover:bg-green-600 text-white cursor-pointer';
      case 'booked':
        return 'bg-red-500 text-white cursor-not-allowed opacity-60';
      case 'unavailable':
        return 'bg-gray-400 text-white cursor-not-allowed opacity-50';
      default:
        return '';
    }
  };

  const getStatusIcon = () => {
    switch (slot.status) {
      case 'available':
        return <Check className="w-4 h-4" />;
      case 'booked':
        return <X className="w-4 h-4" />;
      case 'unavailable':
        return <Clock className="w-4 h-4" />;
      default:
        return null;
    }
  };

  return (
    <button
      onClick={() => slot.status === 'available' && onSelect(slot)}
      disabled={slot.status !== 'available'}
      className={`px-4 py-2 rounded-lg font-medium transition-all flex items-center justify-center gap-2 ${getStatusClasses()}`}
    >
      {slot.time}
      {getStatusIcon()}
    </button>
  );
}

export default function AppointmentsPage() {
  const [selectedSlot, setSelectedSlot] = useState<TimeSlot | null>(null);
  const [selectedDay, setSelectedDay] = useState<DayInfo | null>(mockCalendarData[0]);

  const handleSlotSelect = (slot: TimeSlot) => {
    setSelectedSlot(slot);
  };

  const availableCount = selectedDay?.slots.filter(s => s.status === 'available').length || 0;
  const bookedCount = selectedDay?.slots.filter(s => s.status === 'booked').length || 0;
  const unavailableCount = selectedDay?.slots.filter(s => s.status === 'unavailable').length || 0;

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Radiance Beauty"
          navItems={[
            { name: "Gallery", id: "gallery" },
            { name: "Services", id: "services" },
            { name: "Appointments", id: "/appointments" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Appointment", href: "/appointments" }}
          animateOnLoad={true}
        />
      </div>

      <main className="min-h-screen pt-24 pb-16">
        <div className="max-w-6xl mx-auto px-4 md:px-6">
          {/* Header */}
          <div className="text-center mb-12">
            <h1 className="text-4xl md:text-5xl font-light mb-4">Appointment Availability</h1>
            <p className="text-lg text-foreground/70">Browse available time slots and book your beauty session</p>
          </div>

          {/* Calendar Legend */}
          <div className="mb-12 flex flex-wrap gap-4 justify-center">
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 rounded bg-green-500"></div>
              <span className="text-sm font-medium">Available</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 rounded bg-red-500"></div>
              <span className="text-sm font-medium">Booked</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 rounded bg-gray-400"></div>
              <span className="text-sm font-medium">Unavailable</span>
            </div>
          </div>

          {/* Day Selector */}
          <div className="mb-8 overflow-x-auto">
            <div className="flex gap-3 pb-2">
              {mockCalendarData.map((day) => (
                <button
                  key={day.date}
                  onClick={() => setSelectedDay(day)}
                  className={`px-6 py-3 rounded-lg font-medium whitespace-nowrap transition-all ${
                    selectedDay?.date === day.date
                      ? 'bg-primary-cta text-white'
                      : 'bg-background-accent text-foreground hover:bg-opacity-80'
                  }`}
                >
                  <div className="text-sm">{day.dayName}</div>
                  <div className="text-xs opacity-75">{day.date}</div>
                </button>
              ))}
            </div>
          </div>

          {/* Time Slots Grid */}
          {selectedDay && (
            <div className="bg-card rounded-xl p-8 mb-8">
              <div className="mb-6">
                <h2 className="text-2xl font-light mb-4">Available Times - {selectedDay.dayName}, {selectedDay.date}</h2>
                <div className="flex gap-6 flex-wrap text-sm">
                  <div>
                    <span className="font-medium">Available:</span>
                    <span className="ml-2 text-green-600">{availableCount}</span>
                  </div>
                  <div>
                    <span className="font-medium">Booked:</span>
                    <span className="ml-2 text-red-600">{bookedCount}</span>
                  </div>
                  <div>
                    <span className="font-medium">Unavailable:</span>
                    <span className="ml-2 text-gray-500">{unavailableCount}</span>
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                {selectedDay.slots.map((slot) => (
                  <TimeSlotButton
                    key={slot.id}
                    slot={slot}
                    onSelect={handleSlotSelect}
                  />
                ))}
              </div>
            </div>
          )}

          {/* Selected Slot Info */}
          {selectedSlot && (
            <div className="bg-green-50 border-2 border-green-500 rounded-xl p-6 text-center">
              <Check className="w-8 h-8 text-green-600 mx-auto mb-3" />
              <h3 className="text-xl font-medium text-green-900 mb-2">Slot Selected</h3>
              <p className="text-green-800 mb-4">
                {selectedDay?.dayName}, {selectedDay?.date} at {selectedSlot.time}
              </p>
              <button className="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-medium transition-colors">
                Confirm Booking
              </button>
            </div>
          )}
        </div>
      </main>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Radiance Beauty"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms & Conditions", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}