import React from 'react';
import { useQuery } from 'react-query';
import { format, differenceInDays } from 'date-fns';
import { ptBR } from 'date-fns/locale';
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import api from '../../services/api';

export const AlertasPrazos: React.FC = () => {
  const { data: prazos = [] } = useQuery('prazosFuturos', async () => {
    const response = await api.get('/dashboard/prazos/proximos');
    return response.data;
  });

  const getPrioridadeStyle = (dias: number) => {
    if (dias <= 3) return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
    if (dias <= 7) return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
    return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
          Prazos Próximos
        </h2>
        <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />
      </div>
      <div className="space-y-4">
        {prazos.map((prazo: any) => {
          const dias = differenceInDays(new Date(prazo.dataLimite), new Date());
          return (
            <div key={prazo.id} className="flex items-center justify-between">
              <div className="flex-1">
                <p className="text-sm font-medium text-gray-900 dark:text-white">
                  {prazo.descricao}
                </p>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Processo: {prazo.processo.numero}
                </p>
              </div>
              <span className={`px-2 py-1 rounded-full text-xs ${getPrioridadeStyle(dias)}`}>
                {format(new Date(prazo.dataLimite), 'dd/MM/yyyy', { locale: ptBR })}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
};