"use client";

import { useApp } from "@/contexts/AppContext";

interface CircleProgressProps {
  percentage: number;
  color: string;
  percentageText: string;
}

function CircleProgress({ percentage, color, percentageText }: CircleProgressProps) {
  const size = 50;
  const strokeWidth = 4;
  const radius = (size - strokeWidth) / 2;
  const circumference = radius * 2 * Math.PI;
  const offset = circumference - (percentage / 100) * circumference;

  return (
    <div className="relative flex items-center justify-center flex-shrink-0" style={{ width: size, height: size }}>
      <svg width={size} height={size} className="transform -rotate-90">
        {/* 背景圆环 - 浅色轨道 */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="transparent"
          stroke="currentColor"
          strokeWidth={strokeWidth}
          className="text-slate-200/30 dark:text-gray-600"
        />

        {/* 进度圆环 - 填充部分 */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="transparent"
          stroke={color}
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
          style={{
            strokeDashoffset: offset,
            transition: 'stroke-dashoffset 1s ease-in-out',
            strokeLinecap: 'round'
          }}
        />
      </svg>

      {/* 中间的百分比文字 */}
      <div className="absolute inset-0 flex items-center justify-center">
        <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
          {percentageText}
        </span>
      </div>
    </div>
  );
}

export default function TransparencyStats() {
  const { t } = useApp();

  const stats = [
    {
      labelKey: "transparency.totalUsdcSupply",
      value: "$200.4M",
      percentage: 52.7,
      percentageText: "52.7%",
      percentageColor: "text-[#1447e6]",
      circleColor: "#1447e6",
    },
    {
      labelKey: "transparency.utilization",
      value: "$140.0M",
      percentage: 30.1,
      percentageText: "30.1%",
      percentageColor: "text-[#ff6900]",
      circleColor: "#ff6900",
    },
    {
      labelKey: "transparency.activeLoans",
      value: "$80.0M",
      percentage: 17.2,
      percentageText: "17.2%",
      percentageColor: "text-[#10b981]",
      circleColor: "#10b981",
    },
  ];

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6">
      {/* Total Reserves */}
      <div className="flex flex-col gap-2">
        <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
          {t("transparency.totalReserves")}
        </span>
        <span className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
          $465,000,000
        </span>
      </div>

      {/* Stats Cards */}
      <div className="flex gap-4">
        {stats.map((stat, index) => (
          <div
            key={index}
            className="flex-1 bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-border-gray dark:border-gray-600 p-4 flex items-center justify-between"
          >
            {/* Left - Text Info */}
            <div className="flex flex-col gap-2">
              {/* Label */}
              <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                {t(stat.labelKey)}
              </span>

              {/* Value */}
              <span className="text-[20px] font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
                {stat.value}
              </span>

              {/* Percentage */}
              <span className={`text-[12px] font-medium leading-[150%] tracking-[0.01em] ${stat.percentageColor}`}>
                {stat.percentageText}
              </span>
            </div>

            {/* Right - Circle Chart */}
            <CircleProgress
              percentage={stat.percentage}
              color={stat.circleColor}
              percentageText={stat.percentageText}
            />
          </div>
        ))}
      </div>
    </div>
  );
}