'use client';

import { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

export default function Edicao_fornecedor() {
  const supabase = createClientComponentClient();
  const router = useRouter();
  const params = useSearchParams();
  const id = params.get('id')!;

  const [form, setForm] = useState<any>({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function load() {
      const { data } = await supabase
        .from('suppliers')
        .select('*')
        .eq('id', id)
        .single();
      setForm(data || {});
      setLoading(false);
    }
    load();
  }, [id]);

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

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    await supabase.from('suppliers').update({
      nome: form.nome,
      cnpj_cpf: form.cnpj_cpf,
      inscricao_estadual: form.inscricao_estadual,
      email: form.email,
      telefone: form.telefone,
      observacoes: form.observacoes
    }).eq('id', id);
    router.push('/fornecedores/Listagem_fornecedores');
  };

  if (loading) return <div className="p-6 text-center">Carregando...</div>;

  return (
    <div className="p-6 max-w-2xl mx-auto">
      <Card>
        <CardHeader>
          <CardTitle>Editar Fornecedor</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <Label>Nome</Label>
              <Input name="nome" value={form.nome} onChange={handleChange} required />
            </div>
            <div>
              <Label>CNPJ/CPF</Label>
              <Input name="cnpj_cpf" value={form.cnpj_cpf} onChange={handleChange} required />
            </div>
            <div>
              <Label>Inscrição Estadual</Label>
              <Input name="inscricao_estadual" value={form.inscricao_estadual} onChange={handleChange} />
            </div>
            <div>
              <Label>Email</Label>
              <Input name="email" type="email" value={form.email} onChange={handleChange} />
            </div>
            <div>
              <Label>Telefone</Label>
              <Input name="telefone" value={form.telefone} onChange={handleChange} />
            </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">
              Atualizar Fornecedor
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
