import { useState, useEffect, useCallback, useRef } from "react";
import { DashboardLayout } from "../layout";
import { Card, CardContent } from "~/components/ui/card";
import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
import { Checkbox } from "~/components/ui/checkbox";
import moment from "moment-jalaali";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "~/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "~/components/ui/dialog";
import {
  ChevronUp,
  ChevronDown,
  RefreshCw,
  Building2,
  PickaxeIcon,
  UserIcon,
  UsersIcon,
} from "lucide-react";
import apiService from "~/lib/api";
import toast from "react-hot-toast";
import {
  Database,
  Zap,
  TrendingDown,
  TrendingUp,
  Key,
  Sprout,
  BrainCircuit,
  LoaderCircle,
} from "lucide-react";
import { CustomBarChart } from "~/components/ui/custom-bar-chart";

moment.loadPersian({ usePersianDigits: true });

interface SortConfig {
  field: string;
  direction: "asc" | "desc";
}

interface StatsCard {
  id: string;
  title: string;
  value: string;
  description?: string;
  icon: React.ReactNode;
  color: string;
}

// Raw API response interface for digital innovation metrics
interface DigitalInnovationMetrics {
  count_innovation_digital_projects: string;
  increased_revenue: string;
  increased_revenue_percent: string;
  reduce_costs: string;
  reduce_costs_percent: string;
  reduce_energy_consumption: string;
  reduce_energy_consumption_percent: string;
  resource_productivity: string;
  resource_productivity_percent: string;
}

// Normalized interface for digital innovation stats
interface DigitalInnovationStats {
  totalDigitalProjects: number;
  increasedRevenue: number;
  increasedRevenuePercent: number;
  reduceCosts: number;
  reduceCostsPercent: number;
  reduceEnergyConsumption: number;
  reduceEnergyConsumptionPercent: number;
  resourceProductivity: number;
  resourceProductivityPercent: number;
}

enum DigitalCardLabel {
  decreasCost = "کاهش هزینه‌ها",
  increaseRevenue = "افزایش درآمد",
  performance = "بهره‌وری منابع",
  decreaseEnergy = "کاهش مصرف انرژی",
}

interface ProcessInnovationData {
  project_no: string;
  title: string;
  project_status: string;
  project_rating: string;
  project_description: string;
}

