import { useState } from 'react';

type Step = 'service' | 'datetime' | 'info' | 'confirm';

export default function BookingFlow() {
  const [currentStep, setCurrentStep] = useState<Step>('service');
  const [formData, setFormData] = useState({
    service: '',
    date: '',
    time: '',
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
  });

  const steps = [
    { id: 'service', label: 'Select Service' },
    { id: 'datetime', label: 'Choose Date & Time' },
    { id: 'info', label: 'Your Information' },
    { id: 'confirm', label: 'Confirm' },
  ];

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold mb-8 text-center text-blue-400">Book an Appointment</h1>
        
        <div className="flex justify-between mb-12">
          {steps.map((step, index) => (
            <div key={step.id} className="flex items-center flex-1">
              <div className={`flex flex-col items-center flex-1 ${index < steps.length - 1 ? 'border-r-2' : ''} ${
                currentStep === step.id ? 'border-blue-500' : 'border-gray-700'
              }`}>
                <div className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 ${
                  currentStep === step.id ? 'bg-blue-600' : 'bg-gray-700'
                }`}>
                  {index + 1}
                </div>
                <span className="text-sm text-center">{step.label}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="bg-gray-800 rounded-lg p-8">
          {currentStep === 'service' && (
            <div>
              <h2 className="text-2xl font-semibold mb-6">Select a Service</h2>
              <div className="space-y-4">
                {['Consultation - $50', 'Extended Session - $100', 'Follow-up - $75'].map((service) => (
                  <button
                    key={service}
                    onClick={() => {
                      setFormData({ ...formData, service });
                      setCurrentStep('datetime');
                    }}
                    className="w-full bg-gray-700 hover:bg-gray-600 p-4 rounded-lg text-left transition"
                  >
                    {service}
                  </button>
                ))}
              </div>
            </div>
          )}

          {currentStep === 'datetime' && (
            <div>
              <h2 className="text-2xl font-semibold mb-6">Choose Date & Time</h2>
              <div className="grid gap-4">
                <input
                  type="date"
                  className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-gray-100"
                  onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                />
                <select className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-gray-100">
                  <option>9:00 AM</option>
                  <option>10:00 AM</option>
                  <option>11:00 AM</option>
                  <option>2:00 PM</option>
                  <option>3:00 PM</option>
                </select>
                <button
                  onClick={() => setCurrentStep('info')}
                  className="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-medium"
                >
                  Continue
                </button>
              </div>
            </div>
          )}

          {currentStep === 'info' && (
            <div>
              <h2 className="text-2xl font-semibold mb-6">Your Information</h2>
              <div className="grid gap-4">
                <input
                  type="text"
                  placeholder="First Name"
                  className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-gray-100"
                />
                <input
                  type="text"
                  placeholder="Last Name"
                  className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-gray-100"
                />
                <input
                  type="email"
                  placeholder="Email"
                  className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-gray-100"
                />
                <input
                  type="tel"
                  placeholder="Phone"
                  className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-gray-100"
                />
                <button
                  onClick={() => setCurrentStep('confirm')}
                  className="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-medium"
                >
                  Continue
                </button>
              </div>
            </div>
          )}

          {currentStep === 'confirm' && (
            <div>
              <h2 className="text-2xl font-semibold mb-6">Confirm Your Appointment</h2>
              <div className="bg-gray-700 rounded-lg p-6 mb-6">
                <p className="mb-2"><span className="text-gray-400">Service:</span> Consultation</p>
                <p className="mb-2"><span className="text-gray-400">Date:</span> January 15, 2024</p>
                <p className="mb-2"><span className="text-gray-400">Time:</span> 2:00 PM</p>
                <p className="mb-2"><span className="text-gray-400">Name:</span> John Doe</p>
                <p className="mb-2"><span className="text-gray-400">Email:</span> john@example.com</p>
              </div>
              <button className="w-full bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-medium text-lg">
                Confirm Appointment
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
