/**
 * BoostMedia AI Content Generator Admin - StatsCard Component
 *
 * @package BoostMedia_AI
 * @license GPL-2.0-or-later
 */

import type { ReactNode } from 'react'
import { TrendingUp, TrendingDown } from 'lucide-react'
import { HelpTooltip } from '../common'
import { t } from '../../lib/i18n'

type StatsCardColor = 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info'

interface StatsCardProps {
  title: string
  value: number | string
  icon: ReactNode
  trend?: {
    value: number
    isPositive: boolean
  }
  color?: StatsCardColor
  subtitle?: string
  helpText?: string
}

const colorClasses: Record<StatsCardColor, { bg: string; icon: string }> = {
  primary: {
    bg: 'bg-bc-primary-light',
    icon: 'text-bc-primary',
  },
  accent: {
    bg: 'bg-bc-accent-light',
    icon: 'text-bc-accent',
  },
  success: {
    bg: 'bg-green-50',
    icon: 'text-green-600',
  },
  warning: {
    bg: 'bg-yellow-50',
    icon: 'text-yellow-600',
  },
  error: {
    bg: 'bg-red-50',
    icon: 'text-red-600',
  },
  info: {
    bg: 'bg-blue-50',
    icon: 'text-blue-600',
  },
}

export function StatsCard({
  title,
  value,
  icon,
  trend,
  color = 'primary',
  subtitle,
  helpText,
}: StatsCardProps) {
  const colors = colorClasses[color]

  return (
    <div className="bg-white rounded-bc-md shadow-bc p-6 hover:shadow-bc-md transition-shadow">
      <div className="flex items-start justify-between">
        {/* Content */}
        <div className="flex-1">
          <p className="text-bc-gray-500 text-sm font-medium flex items-center gap-1">
            {title}
            {helpText && <HelpTooltip text={helpText} />}
          </p>
          <p className="text-3xl font-bold text-bc-gray-900 mt-2">{value}</p>
          
          {/* Trend or Subtitle */}
          {trend ? (
            <div className="flex items-center gap-1 mt-2">
              {trend.isPositive ? (
                <TrendingUp className="w-4 h-4 text-green-600" />
              ) : (
                <TrendingDown className="w-4 h-4 text-red-600" />
              )}
              <span
                className={`text-sm font-medium ${
                  trend.isPositive ? 'text-green-600' : 'text-red-600'
                }`}
              >
                {trend.value}%
              </span>
              <span className="text-bc-gray-400 text-sm">{t('from last week')}</span>
            </div>
          ) : subtitle ? (
            <p className="text-bc-gray-400 text-sm mt-2">{subtitle}</p>
          ) : null}
        </div>

        {/* Icon */}
        <div className={`p-4 rounded-bc-md ${colors.bg}`}>
          <div className={colors.icon}>{icon}</div>
        </div>
      </div>
    </div>
  )
}