"use client";

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

export default function PriceHistoryCard() {
  const { t } = useApp();
  const chartRef = useRef<HTMLDivElement>(null);
  const chartInstance = useRef<echarts.ECharts | null>(null);

  // 模拟价格数据
  const priceData = [1.01, 1.02, 1.03, 1.02, 1.04, 1.03, 1.05, 1.04, 1.03];

  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();
    };
  }, []);

  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;">Day ${data.dataIndex + 1}</span><br/>
            <span style="color: #10b981; font-weight: 600; font-size: 14px;">${data.value} USDC</span>
          </div>`;
        },
      },
      xAxis: {
        type: "category",
        data: priceData.map((_, i) => i + 1),
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          data: priceData,
          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);
  };

  // 计算统计数据
  const highest = Math.max(...priceData).toFixed(2);
  const lowest = Math.min(...priceData).toFixed(2);
  const current = priceData[priceData.length - 1].toFixed(2);
  const avg = (priceData.reduce((a, b) => a + b, 0) / priceData.length).toFixed(2);

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 px-6 py-8 flex flex-col gap-6">
      {/* Header */}
      <div className="text-body-large font-bold text-text-primary dark:text-white">
        {t("alp.priceHistory")}
      </div>

      {/* Content */}
      <div className="flex flex-col gap-6">
        {/* Info Row */}
        <div className="flex items-center justify-between">
          <div className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
            {t("alp.lastDays")}
          </div>
          <div className="text-caption-tiny font-bold text-[#10b981] dark:text-green-400">
            {t("alp.avg")}: {avg} USDC
          </div>
        </div>

        {/* ECharts Chart */}
        <div
          ref={chartRef}
          className="w-full border-b border-border-gray dark:border-gray-600"
          style={{ height: "200px" }}
        />

        {/* Stats - Vertical Layout */}
        <div className="flex flex-col gap-3">
          <div className="flex items-start justify-between">
            <div className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
              {t("alp.highest")}
            </div>
            <div className="text-caption-tiny font-bold text-text-primary dark:text-white tabular-nums">
              {highest} USDC
            </div>
          </div>
          <div className="flex items-start justify-between">
            <div className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
              {t("alp.lowest")}
            </div>
            <div className="text-caption-tiny font-bold text-text-primary dark:text-white tabular-nums">
              {lowest} USDC
            </div>
          </div>
          <div className="flex items-start justify-between">
            <div className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
              {t("alp.current")}
            </div>
            <div className="text-caption-tiny font-bold text-text-primary dark:text-white tabular-nums">
              {current} USDC
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}