"use client";

import { useEffect, useState } from "react";
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";

import { Card } from "ikoncomponents";

import { getStatusWiseProjectCount } from "@/app/utils/api/productDashboardApi";
import { StatusWiseProjectResponseData } from "@/app/utils/api/productDashboardApi/types";

const COLORS = [
  "#3b82f6",
  "#f59e0b",
  "#ef4444",
  "#06b6d4",
  "#a855f7",
  "#10b981",
  "#f97316",
  "#14b8a6",
];

export const ProjectsByStatusChartPage = () => {
  const [data, setData] = useState<
    {
      name: string;
      value: number;
      color: string;
    }[]
  >([]);

  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchStatusData = async () => {
      try {
        const response = await getStatusWiseProjectCount();

        const formattedData = response.map(
          (item: StatusWiseProjectResponseData, index: number) => ({
            name: item.status,
            value: item.projectCount,
            color: COLORS[index % COLORS.length],
          }),
        );

        setData(formattedData);
      } catch (error) {
        console.error("Error fetching status wise project data:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchStatusData();
  }, []);

  if (loading) {
    return (
      <Card className="p-6 h-127 flex items-center justify-center">
        <p className="text-muted-foreground">Loading chart...</p>
      </Card>
    );
  }

  if (!data.length) {
    return (
      <Card className="p-6 h-127 flex items-center justify-center">
        <p className="text-muted-foreground">No data available</p>
      </Card>
    );
  }

  return (
    <Card className="p-6 h-127 flex flex-col">
      <h3 className="text-lg font-semibold mb-6">Projects by Status</h3>

      {/* Chart */}
      <div className="w-full h-100">
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie
              data={data}
              cx="50%"
              cy="50%"
              innerRadius={90}
              outerRadius={140}
              paddingAngle={4}
              dataKey="value"
            >
              {data.map((entry, index) => (
                <Cell key={index} fill={entry.color} stroke="none" />
              ))}
            </Pie>

            <Tooltip
              contentStyle={{
                backgroundColor: "#1e293b",
                border: "none",
                borderRadius: "8px",
                color: "#fff",
              }}
              itemStyle={{ color: "#fff" }}
            />
          </PieChart>
        </ResponsiveContainer>
      </div>

      {/* Legend */}
      <div className="flex flex-wrap items-center justify-center gap-3 mt-3">
        {data.map((item, index) => (
          <div
            key={index}
            className="flex items-center gap-2 px-3 py-1.5"
          >
            <div
              className="w-2.5 h-2.5 rounded-full"
              style={{
                backgroundColor: item.color,
              }}
            />

            <span className="text-sm text-muted-foreground">{item.name}</span>

            <span className="text-sm font-semibold">{item.value}</span>
          </div>
        ))}
      </div>
    </Card>
  );
};

export default ProjectsByStatusChartPage;