assets-back/components/transparency/AssetDistribution.tsx

"use client";

import { useApp } from "@/contexts/AppContext";
import { useEffect, useRef } from "react";
import * as echarts from "echarts";

export default function AssetDistribution() {
  const { t } = useApp();
  const chartRef = useRef<HTMLDivElement>(null);

  const data = [
    {
      value: 52.7,
      name: t("transparency.fixedIncome"),
      itemStyle: {
        color: "#1447e6",
      },
    },
    {
      value: 30.1,
      name: t("transparency.alternativeAssets"),
      itemStyle: {
        color: "#10b981",
      },
    },
    {
      value: 17.2,
      name: t("transparency.alternativeCredit"),
      itemStyle: {
        color: "#ff6900",
      },
    },
  ];

  useEffect(() => {
    if (!chartRef.current) return;

    const chart = echarts.init(chartRef.current, null, {
      renderer: "svg",
    });

    const option = {
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(255, 255, 255, 0.95)",
        borderColor: "rgba(0, 0, 0, 0.1)",
        borderWidth: 1,
        padding: [12, 16],
        textStyle: {
          color: "#0f172b",
          fontSize: 13,
        },
        formatter: (params: any) => {
          return `
            <div style="font-weight: 600; margin-bottom: 4px;">${params.name}</div>
            <div style="color: ${params.color}; font-weight: 700; font-size: 15px;">${params.data.value}%</div>
          `;
        },
      },
      legend: {
        top: "bottom",
        left: "center",
        itemWidth: 12,
        itemHeight: 12,
        itemGap: 16,
        textStyle: {
          fontSize: 13,
          color: "#64748b",
        },
        icon: "circle",
        inactiveColor: "#cbd5e1",
      },
      series: [
        {
          name: "Asset Distribution",
          type: "pie",
          radius: ["40%", "70%"],
          center: ["50%", "45%"],
          avoidLabelOverlap: false,
          padAngle: 6,
          itemStyle: {
            borderRadius: 12,
            borderColor: "#fff",
            borderWidth: 3,
          },
          label: {
            show: true,
            position: "outside",
            alignTo: "none",
            formatter: (params: any) => {
              return `{name|${params.name}}\n{line|}\n{value|${params.value}%}`;
            },
            rich: {
              name: {
                fontSize: 14,
                fontWeight: "bold",
                color: "#0f172b",
                lineHeight: 20,
              },
              line: {
                height: 1,
                width: 80,
                backgroundColor: "transparent",
              },
              value: {
                fontSize: 13,
                fontWeight: "600",
                color: params => params.color,
                lineHeight: 18,
              },
            },
          },
          labelLine: {
            show: true,
            length: 15,
            length2: 50,
            lineStyle: {
              width: 1.5,
            },
          },
          emphasis: {
            scale: true,
            scaleSize: 6,
            itemStyle: {
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.2)",
            },
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
              color: "#0f172b",
              lineHeight: 48,
            },
          },
          data: data,
          animationType: "expansion",
          animationEasing: "cubicOut",
          animationDuration: 800,
        },
      ],
    };

    chart.setOption(option);

    const handleResize = () => {
      chart.resize();
    };
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      chart.dispose();
    };
  }, [t]);

  return (
    <div className="flex-1 bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6">
      {/* Header */}
      <div className="flex flex-col gap-0">
        <h3 className="text-[20px] font-bold text-text-primary dark:text-white leading-[140%]">
          {t("transparency.assetDistribution")}
        </h3>
        <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
          {t("transparency.distributionSubtitle")}
        </p>
      </div>

      {/* Pie Chart Section */}
      <div className="flex flex-col gap-3">
        {/* ECharts Pie Chart */}
        <div className="relative h-[260px] w-full">
          <div ref={chartRef} className="w-full h-full" />
        </div>
      </div>
    </div>
  );
}