'use client';

import React from 'react';
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer
} from 'recharts';

// 定義傳入組件的歷史賠率資料介面
export interface OddsDataPoint {
  time: string; // 格式化後的時間 (如: 14:30)
  odds: number; // 小數賠率
}

interface OddsLineMovementChartProps {
  data: OddsDataPoint[];
  teamName: string;
}

export function OddsLineMovementChart({ data, teamName }: OddsLineMovementChartProps) {
  return (
    <div className="w-full h-72 bg-stone-50 p-4 rounded-lg border border-stone-200 shadow-sm">
      <div className="mb-4">
        <h3 className="text-sm text-stone-500 uppercase tracking-wider font-semibold">
          Line Movement
        </h3>
        <h2 className="text-xl text-stone-900 font-dotmatrix">
          {teamName} 賠率走勢
        </h2>
      </div>

      <ResponsiveContainer width="100%" height="80%">
        <AreaChart data={data} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
          <defs>
            {/* 定義暖橘色漸層填充，增強視覺專業感 */}
            <linearGradient id="colorOdds" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#ea580c" stopOpacity={0.3}/>
              <stop offset="95%" stopColor="#ea580c" stopOpacity={0}/>
            </linearGradient>
          </defs>
          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e5e5e5" />
          <XAxis 
            dataKey="time" 
            axisLine={false} 
            tickLine={false} 
            tick={{ fontSize: 12, fill: '#78716c' }}
            dy={10}
          />
          <YAxis 
            domain={['dataMin - 0.1', 'dataMax + 0.1']} 
            axisLine={false} 
            tickLine={false} 
            tick={{ fontSize: 12, fill: '#78716c' }}
            tickFormatter={(val) => val.toFixed(2)}
          />
          <Tooltip 
            contentStyle={{ 
              backgroundColor: '#1A1A1A', 
              borderColor: '#ea580c',
              color: '#FAF6F0',
              fontFamily: '"DotGothic16", monospace'
            }}
            itemStyle={{ color: '#ea580c' }}
          />
          <Area 
            type="monotone" 
            dataKey="odds" 
            stroke="#ea580c" 
            strokeWidth={3}
            fillOpacity={1} 
            fill="url(#colorOdds)" 
            isAnimationActive={true}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}