import React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

/**
 * Formulário reutilizável para criação e edição de veículos.
 * @param {{ 
 *  initialData?: Object, 
 *  onSubmit: (data: Object) => void, 
 *  onCancel: () => void 
 * }} props
 */
export const VehicleForm = ({ initialData, onSubmit, onCancel }) => {
  const [formData, setFormData] = React.useState(
    initialData || { vehicle: '', plate: '', driver: '', status: 'Disponível' }
  );

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(formData);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 pt-4">
      <div className="space-y-2">
        <Label htmlFor="vehicle">Modelo do Veículo</Label>
        <Input 
          id="vehicle" 
          value={formData.vehicle} 
          onChange={(e) => setFormData({ ...formData, vehicle: e.target.value })} 
          placeholder="Ex: Scania R450"
          required
        />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="plate">Placa</Label>
          <Input 
            id="plate" 
            value={formData.plate} 
            onChange={(e) => setFormData({ ...formData, plate: e.target.value })} 
            placeholder="ABC-1234"
            required
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="status">Status</Label>
          <Select 
            value={formData.status} 
            onValueChange={(val) => setFormData({ ...formData, status: val })}
          >
            <SelectTrigger>
              <SelectValue placeholder="Selecione o status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="Disponível">Disponível</SelectItem>
              <SelectItem value="Em viagem">Em viagem</SelectItem>
              <SelectItem value="Manutenção">Manutenção</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="driver">Motorista Responsável</Label>
        <Input 
          id="driver" 
          value={formData.driver} 
          onChange={(e) => setFormData({ ...formData, driver: e.target.value })} 
          placeholder="Nome completo do motorista"
          required
        />
      </div>

      <div className="flex justify-end gap-3 pt-4 border-t">
        <Button type="button" variant="outline" onClick={onCancel}>
          Cancelar
        </Button>
        <Button type="submit">
          {initialData ? 'Salvar Alterações' : 'Cadastrar Veículo'}
        </Button>
      </div>
    </form>
  );
};
