'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
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';

export default function Abastecimento_caminhoes_combustivel() {
  const supabase = createClientComponentClient();
  const router = useRouter();

  const [form, setForm] = useState({
    id_veiculo: '',
    tipo: '',
    data_abastecimento: '',
    km_anterior: '',
    km_atual: '',
    litros: '',
    preco_litro: '',
    observacoes: '',
  });

  const handleChange = (e: any) =>
    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    await supabase.from('vehicle_refuels').insert([{
      id_veiculo: form.id_veiculo,
      tipo: form.tipo,
      data_abastecimento: form.data_abastecimento,
      quilometragem_anterior: parseInt(form.km_anterior),
      quilometragem_atual: parseInt(form.km_atual),
      litros: parseFloat(form.litros),
      preco_litro: parseFloat(form.preco_litro),
      observacoes: form.observacoes,
    }]);
    router.push('/abastecimentos/Listagem_abastecimento_combustivel');
  };

  return (
    <div className="p-6 max-w-2xl mx-auto">
      <Card>
        <CardContent className="space-y-4">
          <h1 className="text-2xl font-bold">Novo Abastecimento</h1>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <Label>ID do Veículo</Label>
              <Input name="id_veiculo" value={form.id_veiculo} onChange={handleChange} required />
            </div>
            <div>
              <Label>Tipo</Label>
              <Input name="tipo" value={form.tipo} onChange={handleChange} required />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Data</Label>
                <Input type="date" name="data_abastecimento" value={form.data_abastecimento} onChange={handleChange} />
              </div>
              <div>
                <Label>Km Anterior</Label>
                <Input name="km_anterior" value={form.km_anterior} onChange={handleChange} />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Km Atual</Label>
                <Input name="km_atual" value={form.km_atual} onChange={handleChange} />
              </div>
              <div>
                <Label>Litros</Label>
                <Input name="litros" value={form.litros} onChange={handleChange} />
              </div>
            </div>
            <div>
              <Label>Preço/Litro (R$)</Label>
              <Input name="preco_litro" value={form.preco_litro} onChange={handleChange} />
            </div>
            <div>
              <Label>Observações</Label>
              <Input name="observacoes" value={form.observacoes} onChange={handleChange} />
            </div>
            <Button type="submit" className="w-full bg-green-600 text-white">
              Salvar Abastecimento
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
