import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { DatePicker } from '@/components/ui/date-picker';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Combobox } from '@/components/ui/combobox';
import { SlugField } from '@/components/ui/slug-field';
import { toast } from '@/hooks/use-toast';
import { Plus, Zap, Save, X } from 'lucide-react';
import { useUnitPreferences } from '@/hooks/useUnitPreferences';
import { useManufacturers, useRideModels } from '@/hooks/useAutocompleteData';
import { useUserRole } from '@/hooks/useUserRole';
import { ManufacturerForm } from './ManufacturerForm';
import { RideModelForm } from './RideModelForm';
import { TechnicalSpecsEditor } from './editors/TechnicalSpecsEditor';
import { CoasterStatsEditor } from './editors/CoasterStatsEditor';
import { FormerNamesEditor } from './editors/FormerNamesEditor';
import { 
  convertValueToMetric,
  convertValueFromMetric,
  getDisplayUnit,
  getSpeedUnit,
  getDistanceUnit,
  getHeightUnit
} from '@/lib/units';

const rideSchema = z.object({
  name: z.string().min(1, 'Ride name is required'),
  slug: z.string().min(1, 'Slug is required'),
  description: z.string().optional(),
  category: z.string().min(1, 'Category is required'),
  ride_sub_type: z.string().optional(),
  status: z.string().min(1, 'Status is required'),
  opening_date: z.string().optional(),
  closing_date: z.string().optional(),
  height_requirement: z.number().optional(),
  age_requirement: z.number().optional(),
  capacity_per_hour: z.number().optional(),
  duration_seconds: z.number().optional(),
  max_speed_kmh: z.number().optional(),
  max_height_meters: z.number().optional(),
  length_meters: z.number().optional(),
  inversions: z.number().optional(),
  // New roller coaster specific fields
  coaster_type: z.string().optional(),
  seating_type: z.string().optional(),
  intensity_level: z.string().optional(),
  drop_height_meters: z.number().optional(),
  max_g_force: z.number().optional(),
  // ⚠️ DEPRECATED - These legacy JSON fields should not be used
  // Use relational tables instead: ride_technical_specifications, ride_coaster_statistics, ride_name_history
  former_names: z.string().optional(),
  coaster_stats: z.string().optional(),
  technical_specs: z.string().optional(),
  // Manufacturer and model
  manufacturer_id: z.string().uuid().optional(),
  ride_model_id: z.string().uuid().optional(),
  // Images
  images: z.object({
    uploaded: z.array(z.object({
      url: z.string(),
      cloudflare_id: z.string().optional(),
      file: z.any().optional(),
      isLocal: z.boolean().optional(),
      caption: z.string().optional(),
    })),
    banner_assignment: z.number().nullable().optional(),
    card_assignment: z.number().nullable().optional(),
  }).optional()
});

type RideFormData = z.infer<typeof rideSchema>;

interface RideFormProps {
  onSubmit: (data: RideFormData) => Promise<void>;
  onCancel?: () => void;
  initialData?: Partial<RideFormData & {
    id?: string;
    banner_image_url?: string;
    card_image_url?: string;
  }>;
  isEditing?: boolean;
}

const categories = [
  'roller_coaster',
  'flat_ride',
  'water_ride',
  'dark_ride',
  'kiddie_ride',
  'transportation'
];

const statusOptions = [
  'Operating',
  'Seasonal',
  'Closed Temporarily',
  'Closed Permanently',
  'Under Construction',
  'Planned',
  'SBNO' // Standing But Not Operating
];

const coasterTypes = [
  'steel',
  'wood',
  'hybrid'
];

const seatingTypes = [
  'sit_down',
  'stand_up',
  'flying',
  'inverted',
  'floorless',
  'suspended',
  'wing',
  'dive',
  'spinning'
];

const intensityLevels = [
  'family',
  'thrill',
  'extreme'
];

// Status value mappings between display (form) and database values
const STATUS_DISPLAY_TO_DB: Record<string, string> = {
  'Operating': 'operating',
  'Seasonal': 'operating',
  'Closed Temporarily': 'maintenance',
  'Closed Permanently': 'closed',
  'Under Construction': 'under_construction',
  'Planned': 'under_construction',
  'SBNO': 'sbno'
};

