/**
 * @ai-summary Step 2 of onboarding - Optionally add first vehicle
 */

import React, { useState } from 'react';
import { Button } from '../../../shared-minimal/components/Button';
import { VehicleForm } from '../../vehicles/components/VehicleForm';
import { CreateVehicleRequest } from '../../vehicles/types/vehicles.types';

interface AddVehicleStepProps {
  onNext: () => void;
  onAddVehicle: (data: CreateVehicleRequest) => void;
  onBack: () => void;
  loading?: boolean;
}

export const AddVehicleStep: React.FC<AddVehicleStepProps> = ({
  onNext,
  onAddVehicle,
  onBack,
  loading,
}) => {
  const [showForm, setShowForm] = useState(false);

  const handleSkip = () => {
    onNext();
  };

  const handleAddVehicle = (data: CreateVehicleRequest) => {
    onAddVehicle(data);
  };

  if (!showForm) {
    return (
      <div className="space-y-6">
        <div className="text-center">
          <div className="mx-auto w-20 h-20 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center mb-4">
            <svg
              className="w-10 h-10 text-primary-600 dark:text-primary-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
              />
            </svg>
          </div>
          <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-2">Add Your First Vehicle</h2>
          <p className="text-slate-600 dark:text-gray-300 mb-6">
            Add a vehicle now or skip this step and add it later from your garage.
          </p>
        </div>

        <div className="space-y-3">
          <Button
            onClick={() => setShowForm(true)}
            className="w-full min-h-[44px]"
          >
            Add Vehicle
          </Button>
          <Button
            variant="secondary"
            onClick={handleSkip}
            className="w-full min-h-[44px]"
          >
            Skip for Now
          </Button>
        </div>

        <div className="pt-4 border-t border-gray-200 dark:border-border">
          <Button
            variant="secondary"
            onClick={onBack}
            className="min-h-[44px]"
          >
            Back
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-2">Add Your First Vehicle</h2>
        <p className="text-sm text-slate-600 dark:text-gray-300 mb-4">
          Fill in the details below. You can always edit this later.
        </p>
      </div>

      <VehicleForm
        onSubmit={handleAddVehicle}
        onCancel={() => setShowForm(false)}
        loading={loading}
      />

      <div className="pt-4 border-t border-gray-200">
        <Button
          variant="secondary"
          onClick={onBack}
          className="min-h-[44px]"
          disabled={loading}
        >
          Back
        </Button>
      </div>
    </div>
  );
};
