'use client';

import { FC, useState } from 'react';
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart } from 'recharts';
import { Card, Button } from '@/components/common';
import type { DashboardPeriod } from '@/types';
import styles from './TrendChart.module.scss';

interface TrendData {
  date: string;
  value: number;
}

export interface TrendChartProps {
  title: string;
  data: TrendData[];
  period?: DashboardPeriod;
  onPeriodChange?: (period: DashboardPeriod) => void;
  loading?: boolean;
}

const timeRanges: { label: string; value: DashboardPeriod }[] = [
  { label: '7天', value: '7d' },
  { label: '30天', value: '30d' },
  { label: '90天', value: '90d' },
];

export const TrendChart: FC<TrendChartProps> = ({
  title,
  data,
  period: externalPeriod,
  onPeriodChange,
  loading = false,
}) => {
  const [internalPeriod, setInternalPeriod] = useState<DashboardPeriod>('7d');

  // 支持受控和非受控两种模式
  const activePeriod = externalPeriod ?? internalPeriod;
  const handlePeriodChange = (newPeriod: DashboardPeriod) => {
    if (onPeriodChange) {
      onPeriodChange(newPeriod);
    } else {
      setInternalPeriod(newPeriod);
    }
  };

  return (
    <Card
      title={title}
      extra={
        <div className={styles.trendChart__ranges}>
          {timeRanges.map((range) => (
            <Button
              key={range.value}
              size="sm"
              variant={activePeriod === range.value ? 'primary' : 'ghost'}
              onClick={() => handlePeriodChange(range.value)}
            >
              {range.label}
            </Button>
          ))}
        </div>
      }
      className={styles.trendChart}
    >
      <div className={styles.trendChart__chart}>
        {loading ? (
          <div className={styles.trendChart__loading}>
            <span>加载中...</span>
          </div>
        ) : (
          <ResponsiveContainer width="100%" height={300}>
            <AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
              <defs>
                <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#1565C0" stopOpacity={0.2} />
                  <stop offset="95%" stopColor="#1565C0" stopOpacity={0} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" stroke="#E0E0E0" vertical={false} />
              <XAxis
                dataKey="date"
                axisLine={false}
                tickLine={false}
                tick={{ fontSize: 12, fill: '#757575' }}
              />
              <YAxis
                axisLine={false}
                tickLine={false}
                tick={{ fontSize: 12, fill: '#757575' }}
                width={40}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#fff',
                  border: '1px solid #E0E0E0',
                  borderRadius: 8,
                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                }}
                labelStyle={{ color: '#212121', fontWeight: 500, marginBottom: 4 }}
                itemStyle={{ color: '#1565C0' }}
              />
              <Area
                type="monotone"
                dataKey="value"
                stroke="#1565C0"
                strokeWidth={2}
                fill="url(#colorValue)"
              />
            </AreaChart>
          </ResponsiveContainer>
        )}
      </div>
    </Card>
  );
};
