"use client"
import { useAppSelector } from "@/lib/hooks";
import { useGetEmployeeSummaryQuery, useGetMonthlyEmployeeQuery } from "@/services/api";
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
import { BarChart, ChartsLegend, ChartsTooltip, ChartsXAxis, ChartsYAxis, LineChart } from "@mui/x-charts";
import { formatDate } from "date-fns";
import { useEffect } from "react";

export default function KaryawanPage() {

  const filter = useAppSelector(state => state.filter.filter);
  const {data: employeeSummary} = useGetEmployeeSummaryQuery(filter);
  const {data: montlyEmployee} = useGetMonthlyEmployeeQuery(filter);

  useEffect(() => {
    console.log(filter);
  }, [filter]);

  return (
    <div className="grid grid-cols-12 gap-4">
      <div className="col-span-8 bg-white py-4 pl-4 rounded-lg max-h-[420px] flex flex-col">
        <div className="text-xl font-bold">Data Karyawan</div>
        <div className="flex-1 min-h-[300px]">
          {employeeSummary && <BarChart className="w-full"  dataset={employeeSummary} series={[
            {dataKey: "count", label: (v) => v === "tooltip" ? "Jumlah Karyawan" : undefined!, color: "#2385DE"}
          ]} xAxis={[
            {dataKey: "organization_code", label: "Nama Perusahaan", scaleType: "band", valueFormatter: (v, context) => context.location === "tooltip" ? employeeSummary.find(e => e.organization_code === v)?.organization_name : v}
          ]} />}
        </div>
      </div>
      <div className="col-span-4 bg-white rounded-lg py-4 pl-4 max-h-[420px] flex flex-col">
        <div className="text-xl font-bold">Data Karyawan Perbulan</div>
        <div className="flex-1 min-h-[300px]">
          {montlyEmployee && <LineChart className="w-full" dataset={montlyEmployee} series={[
            {dataKey: "count", label: (v) => v === "tooltip" ? "Jumlah Karyawan" : undefined!, area: true, color: "#F7CAA9"}
          ]} xAxis={[
            {dataKey: "date", label: "Bulan", scaleType: "band", valueFormatter: (v, context) => formatDate(new Date(v), context.location === "tooltip" ? "MMMM yyyy" : "MMM")}
          ]} />}
        </div>
      </div>
      <div className="col-span-4 bg-white rounded-lg py-4 pl-4 max-h-[420px] flex flex-col">
        <div className="text-xl font-bold">Pergerakan Karyawan</div>
        <div className="flex-1 min-h-[300px] flex justify-center items-center flex-col">
          <span className="text-gray-600">Data belum tersedia</span>
        </div>
      </div>
      <div className="col-span-8 bg-white rounded-lg py-4 pl-4 max-h-[420px] flex flex-col">
        <div className="text-xl font-bold">Ranking (Top 10) Total Pergerakan Karyawan Setiap Perusahaan</div>
        <div className="flex-1 min-h-[300px] flex justify-center items-center flex-col">
          <span className="text-gray-600">Data belum tersedia</span>
        </div>
      </div>
      <div className="col-span-4 bg-white rounded-lg py-4 pl-4 max-h-[420px] flex flex-col">
        <div className="text-xl font-bold">Penjatuhan Sanksi</div>
        <div className="flex-1 min-h-[300px] flex justify-center items-center flex-col">
          <span className="text-gray-600">Data belum tersedia</span>
        </div>
      </div>
      <div className="col-span-8 bg-white rounded-lg py-4 pl-4 max-h-[420px] flex flex-col">
        <div className="text-xl font-bold">Ranking (Top 10) Total Penjatuhan Sanksi Setiap Perusahaan</div>
        <div className="flex-1 min-h-[300px] flex justify-center items-center flex-col">
          <span className="text-gray-600">Data belum tersedia</span>
        </div>
      </div>
    </div>
  );
}