import React from 'react';
import { useFeatureFlags } from '../contexts/FeatureFlagContext';

const FeatureFlagStatus: React.FC = () => {
  const { flags, loading, error, reloadFlags } = useFeatureFlags();

  if (loading) {
    return <div style={{ fontSize: '14px', color: '#8D96A3' }}>Loading feature flags...</div>;
  }

  if (error) {
    return <div style={{ fontSize: '14px', color: '#EE6368' }}>Error loading feature flags</div>;
  }

  if (!flags) {
    return null;
  }

  return (
    <div className="admin-surface" style={{ marginBottom: '20px' }}>
      <div className="admin-surface-header">
        <div>
          <h4>Feature Flags Status</h4>
          <p>Environment-driven switches for admin-controlled behavior.</p>
        </div>
      </div>

      <div style={{ display: 'grid', gap: '8px', marginBottom: '16px' }}>
        {Object.entries(flags.flags).map(([name, value]) => (
          <div
            key={name}
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              padding: '10px 12px',
              background: 'rgba(16,18,22,0.72)',
              borderTop: '1px solid rgba(64,71,80,0.55)',
              borderBottom: '1px solid rgba(34,38,44,0.96)',
              borderLeft: '1px solid rgba(42,46,52,0.78)',
              borderRight: '1px solid rgba(42,46,52,0.78)',
              borderRadius: '3px',
              fontSize: '12px'
            }}
          >
            <span style={{ fontWeight: 500, color: '#E6EBF2' }}>
              {name.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, (l) => l.toUpperCase())}
            </span>
            <span
              style={{
                padding: '2px 8px',
                borderRadius: '999px',
                fontSize: '11px',
                fontWeight: 500,
                background: value ? 'rgba(47,162,82,.13)' : 'rgba(92,31,33,.4)',
                color: value ? '#2FA252' : '#EE6368',
                border: `1px solid ${value ? 'rgba(47,162,82,.36)' : 'rgba(238,99,104,.42)'}`
              }}
            >
              {String(value)}
            </span>
          </div>
        ))}
      </div>

      <button className="btn btn-secondary" onClick={reloadFlags} style={{ fontSize: '12px', padding: '6px 12px' }}>
        Reload Flags
      </button>

      <p style={{ fontSize: '12px', color: '#8D96A3', marginTop: '12px', marginBottom: 0 }}>
        Feature flags are loaded from environment variables. Changes require updating the environment and reloading.
      </p>
    </div>
  );
};

export default FeatureFlagStatus;