'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 are restricted to the theme tokens already used elsewhere in
 * the admin (`success`, `warning`, `destructive`, `primary`, `muted`)
 * plus a small named-color palette (`purple`, `green`, `orange`, ...)
 * that maps to fixed Tailwind utilities. This keeps the badges working
 * in both light and dark mode and avoids leaking `bg-[#...]` arbitrary
 * values into components.
 */

// ─── Named color palette ─────────────────────────────────────────────

const PALETTE: Record<string, { bg: string; text: string; ring: string; border: string }> = {
  purple: {
    bg: 'bg-violet-50 dark:bg-violet-950/40',
    text: 'text-violet-700 dark:text-violet-300',
    ring: 'ring-violet-200 dark:ring-violet-900',
    border: 'border-violet-500',
  },
  green: {
    bg: 'bg-emerald-50 dark:bg-emerald-950/40',
    text: 'text-emerald-700 dark:text-emerald-300',
    ring: 'ring-emerald-200 dark:ring-emerald-900',
    border: 'border-emerald-500',
  },
  orange: {
    bg: 'bg-amber-50 dark:bg-amber-950/40',
    text: 'text-amber-700 dark:text-amber-300',
    ring: 'ring-amber-200 dark:ring-amber-900',
    border: 'border-amber-500',
  },
  red: {
    bg: 'bg-red-50 dark:bg-red-950/40',
    text: 'text-red-700 dark:text-red-300',
    ring: 'ring-red-200 dark:ring-red-900',
    border: 'border-red-500',
  },
  blue: {
    bg: 'bg-blue-50 dark:bg-blue-950/40',
    text: 'text-blue-700 dark:text-blue-300',
    ring: 'ring-blue-200 dark:ring-blue-900',
    border: 'border-blue-500',
  },
  pink: {
    bg: 'bg-pink-50 dark:bg-pink-950/40',
    text: 'text-pink-700 dark:text-pink-300',
    ring: 'ring-pink-200 dark:ring-pink-900',
    border: 'border-pink-500',
  },
  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!
}

// ─── PostStatusBadge ─────────────────────────────────────────────────

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>
  )
}

// ─── PostTypeBadge ───────────────────────────────────────────────────

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>
}

// ─── SeoScoreIndicator ───────────────────────────────────────────────

/**
 * Returns the palette key for an SEO score so callers can match the
 * colored dot. 80+ green, 60–79 orange, 1–59 red, missing = gray.
 */
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-emerald-500'
            : colorKey === 'orange'
              ? 'bg-amber-500'
              : 'bg-red-500'
        }`}
      />
      <span className="tabular-nums">{score}</span>
    </span>
  )
}
