import React from 'react';
import { Shield } from 'lucide-react';

// ---------------------------------------------------------------------------
// AtlasBadge — small inline pill badge for the Host column on ReportingPage.
// Shows Atlas action plan coverage status for a given host.
//
// Props:
//   hostId      — numeric host identifier
//   atlasStatus — { host_id, has_action_plan, plan_count, synced_at } or undefined
//   onClick     — callback when badge is clicked (opens slide-out panel)
// ---------------------------------------------------------------------------

const warningStyle = {
  display: 'inline-flex',
  alignItems: 'center',
  gap: '3px',
  borderRadius: '9999px',
  padding: '1px 6px',
  fontFamily: "'JetBrains Mono', monospace",
  fontSize: '0.58rem',
  fontWeight: 700,
  lineHeight: 1,
  cursor: 'pointer',
  marginLeft: '6px',
  background: 'rgba(245,158,11,0.12)',
  border: '1px solid rgba(245,158,11,0.4)',
  color: '#F59E0B',
};

const successStyle = {
  display: 'inline-flex',
  alignItems: 'center',
  gap: '3px',
  borderRadius: '9999px',
  padding: '1px 6px',
  fontFamily: "'JetBrains Mono', monospace",
  fontSize: '0.58rem',
  fontWeight: 700,
  lineHeight: 1,
  cursor: 'pointer',
  marginLeft: '6px',
  background: 'rgba(16,185,129,0.12)',
  border: '1px solid rgba(16,185,129,0.4)',
  color: '#10B981',
};

export default function AtlasBadge({ hostId, atlasStatus, onClick }) {
  // No status data — render nothing
  if (!atlasStatus) return null;

  const hasPlan = atlasStatus.plan_count > 0;
  const style = hasPlan ? successStyle : warningStyle;
  const label = hasPlan ? String(atlasStatus.plan_count) : '0';

  return (
    <span
      style={style}
      title={
        hasPlan
          ? `${atlasStatus.plan_count} Atlas action plan${atlasStatus.plan_count !== 1 ? 's' : ''}`
          : 'No Atlas action plans — needs attention'
      }
      onClick={(e) => {
        e.stopPropagation();
        if (onClick) onClick(hostId);
      }}
      data-testid="atlas-badge"
    >
      <Shield style={{ width: 12, height: 12, flexShrink: 0 }} />
      {label}
    </span>
  );
}