'use client';

import * as React from 'react';
import { cn } from '@/lib/utils';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { LucideIcon } from 'lucide-react';
import { useTranslation } from '@/hooks/use-translation';

/**
 * EN: Analytics card variant types
 * VI: Các loại biến thể analytics card
 */
export type AnalyticsCardVariant = 'metric' | 'chart' | 'progress' | 'comparison';

/**
 * EN: Trend direction
 * VI: Hướng trend
 */
export type TrendDirection = 'up' | 'down' | 'neutral';

/**
 * EN: AnalyticsCard component props
 * VI: Props của component AnalyticsCard
 */
export interface AnalyticsCardProps {
  /**
   * EN: Card title / VI: Tiêu đề card
   */
  title: string;
  /**
   * EN: Main value to display / VI: Giá trị chính để hiển thị
   */
  value: string | number;
  /**
   * EN: Change percentage (e.g., "+12.5%") / VI: Phần trăm thay đổi (VD: "+12.5%")
   */
  change?: string;
  /**
   * EN: Trend direction / VI: Hướng trend
   */
  trend?: TrendDirection;
  /**
   * EN: Icon component / VI: Component icon
   */
  icon?: LucideIcon;
  /**
   * EN: Card variant / VI: Biến thể card
   */
  variant?: AnalyticsCardVariant;
  /**
   * EN: Chart data (for chart variant) / VI: Dữ liệu chart (cho variant chart)
   */
  chartData?: Array<{ label: string; value: number }>;
  /**
   * EN: Progress percentage (0-100) for progress variant / VI: Phần trăm tiến độ (0-100) cho variant progress
   */
  progress?: number;
  /**
   * EN: Comparison values for comparison variant / VI: Giá trị so sánh cho variant comparison
   */
  comparisons?: Array<{ label: string; value: string | number }>;
  /**
   * EN: Additional CSS classes / VI: Các class CSS bổ sung
   */
  className?: string;
}

/**
 * EN: AnalyticsCard component - Displays analytics metrics with various visualization options
 * VI: Component AnalyticsCard - Hiển thị các metric analytics với các tùy chọn visualization
 *
 * Variants:
 * - metric: Single value with trend
 * - chart: Value with mini chart
 * - progress: Value with progress bar
 * - comparison: Multiple metrics comparison
 *
 * Biến thể:
 * - metric: Giá trị đơn với trend
 * - chart: Giá trị với mini chart
 * - progress: Giá trị với thanh tiến độ
 * - comparison: So sánh nhiều metrics
 */
export function AnalyticsCard({
  title,
  value,
  change,
  trend = 'neutral',
  icon: Icon,
  variant = 'metric',
  chartData,
  progress,
  comparisons,
  className,
}: AnalyticsCardProps) {
  const { locale } = useTranslation();
  
  // EN: Get trend color / VI: Lấy màu trend
  const getTrendColor = () => {
    switch (trend) {
      case 'up':
        return 'text-accent-success';
      case 'down':
        return 'text-accent-error';
      default:
        return 'text-text-tertiary';
    }
  };

  // EN: Get trend icon / VI: Lấy icon trend
  const getTrendIcon = () => {
    switch (trend) {
      case 'up':
        return (
          <svg
            className="h-4 w-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            aria-hidden="true"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
            />
          </svg>
        );
      case 'down':
        return (
          <svg
            className="h-4 w-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            aria-hidden="true"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
            />
          </svg>
        );
      default:
        return null;
    }
  };

  return (
    <Card className={cn('hover', className)}>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium text-text-secondary">
          {title}
        </CardTitle>
        {Icon && (
          <Icon className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
        )}
      </CardHeader>
      <CardContent>
        {/* EN: Main value / VI: Giá trị chính */}
        <div className="text-2xl font-bold text-text-primary mb-1">
          {typeof value === 'number' ? value.toLocaleString(locale === 'vi' ? 'vi-VN' : 'en-US') : value}
        </div>

        {/* EN: Change indicator / VI: Chỉ báo thay đổi */}
        {change && (
          <div className={cn('text-xs flex items-center gap-1', getTrendColor())}>
            {getTrendIcon()}
            <span>{change}</span>
          </div>
        )}

        {/* EN: Chart variant - Mini sparkline / VI: Variant chart - Mini sparkline */}
        {variant === 'chart' && chartData && chartData.length > 0 && (
          <div className="mt-4 h-[60px] flex items-end gap-1">
            {chartData.map((point, index) => {
              const maxValue = Math.max(...chartData.map((p) => p.value));
              const height = (point.value / maxValue) * 100;
              return (
                <div
                  key={index}
                  className="flex-1 bg-accent-primary rounded-t"
                  style={{ height: `${height}%` }}
                  aria-hidden="true"
                />
              );
            })}
          </div>
        )}

        {/* EN: Progress variant - Progress bar / VI: Variant progress - Thanh tiến độ */}
        {variant === 'progress' && progress !== undefined && (
          <div className="mt-4">
            <div className="w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
              <div
                className="h-full bg-accent-primary transition-all duration-[250ms]"
                style={{ width: `${Math.min(progress, 100)}%` }}
                role="progressbar"
                aria-valuenow={progress}
                aria-valuemin={0}
                aria-valuemax={100}
                aria-label={`${title}: ${progress}%`}
              />
            </div>
            <p className="text-xs text-text-tertiary mt-1">{progress}%</p>
          </div>
        )}

        {/* EN: Comparison variant - Multiple metrics / VI: Variant comparison - Nhiều metrics */}
        {variant === 'comparison' && comparisons && comparisons.length > 0 && (
          <div className="mt-4 space-y-2">
            {comparisons.map((comp, index) => (
              <div
                key={index}
                className="flex items-center justify-between text-sm"
              >
                <span className="text-text-secondary">{comp.label}</span>
                <span className="font-medium text-text-primary">
                  {typeof comp.value === 'number'
                    ? comp.value.toLocaleString(locale === 'vi' ? 'vi-VN' : 'en-US')
                    : comp.value}
                </span>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}