const columns = [
  // { key: "select", label: "", sortable: false, width: "50px" },
  { key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
  { key: "title", label: "عنوان پروژه", sortable: true, width: "400px" },
  {
    key: "project_status",
    label: "وضعیت پروژه",
    sortable: true,
    width: "140px",
  },
  {
    key: "project_rating",
    label: "امتیاز پروژه",
    sortable: true,
    width: "140px",
  },
];

export function DigitalInnovationPage() {
  const [projects, setProjects] = useState<DigitalInnovationMetrics[]>([]);
  const [loading, setLoading] = useState(false);
  const [loadingMore, setLoadingMore] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize] = useState(20);
  const [hasMore, setHasMore] = useState(true);
  const [totalCount, setTotalCount] = useState(0);
  const [actualTotalCount, setActualTotalCount] = useState(0);
  const [statsLoading, setStatsLoading] = useState(false);
  const [stats, setStats] = useState<DigitalInnovationStats>({
    totalDigitalProjects: 0,
    increasedRevenue: 0,
    increasedRevenuePercent: 0,
    reduceCosts: 0,
    reduceCostsPercent: 0,
    reduceEnergyConsumption: 0,
    reduceEnergyConsumptionPercent: 0,
    resourceProductivity: 0,
    resourceProductivityPercent: 0,
  });
  const [sortConfig, setSortConfig] = useState<SortConfig>({
    field: "start_date",
    direction: "asc",
  });
  const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
    new Set()
  );
  const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
  //   const [selectedProjectDetails, setSelectedProjectDetails] =
  //     useState<ProcessInnovationData | null>(null);
  const observerRef = useRef<HTMLDivElement>(null);
  const fetchingRef = useRef(false);

  // Selection handlers
  const handleSelectAll = () => {
    if (selectedProjects.size === projects.length) {
      setSelectedProjects(new Set());
    } else {
      setSelectedProjects(new Set(projects.map((p: any) => p.project_no)));
    }
  };

  //   const handleSelectProject = (projectNo: string) => {
  //     const newSelected = new Set(selectedProjects);
  //     if (newSelected.has(projectNo)) {
  //       newSelected.delete(projectNo);
  //     } else {
  //       newSelected.add(projectNo);
  //     }
  //     setSelectedProjects(newSelected);
  //   };

  //   const handleProjectDetails = (project: ProcessInnovationData) => {
  //     console.log(project);
  //     // setSelectedProjectDetails(project);
  //     setDetailsDialogOpen(true);
  //   };

  const formatNumber = (value: string | number) => {
    if (!value) return "0";
    const numericValue = typeof value === "string" ? parseFloat(value) : value;
    if (isNaN(numericValue)) return "0";
    return new Intl.NumberFormat("fa-IR").format(numericValue);
  };

  // Stats cards data - computed from projects data
  const statsCards: StatsCard[] = [
    {
      id: "production-stops-prevention",
      title: DigitalCardLabel.decreasCost,
      value: formatNumber(stats.reduceCosts.toFixed?.(1) ?? stats.reduceCosts),
      description: "میلیون ریال کاهش یافته",
      icon: <TrendingDown />,
      color: "text-emerald-400",
    },
    {
      id: "bottleneck-removal",
      title: DigitalCardLabel.increaseRevenue,
      value: formatNumber(stats.increasedRevenue),
      description: "میلیون ریال افزایش یافته",
      icon: <TrendingUp />,
      color: "text-emerald-400",
    },

    {
      id: "currency-reduction",
      title: DigitalCardLabel.performance,
      value: formatNumber(
        stats.resourceProductivity.toFixed?.(0) ?? stats.resourceProductivity
      ),
      description: "هزار تن صرفه جوریی شده",
      icon: <Database />,
      color: "text-emerald-400",
    },
    {
      id: "frequent-failures-reduction",
      title: DigitalCardLabel.decreaseEnergy,
      value: formatNumber(
        stats.reduceEnergyConsumption.toFixed?.(1) ??
          stats.reduceEnergyConsumption
      ),
      description: "مگاوات کاهش یافته",
      icon: <Zap />,
      color: "text-emerald-400",
    },
  ];

  const fetchTable = async (reset = false) => {
    if (fetchingRef.current) {
      return;
    }

    try {
      fetchingRef.current = true;

      if (reset) {
        setLoading(true);
        setCurrentPage(1);
      } else {
        setLoadingMore(true);
      }

      const pageToFetch = reset ? 1 : currentPage;

      const response = await apiService.select({
        ProcessName: "project",
        OutputFields: [
          "project_no",
          "title",
          "project_description",
          "project_status",
          "project_rating",
        ],
        Sorts: [["start_date", "asc"]],
        Conditions: [["type_of_innovation", "=", "نوآوری دیجیتال"]],
        Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
      });

      // console.log(JSON.parse(response.data));
      if (response.state === 0) {
        const dataString = response.data;
        if (dataString && typeof dataString === "string") {
          try {
            const parsedData = JSON.parse(dataString);
            if (Array.isArray(parsedData)) {
              if (reset) {
                setProjects(parsedData);
                setTotalCount(parsedData.length);
              } else {
                setProjects((prev) => [...prev, ...parsedData]);
                setTotalCount((prev) => prev + parsedData.length);
              }
              setHasMore(parsedData.length === pageSize);
            } else {
              if (reset) {
                setProjects([]);
                setTotalCount(0);
              }
              setHasMore(false);
            }
          } catch (parseError) {
            console.error("Error parsing project data:", parseError);
            if (reset) {
              setProjects([]);
              setTotalCount(0);
            }
            setHasMore(false);
          }
        } else {
          if (reset) {
            setProjects([]);
            setTotalCount(0);
          }
          setHasMore(false);
        }
      } else {
        toast.error(response.message || "خطا در دریافت اطلاعات پروژه‌ها");
        if (reset) {
          setProjects([]);
          setTotalCount(0);
        }
        setHasMore(false);
      }
    } catch (error) {
      console.error("Error fetching projects:", error);
      toast.error("خطا در دریافت اطلاعات پروژه‌ها");
      if (reset) {
        setProjects([]);
        setTotalCount(0);
      }
      setHasMore(false);
    } finally {
      setLoading(false);
      setLoadingMore(false);
      fetchingRef.current = false;
    }
  };

  const loadMore = useCallback(() => {
    if (!loadingMore && hasMore && !loading) {
      setCurrentPage((prev) => prev + 1);
    }
  }, [loadingMore, hasMore, loading]);

  useEffect(() => {
    fetchTable(true);
    fetchTotalCount();
    fetchStats();
  }, [sortConfig]);

  useEffect(() => {
    if (currentPage > 1) {
      fetchTable(false);
    }
  }, [currentPage]);

  useEffect(() => {
    const scrollContainer = document.querySelector(".overflow-auto");

    const handleScroll = () => {
      if (!scrollContainer || !hasMore || loadingMore) return;

      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
      const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;

      if (scrollPercentage >= 0.9) {
        loadMore();
      }
    };

    if (scrollContainer) {
      scrollContainer.addEventListener("scroll", handleScroll);
    }

    return () => {
      if (scrollContainer) {
        scrollContainer.removeEventListener("scroll", handleScroll);
      }
    };
  }, [loadMore, hasMore, loadingMore]);

  const handleSort = (field: string) => {
    fetchingRef.current = false;
    setSortConfig((prev) => ({
      field,
      direction:
        prev.field === field && prev.direction === "asc" ? "desc" : "asc",
    }));
    setCurrentPage(1);
    setProjects([]);
    setHasMore(true);
  };

  const fetchTotalCount = async () => {
    try {
      const response = await apiService.select({
        ProcessName: "project",
        OutputFields: ["count(project_no)"],
        Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
      });

      if (response.state === 0) {
        const dataString = response.data;
        if (dataString && typeof dataString === "string") {
          try {
            const parsedData = JSON.parse(dataString);
            if (Array.isArray(parsedData) && parsedData[0]) {
              const count = parsedData[0].project_no_count || 0;
              setActualTotalCount(count);
              // Keep stats in sync if backend stats not yet loaded
              setStats((prev) => ({ ...prev, totalProjects: count }));
            }
          } catch (parseError) {
            console.error("Error parsing count data:", parseError);
          }
        }
      }
    } catch (error) {
      console.error("Error fetching total count:", error);
    }
  };

  // Fetch aggregated stats from backend call API (innovation_process_function)
  const fetchStats = async () => {
    try {
      setStatsLoading(true);
      const raw = await apiService.callInnovationProcess<any>({
        innovation_digital_function: {},
      });

      let payload: DigitalInnovationMetrics = raw?.data;
      if (typeof payload === "string") {
        try {
          payload = JSON.parse(payload);
        } catch {}
      }

      const parseNum = (v: unknown): number => {
        if (v == null) return 0;
        if (typeof v === "number") return v;
        if (typeof v === "string") {
          const cleaned = v.replace(/,/g, "").trim();
          const n = parseFloat(cleaned);
          return isNaN(n) ? 0 : n;
        }
        return 0;
      };

      const normalized: DigitalInnovationStats = {
        totalDigitalProjects: parseNum(
          payload?.count_innovation_digital_projects
        ),
        increasedRevenue: parseNum(payload?.increased_revenue),
        increasedRevenuePercent: parseNum(payload?.increased_revenue_percent),
        reduceCosts: parseNum(payload?.reduce_costs),
        reduceCostsPercent: parseNum(payload?.reduce_costs_percent),
        reduceEnergyConsumption: parseNum(payload?.reduce_energy_consumption),
        reduceEnergyConsumptionPercent: parseNum(
          payload?.reduce_energy_consumption_percent
        ),
        resourceProductivity: parseNum(payload?.resource_productivity),
        resourceProductivityPercent: parseNum(
          payload?.resource_productivity_percent
        ),
      };

      setStats(normalized);
    } catch (error) {
      console.error("Error fetching stats:", error);
    } finally {
      setStatsLoading(false);
    }
  };

  const handleRefresh = () => {
    fetchingRef.current = false;
    setCurrentPage(1);
    setProjects([]);
    setHasMore(true);
    fetchTable(true);
    fetchTotalCount();
    fetchStats();
  };

  const formatCurrency = (amount: string | number) => {
    if (!amount) return "0 ریال";
    const numericAmount =
      typeof amount === "string"
        ? parseFloat(amount.replace(/,/g, ""))
        : amount;
    if (isNaN(numericAmount)) return "0 ریال";
    return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
  };

  const formatPercentage = (value: string | number) => {
    if (!value) return "0%";
    const numericValue = typeof value === "string" ? parseFloat(value) : value;
    if (isNaN(numericValue)) return "0%";
    return `${numericValue.toFixed(1)}%`;
  };

  const getStatusColor = (status: string) => {
    switch (status?.toLowerCase()) {
      case "فعال":
        return "#3AEA83";
      case "متوقف":
        return "#F76276";
      case "تکمیل شده":
        return "#32CD32";
      default:
        return "#6B7280";
    }
  };

  const getRatingColor = (rating: string) => {
    const ratingNum = parseFloat(rating);
    if (isNaN(ratingNum)) return "#6B7280";

    if (ratingNum >= 8) return "#3AEA83";
    if (ratingNum >= 6) return "#69C8EA";
    if (ratingNum >= 4) return "#FFD700";
    return "#F76276";
  };

  const renderCellContent = (item: any, column: any) => {
    const value = item[column.key as keyof ProcessInnovationData];

    switch (column.key) {
      case "select":
        return (
          <Checkbox
            checked={selectedProjects.has(item.project_no)}
            //   onCheckedChange={() => handleSelectProject(item.project_no)}
            className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
          />
        );
      case "details":
        return (
          <Button
            variant="ghost"
            size="sm"
            //   onClick={() => handleProjectDetails(item)}
            className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto"
          >
            جزئیات بیشتر
          </Button>
        );
      case "amount_currency_reduction":
        return (
          <span className="font-medium text-emerald-400">
            {formatCurrency(String(value))}
          </span>
        );
      case "project_no":
        return (
          <Badge variant="outline" className="font-mono">
            {String(value)}
          </Badge>
        );
      case "title":
        return <span className="font-medium text-white">{String(value)}</span>;
      case "project_status":
        return (
          <Badge
            variant="outline"
            className="font-medium border-2"
            style={{
              border: "none",
            }}
          >
            {String(value)}
          </Badge>
        );
      case "project_rating":
        return (
          <Badge variant="outline" className="text-lg text-center border-none">
            {formatNumber(String(value))}
          </Badge>
        );
      case "reduce_prevention_production_stops":
      case "throat_removal":
      case "Reduce_rate_failure":
        return (
          <span className="font-medium text-blue-400">
            {formatNumber(String(value))}
          </span>
        );
      default:
        return <span className="text-gray-300">{String(value) || "-"}</span>;
    }
  };

  return (
    <DashboardLayout title="نوآوری دیجیتال">
      <div className="flex flex-row gap-8 justify-between p-6 space-y-4 h-full">
        {/* Stats Cards */}
        <div className="flex flex-col gap-4 w-full">
          <div className="space-y-6 w-full">
            {/* Stats Grid */}
            <div className="grid grid-cols-2 gap-3">
              {loading || statsLoading
                ? // Loading skeleton for stats cards - matching new design
                  Array.from({ length: 4 }).map((_, index) => (
                    <Card
                      key={`skeleton-${index}`}
                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"
                    >
                      <CardContent className="p-2">
                        <div className="flex flex-col justify-between gap-2">
                          <div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
                            <div
                              className="h-6 bg-gray-600 rounded animate-pulse"
                              style={{ width: "60%" }}
                            />
                            <div className="p-3 bg-emerald-500/20 rounded-full w-fit">
                              <div className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
                            </div>
                          </div>
                          <div className="flex items-center justify-center flex-col p-1">
                            <div
                              className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
                              style={{ width: "40%" }}
                            />
                            <div
                              className="h-4 bg-gray-600 rounded animate-pulse"
                              style={{ width: "80%" }}
                            />
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))
                : statsCards.map((card) => (
                    <Card
                      onClick={() => setDetailsDialogOpen(true)}
                      key={card.id}
                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
                    >
                      <CardContent className="p-2">
                        <div className="flex flex-col justify-between gap-2">
                          <div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
                            <h3 className="text-lg font-bold text-white font-persian">
                              {card.title}
                            </h3>
                            <div
                              className={`p-3 gird placeitems-center rounded-full w-fit `}
                            >
                              {card.icon}
                            </div>
                          </div>
                          <div className="flex items-center justify-center flex-col p-1">
                            <p
                              className={`text-3xl font-bold ${card.color} mb-1`}
                            >
                              {card.value}
                            </p>
                            <p className="text-sm text-gray-300 font-persian">
                              {card.description}
                            </p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
            </div>
          </div>

          {/* Process Impacts Chart */}
          <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
            {/* <CardContent > */}
            <CustomBarChart
              title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای"
              loading={statsLoading}
              data={[
                {
                  label: DigitalCardLabel.decreasCost,
                  value: stats.reduceCostsPercent || 0,
                  color: "bg-emerald-400",
                  labelColor: "text-white",
                },
                {
                  label: DigitalCardLabel.increaseRevenue,
                  value: stats.increasedRevenuePercent || 0,
                  color: "bg-emerald-400",
                  labelColor: "text-white",
                },
                {
                  label: DigitalCardLabel.performance,
                  value: stats.resourceProductivityPercent || 0,
                  color: "bg-emerald-400",
                  labelColor: "text-white",
                },
                {
                  label: DigitalCardLabel.decreaseEnergy,
                  value: stats.reduceEnergyConsumptionPercent || 0,
                  color: "bg-emerald-400",
                  labelColor: "text-white",
                },
              ]}
              barHeight="h-5"
              showAxisLabels={true}
            />
            {/* </CardContent> */}
          </Card>
        </div>

        {/* Data Table */}
        <Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden w-full h-max">
          <CardContent className="p-0">
            <div className="relative">
              <Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-270px)]">
                <TableHeader>
                  <TableRow className="bg-[#3F415A]">
                    {columns.map((column) => (
                      <TableHead
                        key={column.key}
                        className="text-right font-persian whitespace-nowrap text-gray-200 font-medium sticky top-0 z-20 bg-[#3F415A]"
                        style={{ width: column.width }}
                      >
                        {column.key === "select" ? (
                          <div className="flex items-center justify-center">
                            <Checkbox
                              checked={
                                selectedProjects.size === projects.length &&
                                projects.length > 0
                              }
                              onCheckedChange={handleSelectAll}
                              className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
                            />
                          </div>
                        ) : column.sortable ? (
                          <button
                            onClick={() => handleSort(column.key)}
                            className="flex items-center gap-2"
                          >
                            <span>{column.label}</span>
                            {sortConfig.field === column.key ? (
                              sortConfig.direction === "asc" ? (
                                <ChevronUp className="w-4 h-4" />
                              ) : (
                                <ChevronDown className="w-4 h-4" />
                              )
                            ) : (
                              <div className="w-4 h-4" />
                            )}
                          </button>
                        ) : (
                          column.label
                        )}
                      </TableHead>
                    ))}
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {loading ? (
                    // Skeleton loading rows (compact)
                    Array.from({ length: 10 }).map((_, index) => (
                      <TableRow
                        key={`skeleton-${index}`}
                        className="text-sm leading-tight h-8"
                      >
                        {columns.map((column) => (
                          <TableCell
                            key={column.key}
                            className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
                          >
                            <div className="flex items-center gap-2">
                              <div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" />
                              <div
                                className="h-2.5 bg-gray-600 rounded animate-pulse"
                                style={{ width: `${Math.random() * 60 + 40}%` }}
                              />
                            </div>
                          </TableCell>
                        ))}
                      </TableRow>
                    ))
                  ) : projects.length === 0 ? (
                    <TableRow>
                      <TableCell
                        colSpan={columns.length}
                        className="text-center py-8"
                      >
                        <span className="text-gray-400 font-persian">
                          هیچ پروژه‌ای یافت نشد
                        </span>
                      </TableCell>
                    </TableRow>
                  ) : (
                    projects.map((project, index) => (
                      <TableRow
                        key={`${project.count_innovation_digital_projects}-${index}`}
                        className="text-sm leading-tight h-8"
                      >
                        {columns.map((column) => (
                          <TableCell
                            key={column.key}
                            className={`text-right whitespace-nowrap border-emerald-500/20 py-1 px-2 ${column.key === "select" ? "flex justify-center items-center" : ""}`}
                          >
                            {renderCellContent(project, column)}
                          </TableCell>
                        ))}
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>

            {/* Infinite scroll trigger */}
            <div ref={observerRef} className="h-auto">
              {loadingMore && (
                <div className="flex items-center justify-center py-1">
                  <div className="flex items-center gap-2">
                    <RefreshCw className="w-4 h-4 animate-spin text-emerald-400" />
                    <span className="font-persian text-gray-300 text-xs"></span>
                  </div>
                </div>
              )}
            </div>
          </CardContent>

          {/* Footer */}
          <div className="p-2 px-4 bg-gray-700/50">
            <div className="grid grid-cols-6 gap-4 text-sm text-gray-300 font-persian">
              <div className="text-center gap-2 items-center flex">
                <div className="text-base text-gray-401 mb-1">
                  {" "}
                  کل پروژه ها :{" "}
                  {formatNumber(stats.totalDigitalProjects || actualTotalCount)}
                </div>
              </div>
              {/* Project number column - empty */}
              <div></div>
              {/* Title column - empty */}
              <div></div>
              {/* Project status column - empty */}
              <div className="flex  items-center flex-row-reverse status ">
                <span className="block w-7 h-2.5 bg-violet-500 rounded-tl-xl rounded-bl-xl"></span>
                <span className="block w-7 h-2.5 bg-purple-500 "></span>
                <span className="block w-7 h-2.5 bg-cyan-300 "></span>
                <span className="block w-7 h-2.5 bg-pink-400 rounded-tr-xl rounded-br-xl"></span>
              </div>
              {/* Project rating column - show average */}
              <div className="flex justify-center items-center gap-2">
                <div className="text-base text-gray-400 mb-1">
                  میانگین امتیاز :‌
                </div>
                <div className="font-bold">
                  {formatNumber(
                    ((stats.averageScore ?? 0) as number).toFixed?.(1) ??
                      stats.averageScore ??
                      0
                  )}
                </div>
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* Project Details Dialog */}
      <Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
        <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-6xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
              شرح پروژه
            </DialogTitle>
          </DialogHeader>
          <div className="body grid grid-cols-[40%_20%_40%] gap-3">
            <div className="border-l-2 border-l-gray-600 pl-6 ">
              <span className="title text-lg font-bold">
                توسعه فناوری جدید در تولید پلی‌اتیلن
              </span>
              <p className="p-0 py-4 pb-8 text-justify text-base">
                در این پروژه، هدف اصلی طراحی یک نقشه راه جامع برای تحول دیجیتال
                در صنعت پتروشیمی بوده است. با توجه به روند سریع تغییرات
                تکنولوژیکی و رقابت فزاینده در بازار، این پروژه به شناسایی و
                پیاده‌سازی استراتژی‌های دیجیتال برای بهینه‌سازی فرآیندهای تولید،
                مدیریت منابع، و ارتقاء بهره‌وری در واحدهای مختلف پتروشیمی
                پرداخته است. در این پروژه، هدف اصلی طراحی یک نقشه راه جامع برای
                تحول دیجیتال در صنعت پتروشیمی بوده است. با توجه به روند سریع
                تغییرات تکنولوژیکی و رقابت فزاینده در بازار، این پروژه به
                شناسایی و پیاده‌سازی استراتژی‌های دیجیتال برای بهینه‌سازی
                فرآیندهای تولید، مدیریت منابع، و ارتقاء بهره‌وری در واحدهای
                مختلف پتروشیمی پرداخته است.
              </p>
              <div className="details flex flex-col gap-3">
                <span className="text-lg font-bold">ویژگی های اصلی پروژه:</span>
                <div className="flex flex-col gap-3">
                  <div className="flex justify-between">
                    <div className="flex gap-1.5">
                      <Key size={"1.2rem"} className="text-emerald-400" />
                      <span className="text-sm text-gray-300">
                        شایستگی دیجیتال:
                      </span>
                    </div>
                    <span className="text-sm text-gray-100">
                      شایستگی­ های کلیدی محدود
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <div className="flex gap-1.5">
                      <Sprout size={"1.2rem"} className="text-emerald-400" />
                      <span className="text-sm text-gray-300">
                        اصالت راهکار دیجیتال:
                      </span>
                    </div>
                    <span className="text-sm text-gray-100">
                      بدون تغییر کپی شده
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <div className="flex gap-1.5">
                      <BrainCircuit
                        size={"1.2rem"}
                        className="text-emerald-400"
                      />
                      <span className="text-sm text-gray-300">
                        المان های بلوغ دیجیتال:
                      </span>
                    </div>
                    <span className="text-sm text-gray-100">
                      دیجیتال کردن ارائه اطلاعات
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div className="digitalAbilityDevelopment flex flex-col gap-10 border-l-2 border-l-gray-600 pr-3">
              <div className="flex flex-col gap-4">
                <span className="text-sm font-bold">
                  توسعه قابلیت های دیجیتال:{" "}
                </span>
                <div className="flex flex-col gap-2">
                  <div className="flex gap-1.5">
                    <LoaderCircle
                      size={"1.2rem"}
                      className="text-emerald-400"
                    />
                    <span>قابلیت شماره یک </span>
                  </div>
                  <div className="flex gap-1.5">
                    <LoaderCircle
                      size={"1.2rem"}
                      className="text-emerald-400"
                    />
                    <span>قابلیت شماره یک </span>
                  </div>
                  <div className="flex gap-1.5">
                    <LoaderCircle
                      size={"1.2rem"}
                      className="text-emerald-400"
                    />
                    <span>قابلیت شماره یک </span>
                  </div>
                </div>
              </div>

              <div className="flex flex-col gap-4">
                <span className="text-sm font-bold">
                  توسعه قابلیت های دیجیتال:{" "}
                </span>
                <div className="flex flex-col gap-2">
                  <div className="flex gap-1.5">
                    <LoaderCircle
                      size={"1.2rem"}
                      className="text-emerald-400"
                    />
                    <span>قابلیت شماره یک </span>
                  </div>
                  <div className="flex gap-1.5">
                    <LoaderCircle
                      size={"1.2rem"}
                      className="text-emerald-400"
                    />
                    <span>قابلیت شماره یک </span>
                  </div>
                  <div className="flex gap-1.5">
                    <LoaderCircle
                      size={"1.2rem"}
                      className="text-emerald-400"
                    />
                    <span>قابلیت شماره یک </span>
                  </div>
                </div>
              </div>
              <div className="flex flex-col gap-4">
                <span className="text-sm font-bold">
                  توسعه قابلیت های دیجیتال:{" "}
                </span>
                <div className="flex flex-col gap-2">
                  <div className="flex gap-1.5">
                    <LoaderCircle
                      size={"1.2rem"}
                      className="text-emerald-400"
                    />
                    <span>قابلیت شماره یک </span>
                  </div>
                  <div className="flex gap-1.5">
                    <LoaderCircle
                      size={"1.2rem"}
                      className="text-emerald-400"
                    />
                    <span>قابلیت شماره یک </span>
                  </div>
                  <div className="flex gap-1.5">
                    <LoaderCircle
                      size={"1.2rem"}
                      className="text-emerald-400"
                    />
                    <span>قابلیت شماره یک </span>
                  </div>
                </div>
              </div>
            </div>
            <div className="flex flex-col">
              <div className="costBoard mx-auto w-[calc(100%-5rem)]">
                <div className="board o border border-gray-600 rounded-xl overflow-hidden flex flex-col">
                  <span className="title bg-[#3F415A]  text-white w-full p-2.5 pr-4 ">
                    کاهش هزینه ها
                  </span>

                  <div className="content p-4 flex flex-row-reverse  gap-[50px] items-center">
                    <div className="flex flex-col gap-1">
                      <span className="text-emerald-400 font-bold text-3xl">
                        10%
                      </span>
                      <span className="text-gray-500 text-sm font-normal">
                        درصد به کل هزینه ها
                      </span>
                    </div>
                    <b className="w-0.5 h-9 bg-gray-600 rotate-[35deg] rounded-full" />
                    <div className="flex flex-col gap-1">
                      <span className="text-emerald-400 text-3xl font-bold">
                        ۱۰,۲۳۰
                      </span>
                      <span className="text-gray-500 text-sm font-normal">
                        میلیون ریال
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div></div>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </DashboardLayout>
  );
}

export default DigitalInnovationPage;