"use client";

import { useTranslations } from "next-intl";
import { useDashboardControllerGetDashboardStatsV1 } from "@/api/user/practitioner-dashboard/practitioner-dashboard";

interface StatCardProps {
  title: string;
  value: string | number;
  icon: React.ReactNode;
  iconBgColor: string;
  valueColor?: string;
  onClick?: () => void;
  clickable?: boolean;
  isLoading?: boolean;
}

function StatCard({ title, value, icon, iconBgColor, valueColor = "text-gray-900", onClick, clickable, isLoading }: StatCardProps) {
  return (
    <div
      className={`bg-white rounded-xl border border-gray-300 p-5 flex items-start justify-between shadow-sm ${clickable ? 'cursor-pointer hover:shadow-md hover:border-gray-400 transition' : ''}`}
      onClick={onClick}
    >
      <div>
        <p className="text-sm text-gray-500 font-medium">{title}</p>
        <p className={`text-2xl sm:text-3xl font-bold mt-1 ${valueColor}`}>
          {isLoading ? (
            <span className="inline-block w-12 h-8 bg-gray-200 animate-pulse rounded"></span>
          ) : (
            value
          )}
        </p>
      </div>
      <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${iconBgColor}`}>
        {icon}
      </div>
    </div>
  );
}

interface DashboardStatsCardsProps {
  onHighRiskClick?: () => void;
  onPendingScreenClick?: () => void;
  onScreensCompletedClick?: () => void;
  onTotalClientsClick?: () => void;
}

export default function DashboardStatsCards({ onHighRiskClick, onPendingScreenClick, onScreensCompletedClick, onTotalClientsClick }: DashboardStatsCardsProps) {
  const t = useTranslations("practitioner");

  // Fetch dashboard stats from API
  const { data: statsResponse, isLoading } = useDashboardControllerGetDashboardStatsV1();

  // Extract stats data from API response (using type assertion due to void return type in generated hooks)
  const statsData = (statsResponse as any)?.data;

  const stats = [
    {
      title: t("dashboard.totalClient"),
      value: statsData?.total_clients ?? 0,
      iconBgColor: "bg-[#E8F4F8]",
      clickable: true,
      onClick: onTotalClientsClick,
      icon: (
        <svg className="w-6 h-6 text-[#3B9EC9]" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
        </svg>
      ),
    },
    {
      title: t("dashboard.screensCompleted"),
      value: statsData?.completed_screenings ?? 0,
      iconBgColor: "bg-[#E8F8ED]",
      clickable: true,
      onClick: onScreensCompletedClick,
      icon: (
        <svg className="w-6 h-6 text-[#22C55E]" fill="currentColor" viewBox="0 0 24 24">
          <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
        </svg>
      ),
    },
    {
      title: t("dashboard.pendingScreen"),
      value: statsData?.pending_screenings ?? 0,
      iconBgColor: "bg-[#FEF9E7]",
      clickable: true,
      onClick: onPendingScreenClick,
      icon: (
        <svg className="w-6 h-6 text-[#F59E0B]" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v2h-2zm0-8h2v6h-2z"/>
        </svg>
      ),
    },
    {
      title: t("dashboard.highRiskCases"),
      value: statsData?.high_risk_cases ?? 0,
      iconBgColor: "bg-[#FEE2E2]",
      valueColor: "text-red-500",
      clickable: true,
      onClick: onHighRiskClick,
      icon: (
        <svg className="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 24 24">
          <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
        </svg>
      ),
    },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      {stats.map((stat, index) => (
        <StatCard
          key={index}
          title={stat.title}
          value={stat.value}
          icon={stat.icon}
          iconBgColor={stat.iconBgColor}
          valueColor={stat.valueColor}
          onClick={stat.onClick}
          clickable={stat.clickable}
          isLoading={isLoading}
        />
      ))}
    </div>
  );
}