'use client'

import ReactECharts from 'echarts-for-react'
import { useMemo } from 'react'

interface MetricsChartProps {
  data: Array<{ timestamp: string; value: number }>
  title?: string
  metricType?: string
}

export function MetricsChart({ data, title, metricType }: MetricsChartProps) {
  const option = useMemo(() => {
    const times = data.map((d) => new Date(d.timestamp).toLocaleTimeString())
    const values = data.map((d) => d.value)

    return {
      title: {
        text: title || metricType || 'Metrics',
        textStyle: {
          color: '#FFFFFF',
        },
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#1A1A1A',
        borderColor: '#FF4500',
        textStyle: { color: '#FFFFFF' },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: times,
        axisLine: { lineStyle: { color: '#2A2A2A' } },
        axisLabel: { color: '#999999' },
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#2A2A2A' } },
        axisLabel: { color: '#999999' },
        splitLine: { lineStyle: { color: '#2A2A2A' } },
      },
      series: [
        {
          name: metricType || 'Value',
          type: 'line',
          smooth: true,
          data: values,
          lineStyle: {
            color: '#FF4500',
            width: 2,
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(255, 69, 0, 0.3)' },
                { offset: 1, color: 'rgba(255, 69, 0, 0.0)' },
              ],
            },
          },
        },
      ],
    }
  }, [data, title, metricType])

  return (
    <div className="h-[400px] w-full">
      <ReactECharts option={option} className="chart-container" />
    </div>
  )
}

