'use client'

import { Shield, ShieldAlert, ShieldCheck, ShieldX } from 'lucide-react'
import type { SecurityStatus, SecurityWarning } from '@actuate-media/cms-core/security-center'
import { SettingsCard } from './components.js'
import { CheckIcon } from './securityPrimitives.js'

const LEVEL_STYLES: Record<
  SecurityStatus['status'],
  { pill: string; Icon: typeof Shield; word: string }
> = {
  secure: {
    pill: 'bg-success/15 text-success border-success/30',
    Icon: ShieldCheck,
    word: 'Secure',
  },
  needs_attention: {
    pill: 'bg-warning/15 text-warning border-warning/30',
    Icon: ShieldAlert,
    word: 'Needs attention',
  },
  at_risk: {
    pill: 'bg-destructive/15 text-destructive border-destructive/30',
    Icon: ShieldX,
    word: 'At risk',
  },
  unknown: { pill: 'bg-muted text-muted-foreground border-border', Icon: Shield, word: 'Unknown' },
}

const SEVERITY_STYLES: Record<SecurityWarning['severity'], string> = {
  critical: 'border-destructive/30 bg-destructive/10 text-destructive',
  warning: 'border-warning/30 bg-warning/10 text-warning',
  info: 'border-border bg-muted text-muted-foreground',
}

export function SecurityStatusCard({
  status,
  onNavigate,
}: {
  status: SecurityStatus
  onNavigate?: (path: string) => void
}) {
  const style = LEVEL_STYLES[status.status]
  const { Icon } = style

  return (
    <SettingsCard
      title="Security Status"
      description={status.description}
      actions={
        <span
          className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-sm font-medium ${style.pill}`}
        >
          <Icon size={15} aria-hidden="true" />
          {/* Visible text label means the status never relies on color alone. */}
          {style.word}
        </span>
      }
    >
      <div className="grid grid-cols-1 gap-x-6 gap-y-1 sm:grid-cols-2">
        {status.checks.map((check) => (
          <button
            key={check.key}
            type="button"
            disabled={!check.actionHref || !onNavigate}
            onClick={() => check.actionHref && onNavigate?.(check.actionHref)}
            className="enabled:hover:bg-accent/50 flex items-center justify-between gap-3 rounded-md py-1.5 text-left text-sm disabled:cursor-default"
          >
            <span className="flex items-center gap-2">
              <CheckIcon status={check.status} />
              <span className="text-foreground">{check.label}</span>
            </span>
            {check.value !== undefined && (
              <span className="text-muted-foreground text-right">{check.value}</span>
            )}
          </button>
        ))}
      </div>

      {status.warnings.length > 0 && (
        <div className="mt-4 space-y-2" aria-live="polite">
          {status.warnings.map((w) => (
            <div
              key={w.id}
              role="note"
              className={`flex items-start justify-between gap-3 rounded-lg border p-3 text-sm ${SEVERITY_STYLES[w.severity]}`}
            >
              <div>
                <p className="font-medium">{w.title}</p>
                <p className="mt-0.5 opacity-90">{w.description}</p>
              </div>
              {w.actionHref && w.actionLabel && onNavigate && (
                <button
                  type="button"
                  onClick={() => onNavigate(w.actionHref!)}
                  className="shrink-0 self-center rounded-md border border-current/30 px-2.5 py-1 text-xs font-medium hover:opacity-80"
                >
                  {w.actionLabel}
                </button>
              )}
            </div>
          ))}
        </div>
      )}
    </SettingsCard>
  )
}
