"use client";

import {
  CheckCircleIcon,
  ClockAlertIcon,
  LayersIcon,
} from "@/components/icons/dashboard";
import { Card, CardContent } from "@/components/ui/card";
import {
  AlertTriangle,
  CirclePause,
  CirclePlay,
  Clock,
  UserCheck,
} from "lucide-react";
import { useTranslations } from "next-intl";

interface Props {
  stats?: {
    overall_progress: number;
    total_phases: number;
    completed_phases: number;
    in_progress_phases: number;
    delayed_phases: number;
    not_started_phases: number;
    overdue_phases: number;
    total_tasks: number;
    completed_tasks: number;
    pending_tasks: number;
    in_progress_tasks: number;
    overdue_tasks: number;
    pending_client_approval_tasks: number;
  };
}

export function DashboardStatsCards({ stats }: Props) {
  const t = useTranslations();

  // Row 1: Phase stats (4 cards)
  const row1 = [
    {
      label: t("dashboard.progressStages"),
      value: `${stats?.completed_phases ?? 0}/${stats?.total_phases ?? 0}`,
      icon: <LayersIcon className="h-5 w-5 text-primary" />,
      iconBg: "bg-primary/10",
    },
    {
      label: t("dashboard.inProgressPhases"),
      value: stats?.in_progress_phases ?? 0,
      icon: <CirclePlay className="h-5 w-5 text-blue-500" />,
      iconBg: "bg-blue-500/10",
    },
    {
      label: t("dashboard.notStartedPhases"),
      value: stats?.not_started_phases ?? 0,
      icon: <CirclePause className="h-5 w-5 text-gray-500" />,
      iconBg: "bg-gray-500/10",
    },
    {
      label: t("dashboard.delayedPhases"),
      value: stats?.delayed_phases ?? 0,
      icon: <ClockAlertIcon className="h-5 w-5 text-red-500" />,
      iconBg: "bg-red-500/10",
    },
  ];

  // Row 2: Task stats (5 cards)
  const row2 = [
    {
      label: t("dashboard.completedTasks"),
      value: `${stats?.completed_tasks ?? 0}/${stats?.total_tasks ?? 0}`,
      icon: <CheckCircleIcon className="h-5 w-5 text-emerald-500" />,
      iconBg: "bg-emerald-500/10",
    },
    {
      label: t("dashboard.inProgressTasks"),
      value: stats?.in_progress_tasks ?? 0,
      icon: <CirclePlay className="h-5 w-5 text-blue-500" />,
      iconBg: "bg-blue-500/10",
    },
    {
      label: t("dashboard.pendingTasks"),
      value: stats?.pending_tasks ?? 0,
      icon: <Clock className="h-5 w-5 text-amber-500" />,
      iconBg: "bg-amber-500/10",
    },
    {
      label: t("dashboard.overdueTasks"),
      value: stats?.overdue_tasks ?? 0,
      icon: <AlertTriangle className="h-5 w-5 text-orange-500" />,
      iconBg: "bg-orange-500/10",
    },
    {
      label: t("dashboard.pendingApprovalTasks"),
      value: 0,
      icon: <UserCheck className="h-5 w-5 text-violet-500" />,
      iconBg: "bg-violet-500/10",
    },
  ];

  const renderCard = (card: (typeof row1)[number]) => (
    <Card key={card.label} className="w-full min-w-0">
      <CardContent className="flex items-start justify-between">
        <div className="space-y-2">
          <p className="text-sm text-muted-foreground">{card.label}</p>
          <p className="text-3xl font-bold">{card.value}</p>
        </div>
        <div className={`p-2 ${card.iconBg} rounded-full`}>
          {card.icon}
        </div>
      </CardContent>
    </Card>
  );

  return (
    <div className="space-y-4 sm:space-y-6">
      <div className="grid grid-cols-2 gap-4 sm:gap-6 lg:grid-cols-4">
        {row1.map(renderCard)}
      </div>
      <div className="grid grid-cols-2 gap-4 sm:gap-6 lg:grid-cols-3 xl:grid-cols-5">
        {row2.map(renderCard)}
      </div>
    </div>
  );
}