// pages/fornecedores/visualizacao_fornecedor.tsx
'use client';

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

export default function Visualizacao_fornecedor() {
  const supabase = createClientComponentClient();
  const router = useRouter();
  const params = useSearchParams();
  const id = params.get('id')!;
  const [fornecedor, setFornecedor] = useState<any>(null);
  const [loading, setLoading] = useState(true);

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

  if (loading) {
    return <div className="p-6 text-center">Carregando fornecedor…</div>;
  }
  if (!fornecedor) {
    return <div className="p-6 text-center text-red-600">Fornecedor não encontrado.</div>;
  }

  return (
    <div className="p-6 max-w-2xl mx-auto">
      <Card>
        <CardHeader>
          <CardTitle>Dados do Fornecedor</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label>Nome</Label>
            <p className="mt-1">{fornecedor.nome}</p>
          </div>
          <div>
            <Label>CNPJ / CPF</Label>
            <p className="mt-1">{fornecedor.cnpj_cpf}</p>
          </div>
          <div>
            <Label>Inscrição Estadual</Label>
            <p className="mt-1">{fornecedor.inscricao_estadual || '—'}</p>
          </div>
          <div>
            <Label>Email</Label>
            <p className="mt-1">{fornecedor.email || '—'}</p>
          </div>
          <div>
            <Label>Telefone</Label>
            <p className="mt-1">{fornecedor.telefone || '—'}</p>
          </div>
          <div>
            <Label>Observações</Label>
            <p className="mt-1 whitespace-pre-wrap">{fornecedor.observacoes || '—'}</p>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={() => router.back()}>
            Voltar
          </Button>
          <Button onClick={() => router.push(`/fornecedores/edicao_fornecedor?id=${id}`)}>
            Editar
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}
