import React from 'react';
import { useNavigate } from 'react-router-dom';
import { CheckCircle, Calendar, MapPin, ArrowRight } from 'lucide-react';
import { PublicService } from '../../hooks/useBooking';
import { User } from './AuthSection';

interface BookingState {
  step: number;
  service: PublicService | null;
  date: Date | null;
  timeSlot: string | null;
  user: User | null;
  paymentMethod: string | null;
}

interface ConfirmationProps {
  booking: BookingState;
}

export const Confirmation: React.FC<ConfirmationProps> = ({ booking }) => {
  const navigate = useNavigate();

  if (!booking.service || !booking.date || !booking.timeSlot) return null;

  // Generate a pseudo-random booking reference based on timestamp
  const bookingRef = `BK-${Date.now().toString().slice(-6)}`;

  return (
    <div className="text-center max-w-2xl mx-auto py-10">
      <div className="mb-6 flex justify-center">
        <div className="h-24 w-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
          <CheckCircle className="h-12 w-12 text-green-600 dark:text-green-400" />
        </div>
      </div>

      <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Booking Confirmed!</h2>
      <p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
        Thank you, {booking.user?.name}. Your appointment has been successfully scheduled.
      </p>

      <div className="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden text-left">
        <div className="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-b border-gray-200 dark:border-gray-600">
            <h3 className="font-semibold text-gray-900 dark:text-white">Booking Details</h3>
            <p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mt-1">Ref: #{bookingRef}</p>
        </div>
        <div className="p-6 space-y-4">
            <div className="flex items-start">
                <div className="h-12 w-12 rounded-lg bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center flex-shrink-0 mr-4">
                    {booking.service.photos && booking.service.photos.length > 0 ? (
                        <img src={booking.service.photos[0]} className="h-12 w-12 rounded-lg object-cover" alt="" />
                    ) : (
                        <div className="h-12 w-12 rounded-lg bg-indigo-200 dark:bg-indigo-800" />
                    )}
                </div>
                <div>
                    <h4 className="font-medium text-gray-900 dark:text-white">{booking.service.name}</h4>
                    <p className="text-sm text-gray-500 dark:text-gray-400">{booking.service.duration} minutes</p>
                </div>
                <div className="ml-auto text-right">
                    <p className="font-medium text-gray-900 dark:text-white">${(booking.service.price_cents / 100).toFixed(2)}</p>
                    {booking.service.deposit_amount_cents && booking.service.deposit_amount_cents > 0 && (
                        <p className="text-xs text-green-600 dark:text-green-400 font-medium">Deposit Paid</p>
                    )}
                </div>
            </div>

            <div className="border-t border-gray-100 dark:border-gray-700 pt-4 flex flex-col sm:flex-row sm:justify-between gap-4">
                <div className="flex items-center text-gray-700 dark:text-gray-300">
                    <Calendar className="w-5 h-5 mr-3 text-indigo-500 dark:text-indigo-400" />
                    <div>
                        <p className="text-sm font-medium">Date & Time</p>
                        <p className="text-sm text-gray-500 dark:text-gray-400">
                            {booking.date.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })} at {booking.timeSlot}
                        </p>
                    </div>
                </div>
                <div className="flex items-center text-gray-700 dark:text-gray-300">
                    <MapPin className="w-5 h-5 mr-3 text-indigo-500 dark:text-indigo-400" />
                    <div>
                        <p className="text-sm font-medium">Location</p>
                        <p className="text-sm text-gray-500 dark:text-gray-400">See confirmation email</p>
                    </div>
                </div>
            </div>
        </div>
      </div>

      <p className="mt-6 text-sm text-gray-500 dark:text-gray-400">
        A confirmation email has been sent to {booking.user?.email}.
      </p>

      <div className="mt-8 flex justify-center space-x-4">
        <button
            onClick={() => navigate('/')}
            className="flex items-center px-6 py-3 bg-indigo-600 dark:bg-indigo-500 text-white rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-600 transition-colors shadow-lg"
        >
            Done
            <ArrowRight className="w-4 h-4 ml-2" />
        </button>
        <button
            onClick={() => {
              // Clear booking state and start fresh
              sessionStorage.removeItem('booking_state');
              navigate('/book');
            }}
            className="px-6 py-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
        >
            Book Another
        </button>
      </div>
    </div>
  );
};
