'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 Compra_combustivel() {
  const supabase = createClientComponentClient();
  const router = useRouter();

  const [form, setForm] = useState({
    data_compra: '',
    fornecedor_id: '',
    litros_entregues: '',
    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('fuel_tank_entries').insert([{
      data_compra: form.data_compra,
      fornecedor_id: form.fornecedor_id,
      litros_entregues: parseFloat(form.litros_entregues),
      preco_litro: parseFloat(form.preco_litro),
      observacoes: form.observacoes,
    }]);
    router.push('/abastecimentos/Listagem_compra_combustivel');
  };

  return (
    <div className="p-6 max-w-2xl mx-auto">
      <Card>
        <CardContent className="space-y-4">
          <h1 className="text-2xl font-bold">Nova Compra de Combustível</h1>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <Label>Data da Compra</Label>
              <Input
                type="date"
                name="data_compra"
                value={form.data_compra}
                onChange={handleChange}
                required
              />
            </div>
            <div>
              <Label>ID do Fornecedor</Label>
              <Input
                name="fornecedor_id"
                value={form.fornecedor_id}
                onChange={handleChange}
                required
              />
            </div>
            <div>
              <Label>Litros Entregues</Label>
              <Input
                type="number"
                step="0.01"
                name="litros_entregues"
                value={form.litros_entregues}
                onChange={handleChange}
                required
              />
            </div>
            <div>
              <Label>Preço por Litro (R$)</Label>
              <Input
                type="number"
                step="0.01"
                name="preco_litro"
                value={form.preco_litro}
                onChange={handleChange}
                required
              />
            </div>
            <div>
              <Label>Observações</Label>
              <Input
                name="observacoes"
                value={form.observacoes}
                onChange={handleChange}
              />
            </div>
            <Button type="submit" className="w-full bg-blue-600 text-white">
              Salvar Compra
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
