import React from 'react';
import { Clock } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { TimeSlot } from '@/types/bookings';

interface TimeSlotSelectorProps {
  timeSlots: (TimeSlot & { availableCapacity?: number })[];
  selectedTimeSlot: string;
  onTimeSlotChange: (slotId: string) => void;
  loading?: boolean;
  error?: string | null;
}

const TimeSlotSelector: React.FC<TimeSlotSelectorProps> = ({
  timeSlots,
  selectedTimeSlot,
  onTimeSlotChange,
  loading = false,
  error = null,
}) => {
  const t = useTranslations('bookingForm');

  return (
    <div className="bg-white rounded-xl p-6 shadow-sm">
      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
        <Clock className="w-5 h-5" />
        {t('availableTimes')}
      </h2>
      
      {loading ? (
        <div className="flex justify-center items-center py-8">
          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
          <span className="ml-2 text-gray-600">Loading available times...</span>
        </div>
      ) : error ? (
        <div className="text-center py-8">
          <p className="text-gray-600">{error}</p>
        </div>
      ) : timeSlots.length === 0 ? (
        <div className="text-center py-8">
          <p className="text-gray-600">No available time slots for this date</p>
        </div>
      ) : (
        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
          {timeSlots
            .sort((a, b) => a.start_time.localeCompare(b.start_time))
            .map((slot) => {
            const isAvailable = slot.is_active;
            
            // Format time to display as '11:30—12:30' in Tbilisi timezone (UTC+4)
            const formatTime = (time: string) => {
              // If it's already in HH:MM format, return as is
              if (time.match(/^\d{2}:\d{2}$/)) {
                return time;
              }
              // If it's ISO format or contains date, extract time portion in Tbilisi timezone
              if (time.includes('T') || time.includes(' ') || time.includes('Z')) {
                const date = new Date(time);
                return date.toLocaleTimeString('en-US', { 
                  timeZone: 'Asia/Tbilisi',
                  hour12: false, 
                  hour: '2-digit', 
                  minute: '2-digit' 
                });
              }
              return time;
            };

            const formattedTime = `${formatTime(slot.start_time)}—${formatTime(slot.end_time)}`;
            
            return (
              <button
                key={slot.id}
                type="button"
                disabled={!isAvailable}
                onClick={() => isAvailable && onTimeSlotChange(slot.id)}
                className={`p-3 rounded-lg text-center transition-all ${
                  !isAvailable
                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                    : selectedTimeSlot === slot.id
                    ? 'bg-blue-500 text-white'
                    : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
                }`}
              >
                <div className="font-medium">
                  {formattedTime}
                </div>
                {slot.availableCapacity !== undefined && slot.availableCapacity > 0 && (
                  <div className="text-xs mt-1 text-green-600">
                    {slot.availableCapacity} spots left
                  </div>
                )}
                {!isAvailable && (
                  <div className="text-xs mt-1">Unavailable</div>
                )}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default TimeSlotSelector;