'use client'

import type { ReactNode } from 'react'
import type { PostStatus } from '../../lib/posts-service.js'

/**
 * Shared status / type / SEO indicators for the Posts admin area.
 * Colors use semantic theme tokens only.
 */

const PALETTE: Record<string, { bg: string; text: string; ring: string; border: string }> = {
  purple: {
    bg: 'bg-brand/10',
    text: 'text-brand',
    ring: 'ring-brand/20',
    border: 'border-brand',
  },
  green: {
    bg: 'bg-success/10',
    text: 'text-success',
    ring: 'ring-success/20',
    border: 'border-success',
  },
  orange: {
    bg: 'bg-warning/10',
    text: 'text-warning',
    ring: 'ring-warning/20',
    border: 'border-warning',
  },
  red: {
    bg: 'bg-destructive/10',
    text: 'text-destructive',
    ring: 'ring-destructive/20',
    border: 'border-destructive',
  },
  blue: {
    bg: 'bg-info/10',
    text: 'text-info',
    ring: 'ring-info/20',
    border: 'border-info',
  },
  pink: {
    bg: 'bg-chart-4/15',
    text: 'text-chart-4',
    ring: 'ring-chart-4/20',
    border: 'border-chart-4',
  },
  gray: {
    bg: 'bg-muted',
    text: 'text-muted-foreground',
    ring: 'ring-border',
    border: 'border-border',
  },
}

export function paletteFor(color: string | null | undefined) {
  if (!color) return PALETTE.gray!
  return PALETTE[color] ?? PALETTE.gray!
}

const STATUS_LABEL: Record<PostStatus, string> = {
  PUBLISHED: 'Published',
  DRAFT: 'Draft',
  SCHEDULED: 'Scheduled',
  ARCHIVED: 'Archived',
}

const STATUS_PALETTE: Record<PostStatus, string> = {
  PUBLISHED: 'green',
  DRAFT: 'gray',
  SCHEDULED: 'orange',
  ARCHIVED: 'gray',
}

const STATUS_GLYPH: Record<PostStatus, string> = {
  PUBLISHED: '●',
  DRAFT: '○',
  SCHEDULED: '◐',
  ARCHIVED: '◌',
}

export function PostStatusBadge({ status }: { status: PostStatus }) {
  const p = paletteFor(STATUS_PALETTE[status])
  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`}
      aria-label={`Status: ${STATUS_LABEL[status]}`}
    >
      <span aria-hidden className="text-[10px] leading-none">
        {STATUS_GLYPH[status]}
      </span>
      {STATUS_LABEL[status]}
    </span>
  )
}

export function PostTypeBadge({
  label,
  color,
  onClick,
}: {
  label: string
  color: string | null
  onClick?: () => void
}): ReactNode {
  const p = paletteFor(color)
  const className = `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`
  if (onClick) {
    return (
      <button type="button" onClick={onClick} className={`${className} hover:opacity-80`}>
        {label}
      </button>
    )
  }
  return <span className={className}>{label}</span>
}

export function seoScorePalette(score: number | null): string {
  if (score === null || Number.isNaN(score)) return 'gray'
  if (score >= 80) return 'green'
  if (score >= 60) return 'orange'
  if (score >= 1) return 'red'
  return 'gray'
}

export function SeoScoreIndicator({ score }: { score: number | null }) {
  const colorKey = seoScorePalette(score)
  const p = paletteFor(colorKey)
  if (score === null) {
    return (
      <span className="text-muted-foreground inline-flex items-center gap-1.5 text-xs">
        <span aria-hidden className={`h-2 w-2 rounded-full ${p.bg.split(' ')[0]}`} />
        <span className="tabular-nums">—</span>
      </span>
    )
  }
  return (
    <span className="text-foreground inline-flex items-center gap-1.5 text-xs">
      <span
        aria-hidden
        className={`h-2 w-2 rounded-full ${
          colorKey === 'green'
            ? 'bg-success'
            : colorKey === 'orange'
              ? 'bg-warning'
              : 'bg-destructive'
        }`}
      />
      <span className="tabular-nums">{score}</span>
    </span>
  )
}
