import React from "react";
import { UseFormReturn } from "react-hook-form";
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { StepFormData } from "../schemas/stepSchema";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

interface TransportFieldsProps {
  form: UseFormReturn<StepFormData>;
}

export function TransportFields({ form }: TransportFieldsProps) {
  const transportTypes = [
    { id: "plane", label: "✈️ Avion" },
    { id: "train", label: "🚄 Train" },
    { id: "bus", label: "🚌 Bus" },
    { id: "car", label: "🚗 Voiture" },
    { id: "boat", label: "🚢 Bateau" },
    { id: "other", label: "🔄 Autre" }
  ];

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <FormField
          control={form.control}
          name="startTime"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Heure de départ</FormLabel>
              <FormControl>
                <Input type="time" {...field} value={field.value || ""} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="endTime"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Heure d'arrivée</FormLabel>
              <FormControl>
                <Input type="time" {...field} value={field.value || ""} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </div>

      <FormField
        control={form.control}
        name="transportType"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Moyen de transport</FormLabel>
            <Select
              value={field.value}
              onValueChange={field.onChange}
            >
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="Sélectionnez un moyen de transport" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {transportTypes.map((type) => (
                  <SelectItem key={type.id} value={type.id}>{type.label}</SelectItem>
                ))}
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name="referenceNumber"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Numéro de vol / train</FormLabel>
            <FormControl>
              <Input placeholder="Ex: AF1234" {...field} value={field.value || ""} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <FormField
          control={form.control}
          name="departureName"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Lieu de départ</FormLabel>
              <FormControl>
                <Input placeholder="Ex: Gare du Nord" {...field} value={field.value || ""} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="arrivalName"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Lieu d'arrivée</FormLabel>
              <FormControl>
                <Input placeholder="Ex: Gare de Lyon" {...field} value={field.value || ""} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </div>

      <FormField
        control={form.control}
        name="estimatedDuration"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Temps estimé</FormLabel>
            <FormControl>
              <Input placeholder="Ex: 2h30" {...field} value={field.value || ""} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </div>
  );
}