'use client'

import { AlertTriangle, Check, CircleHelp, X } from 'lucide-react'
import type { ReactNode } from 'react'
import type { CheckStatus } from '@actuate-media/cms-core/security-center'
import { SettingsCard } from './components.js'

/** Small status icon used in check/summary rows. Text label always accompanies it. */
export function CheckIcon({ status }: { status: CheckStatus }) {
  switch (status) {
    case 'pass':
      return <Check size={15} className="text-success shrink-0" aria-hidden="true" />
    case 'warning':
      return <AlertTriangle size={15} className="text-warning shrink-0" aria-hidden="true" />
    case 'fail':
      return <X size={15} className="text-destructive shrink-0" aria-hidden="true" />
    default:
      return <CircleHelp size={15} className="text-muted-foreground shrink-0" aria-hidden="true" />
  }
}

const STATUS_WORD: Record<CheckStatus, string> = {
  pass: 'Pass',
  warning: 'Warning',
  fail: 'Fail',
  unknown: 'Unknown',
}

/** A status row: icon + label on the left, value on the right. */
export function StatusRow({
  status,
  label,
  value,
  badge,
}: {
  status: CheckStatus
  label: string
  value?: ReactNode
  badge?: ReactNode
}) {
  return (
    <div className="flex items-center justify-between gap-3 py-1.5 text-sm">
      <span className="flex items-center gap-2">
        <CheckIcon status={status} />
        {/* Screen-reader text so status is never conveyed by color/icon alone. */}
        <span className="sr-only">{STATUS_WORD[status]}: </span>
        <span className="text-foreground">{label}</span>
        {badge}
      </span>
      {value !== undefined && <span className="text-muted-foreground text-right">{value}</span>}
    </div>
  )
}

/**
 * Section wrapper for the Security tab. Delegates to the shared
 * {@link SettingsCard} so Security matches the canonical Settings design
 * language (p-6, text-lg title, muted description). `headingId` is accepted
 * for backward compatibility but ignored — {@link SettingsCard} generates and
 * wires its own accessible heading id.
 */
export function SecurityCard({
  title,
  description,
  actions,
  children,
}: {
  /** @deprecated No longer used; SettingsCard manages the heading id. */
  headingId?: string
  title: string
  description: string
  actions?: ReactNode
  children: ReactNode
}) {
  return (
    <SettingsCard title={title} description={description} actions={actions}>
      {children}
    </SettingsCard>
  )
}
