'use client';

import * as React from 'react';
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { useTranslation } from '@/hooks/use-translation';

/**
 * EN: Revenue data point
 * VI: Điểm dữ liệu doanh thu
 */
export interface RevenueDataPoint {
  /**
   * EN: Date label / VI: Nhãn ngày
   */
  date: string;
  /**
   * EN: Revenue amount / VI: Số tiền doanh thu
   */
  revenue: number;
  /**
   * EN: Optional comparison value / VI: Giá trị so sánh tùy chọn
   */
  previousRevenue?: number;
}

/**
 * EN: RevenueChart component props
 * VI: Props của component RevenueChart
 */
export interface RevenueChartProps {
  /**
   * EN: Chart data / VI: Dữ liệu chart
   */
  data: RevenueDataPoint[];
  /**
   * EN: Chart title / VI: Tiêu đề chart
   */
  title?: string;
  /**
   * EN: Chart description / VI: Mô tả chart
   */
  description?: string;
  /**
   * EN: Currency symbol / VI: Ký hiệu tiền tệ
   */
  currency?: string;
  /**
   * EN: Show legend / VI: Hiển thị legend
   */
  showLegend?: boolean;
  /**
   * EN: Additional CSS classes / VI: Các class CSS bổ sung
   */
  className?: string;
}

/**
 * EN: RevenueChart component - Area chart showing revenue over time
 * VI: Component RevenueChart - Area chart hiển thị doanh thu theo thời gian
 *
 * Features:
 * - Area chart with Recharts
 * - Responsive container
 * - Tooltip on hover with currency formatting
 * - Legend support
 * - Dark mode optimized colors
 * - Gradient fill
 *
 * Tính năng:
 * - Area chart với Recharts
 * - Container responsive
 * - Tooltip khi hover với định dạng tiền tệ
 * - Hỗ trợ legend
 * - Màu sắc tối ưu cho dark mode
 * - Gradient fill
 */
export function RevenueChart({
  data,
  title,
  description,
  currency = '$',
  showLegend = true,
  className,
}: RevenueChartProps) {
  const { t, locale } = useTranslation();
  const defaultTitle = t('admin.dashboard.revenue');
  const defaultDescription = t('admin.dashboard.revenue');
  
  // EN: Format currency value / VI: Format giá trị tiền tệ
  const formatCurrency = (value: number) => {
    return `${currency}${value.toLocaleString(locale === 'vi' ? 'vi-VN' : 'en-US')}`;
  };

  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle>{title || defaultTitle}</CardTitle>
        {(description || defaultDescription) && <CardDescription>{description || defaultDescription}</CardDescription>}
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={300}>
          <AreaChart
            data={data}
            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
          >
            <defs>
              <linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="var(--accent-primary)" stopOpacity={0.3} />
                <stop offset="95%" stopColor="var(--accent-primary)" stopOpacity={0} />
              </linearGradient>
              {data.some((d) => d.previousRevenue !== undefined) && (
                <linearGradient id="previousRevenueGradient" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="var(--accent-secondary)" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="var(--accent-secondary)" stopOpacity={0} />
                </linearGradient>
              )}
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="var(--border-primary)" />
            <XAxis
              dataKey="date"
              stroke="var(--text-tertiary)"
              style={{ fontSize: '12px' }}
            />
            <YAxis
              stroke="var(--text-tertiary)"
              style={{ fontSize: '12px' }}
              tickFormatter={formatCurrency}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: 'var(--bg-elevated)',
                border: '1px solid var(--border-primary)',
                borderRadius: '8px',
                color: 'var(--text-primary)',
              }}
              formatter={(value: number) => formatCurrency(value)}
            />
            {showLegend && (
              <Legend
                wrapperStyle={{ color: 'var(--text-secondary)' }}
              />
            )}
            <Area
              type="monotone"
              dataKey="revenue"
              stroke="var(--accent-primary)"
              strokeWidth={2}
              fill="url(#revenueGradient)"
              name={t('admin.dashboard.revenue')}
            />
            {data.some((d) => d.previousRevenue !== undefined) && (
              <Area
                type="monotone"
                dataKey="previousRevenue"
                stroke="var(--accent-secondary)"
                strokeWidth={2}
                fill="url(#previousRevenueGradient)"
                name={t('admin.dashboard.revenue')}
              />
            )}
          </AreaChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}
