/**
 * @ai-summary Step 1 of onboarding - Set user preferences
 */

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { FormControl, Select, MenuItem } from '@mui/material';
import { Button } from '../../../shared-minimal/components/Button';
import { OnboardingPreferences } from '../types/onboarding.types';

const preferencesSchema = z.object({
  unitSystem: z.enum(['imperial', 'metric']),
  currencyCode: z.string().length(3),
  timeZone: z.string().min(1).max(100),
});

interface PreferencesStepProps {
  onNext: (data: OnboardingPreferences) => void;
  loading?: boolean;
}

export const PreferencesStep: React.FC<PreferencesStepProps> = ({ onNext, loading }) => {
  const {
    control,
    handleSubmit,
    formState: { errors },
    watch,
    setValue,
  } = useForm<OnboardingPreferences>({
    resolver: zodResolver(preferencesSchema),
    defaultValues: {
      unitSystem: 'imperial',
      currencyCode: 'USD',
      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    },
  });

  const unitSystem = watch('unitSystem');

  return (
    <form onSubmit={handleSubmit(onNext)} className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">Set Your Preferences</h2>
        <p className="text-slate-600 dark:text-gray-300 mb-6">
          Choose your preferred units and settings to personalize your experience.
        </p>
      </div>

      {/* Unit System Toggle */}
      <div>
        <label className="block text-sm font-medium text-slate-700 dark:text-gray-200 mb-3">
          Unit System
        </label>
        <div className="grid grid-cols-2 gap-3">
          <button
            type="button"
            onClick={() => setValue('unitSystem', 'imperial')}
            className={`min-h-[44px] py-3 px-4 rounded-lg border-2 font-medium transition-all ${
              unitSystem === 'imperial'
                ? 'border-primary-600 bg-primary-50 text-primary-700 dark:border-primary-500 dark:bg-primary-900 dark:text-primary-300'
                : 'border-gray-300 bg-white text-gray-700 hover:border-gray-400 dark:border-border dark:bg-card dark:text-gray-200 dark:hover:border-inactive'
            }`}
          >
            <div className="text-sm font-semibold">Imperial</div>
            <div className="text-xs mt-1">Miles & Gallons</div>
          </button>
          <button
            type="button"
            onClick={() => setValue('unitSystem', 'metric')}
            className={`min-h-[44px] py-3 px-4 rounded-lg border-2 font-medium transition-all ${
              unitSystem === 'metric'
                ? 'border-primary-600 bg-primary-50 text-primary-700 dark:border-primary-500 dark:bg-primary-900 dark:text-primary-300'
                : 'border-gray-300 bg-white text-gray-700 hover:border-gray-400 dark:border-border dark:bg-card dark:text-gray-200 dark:hover:border-inactive'
            }`}
          >
            <div className="text-sm font-semibold">Metric</div>
            <div className="text-xs mt-1">Kilometers & Liters</div>
          </button>
        </div>
        {errors.unitSystem && (
          <p className="mt-1 text-sm text-red-600">{errors.unitSystem.message}</p>
        )}
      </div>

      {/* Currency Dropdown */}
      <div>
        <label className="block text-sm font-medium text-slate-700 dark:text-gray-200 mb-2">
          Currency
        </label>
        <FormControl fullWidth>
          <Controller
            name="currencyCode"
            control={control}
            render={({ field }) => (
              <Select
                {...field}
                displayEmpty
                sx={{
                  minHeight: '44px',
                  fontSize: '16px',
                  borderRadius: '8px',
                }}
              >
                <MenuItem value="USD">USD - US Dollar</MenuItem>
                <MenuItem value="EUR">EUR - Euro</MenuItem>
                <MenuItem value="GBP">GBP - British Pound</MenuItem>
                <MenuItem value="CAD">CAD - Canadian Dollar</MenuItem>
                <MenuItem value="AUD">AUD - Australian Dollar</MenuItem>
              </Select>
            )}
          />
        </FormControl>
        {errors.currencyCode && (
          <p className="mt-1 text-sm text-red-600">{errors.currencyCode.message}</p>
        )}
      </div>

      {/* Timezone Dropdown */}
      <div>
        <label className="block text-sm font-medium text-slate-700 dark:text-gray-200 mb-2">
          Time Zone
        </label>
        <FormControl fullWidth>
          <Controller
            name="timeZone"
            control={control}
            render={({ field }) => (
              <Select
                {...field}
                displayEmpty
                sx={{
                  minHeight: '44px',
                  fontSize: '16px',
                  borderRadius: '8px',
                }}
              >
                <MenuItem value="America/New_York">Eastern Time (ET)</MenuItem>
                <MenuItem value="America/Chicago">Central Time (CT)</MenuItem>
                <MenuItem value="America/Denver">Mountain Time (MT)</MenuItem>
                <MenuItem value="America/Los_Angeles">Pacific Time (PT)</MenuItem>
                <MenuItem value="America/Phoenix">Arizona Time (MST)</MenuItem>
                <MenuItem value="America/Anchorage">Alaska Time (AKT)</MenuItem>
                <MenuItem value="Pacific/Honolulu">Hawaii Time (HST)</MenuItem>
                <MenuItem value="Europe/London">London (GMT/BST)</MenuItem>
                <MenuItem value="Europe/Paris">Paris (CET/CEST)</MenuItem>
                <MenuItem value="Asia/Tokyo">Tokyo (JST)</MenuItem>
                <MenuItem value="Australia/Sydney">Sydney (AEST/AEDT)</MenuItem>
              </Select>
            )}
          />
        </FormControl>
        {errors.timeZone && (
          <p className="mt-1 text-sm text-red-600">{errors.timeZone.message}</p>
        )}
      </div>

      <div className="flex justify-end pt-4">
        <Button type="submit" loading={loading} className="min-h-[44px]">
          Continue
        </Button>
      </div>
    </form>
  );
};
