import * as React from "react";
import { LucideIcon } from 'lucide-react'

interface StatCardProps {
  title: string
  value: string | number
  change?: number
  vsLastMonthLabel?: string
  icon: LucideIcon
  iconColor?: string
  iconBg?: string
  /** Optional target value to show a progress bar beneath the value */
  target?: number
  /** Current progress (0–100) when target is set */
  progressPercent?: number
  /** Show a subtle pulse/glow animation on the card */
  pulse?: boolean
  /** Apply a gradient to the value text */
  valueGradient?: boolean
}

export default function StatCard({
  title,
  value,
  change,
  vsLastMonthLabel = 'vs last month',
  icon: Icon,
  iconColor = 'text-orange-700 dark:text-orange-300',
  iconBg = 'bg-orange-50 dark:bg-orange-950/30',
  target,
  progressPercent,
  pulse,
  valueGradient,
}: StatCardProps) {
  const isPositive = change !== undefined && change >= 0
  const isNegative = change !== undefined && change < 0

  return (
    <div className={`card p-5 ${pulse ? 'pulse-glow' : ''}`}>
      <div className="flex items-start justify-between">
        <div className="min-w-0 flex-1">
          <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{title}</p>
          <p
            className={[
              'mt-2 text-[34px] font-light leading-none tracking-normal',
              valueGradient
                ? 'bg-gradient-to-br from-blue-950 via-blue-600 to-orange-500 bg-clip-text text-transparent dark:from-slate-100 dark:via-blue-200 dark:to-orange-300'
                : 'bg-gradient-to-br from-blue-950 to-slate-700 bg-clip-text text-transparent dark:from-slate-100 dark:to-slate-300',
            ].join(' ')}
          >
            {value}
          </p>
          {target !== undefined && progressPercent !== undefined && (
            <div className="mt-2 flex items-center gap-2">
              <div className="progress-bar flex-1">
                <div
                  className="progress-fill orange"
                  style={{ width: `${Math.min(progressPercent, 100)}%` }}
                />
              </div>
              <span className="text-xs font-mono text-slate-500 dark:text-slate-400">
                {Math.round(progressPercent)}%
              </span>
            </div>
          )}
          {change !== undefined && (
            <div className="mt-2 flex items-center gap-1">
              <span
                className={[
                  'text-xs font-medium',
                  isPositive ? 'text-emerald-600 dark:text-emerald-300' : isNegative ? 'text-red-600 dark:text-red-300' : 'text-slate-500 dark:text-slate-400',
                ].join(' ')}
              >
                {isPositive ? '+' : ''}{change.toFixed(1)}%
              </span>
              <span className="text-xs text-slate-500 dark:text-slate-500">{vsLastMonthLabel}</span>
            </div>
          )}
        </div>
        <div className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${iconBg}`}>
          <Icon className={`h-6 w-6 ${iconColor}`} />
        </div>
      </div>
    </div>
  )
}
