import React from 'react';
import { Clock, DollarSign, Loader2 } from 'lucide-react';
import { usePublicServices, usePublicBusinessInfo, PublicService } from '../../hooks/useBooking';

interface ServiceSelectionProps {
  selectedService: PublicService | null;
  onSelect: (service: PublicService) => void;
}

export const ServiceSelection: React.FC<ServiceSelectionProps> = ({ selectedService, onSelect }) => {
  const { data: services, isLoading: servicesLoading } = usePublicServices();
  const { data: businessInfo, isLoading: businessLoading } = usePublicBusinessInfo();

  const isLoading = servicesLoading || businessLoading;

  if (isLoading) {
    return (
      <div className="flex justify-center items-center py-12">
        <Loader2 className="w-8 h-8 animate-spin text-indigo-600 dark:text-indigo-400" />
      </div>
    );
  }

  const heading = businessInfo?.service_selection_heading || 'Choose your experience';
  const subheading = businessInfo?.service_selection_subheading || 'Select a service to begin your booking.';

  // Get first photo as image, or use a placeholder
  const getServiceImage = (service: PublicService): string | null => {
    if (service.photos && service.photos.length > 0) {
      return service.photos[0];
    }
    return null;
  };

  // Format price from cents to dollars
  const formatPrice = (cents: number): string => {
    return (cents / 100).toFixed(2);
  };

  return (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{heading}</h2>
        <p className="text-gray-500 dark:text-gray-400 mt-2">{subheading}</p>
      </div>

      {(!services || services.length === 0) && (
        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
          No services available at this time.
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {services?.map((service) => {
          const image = getServiceImage(service);
          const hasImage = !!image;

          return (
            <div
              key={service.id}
              onClick={() => onSelect(service)}
              className={`
                relative overflow-hidden rounded-xl border-2 transition-all duration-200 cursor-pointer group
                ${selectedService?.id === service.id
                  ? 'border-indigo-600 dark:border-indigo-400 bg-indigo-50/50 dark:bg-indigo-900/20 ring-2 ring-indigo-600 dark:ring-indigo-400 ring-offset-2 dark:ring-offset-gray-900'
                  : 'border-gray-200 dark:border-gray-700 hover:border-indigo-300 dark:hover:border-indigo-600 hover:shadow-lg bg-white dark:bg-gray-800'}
              `}
            >
              <div className="flex h-full min-h-[140px]">
                {hasImage && (
                  <div className="w-1/3 bg-gray-100 dark:bg-gray-700 relative">
                    <img
                      src={image}
                      alt={service.name}
                      className="absolute inset-0 w-full h-full object-cover"
                    />
                  </div>
                )}
                <div className={`${hasImage ? 'w-2/3' : 'w-full'} p-5 flex flex-col justify-between`}>
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                      {service.name}
                    </h3>
                    {service.description && (
                      <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
                        {service.description}
                      </p>
                    )}
                  </div>

                  <div className="mt-4 flex items-center justify-between text-sm">
                    <div className="flex items-center text-gray-600 dark:text-gray-400">
                      <Clock className="w-4 h-4 mr-1.5" />
                      {service.duration} mins
                    </div>
                    <div className="flex items-center font-semibold text-gray-900 dark:text-white">
                      <DollarSign className="w-4 h-4" />
                      {formatPrice(service.price_cents)}
                    </div>
                  </div>
                  {service.deposit_amount_cents && service.deposit_amount_cents > 0 && (
                    <div className="mt-2 text-xs text-indigo-600 dark:text-indigo-400 font-medium">
                      Deposit required: ${formatPrice(service.deposit_amount_cents)}
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};
