import React from 'react';
import { useQuery } from 'react-query';
import { useAuth } from '../../../contexts/AuthContext';
import { Card } from '../../dashboard/Card';
import api from '../../../services/api';
import { formatCurrency } from '../../../utils/formatters';

export const KPIsFinanceiros: React.FC = () => {
  const { user } = useAuth();
  
  if (!['ADVOGADO_ADMIN', 'ADVOGADO'].includes(user?.perfil || '')) {
    return null;
  }

  const { data: stats } = useQuery('financeiroKPIs', async () => {
    const response = await api.get('/dashboard/financeiro/stats');
    return response.data;
  });

  return (
    <div className="grid gap-4">
      <Card
        title="Faturamento Previsto"
        value={formatCurrency(stats?.previsaoFaturamento || 0)}
        trend={stats?.crescimentoFaturamento}
        icon="BanknotesIcon"
        color="green"
      />
      <Card
        title="Taxa de Sucesso"
        value={`${stats?.taxaSucesso || 0}%`}
        trend={stats?.crescimentoTaxaSucesso}
        icon="ChartBarIcon"
        color="blue"
      />
      <Card
        title="Custas em Aberto"
        value={formatCurrency(stats?.custasEmAberto || 0)}
        icon="ExclamationTriangleIcon"
        color="yellow"
      />
    </div>
  );
};