'use client'
import { cn, formatPricePesos, getStatusColor } from "@/lib/utils";
import React from "react";
import {
  CircleDotDashed,
  BicepsFlexed,
  SquareCheckBig,
  LucideIcon,
  DollarSign,
} from "lucide-react";
import { trpc } from "@/app/_trpc/client";


const ICONS_PROJECTS_SUMMARY: Record<string, LucideIcon> = {
  noiniciada: CircleDotDashed,
  enproceso: BicepsFlexed,
  completada: SquareCheckBig,
};

const getStatusIcon = (status: string) => {
  const normalizedStatus = normalizeName(status);

  const IconComponent =
    ICONS_PROJECTS_SUMMARY[normalizedStatus] || CircleDotDashed; 

  return <IconComponent className="w-6 h-6 text-current" />;
};

const normalizeName = (status: string) => {
  return status.replace(/\s+/g, "").toLowerCase();
};




const ProjectsResume = ({searchParams}:{searchParams:Record<string,any>}) => {
    const [projects] = trpc.projects.getProjectsSummary.useSuspenseQuery(searchParams,{
      refetchOnMount:false,
    });
    const {data} = trpc.projects.getProjectEarningsYear.useQuery(searchParams,{
      refetchOnMount:false,
    });


    return (
    <div>
      <div className="flex items-center justify-between">
     
      </div>
      <div className="grid grid-cols-2  place-items-center md:flex justify-between gap-2">
        <article
          className={cn("px-4 md:px-6 w-full h-full py-2 rounded-xl bg-white min-w-[150px]   ")}
        >
          <div
            className={cn(
              "p-2 w-fit rounded-full text-white",
              getStatusColor("")
            )}
          >
            <DollarSign />
          </div>
          <p className="text-xs font-light mt-1.5 text-gray-400 first-letter:uppercase">
            Ganancias totales
          </p>
          <p className="text-xl font-medium">{formatPricePesos(data?.totalEarnings || 0 )}</p>
        </article>
        {projects?.map((project) => {
          return (
            <article
              key={project?.status}
              className={cn("px-4 md:px-6 h-full w-full py-2 rounded-xl bg-white min-w-[150px]   ")}
            >
              <div
                className={cn(
                  "p-2 w-fit rounded-full text-white",
                  getStatusColor(project?.status)
                )}
              >
                {getStatusIcon(project?.status)}
              </div>
              <p className="text-xs font-light mt-1.5 text-gray-400 first-letter:uppercase">
                {project?.label}
              </p>
              <p className="text-xl font-medium">{project?.count}</p>
            </article>
          );
        })}
      </div>
    </div>
  );
};

export default ProjectsResume;