'use client';

import { useState } from 'react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { DatePicker } from '@/components/ui/datepicker';

export default function EdicaoCaminhao() {
  const [loading, setLoading] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    // Envio para o backend
    setTimeout(() => setLoading(false), 1000);
  };

  return (
    <div className="p-8 max-w-5xl mx-auto">
      <h1 className="text-3xl font-bold mb-6">Editar Caminhão</h1>
      <form onSubmit={handleSubmit} className="space-y-6">
        <Card>
          <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4 p-6">
            <div>
              <Label>Placa</Label>
              <Input defaultValue="ABC1D23" required />
            </div>
            <div>
              <Label>Modelo</Label>
              <Input defaultValue="Scania P360" required />
            </div>
            <div>
              <Label>Capacidade (m³)</Label>
              <Input type="number" defaultValue="6.00" required />
            </div>
            <div>
              <Label>Status</Label>
              <Select defaultValue="manutencao">
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="ativo">Ativo</SelectItem>
                  <SelectItem value="inativo">Inativo</SelectItem>
                  <SelectItem value="manutencao">Em Manutenção</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>Motorista Atual</Label>
              <Input defaultValue="Carlos Alberto" />
            </div>
            <div>
              <Label>Última Localização</Label>
              <Input defaultValue="Galpão Barueri" />
            </div>
            <div className="md:col-span-2">
              <Label>Observações</Label>
              <Textarea defaultValue="Caminhão passou por revisão completa no início do mês." />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6 space-y-4">
            <h2 className="text-xl font-semibold">Manutenção</h2>
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <Label>Tipo</Label>
                <Input defaultValue="Troca de óleo" />
              </div>
              <div>
                <Label>Fornecedor</Label>
                <Input defaultValue="Oficina Martins" />
              </div>
              <div>
                <Label>Valor (R$)</Label>
                <Input type="number" defaultValue="220.00" />
              </div>
              <div>
                <Label>Data</Label>
                <DatePicker defaultValue={new Date('2024-04-10')} />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6 space-y-4">
            <h2 className="text-xl font-semibold">Seguro</h2>
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <Label>Seguradora</Label>
                <Input defaultValue="Porto Seguro" />
              </div>
              <div>
                <Label>Status</Label>
                <Select defaultValue="ativo">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="ativo">Ativo</SelectItem>
                    <SelectItem value="vencido">Vencido</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>Valor Total (R$)</Label>
                <Input type="number" defaultValue="5000.00" />
              </div>
              <div>
                <Label>Valor Mensal (R$)</Label>
                <Input type="number" defaultValue="420.00" />
              </div>
              <div>
                <Label>Data de Início</Label>
                <DatePicker defaultValue={new Date('2024-01-01')} />
              </div>
              <div>
                <Label>Data de Fim</Label>
                <DatePicker defaultValue={new Date('2025-01-01')} />
              </div>
            </div>
          </CardContent>
        </Card>

        <div className="flex justify-between">
          <Button type="submit" disabled={loading}>
            {loading ? 'Salvando...' : 'Salvar Alterações'}
          </Button>
          <Button variant="destructive" type="button" onClick={() => alert('Deseja realmente excluir?')}>
            Excluir Caminhão
          </Button>
        </div>
      </form>
    </div>
  );
}
