// pages/financeiro/visualizacao_de_despesa.tsx
'use client';

import { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import dayjs from 'dayjs';

import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

type DespesaDetalhe = {
  id: string;
  valor: number;
  data_servico: string;
  data_vencimento: string | null;
  status: string;
  descricao: string | null;
  categoria: { nome: string };
  fornecedor: { nome: string } | null;
};

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

  const [despesa, setDespesa] = useState<DespesaDetalhe | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchDespesa() {
      const { data, error } = await supabase
        .from<DespesaDetalhe>('expenses')
        .select(`
          id,
          valor,
          data_servico,
          data_vencimento,
          status,
          descricao,
          categoria:expense_categories(nome),
          fornecedor:suppliers(nome)
        `)
        .eq('id', id)
        .single();

      if (error) {
        console.error('Erro ao buscar despesa:', error);
      } else {
        setDespesa(data);
      }
      setLoading(false);
    }
    if (id) fetchDespesa();
  }, [id, supabase]);

  if (loading) {
    return <p className="p-6 text-center">Carregando detalhes da despesa...</p>;
  }

  if (!despesa) {
    return <p className="p-6 text-center text-red-500">Despesa não encontrada.</p>;
  }

  return (
    <div className="p-6 max-w-xl mx-auto">
      <Card>
        <CardHeader>
          <CardTitle>Despesa #{despesa.id.slice(0, 8)}</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <span className="font-semibold">Categoria:</span>
              <p>{despesa.categoria.nome}</p>
            </div>
            <div>
              <span className="font-semibold">Fornecedor:</span>
              <p>{despesa.fornecedor?.nome ?? '—'}</p>
            </div>
            <div>
              <span className="font-semibold">Valor:</span>
              <p>R$ {despesa.valor.toFixed(2)}</p>
            </div>
            <div>
              <span className="font-semibold">Status:</span>
              <Badge variant={despesa.status === 'pago' ? 'success' : 'destructive'}>
                {despesa.status.charAt(0).toUpperCase() + despesa.status.slice(1)}
              </Badge>
            </div>
            <div>
              <span className="font-semibold">Data do Serviço:</span>
              <p>{dayjs(despesa.data_servico).format('DD/MM/YYYY')}</p>
            </div>
            <div>
              <span className="font-semibold">Vencimento:</span>
              <p>
                {despesa.data_vencimento
                  ? dayjs(despesa.data_vencimento).format('DD/MM/YYYY')
                  : '—'}
              </p>
            </div>
            <div className="col-span-2">
              <span className="font-semibold">Descrição / Observações:</span>
              <p>{despesa.descricao ?? '—'}</p>
            </div>
          </div>
        </CardContent>
        <CardFooter className="flex justify-end space-x-2">
          <Button variant="outline" onClick={() => router.back()}>
            Voltar
          </Button>
          <Button onClick={() => router.push(`/financeiro/edicao_de_despesa?id=${despesa.id}`)}>
            Editar
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}
