import { useRef } from "react";
import { Card } from "@/shared/common/ui/card";
import { ExportButton } from "./ExportButton";
import { GenericChart, ChartDataItem } from "./GenericChart";
import { ArrowUp, ArrowDown, CalendarDays } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { t } from "i18next";
import { useIncomingRecordCounts } from "../hooks/useIncomingRecordCount";
import { useReport } from "../hooks/useReport";

// Updated color palette to match user dashboard
const COLORS = {
  Incoming: "var(--primary-300)", // Green
  Outgoing: "var(--primary-400)", // Teal
};

export function RecordOfficerDashboard() {
  //const { recordSummary, loading, error } = useSelector(recordOfficerSelector);
  const dashboardRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();
  // incoming Data
  const {
    monthlyCount,
    weeklyCount,
    dailyCount,
    monthlyCountOutgoing,
    weeklyCountOutgoing,
    dailyCountOutgoing,
  } = useIncomingRecordCounts();
  const monthlyIncomingRecord = monthlyCount;
  const weeklyIncomingRecord = weeklyCount;
  const dailyIncomingRecord = dailyCount;
  const { ROTotalIncoming, ROTotalOutgoing } = useReport("");
  const monthlyOutgoingRecord = monthlyCountOutgoing;
  const weeklyOutgoingRecord = weeklyCountOutgoing;
  const dailyOutgoingRecord = dailyCountOutgoing;
  //Prepare chart data
  const totalData: ChartDataItem[] = [
    { name: "Incoming", value: ROTotalIncoming || 0, fill: COLORS.Incoming },
    { name: "Outgoing", value: ROTotalOutgoing || 0, fill: COLORS.Outgoing },
  ];

  const monthlyData: ChartDataItem[] = [
    {
      name: "Incoming",
      value: monthlyIncomingRecord || 0,
      fill: COLORS.Incoming,
    },
    {
      name: "Outgoing",
      value: monthlyOutgoingRecord || 0,
      fill: COLORS.Outgoing,
    },
  ];

  const weeklyData: ChartDataItem[] = [
    {
      name: "Incoming",
      value: weeklyIncomingRecord || 0,
      fill: COLORS.Incoming,
    },
    {
      name: "Outgoing",
      value: weeklyOutgoingRecord || 0,
      fill: COLORS.Outgoing,
    },
  ];

  const dailyData: ChartDataItem[] = [
    {
      name: "Incoming",
      value: dailyIncomingRecord || 0,
      fill: COLORS.Incoming,
    },
    {
      name: "Outgoing",
      value: dailyOutgoingRecord || 0,
      fill: COLORS.Outgoing,
    },
  ];

  return (
    <div className="bg-background text-foreground">
      <div className="mb-3 mt-6 flex w-full flex-wrap items-center justify-end gap-2 overflow-visible">
        <ExportButton dashboardRef={dashboardRef} />
      </div>

      {/* Dashboard content with ref for export */}
      <div ref={dashboardRef} className="flex flex-col w-full gap-4 sm:gap-6">
        {/* Records Summary Cards - First Row (2 cards) */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Card
            className="shadow-md border border-blue-100 dark:border-blue-900 rounded-xl bg-white dark:bg-gray-800 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:shadow-lg transition-all duration-200 cursor-pointer"
            onClick={() =>
              navigate("/record-management/recordOfficer/outgoing")
            }
          >
            <div className="p-5 flex items-center">
              <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg mr-4">
                <ArrowUp className="h-5 w-5 text-blue-600 dark:text-blue-400" />
              </div>
              <div className="flex flex-col flex-1">
                <span className="text-gray-600 dark:text-gray-400 text-sm font-medium">
                  {t("dashboard.totalOutgoing")}
                </span>
                <span className="text-gray-800 dark:text-gray-100 text-2xl font-semibold mt-1">
                  {ROTotalOutgoing || 0}
                </span>
              </div>
            </div>
          </Card>
          <Card
            className="shadow-md border border-primary-100 dark:border-primary-900 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:shadow-lg transition-all duration-200 cursor-pointer"
            onClick={() =>
              navigate("/record-management/recordOfficer/outgoing")
            }
          >
            <div className="p-5 flex items-center">
              <div className="p-2 bg-primary-100 dark:bg-primary-900/30 rounded-lg mr-4">
                <CalendarDays className="h-5 w-5 text-primary-600 dark:text-primary-400" />
              </div>
              <div className="flex flex-col flex-1">
                <span className="text-gray-600 dark:text-gray-400 text-sm font-medium">
                  {t("dashboard.monthlyOutgoing")}
                </span>
                <span className="text-gray-800 dark:text-gray-100 text-2xl font-semibold mt-1">
                  {monthlyOutgoingRecord || 0}
                </span>
              </div>
            </div>
          </Card>
        </div>

        {/* Records Summary Cards - Second Row (2 cards) */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Card
            className="shadow-md border border-primary-100 dark:border-primary-900 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:shadow-lg transition-all duration-200 cursor-pointer"
            onClick={() =>
              navigate("/record-management/recordOfficer/incoming")
            }
          >
            <div className="p-5 flex items-center">
              <div className="p-2 bg-primary-100 dark:bg-primary-900/30 rounded-lg mr-4">
                <ArrowDown className="h-5 w-5 text-primary-600 dark:text-primary-400" />
              </div>
              <div className="flex flex-col flex-1">
                <span className="text-gray-600 dark:text-gray-400 text-sm font-medium">
                  {t("dashboard.totalIncoming")}
                </span>
                <span className="text-gray-800 dark:text-gray-100 text-2xl font-semibold mt-1">
                  {ROTotalIncoming || 0}
                </span>
              </div>
            </div>
          </Card>
          <Card
            className="shadow-md border border-amber-100 dark:border-amber-900 rounded-xl bg-white dark:bg-gray-800 hover:bg-amber-50 dark:hover:bg-amber-900/20 hover:shadow-lg transition-all duration-200 cursor-pointer"
            onClick={() =>
              navigate("/record-management/recordOfficer/incoming")
            }
          >
            <div className="p-5 flex items-center">
              <div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-lg mr-4">
                <CalendarDays className="h-5 w-5 text-amber-600 dark:text-amber-400" />
              </div>
              <div className="flex flex-col flex-1">
                <span className="text-gray-600 dark:text-gray-400 text-sm font-medium">
                  {t("dashboard.monthlyIncoming")}
                </span>
                <span className="text-gray-800 dark:text-gray-100 text-2xl font-semibold mt-1">
                  {monthlyIncomingRecord || 0}
                </span>
              </div>
            </div>
          </Card>
        </div>

        {/* Comparison Charts - Row 1 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
          <GenericChart
            title={t("dashboard.totalInVsOut")}
            data={totalData}
            colorLegend={COLORS}
          />
          <GenericChart
            title={t("dashboard.monthlyInVsOut")}
            data={monthlyData}
            colorLegend={COLORS}
          />
        </div>

        {/* Comparison Charts - Row 2 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
          <GenericChart
            title={t("dashboard.weeklyInVsOut")}
            data={weeklyData}
            colorLegend={COLORS}
          />
          <GenericChart
            title={t("dashboard.dailyInVsOut")}
            data={dailyData}
            colorLegend={COLORS}
          />
        </div>
      </div>
    </div>
  );
}
export default RecordOfficerDashboard;
