// /pages/caminhoes/cadastro_caminhao.tsx
import { useState } from 'react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent } from '@/components/ui/card';
import { Select, SelectItem } from '@/components/ui/select';

export default function CadastroCaminhao() {
  const [foto, setFoto] = useState<File | null>(null);

  const handleFotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setFoto(e.target.files[0]);
    }
  };

  return (
    <div className="p-8 max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-6">Cadastro de Caminhão</h1>

      <Card>
        <CardContent className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <Label htmlFor="placa">Placa</Label>
            <Input id="placa" placeholder="Ex: ABC1D23" />
          </div>

          <div>
            <Label htmlFor="modelo">Modelo</Label>
            <Input id="modelo" placeholder="Modelo do Caminhão" />
          </div>

          <div>
            <Label htmlFor="capacidade">Capacidade (m³)</Label>
            <Input type="number" step="0.01" id="capacidade" placeholder="Ex: 6.00" />
          </div>

          <div>
            <Label htmlFor="status">Status</Label>
            <Select id="status" defaultValue="ativo">
              <SelectItem value="ativo">Ativo</SelectItem>
              <SelectItem value="em_manutencao">Em manutenção</SelectItem>
              <SelectItem value="inativo">Inativo</SelectItem>
            </Select>
          </div>

          <div>
            <Label htmlFor="motorista">Motorista Atual</Label>
            <Input id="motorista" placeholder="Nome ou ID do funcionário" />
          </div>

          <div>
            <Label htmlFor="localizacao">Localização Atual</Label>
            <Input id="localizacao" placeholder="Galpão Central, Exemplo" />
          </div>

          <div className="md:col-span-2">
            <Label htmlFor="observacoes">Observações</Label>
            <Textarea id="observacoes" placeholder="Observações adicionais" />
          </div>

          <div className="md:col-span-2">
            <Label>Foto do Caminhão</Label>
            <Input type="file" accept="image/*" onChange={handleFotoChange} />
            {foto && (
              <p className="mt-2 text-sm text-green-600">
                Foto selecionada: {foto.name}
              </p>
            )}
          </div>

          <div className="md:col-span-2 flex justify-end gap-4 mt-4">
            <Button variant="outline">Cancelar</Button>
            <Button variant="default">Salvar</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
