import React from 'react';

const statCard = {
  background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%)',
  border: '2px solid #0EA5E9',
  borderRadius: '0.5rem',
  padding: '1rem',
  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(14, 165, 233, 0.15)',
  position: 'relative',
  overflow: 'hidden',
  cursor: 'pointer',
  transition: 'transform 0.15s, box-shadow 0.15s',
};

const topGlow = (color) => ({
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  height: '2px',
  background: `linear-gradient(90deg, transparent, ${color}, transparent)`,
  boxShadow: `0 0 8px ${color}80`,
});

function StatCard({ label, value, color = '#0EA5E9', borderColor, onClick, active }) {
  const cardStyle = {
    ...statCard,
    ...(borderColor ? { border: `2px solid ${borderColor}`, boxShadow: `0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px ${borderColor}26, inset 0 1px 0 ${borderColor}26` } : {}),
    ...(active ? { transform: 'scale(1.03)', boxShadow: `0 4px 24px rgba(0, 0, 0, 0.6), 0 0 28px ${color}40` } : {}),
  };

  return (
    <div style={cardStyle} onClick={onClick} role={onClick ? 'button' : undefined} tabIndex={onClick ? 0 : undefined} aria-label={`${label}: ${value}`}>
      <div style={topGlow(color)}></div>
      <div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#CBD5E1', marginBottom: '0.25rem' }}>
        {label}
      </div>
      <div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color, textShadow: `0 0 16px ${color}66` }}>
        {value}
      </div>
    </div>
  );
}

export default function StatsBar({ totalCVEs, vendorEntries, openTickets, criticalCount, onFilterSeverity, activeSeverity }) {
  return (
    // ⚠️ CONVENTION: Use inline styles or App.css classes instead of Tailwind utility classes (grid grid-cols-1 md:grid-cols-4 gap-4)
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
      <StatCard
        label="Total CVEs"
        value={totalCVEs}
        color="#0EA5E9"
        onClick={() => onFilterSeverity && onFilterSeverity('All Severities')}
        active={activeSeverity === 'All Severities'}
      />
      <StatCard
        label="Vendor Entries"
        value={vendorEntries}
        color="#E2E8F0"
      />
      <StatCard
        label="Open Tickets"
        value={openTickets}
        color="#F59E0B"
        borderColor="#F59E0B"
      />
      <StatCard
        label="Critical"
        value={criticalCount}
        color="#EF4444"
        borderColor="#EF4444"
        onClick={() => onFilterSeverity && onFilterSeverity(activeSeverity === 'Critical' ? 'All Severities' : 'Critical')}
        active={activeSeverity === 'Critical'}
      />
    </div>
  );
}