'use client';

import * as React from 'react';
import {
  LineChart,
  Line,
  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: User growth data point
 * VI: Điểm dữ liệu tăng trưởng người dùng
 */
export interface UserGrowthDataPoint {
  /**
   * EN: Date label / VI: Nhãn ngày
   */
  date: string;
  /**
   * EN: Number of users / VI: Số lượng người dùng
   */
  users: number;
  /**
   * EN: Number of new users / VI: Số người dùng mới
   */
  newUsers?: number;
}

/**
 * EN: UserGrowthChart component props
 * VI: Props của component UserGrowthChart
 */
export interface UserGrowthChartProps {
  /**
   * EN: Chart data / VI: Dữ liệu chart
   */
  data: UserGrowthDataPoint[];
  /**
   * EN: Chart title / VI: Tiêu đề chart
   */
  title?: string;
  /**
   * EN: Chart description / VI: Mô tả chart
   */
  description?: 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: UserGrowthChart component - Line chart showing user growth over time
 * VI: Component UserGrowthChart - Line chart hiển thị tăng trưởng người dùng theo thời gian
 *
 * Features:
 * - Line chart with Recharts
 * - Responsive container
 * - Tooltip on hover
 * - Legend support
 * - Dark mode optimized colors
 *
 * Tính năng:
 * - Line chart với Recharts
 * - Container responsive
 * - Tooltip khi hover
 * - Hỗ trợ legend
 * - Màu sắc tối ưu cho dark mode
 */
export function UserGrowthChart({
  data,
  title,
  description,
  showLegend = true,
  className,
}: UserGrowthChartProps) {
  const { t } = useTranslation();
  const defaultTitle = t('admin.dashboard.userGrowth');
  const defaultDescription = t('admin.dashboard.userGrowth');
  
  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle>{title || defaultTitle}</CardTitle>
        {(description || defaultDescription) && <CardDescription>{description || defaultDescription}</CardDescription>}
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart
            data={data}
            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
          >
            <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' }}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: 'var(--bg-elevated)',
                border: '1px solid var(--border-primary)',
                borderRadius: '8px',
                color: 'var(--text-primary)',
              }}
            />
            {showLegend && (
              <Legend
                wrapperStyle={{ color: 'var(--text-secondary)' }}
              />
            )}
            <Line
              type="monotone"
              dataKey="users"
              stroke="var(--accent-primary)"
              strokeWidth={2}
              dot={{ fill: 'var(--accent-primary)', r: 4 }}
              name={t('admin.dashboard.totalUsers')}
            />
            {data.some((d) => d.newUsers !== undefined) && (
              <Line
                type="monotone"
                dataKey="newUsers"
                stroke="var(--accent-success)"
                strokeWidth={2}
                dot={{ fill: 'var(--accent-success)', r: 4 }}
                name={t('admin.dashboard.totalUsers')}
              />
            )}
          </LineChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}
