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

interface CardProps {
  children?: React.ReactNode;
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
  glowColor?: 'cyan' | 'green' | 'red' | 'amber';
  onClick?: () => void;
  value?: string | number;
  icon?: any;
  color?: string;
}

export const Card: React.FC<CardProps> = ({ 
  children, 
  title, 
  subtitle, 
  className = '', 
  style = {},
  glowColor,
  onClick
}) => {
  const glowClass = glowColor ? `glow-${glowColor}` : '';
  
  return (
    <motion.div 
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className={`glass ${glowClass} ${className}`}
      onClick={onClick}
      style={{
        padding: '20px',
        border: '1px solid var(--card-border)',
        position: 'relative',
        overflow: 'hidden',
        ...style
      }}
    >
      {title && (
        <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div style={{ width: '100%' }}>
            {typeof title === 'string' ? (
              <h3 style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{title}</h3>
            ) : title}
            {subtitle && (
              typeof subtitle === 'string' ? (
                <p style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>{subtitle}</p>
              ) : subtitle
            )}
          </div>
        </div>
      )}
      {children}
    </motion.div>
  );
};

interface StatCardProps {
  label: string;
  value: string | number;
  subValue?: string;
  icon: any;
  trend?: {
    value: string;
    isUp: boolean;
  };
  glowColor: 'cyan' | 'green' | 'red' | 'amber';
  pulse?: boolean;
}

export const StatCard: React.FC<StatCardProps> = ({
  label,
  value,
  subValue,
  icon: Icon,
  trend,
  glowColor,
  pulse
}) => {
  const colorVar = `var(--accent-${glowColor === 'red' ? 'red' : glowColor === 'amber' ? 'warning-amber' : glowColor})`;
  
  return (
    <Card glowColor={glowColor} style={{ padding: '16px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' }}>
        <div style={{ 
          width: '36px', 
          height: '36px', 
          borderRadius: '8px', 
          background: `rgba(0, 0, 0, 0.3)`, 
          border: `1px solid var(--card-border)`,
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center',
          color: colorVar
        }}>
          <Icon size={20} />
        </div>
        {pulse && <div className="pulse-dot-red"></div>}
      </div>
      
      <div>
        <p style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', textTransform: 'uppercase', fontWeight: 600 }}>{label}</p>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: '8px', marginTop: '4px' }}>
          <h2 className="mono" style={{ fontSize: '1.5rem', fontWeight: 700 }}>{value}</h2>
          {subValue && <span style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>/ {subValue}</span>}
        </div>
        
        {trend && (
          <div style={{ 
            marginTop: '8px', 
            fontSize: '0.75rem', 
            color: trend.isUp ? 'var(--accent-green)' : 'var(--alert-red)',
            display: 'flex',
            alignItems: 'center',
            gap: '4px'
          }}>
            {trend.isUp ? '↑' : '↓'} {trend.value} <span style={{ color: 'var(--text-secondary)' }}>vs last hour</span>
          </div>
        )}
      </div>
    </Card>
  );
};
