import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function EdicaoPatrimonio() {
  const router = useRouter();
  const { id } = router.query;

  const [formData, setFormData] = useState({
    tipo_bem: "",
    descricao: "",
    numero_serie: "",
    fornecedor_id: "",
    valor_pago: "",
    valor_parcela: "",
    possui_seguro: false,
    seguradora_id: "",
    status: "ativo",
    data_aquisicao: "",
    observacoes: "",
  });

  // Simula carregamento dos dados do patrimônio
  useEffect(() => {
    if (id) {
      // Aqui você buscaria na API os dados reais
      setFormData({
        tipo_bem: "Caminhão",
        descricao: "Caminhão de carga pesado",
        numero_serie: "TRUCK12345",
        fornecedor_id: "uuid-fornecedor-123",
        valor_pago: "250000.00",
        valor_parcela: "10000.00",
        possui_seguro: true,
        seguradora_id: "uuid-seguradora-456",
        status: "ativo",
        data_aquisicao: "2024-06-01",
        observacoes: "Última revisão feita em abril/2025",
      });
    }
  }, [id]);

  const handleChange = (e: any) => {
    const { name, value, type, checked } = e.target;
    setFormData({
      ...formData,
      [name]: type === "checkbox" ? checked : value,
    });
  };

  const handleSubmit = (e: any) => {
    e.preventDefault();
    console.log("Atualizar patrimônio:", formData);
    // Aqui você atualizaria na API
    router.push("/patrimonios/listagem_patrimonios");
  };

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <Card className="shadow-lg rounded-2xl">
        <CardContent className="space-y-6 p-6">
          <h1 className="text-3xl font-bold text-blue-800">Editar Patrimônio</h1>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <Label>Tipo de Bem</Label>
              <Input name="tipo_bem" value={formData.tipo_bem} onChange={handleChange} required />
            </div>

            <div>
              <Label>Descrição</Label>
              <Input name="descricao" value={formData.descricao} onChange={handleChange} />
            </div>

            <div>
              <Label>Número de Série</Label>
              <Input name="numero_serie" value={formData.numero_serie} onChange={handleChange} />
            </div>

            <div>
              <Label>Fornecedor (ID)</Label>
              <Input name="fornecedor_id" value={formData.fornecedor_id} onChange={handleChange} />
            </div>

            <div>
              <Label>Valor Pago (R$)</Label>
              <Input type="number" name="valor_pago" value={formData.valor_pago} onChange={handleChange} />
            </div>

            <div>
              <Label>Valor da Parcela (R$)</Label>
              <Input type="number" name="valor_parcela" value={formData.valor_parcela} onChange={handleChange} />
            </div>

            <div className="flex items-center gap-2">
              <input type="checkbox" name="possui_seguro" checked={formData.possui_seguro} onChange={handleChange} />
              <Label>Possui Seguro</Label>
            </div>

            <div>
              <Label>Seguradora (ID)</Label>
              <Input name="seguradora_id" value={formData.seguradora_id} onChange={handleChange} />
            </div>

            <div>
              <Label>Status</Label>
              <select name="status" value={formData.status} onChange={handleChange} className="w-full p-2 border rounded-md">
                <option value="ativo">Ativo</option>
                <option value="inativo">Inativo</option>
                <option value="vendido">Vendido</option>
              </select>
            </div>

            <div>
              <Label>Data de Aquisição</Label>
              <Input type="date" name="data_aquisicao" value={formData.data_aquisicao} onChange={handleChange} />
            </div>

            <div>
              <Label>Observações</Label>
              <Textarea name="observacoes" value={formData.observacoes} onChange={handleChange} />
            </div>

            <Button type="submit" className="bg-green-600 hover:bg-green-700 text-white text-lg w-full">
              Salvar Alterações
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
