// MetricCard.jsx — KPI stat card component
// Usage: <MetricCard value="47" label="Failures Prevented" trend="+12%" trendUp status="green" />

const metricCardStyles = {
  card: {
    background: '#37657B',
    border: '1px solid #4A7A90',
    borderRadius: 4,
    padding: '20px 22px',
    display: 'flex', flexDirection: 'column', gap: 4,
    fontFamily: "'DM Sans', sans-serif",
    flex: 1,
    minWidth: 0,
    position: 'relative', overflow: 'hidden',
  },
  label: {
    fontSize: 10, fontWeight: 600, letterSpacing: '0.10em',
    textTransform: 'uppercase', color: 'rgba(240,238,233,0.45)',
  },
  value: {
    fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em',
    color: '#F0EEE9', lineHeight: 1.1,
  },
  unit: { fontSize: 16, fontWeight: 400, opacity: 0.6, marginLeft: 3 },
  trend: { fontSize: 11, fontWeight: 500, marginTop: 4 },
  accentBar: {
    position: 'absolute', left: 0, top: 0, bottom: 0,
    width: 3, borderRadius: '4px 0 0 4px',
  },
};

function MetricCard({ value, unit, label, trend, trendUp, status = 'neutral', highlight }) {
  const accentColor = status === 'green' ? '#B2DE7B'
    : status === 'yellow' ? '#FEEC7E'
    : status === 'teal' ? '#589E84'
    : '#4A7A90';

  return (
    <div style={{
      ...metricCardStyles.card,
      ...(highlight ? { borderLeft: `3px solid ${accentColor}`, paddingLeft: 19 } : {}),
    }}>
      <div style={metricCardStyles.label}>{label}</div>
      <div style={{ ...metricCardStyles.value, color: status === 'yellow' ? '#FEEC7E' : status === 'green' ? '#B2DE7B' : '#F0EEE9' }}>
        {value}
        {unit && <span style={metricCardStyles.unit}>{unit}</span>}
      </div>
      {trend && (
        <div style={{ ...metricCardStyles.trend, color: trendUp ? '#B2DE7B' : 'rgba(240,238,233,0.4)' }}>
          {trendUp ? '↑' : '↓'} {trend}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { MetricCard });
