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

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>
  );
};