"use client";

import { useState, useEffect, useRef } from "react";
import Image from "next/image";
import { Button } from "@heroui/react";
import { useApp } from "@/contexts/AppContext";
import * as echarts from "echarts";

export default function SupplyContent() {
  const { t } = useApp();
  const [selectedPeriod, setSelectedPeriod] = useState<"1W" | "1M" | "1Y">("1W");
  const chartRef = useRef<HTMLDivElement>(null);
  const chartInstance = useRef<echarts.ECharts | null>(null);

  // 模拟 APY 数据
  const generateChartData = (period: "1W" | "1M" | "1Y") => {
    const dataPoints = period === "1W" ? 7 : period === "1M" ? 30 : 365;
    const data = [];
    let baseValue = 18 + Math.random() * 4;

    for (let i = 0; i < dataPoints; i++) {
      const change = (Math.random() - 0.45) * 2;
      baseValue = Math.max(15, Math.min(25, baseValue + change));
      data.push(parseFloat(baseValue.toFixed(2)));
    }
    return data;
  };

  const chartData = generateChartData(selectedPeriod);

  // 根据周期生成 X 轴标签
  const getXAxisLabels = (period: "1W" | "1M" | "1Y") => {
    if (period === "1W") {
      return ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    } else if (period === "1M") {
      return Array.from({ length: 7 }, (_, i) => `${i * 4 + 1}d`);
    } else {
      return Array.from({ length: 7 }, (_, i) => `${i * 50 + 1}d`);
    }
  };

  useEffect(() => {
    if (chartRef.current) {
      chartInstance.current = echarts.init(chartRef.current);
      updateChart();
    }

    const handleResize = () => {
      chartInstance.current?.resize();
    };
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      chartInstance.current?.dispose();
    };
  }, [selectedPeriod]);

  const updateChart = () => {
    if (!chartInstance.current) return;

    const option: echarts.EChartsOption = {
      grid: {
        left: 0,
        right: 0,
        top: 10,
        bottom: 0,
      },
      tooltip: {
        trigger: "axis",
        show: true,
        confine: true,
        backgroundColor: "rgba(17, 24, 39, 0.9)",
        borderColor: "#374151",
        textStyle: {
          color: "#f9fafb",
          fontSize: 12,
          fontWeight: 500,
        },
        formatter: function(params: any) {
          const data = params[0];
          return `<div style="padding: 4px 8px;">
            <span style="color: #9ca3af; font-size: 11px;">${data.axisValueLabel}</span><br/>
            <span style="color: #10b981; font-weight: 600; font-size: 14px;">${data.value}%</span>
          </div>`;
        },
      },
      xAxis: {
        type: "category",
        data: getXAxisLabels(selectedPeriod),
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: selectedPeriod === "1W",
          color: "#9ca3af",
          fontSize: 10,
          fontWeight: 500,
        },
      },
      yAxis: {
        type: "value",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          data: chartData,
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 6,
          lineStyle: {
            color: "#10b981",
            width: 2,
          },
          itemStyle: {
            color: "#10b981",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "rgba(16, 185, 129, 0.3)" },
                { offset: 1, color: "rgba(16, 185, 129, 0)" },
              ],
            },
          },
        },
      ],
    };

    chartInstance.current.setOption(option);
  };

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col h-full w-full shadow-md">
      {/* Header - USDC Lend Pool */}
      <div className="flex items-center gap-3 flex-shrink-0">
        <Image
          src="/usd-coin-usdc-logo-10.svg"
          alt="USDC"
          width={32}
          height={32}
        />
        <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
          {t("supply.usdcLendPool")}
        </h1>
      </div>

      {/* Historical APY Section */}
      <div className="flex items-start justify-between flex-shrink-0">
        {/* Left - APY Display */}
        <div className="flex flex-col gap-1">
          <span className="text-[12px] font-bold text-text-tertiary dark:text-gray-400 leading-[16px] tracking-[1.2px] uppercase">
            {t("supply.historicalApy")}
          </span>
          <div className="flex items-center gap-2">
            <span className="text-heading-h2 font-bold text-[#10b981] dark:text-green-400 leading-[130%] tracking-[-0.01em]">
              20.5%
            </span>
            <div className="bg-[#e1f8ec] dark:bg-green-900/30 rounded-full px-2 py-0.5 flex items-center justify-center">
              <span className="text-caption-tiny font-bold text-[#10b981] dark:text-green-400 leading-[150%] tracking-[0.01em]">
                +2.4%
              </span>
            </div>
          </div>
        </div>

        {/* Right - Period Selector */}
        <div className="bg-[#F9FAFB] dark:bg-gray-700 rounded-xl p-1 flex items-center gap-1">
          <Button
            size="sm"
            variant={selectedPeriod === "1W" ? "solid" : "light"}
            onPress={() => setSelectedPeriod("1W")}
          >
            1W
          </Button>
          <Button
            size="sm"
            variant={selectedPeriod === "1M" ? "solid" : "light"}
            onPress={() => setSelectedPeriod("1M")}
          >
            1M
          </Button>
          <Button
            size="sm"
            variant={selectedPeriod === "1Y" ? "solid" : "light"}
            onPress={() => setSelectedPeriod("1Y")}
          >
            1Y
          </Button>
        </div>
      </div>

      {/* Chart Section */}
      <div className="flex-1 min-h-0 w-full">
        {/* ECharts Chart */}
        <div
          ref={chartRef}
          className="w-full h-full"
          style={{
            background: "linear-gradient(0deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%)",
          }}
        />
      </div>
    </div>
  );
}