import { Card, CardContent } from "@/shared/common/ui/card";
import { ArrowDown, ArrowUp, MessageSquare, CheckSquare } from "lucide-react";
import { useNavigate } from "react-router-dom";
import UseDashboard from "../hooks/useDashboard";
import { useCCIncomingRecords } from "../hooks/useCCIncomingRecords";
import { useTranslation } from "react-i18next";

export function DashboardCards() {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const {
    totalOutgoingRecords,
    totalApprovalRecords,
    totalExternalRecords,
    totalIncomingRecords,
    totalInternalRecords,
    totalApproval,
  } = UseDashboard();

  const { ccCount } = useCCIncomingRecords({
    skip: 0,
    take: 10,
    orderBy: "record.dispatchedDate:DESC,record.createdAt:DESC",
  });
  const totalCcRecords = ccCount ?? 0;

  // Navigation handlers
  const handleOutgoingClick = () => navigate("/record-management/userRecords");
  const handleIncomingClick = () => navigate("/record-management/userIncoming");
  const handleInternalClick = () =>
    navigate("/record-management/userIncoming/internal");
  const handleExternalClick = () => navigate("/record-management/userIncoming");
  const handleCCClick = () => navigate("/record-management/userIncoming/cc");
  const handleApprovalClick = () => navigate("/record-management/approval");

  return (
    <div className="flex flex-col gap-4 font-urbanist">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <Card
          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
          onClick={handleOutgoingClick}
        >
          <CardContent className="p-5">
            <div className="flex items-center">
              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
                <ArrowUp className="h-5 w-5 text-primary dark:text-primary-400" />
              </div>
              <div className="flex flex-col flex-1">
                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
                  {t("dashboard.totalOutgoing")}
                </p>
                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
                  {totalOutgoingRecords || 0}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card
          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
          onClick={handleIncomingClick}
        >
          <CardContent className="p-5">
            <div className="flex items-center">
              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
                <ArrowDown className="h-5 w-5 text-primary dark:text-primary-400" />
              </div>
              <div className="flex flex-col flex-1">
                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
                  {t("dashboard.totalIncoming")}
                </p>
                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
                  {totalIncomingRecords || 0}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card
          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
          onClick={handleInternalClick}
        >
          <CardContent className="p-5">
            <div className="flex items-center">
              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
                <ArrowDown className="h-5 w-5 text-primary dark:text-primary-400" />
              </div>
              <div className="flex flex-col flex-1">
                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
                  {t("dashboard.internalIncoming")}
                </p>
                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
                  {totalInternalRecords || 0}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <Card
          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
          onClick={handleExternalClick}
        >
          <CardContent className="p-5">
            <div className="flex items-center">
              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
                <ArrowDown className="h-5 w-5 text-primary dark:text-primary-400" />
              </div>
              <div className="flex flex-col flex-1">
                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
                  {t("dashboard.externalIncoming")}
                </p>
                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
                  {totalExternalRecords || 0}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card
          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
          onClick={handleCCClick}
        >
          <CardContent className="p-5">
            <div className="flex items-center">
              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
                <MessageSquare className="h-5 w-5 text-primary dark:text-primary-400" />
              </div>
              <div className="flex flex-col flex-1">
                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
                  {t("dashboard.ccRecords")}
                </p>
                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
                  {totalCcRecords || 0}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card
          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
          onClick={handleApprovalClick}
        >
          <CardContent className="p-5">
            <div className="flex items-center">
              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
                <CheckSquare className="h-5 w-5 text-primary dark:text-primary-400" />
              </div>
              <div className="flex flex-col flex-1">
                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
                  {t("dashboard.totalApproval")}
                </p>
                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
                  {totalApprovalRecords || 0}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}