const STATUS_DB_TO_DISPLAY: Record<string, string> = {
  'operating': 'Operating',
  'closed': 'Closed Permanently',
  'under_construction': 'Under Construction',
  'maintenance': 'Closed Temporarily',
  'sbno': 'SBNO'
};

export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }: RideFormProps) {
  const { isModerator } = useUserRole();
  const [submitting, setSubmitting] = useState(false);
  const { preferences } = useUnitPreferences();
  const measurementSystem = preferences.measurement_system;

  // Manufacturer and model state
  const [selectedManufacturerId, setSelectedManufacturerId] = useState<string>(
    initialData?.manufacturer_id || ''
  );
  const [selectedManufacturerName, setSelectedManufacturerName] = useState<string>('');
  const [tempNewManufacturer, setTempNewManufacturer] = useState<any>(null);
  const [tempNewRideModel, setTempNewRideModel] = useState<any>(null);
  const [isManufacturerModalOpen, setIsManufacturerModalOpen] = useState(false);
  const [isModelModalOpen, setIsModelModalOpen] = useState(false);

  // Advanced editor state
  const [technicalSpecs, setTechnicalSpecs] = useState<any[]>([]);
  const [coasterStats, setCoasterStats] = useState<any[]>([]);
  const [formerNames, setFormerNames] = useState<any[]>([]);

  // Fetch data
  const { manufacturers, loading: manufacturersLoading } = useManufacturers();
  const { rideModels, loading: modelsLoading } = useRideModels(selectedManufacturerId);

  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors }
  } = useForm<RideFormData>({
    resolver: zodResolver(rideSchema),
    defaultValues: {
      name: initialData?.name || '',
      slug: initialData?.slug || '',
      description: initialData?.description || '',
      category: initialData?.category || '',
      ride_sub_type: initialData?.ride_sub_type || '',
      status: initialData?.status 
        ? STATUS_DB_TO_DISPLAY[initialData.status] || 'Operating'
        : 'Operating',
      opening_date: initialData?.opening_date || '',
      closing_date: initialData?.closing_date || '',
      // Convert metric values to user's preferred unit for display
      height_requirement: initialData?.height_requirement 
        ? convertValueFromMetric(initialData.height_requirement, getDisplayUnit('cm', measurementSystem), 'cm') 
        : undefined,
      age_requirement: initialData?.age_requirement || undefined,
      capacity_per_hour: initialData?.capacity_per_hour || undefined,
      duration_seconds: initialData?.duration_seconds || undefined,
      max_speed_kmh: initialData?.max_speed_kmh 
        ? convertValueFromMetric(initialData.max_speed_kmh, getDisplayUnit('km/h', measurementSystem), 'km/h') 
        : undefined,
      max_height_meters: initialData?.max_height_meters 
        ? convertValueFromMetric(initialData.max_height_meters, getDisplayUnit('m', measurementSystem), 'm') 
        : undefined,
      length_meters: initialData?.length_meters 
        ? convertValueFromMetric(initialData.length_meters, getDisplayUnit('m', measurementSystem), 'm') 
        : undefined,
      inversions: initialData?.inversions || undefined,
      coaster_type: initialData?.coaster_type || undefined,
      seating_type: initialData?.seating_type || undefined,
      intensity_level: initialData?.intensity_level || undefined,
      drop_height_meters: initialData?.drop_height_meters 
        ? convertValueFromMetric(initialData.drop_height_meters, getDisplayUnit('m', measurementSystem), 'm') 
        : undefined,
      max_g_force: initialData?.max_g_force || undefined,
      former_names: initialData?.former_names || '',
      coaster_stats: initialData?.coaster_stats || '',
      technical_specs: initialData?.technical_specs || '',
      manufacturer_id: initialData?.manufacturer_id || undefined,
      ride_model_id: initialData?.ride_model_id || undefined,
      images: { uploaded: [] }
    }
  });

  const selectedCategory = watch('category');


  const handleFormSubmit = async (data: RideFormData) => {
    setSubmitting(true);
    try {
      // Transform status from display value to DB value
      const dbStatus = STATUS_DISPLAY_TO_DB[data.status] || 'operating';
      
      // Convert form values back to metric for storage
      const metricData = {
        ...data,
        status: dbStatus,
        height_requirement: data.height_requirement
          ? convertValueToMetric(data.height_requirement, getDisplayUnit('cm', measurementSystem)) 
          : undefined,
        max_speed_kmh: data.max_speed_kmh 
          ? convertValueToMetric(data.max_speed_kmh, getDisplayUnit('km/h', measurementSystem)) 
          : undefined,
        max_height_meters: data.max_height_meters 
          ? convertValueToMetric(data.max_height_meters, getDisplayUnit('m', measurementSystem)) 
          : undefined,
        length_meters: data.length_meters 
          ? convertValueToMetric(data.length_meters, getDisplayUnit('m', measurementSystem)) 
          : undefined,
        drop_height_meters: data.drop_height_meters 
          ? convertValueToMetric(data.drop_height_meters, getDisplayUnit('m', measurementSystem)) 
          : undefined,
        // ⚠️ Remove JSON stringification - use relational tables instead
        // These fields are deprecated and should not be set
        technical_specs: undefined,
        coaster_stats: undefined,
        former_names: undefined,
        // Pass relational data for proper handling
        _technical_specifications: technicalSpecs,
        _coaster_statistics: coasterStats,
        _name_history: formerNames,
        _tempNewManufacturer: tempNewManufacturer,
        _tempNewRideModel: tempNewRideModel
      };

      // Pass clean data to parent
      await onSubmit(metricData as any);
      
      toast({
        title: isEditing ? "Ride Updated" : "Submission Sent",
        description: isEditing 
          ? "The ride information has been updated successfully."
          : tempNewManufacturer 
            ? "Ride, manufacturer, and model submitted for review"
            : "Ride submitted for review"
      });
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to save ride information.",
        variant: "destructive"
      });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Card className="w-full max-w-4xl mx-auto">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Zap className="w-5 h-5" />
          {isEditing ? 'Edit Ride' : 'Create New Ride'}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
          {/* Basic Information */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="name">Ride Name *</Label>
              <Input
                id="name"
                {...register('name')}
                placeholder="Enter ride name"
              />
              {errors.name && (
                <p className="text-sm text-destructive">{errors.name.message}</p>
              )}
            </div>

            <SlugField
              name={watch('name')}
              slug={watch('slug')}
              onSlugChange={(slug) => setValue('slug', slug)}
              isModerator={isModerator()}
            />
          </div>

          {/* Description */}
          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              {...register('description')}
              placeholder="Describe the ride experience..."
              rows={4}
            />
          </div>

          {/* Category and Status */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="space-y-2">
              <Label>Category *</Label>
              <Select onValueChange={(value) => setValue('category', value)} defaultValue={initialData?.category}>
                <SelectTrigger>
                  <SelectValue placeholder="Select category" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((category) => (
                    <SelectItem key={category} value={category}>
                      {category.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              {errors.category && (
                <p className="text-sm text-destructive">{errors.category.message}</p>
              )}
            </div>

            <div className="space-y-2">
              <Label htmlFor="ride_sub_type">Sub Type</Label>
              <Input
                id="ride_sub_type"
                {...register('ride_sub_type')}
                placeholder="e.g. Inverted Coaster, Log Flume"
              />
            </div>

            <div className="space-y-2">
              <Label>Status *</Label>
              <Select 
                onValueChange={(value) => setValue('status', value)} 
                defaultValue={initialData?.status 
                  ? STATUS_DB_TO_DISPLAY[initialData.status] || 'Operating'
                  : 'Operating'
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select status" />
                </SelectTrigger>
                <SelectContent>
                  {statusOptions.map((status) => (
                    <SelectItem key={status} value={status}>
                      {status}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              {errors.status && (
                <p className="text-sm text-destructive">{errors.status.message}</p>
              )}
            </div>
          </div>

          {/* Manufacturer & Model Selection */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Manufacturer & Model</h3>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Manufacturer Column */}
              <div className="space-y-2">
                <Label>Manufacturer</Label>
                
                {tempNewManufacturer ? (
                  // Show temp manufacturer badge
                  <div className="flex items-center gap-2 p-3 border rounded-md bg-blue-50 dark:bg-blue-950">
                    <Badge variant="secondary">New</Badge>
                    <span className="font-medium">{tempNewManufacturer.name}</span>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setTempNewManufacturer(null);
                        setTempNewRideModel(null); // Clear model too
                      }}
                    >
                      <X className="w-4 h-4" />
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => setIsManufacturerModalOpen(true)}
                    >
                      Edit
                    </Button>
                  </div>
                ) : (
                  // Show combobox for existing manufacturers
                  <Combobox
                    options={manufacturers}
                    value={watch('manufacturer_id')}
                    onValueChange={(value) => {
                      setValue('manufacturer_id', value);
                      setSelectedManufacturerId(value);
                      // Find and set manufacturer name
                      const mfr = manufacturers.find(m => m.value === value);
                      setSelectedManufacturerName(mfr?.label || '');
                      // Clear model when manufacturer changes
                      setValue('ride_model_id', undefined);
                      setTempNewRideModel(null);
                    }}
                    placeholder="Select manufacturer"
                    searchPlaceholder="Search manufacturers..."
                    emptyText="No manufacturers found"
                    loading={manufacturersLoading}
                  />
                )}
                
                {/* Create New Manufacturer Button */}
                {!tempNewManufacturer && (
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="w-full"
                    onClick={() => setIsManufacturerModalOpen(true)}
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    Create New Manufacturer
                  </Button>
                )}
              </div>

              {/* Ride Model Column - Conditional */}
              {(selectedManufacturerId || tempNewManufacturer) && (
                <div className="space-y-2">
                  <Label>Ride Model (Optional)</Label>
                  
                  {tempNewRideModel ? (
                    // Show temp model badge
                    <div className="flex items-center gap-2 p-3 border rounded-md bg-purple-50 dark:bg-purple-950">
                      <Badge variant="secondary">New</Badge>
                      <span className="font-medium">{tempNewRideModel.name}</span>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => setTempNewRideModel(null)}
                      >
                        <X className="w-4 h-4" />
                      </Button>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => setIsModelModalOpen(true)}
                      >
                        Edit
                      </Button>
                    </div>
                  ) : (
                    // Show combobox for existing models
                    <>
                      <Combobox
                        options={rideModels}
                        value={watch('ride_model_id')}
                        onValueChange={(value) => setValue('ride_model_id', value)}
                        placeholder="Select model"
                        searchPlaceholder="Search models..."
                        emptyText={tempNewManufacturer 
                          ? "Create the manufacturer first to add models" 
                          : "No models found for this manufacturer"}
                        loading={modelsLoading}
                        disabled={!!tempNewManufacturer}
                      />
                      
                      {/* Create New Model Button */}
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        className="w-full"
                        onClick={() => setIsModelModalOpen(true)}
                      >
                        <Plus className="w-4 h-4 mr-2" />
                        Create New Model
                      </Button>
                    </>
                  )}
                  
                  <p className="text-xs text-muted-foreground">
                    {tempNewManufacturer 
                      ? "New models will be created after manufacturer approval"
                      : "Select a specific model or leave blank"}
                  </p>
                </div>
              )}
            </div>
          </div>

          {/* Dates */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label>Opening Date</Label>
              <DatePicker
                date={watch('opening_date') ? new Date(watch('opening_date')) : undefined}
                onSelect={(date) => setValue('opening_date', date ? date.toISOString().split('T')[0] : undefined)}
                placeholder="Select opening date"
                disableFuture={true}
                fromYear={1800}
              />
            </div>

            <div className="space-y-2">
              <Label>Closing Date (if applicable)</Label>
              <DatePicker
                date={watch('closing_date') ? new Date(watch('closing_date')) : undefined}
                onSelect={(date) => setValue('closing_date', date ? date.toISOString().split('T')[0] : undefined)}
                placeholder="Select closing date"
                disablePast={false}
                fromYear={1800}
              />
            </div>
          </div>

          {/* Requirements */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="height_requirement">Height Requirement ({getHeightUnit(measurementSystem)})</Label>
              <Input
                id="height_requirement"
                type="number"
                min="0"
                {...register('height_requirement', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
                placeholder={measurementSystem === 'imperial' ? 'e.g. 47' : 'e.g. 120'}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="age_requirement">Minimum Age</Label>
              <Input
                id="age_requirement"
                type="number"
                min="0"
                {...register('age_requirement', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
                placeholder="e.g. 8"
              />
            </div>
          </div>

          {/* Roller Coaster Specific Fields */}
          {selectedCategory === 'roller_coaster' && (
            <div className="space-y-4">
              <h3 className="text-lg font-semibold">Roller Coaster Details</h3>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="space-y-2">
                  <Label>Coaster Type</Label>
                  <Select onValueChange={(value) => setValue('coaster_type', value)} defaultValue={initialData?.coaster_type}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select type" />
                    </SelectTrigger>
                    <SelectContent>
                      {coasterTypes.map((type) => (
                        <SelectItem key={type} value={type}>
                          {type.charAt(0).toUpperCase() + type.slice(1)}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label>Seating Type</Label>
                  <Select onValueChange={(value) => setValue('seating_type', value)} defaultValue={initialData?.seating_type}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select seating" />
                    </SelectTrigger>
                    <SelectContent>
                      {seatingTypes.map((type) => (
                        <SelectItem key={type} value={type}>
                          {type.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label>Intensity Level</Label>
                  <Select onValueChange={(value) => setValue('intensity_level', value)} defaultValue={initialData?.intensity_level}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select intensity" />
                    </SelectTrigger>
                    <SelectContent>
                      {intensityLevels.map((level) => (
                        <SelectItem key={level} value={level}>
                          {level.charAt(0).toUpperCase() + level.slice(1)}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label htmlFor="drop_height_meters">Drop Height ({getDistanceUnit(measurementSystem)})</Label>
                  <Input
                    id="drop_height_meters"
                    type="number"
                    min="0"
                    step="0.1"
                    {...register('drop_height_meters', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
                    placeholder={measurementSystem === 'imperial' ? 'e.g. 149' : 'e.g. 45.5'}
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="max_g_force">Max G-Force</Label>
                  <Input
                    id="max_g_force"
                    type="number"
                    min="0"
                    step="0.1"
                    {...register('max_g_force', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
                    placeholder="e.g. 4.2"
                  />
                </div>
              </div>
            </div>
          )}

          {/* Technical Specifications */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Technical Specifications</h3>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <div className="space-y-2">
                <Label htmlFor="capacity_per_hour">Capacity per Hour</Label>
                <Input
                  id="capacity_per_hour"
                  type="number"
                  min="0"
                  {...register('capacity_per_hour', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
                  placeholder="e.g. 1200"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="duration_seconds">Duration (seconds)</Label>
                <Input
                  id="duration_seconds"
                  type="number"
                  min="0"
                  {...register('duration_seconds', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
                  placeholder="e.g. 180"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="max_speed_kmh">Max Speed ({getSpeedUnit(measurementSystem)})</Label>
                <Input
                  id="max_speed_kmh"
                  type="number"
                  min="0"
                  step="0.1"
                  {...register('max_speed_kmh', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
                  placeholder={measurementSystem === 'imperial' ? 'e.g. 50' : 'e.g. 80.5'}
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="max_height_meters">Max Height ({getDistanceUnit(measurementSystem)})</Label>
                <Input
                  id="max_height_meters"
                  type="number"
                  min="0"
                  step="0.1"
                  {...register('max_height_meters', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
                  placeholder={measurementSystem === 'imperial' ? 'e.g. 214' : 'e.g. 65.2'}
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="length_meters">Length ({getDistanceUnit(measurementSystem)})</Label>
                <Input
                  id="length_meters"
                  type="number"
                  min="0"
                  step="0.1"
                  {...register('length_meters', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
                  placeholder={measurementSystem === 'imperial' ? 'e.g. 3937' : 'e.g. 1200.5'}
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="inversions">Inversions</Label>
                <Input
                  id="inversions"
                  type="number"
                  min="0"
                  {...register('inversions', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
                  placeholder="e.g. 7"
                />
              </div>
            </div>
          </div>

          {/* Advanced Editors */}
          <div className="space-y-6 border-t pt-6">
            <TechnicalSpecsEditor
              specs={technicalSpecs}
              onChange={setTechnicalSpecs}
              commonSpecs={['Track Material', 'Manufacturer', 'Train Type', 'Restraint System', 'Block Sections']}
            />

            {selectedCategory === 'roller_coaster' && (
              <>
                <CoasterStatsEditor
                  stats={coasterStats}
                  onChange={setCoasterStats}
                />

                <FormerNamesEditor
                  names={formerNames}
                  onChange={setFormerNames}
                  currentName={watch('name') || 'Unnamed Ride'}
                />
              </>
            )}
          </div>

          {/* Images */}
          <EntityMultiImageUploader
            mode={isEditing ? 'edit' : 'create'}
            value={watch('images') || { uploaded: [] }}
            onChange={(images: ImageAssignments) => setValue('images', images)}
            entityType="ride"
            entityId={isEditing ? initialData?.id : undefined}
            currentBannerUrl={initialData?.banner_image_url}
            currentCardUrl={initialData?.card_image_url}
          />

          {/* Form Actions */}
          <div className="flex gap-4 pt-6">
            <Button type="submit" disabled={submitting} className="flex-1">
              <Save className="w-4 h-4 mr-2" />
              {submitting ? 'Saving...' : (isEditing ? 'Update Ride' : 'Create Ride')}
            </Button>
            
            {onCancel && (
              <Button type="button" variant="outline" onClick={onCancel}>
                <X className="w-4 h-4 mr-2" />
                Cancel
              </Button>
            )}
          </div>
        </form>

        {/* Manufacturer Modal */}
        <Dialog open={isManufacturerModalOpen} onOpenChange={setIsManufacturerModalOpen}>
          <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>
                {tempNewManufacturer ? 'Edit New Manufacturer' : 'Create New Manufacturer'}
              </DialogTitle>
              <DialogDescription>
                This manufacturer will be submitted for moderation along with the ride.
              </DialogDescription>
            </DialogHeader>
            <ManufacturerForm
              initialData={tempNewManufacturer}
              onSubmit={(data) => {
                setTempNewManufacturer(data);
                setSelectedManufacturerName(data.name);
                setIsManufacturerModalOpen(false);
                // Clear existing manufacturer selection
                setValue('manufacturer_id', undefined);
                setSelectedManufacturerId('');
                // Clear any existing model
                setValue('ride_model_id', undefined);
                setTempNewRideModel(null);
              }}
              onCancel={() => setIsManufacturerModalOpen(false)}
            />
          </DialogContent>
        </Dialog>

        {/* Ride Model Modal */}
        <Dialog open={isModelModalOpen} onOpenChange={setIsModelModalOpen}>
          <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>
                {tempNewRideModel ? 'Edit New Ride Model' : 'Create New Ride Model'}
              </DialogTitle>
              <DialogDescription>
                Creating a model for: <strong>{selectedManufacturerName || tempNewManufacturer?.name}</strong>
              </DialogDescription>
            </DialogHeader>
            <RideModelForm
              manufacturerName={selectedManufacturerName || tempNewManufacturer?.name}
              manufacturerId={selectedManufacturerId}
              initialData={tempNewRideModel}
              onSubmit={(data) => {
                setTempNewRideModel(data);
                setIsModelModalOpen(false);
                // Clear existing model selection
                setValue('ride_model_id', undefined);
              }}
              onCancel={() => setIsModelModalOpen(false)}
            />
          </DialogContent>
        </Dialog>
      </CardContent>
    </Card>
  );
}