import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Clock,
  DollarSign,
  Image as ImageIcon,
  CheckCircle2,
  AlertCircle
} from 'lucide-react';
import { Service, Business } from '../../types';
import Badge from '../ui/Badge';

interface CustomerPreviewProps {
  service: Service | null; // Null when creating new
  business: Business;
  previewData?: Partial<Service>; // Live form data
}

export const CustomerPreview: React.FC<CustomerPreviewProps> = ({
  service,
  business,
  previewData
}) => {
  const { t } = useTranslation();

  // Merge existing service data with live form preview
  const data = {
    ...service,
    ...previewData,
    price: previewData?.price ?? service?.price ?? 0,
    name: previewData?.name || service?.name || 'New Service',
    description: previewData?.description || service?.description || 'Service description will appear here...',
    durationMinutes: previewData?.durationMinutes ?? service?.durationMinutes ?? 30,
    photos: previewData?.photos ?? service?.photos ?? [],
  };

  // Get the first photo for the cover image
  const coverPhoto = data.photos && data.photos.length > 0 ? data.photos[0] : null;

  const formatPrice = (price: number | string) => {
    const numPrice = typeof price === 'string' ? parseFloat(price) : price;
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(numPrice);
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between mb-2">
        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          Customer Preview
        </h3>
        <Badge variant="info" size="sm">Live Preview</Badge>
      </div>

      {/* Lumina-style Horizontal Card */}
      <div className="relative overflow-hidden rounded-xl border-2 border-brand-600 bg-brand-50/50 dark:bg-brand-900/20 ring-2 ring-brand-600 ring-offset-2 dark:ring-offset-gray-900 transition-all duration-200">
        <div className="flex h-full min-h-[180px]">
          {/* Image Section - 1/3 width */}
          <div className="w-1/3 bg-gray-100 dark:bg-gray-700 relative">
            {coverPhoto ? (
              <img
                src={coverPhoto}
                alt={data.name}
                className="absolute inset-0 w-full h-full object-cover"
              />
            ) : (
              <div
                className="absolute inset-0 flex items-center justify-center"
                style={{
                  background: `linear-gradient(135deg, var(--color-brand-600, ${business.primaryColor || '#2563eb'}), var(--color-brand-400, ${business.secondaryColor || '#0ea5e9'}))`
                }}
              >
                <ImageIcon className="w-12 h-12 text-white/30" />
              </div>
            )}
          </div>

          {/* Content Section - 2/3 width */}
          <div className="w-2/3 p-5 flex flex-col justify-between">
            <div>
              {/* Category Badge */}
              <div className="flex justify-between items-start">
                <span className="inline-flex items-center rounded-full bg-brand-100 dark:bg-brand-900/50 px-2.5 py-0.5 text-xs font-medium text-brand-800 dark:text-brand-300">
                  {data.category?.name || 'General'}
                </span>
                {data.variable_pricing && (
                  <span className="inline-flex items-center rounded-full bg-purple-100 dark:bg-purple-900/50 px-2.5 py-0.5 text-xs font-medium text-purple-800 dark:text-purple-300">
                    Variable
                  </span>
                )}
              </div>

              {/* Title */}
              <h3 className="mt-2 text-lg font-semibold text-gray-900 dark:text-white">
                {data.name}
              </h3>

              {/* Description */}
              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
                {data.description}
              </p>
            </div>

            {/* Bottom Info */}
            <div className="mt-4">
              <div className="flex items-center justify-between text-sm">
                <div className="flex items-center text-gray-600 dark:text-gray-300">
                  <Clock className="w-4 h-4 mr-1.5" />
                  {data.durationMinutes} mins
                </div>
                <div className="flex items-center font-semibold text-gray-900 dark:text-white">
                  {data.variable_pricing ? (
                    <span className="text-purple-600 dark:text-purple-400">Price varies</span>
                  ) : (
                    <>
                      <DollarSign className="w-4 h-4" />
                      {data.price}
                    </>
                  )}
                </div>
              </div>

              {/* Deposit Info */}
              {((data.deposit_amount && data.deposit_amount > 0) || (data.variable_pricing && data.deposit_amount)) && (
                <div className="mt-2 text-xs text-brand-600 dark:text-brand-400 font-medium">
                  Deposit required: {formatPrice(data.deposit_amount || 0)}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Info Note */}
      <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 flex gap-3 items-start">
        <AlertCircle size={20} className="text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
        <p className="text-sm text-blue-800 dark:text-blue-300">
          This is how your service will appear to customers on your booking page.
        </p>
      </div>
    </div>
  );
};

export default CustomerPreview;
