'use client';

/**
 * KpiCard — Single KPI metric card with title, value, subtitle, icon, trend indicator,
 * and optional sparkline mini-chart.
 *
 * Styling:
 * - bg-divisi-card, border border-divisi-border, rounded-xl, p-4
 * - Trend up = green (text-green-500), trend down = red (text-red-500)
 * - Sparkline positioned to the right of the value/trend area
 * - Subtle hover effect with shadow elevation and border glow
 * - Value is large and prominent
 *
 * Requirements: 4.1, 4.2, 4.4, 17.2, 17.5
 */

import Sparkline from '@/components/charts/Sparkline';
import { divisiColors } from '@/lib/constants/theme';

interface KpiCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon?: React.ReactNode;
  trend?: { value: number; direction: 'up' | 'down' };
  sparklineData?: number[];
}

export default function KpiCard({ title, value, subtitle, icon, trend, sparklineData }: KpiCardProps) {
  // Determine sparkline color based on trend direction
  const sparklineColor = trend?.direction === 'down' ? '#ef4444' : divisiColors.accent;

  return (
    <div className="rounded-xl border border-divisi-border bg-divisi-card p-4 transition-all duration-200 hover:shadow-lg hover:border-divisi-accent/30">
      <div className="flex items-start justify-between">
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium text-divisi-text-secondary truncate">
            {title}
          </p>
          <p className="mt-2 text-2xl font-bold text-divisi-text-primary">
            {value}
          </p>
          {subtitle && (
            <p className="mt-1 text-xs text-divisi-text-secondary">
              {subtitle}
            </p>
          )}
          {trend && (
            <div className="mt-2 flex items-center gap-1">
              <span
                className={`text-xs font-medium ${
                  trend.direction === 'up' ? 'text-green-500' : 'text-red-500'
                }`}
              >
                {trend.direction === 'up' ? '↑' : '↓'} {Math.abs(trend.value)}%
              </span>
            </div>
          )}
        </div>
        {sparklineData && sparklineData.length > 0 ? (
          <div className="ml-3 flex-shrink-0 self-center">
            <Sparkline data={sparklineData} color={sparklineColor} />
          </div>
        ) : icon ? (
          <div className="ml-3 flex-shrink-0 text-divisi-accent">
            {icon}
          </div>
        ) : null}
      </div>
    </div>
  );
}