/**
 * ScoringCard Component
 * Displays user stats: gold, completed quests, and average savings
 * LOTR-themed with icons and responsive layout
 */

import React from 'react';
import { motion } from 'framer-motion';

interface ScoringCardProps {
  gold: number;
  completedQuests: number;
  averageSavings: number | null | undefined;
}

interface StatItem {
  icon: string;
  label: string;
  testId: string;
}

const ScoringCard: React.FC<ScoringCardProps> = ({ 
  gold, 
  completedQuests, 
  averageSavings 
}) => {
  const formatSavings = (val: number | null | undefined): string => {
    if (val === null || val === undefined) {
      return '—';
    }
    return `${val.toFixed(2)}%`;
  };

  const stats: StatItem[] = [
    {
      icon: '🪙',
      label: 'Gold',
      testId: 'scoring-card-gold',
    },
    {
      icon: '🏆',
      label: 'Quests',
      testId: 'scoring-card-quests',
    },
    {
      icon: '💰',
      label: 'Bargain Avg',
      testId: 'scoring-card-savings',
    },
  ];

  const values = [gold, completedQuests, averageSavings];
  const formatters = [
    (v: number | null | undefined) => (typeof v === 'number' ? v.toString() : '—'),
    (v: number | null | undefined) => (typeof v === 'number' ? v.toString() : '—'),
    formatSavings,
  ];

  const containerVariants = {
    hidden: { opacity: 0, y: -10 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        staggerChildren: 0.08,
        delayChildren: 0.15,
        duration: 0.4,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, scale: 0.92, x: -5 },
    visible: {
      opacity: 1,
      scale: 1,
      x: 0,
      transition: {
        duration: 0.35,
        ease: 'easeOut',
      },
    },
  };

  return (
    <motion.div
      className="flex items-center gap-4 px-4 py-2.5 rounded-2xl bg-gradient-to-br from-parchment-light/90 via-parchment/90 to-parchment-light/85 border border-gold/50 shadow-md"
      style={{
        minWidth: 0,
        backdropFilter: 'blur(8px)',
      }}
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      data-testid="scoring-card"
    >
      {stats.map((stat, index) => (
        <motion.div
          key={stat.testId}
          className="flex items-center gap-2 flex-1 min-w-0"
          variants={itemVariants}
          data-testid={stat.testId}
        >
          {/* Icon */}
          <span
            className="text-xl flex-shrink-0"
            aria-hidden="true"
            style={{
              filter: 'drop-shadow(0 1px 4px rgba(255, 215, 0, 0.4))',
            }}
          >
            {stat.icon}
          </span>

          {/* Label & Value */}
          <div className="flex flex-col min-w-0">
            <span
              className="text-[0.65rem] font-readable text-forest-dark/70 uppercase tracking-widest truncate"
              style={{
                fontWeight: 600,
                letterSpacing: '0.15em',
              }}
            >
              {stat.label}
            </span>
            <span
              className="text-lg font-epic text-forest-dark tabular-nums"
              style={{
                fontWeight: 700,
                letterSpacing: '0.05em',
                textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
              }}
            >
              {formatters[index](values[index])}
            </span>
          </div>
        </motion.div>
      ))}
    </motion.div>
  );
};

export default ScoringCard;
