import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import type { ServiceCatalogProps } from '../../types';
import { usePublicServices } from '../../../hooks/useBooking';
import { Loader2, Clock, DollarSign } from 'lucide-react';

export const ServiceCatalog: ComponentConfig<ServiceCatalogProps> = {
  label: 'Service Catalog',
  fields: {
    layout: {
      type: 'select',
      options: [
        { label: 'Cards', value: 'cards' },
        { label: 'List', value: 'list' },
      ],
    },
    showCategoryFilter: {
      type: 'radio',
      label: 'Show Category Filter',
      options: [
        { label: 'No', value: false },
        { label: 'Yes', value: true },
      ],
    },
    categoryId: {
      type: 'text',
      label: 'Filter by Category ID (optional)',
    },
    bookButtonText: {
      type: 'text',
      label: 'Book Button Text',
    },
  },
  defaultProps: {
    layout: 'cards',
    showCategoryFilter: false,
    bookButtonText: 'Book Now',
  },
  render: ({ layout, bookButtonText }) => {
    return <ServiceCatalogDisplay layout={layout} bookButtonText={bookButtonText} />;
  },
};

// Separate component for hooks
function ServiceCatalogDisplay({
  layout,
  bookButtonText,
}: {
  layout: 'cards' | 'list';
  bookButtonText: string;
}) {
  const { data: services, isLoading, error } = usePublicServices();

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

  if (error) {
    return (
      <div className="text-center py-12 text-gray-600 dark:text-gray-400">
        Unable to load services. Please try again later.
      </div>
    );
  }

  if (!services || services.length === 0) {
    return (
      <div className="text-center py-12 text-gray-600 dark:text-gray-400">
        No services available.
      </div>
    );
  }

  if (layout === 'list') {
    return (
      <div className="space-y-4">
        {services.map((service: any) => (
          <div
            key={service.id}
            className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow"
          >
            <div className="flex-1">
              <h3 className="font-semibold text-gray-900 dark:text-white">
                {service.name}
              </h3>
              {service.description && (
                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  {service.description}
                </p>
              )}
              <div className="flex items-center gap-4 mt-2 text-sm text-gray-500 dark:text-gray-400">
                <span className="flex items-center gap-1">
                  <Clock className="w-4 h-4" />
                  {service.duration} min
                </span>
                <span className="flex items-center gap-1">
                  <DollarSign className="w-4 h-4" />
                  ${(service.price_cents / 100).toFixed(2)}
                </span>
              </div>
            </div>
            <a
              href={`/book?service=${service.id}`}
              className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors text-sm font-medium"
            >
              {bookButtonText}
            </a>
          </div>
        ))}
      </div>
    );
  }

  // Cards layout
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {services.map((service: any) => (
        <div
          key={service.id}
          className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-lg transition-shadow"
        >
          {service.photos?.[0] && (
            <div className="aspect-video bg-gray-100 dark:bg-gray-700">
              <img
                src={service.photos[0]}
                alt={service.name}
                className="w-full h-full object-cover"
              />
            </div>
          )}
          <div className="p-6">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
              {service.name}
            </h3>
            {service.description && (
              <p className="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">
                {service.description}
              </p>
            )}
            <div className="flex items-center justify-between mb-4">
              <span className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1">
                <Clock className="w-4 h-4" />
                {service.duration} min
              </span>
              <span className="text-lg font-bold text-indigo-600 dark:text-indigo-400">
                ${(service.price_cents / 100).toFixed(2)}
              </span>
            </div>
            <a
              href={`/book?service=${service.id}`}
              className="block w-full py-2 px-4 bg-indigo-600 text-white text-center rounded-lg hover:bg-indigo-700 transition-colors font-medium"
            >
              {bookButtonText}
            </a>
          </div>
        </div>
      ))}
    </div>
  );
}

export default ServiceCatalog;
