"use client";

import { getWidgetsData } from "@/app/utils/api/productDashboardApi";
import { Card } from "ikoncomponents";
import { FolderKanban, DollarSign, Clock } from "lucide-react";
import { useEffect, useState } from "react";

export const DashBoardWidgetsPage = () => {
  const [widgetsData, setWidgetsData] = useState({
    totalProjects: 0,
    totalIssues: 0,
    totalRisksCount: 0,
  });
  useEffect(() => {
    const fetchWidgetsData = async () => {
      try {
        const response = await getWidgetsData();
        setWidgetsData(response);
      } catch (error) {
        console.error("Error fetching widgets data:", error);
      }
    };
    fetchWidgetsData();
  }, []);

  // Each widget carries an explicit accent set (icon color, soft icon halo, the
  // accent-colored value and a left rail). Classes are full static strings so
  // Tailwind keeps them in the build, with light + dark variants for contrast.
  const widgets = [
    {
      title: "Total Projects",
      value: widgetsData.totalProjects,
      icon: FolderKanban,
      color: "text-blue-600 dark:text-blue-400",
      iconBg: "bg-blue-100 dark:bg-blue-500/15",
      rail: "bg-blue-500",
    },
    {
      title: "Total Issues",
      value: widgetsData.totalIssues,
      icon: DollarSign,
      color: "text-emerald-600 dark:text-emerald-400",
      iconBg: "bg-emerald-100 dark:bg-emerald-500/15",
      rail: "bg-emerald-500",
    },
    {
      title: "Total Risks Count",
      value: widgetsData.totalRisksCount,
      icon: Clock,
      color: "text-orange-600 dark:text-orange-400",
      iconBg: "bg-orange-100 dark:bg-orange-500/15",
      rail: "bg-orange-500",
    },
  ];

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {widgets.map((widget, idx) => (
        <Card
          key={idx}
          className="group relative overflow-hidden rounded-2xl border p-5 pl-6 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
        >
          {/* Left accent rail */}
          <div
            className={`absolute inset-y-0 left-0 w-1.5 ${widget.rail}`}
          />

          <div className="flex items-start justify-between gap-3">
            <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
              {widget.title}
            </span>

            <div
              className={`rounded-xl p-2.5 transition-transform duration-200 group-hover:scale-110 ${widget.iconBg}`}
            >
              <widget.icon size={20} className={widget.color} />
            </div>
          </div>

          <div className="mt-3">
            <h3 className={`text-4xl font-bold leading-none tracking-tight ${widget.color}`}>
              {widget.value}
            </h3>
          </div>
        </Card>
      ))}
    </div>
  );
};