import * as React from 'react'
import { cn } from '../../lib/utils'
import { SparklineTrend } from './SparklineTrend'

export interface MetricCardTrend {
  value: number
  isPositive?: boolean
  label?: string
}

export interface MetricCardProps {
  label: string
  value: string | number
  icon: React.ComponentType<{ className?: string }>
  iconColor?: string
  trend?: MetricCardTrend
  sparklineData?: number[]
  href?: string
  isLoading?: boolean
  error?: boolean
  className?: string
}

export function MetricCard({
  label,
  value,
  icon: Icon,
  iconColor = 'text-blue-500',
  trend,
  sparklineData,
  href,
  isLoading,
  error,
  className,
}: MetricCardProps) {
  const content = (
    <div
      className={cn(
        'rounded-xl border bg-card text-card-foreground shadow p-6 transition-all duration-200 hover:shadow-lg cursor-pointer',
        error && 'border-red-200 bg-red-50',
        isLoading && 'animate-pulse',
        className,
      )}
    >
      <div className="space-y-3">
        {/* Header: Label and Icon */}
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-medium text-gray-500">{label}</h3>
          <div className={iconColor}>
            <Icon className="w-5 h-5" aria-hidden="true" />
          </div>
        </div>

        {/* Value */}
        <div className="flex items-baseline justify-between">
          <p className="text-3xl font-bold text-gray-900">
            {isLoading ? '\u2014' : error ? 'Error' : value}
          </p>

          {/* Trend Indicator */}
          {trend && !isLoading && !error && (
            <TrendIndicator trend={trend} />
          )}
        </div>

        {/* Trend Label */}
        {trend?.label && !isLoading && !error && (
          <p className="text-xs text-gray-500">{trend.label}</p>
        )}

        {/* Sparkline */}
        {sparklineData && sparklineData.length > 1 && !isLoading && !error && (
          <div className="pt-2">
            <SparklineTrend data={sparklineData} color={iconColor} />
          </div>
        )}
      </div>
    </div>
  )

  if (href) {
    // Render a plain <a> tag so the component works in any React framework
    // without requiring a specific router. Consumers using Next.js can wrap
    // with their own <Link> or pass an href and rely on client-side navigation.
    return (
      <a
        href={href}
        className="block focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-lg"
        aria-label={`View ${label} details`}
      >
        {content}
      </a>
    )
  }

  return content
}

function TrendIndicator({ trend }: { trend: MetricCardTrend }) {
  const colorClass =
    trend.isPositive === true
      ? 'text-green-600'
      : trend.isPositive === false
        ? 'text-red-600'
        : 'text-gray-500'

  return (
    <div className={`flex items-center gap-1 text-xs font-medium ${colorClass}`}>
      {trend.isPositive === true && (
        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" d="M2 17L12 7l10 10" />
        </svg>
      )}
      {trend.isPositive === false && (
        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" d="M2 7l10 10L22 7" />
        </svg>
      )}
      {trend.isPositive === undefined && (
        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
        </svg>
      )}
      <span>
        {trend.value > 0 ? '+' : ''}{trend.value}%
      </span>
    </div>
  )
}