import React from 'react';
import { useQuery } from 'react-query';
import { Card } from '../Card';
import api from '../../../services/api';

export const TarefasStats: React.FC = () => {
  const { data: stats } = useQuery('tarefasStats', async () => {
    try {
      const response = await api.get('/dashboard/tarefas/stats');
      return response.data;
    } catch (error) {
      console.error('Erro ao buscar estatísticas:', error);
      return {
        pendentes: 0,
        atrasadas: 0,
        concluidas: 0,
        total: 0,
        taxaConclusao: 0,
        porStatus: { PENDENTE: 0 }
      };
    }
  });

  const defaultStats = {
    pendentes: 0,
    atrasadas: 0,
    concluidas: 0,
    total: 0,
    taxaConclusao: 0,
    porStatus: { PENDENTE: 0 }
  };

  const safeStats = stats || defaultStats;

  return (
    <div className="grid gap-4">
      <Card
        title="Tarefas Pendentes"
        value={safeStats.porStatus?.PENDENTE || 0}
        trend={safeStats.atrasadas}
        trendLabel="atrasadas"
        icon="ClipboardDocumentList"
        color="yellow"
      />
      <Card
        title="Para Hoje"
        value={safeStats.pendentes || 0}
        icon="Clock"
        color="blue"
      />
      <Card
        title="Concluídas (Mês)"
        value={safeStats.concluidas || 0}
        trend={safeStats.taxaConclusao}
        trendLabel="taxa de conclusão"
        icon="CheckCircle"
        color="green"
      />
    </div>
  );
};