import type { ReactNode } from 'react'
import { Card } from '@/libs/frontend-ui-primitives'
import DisclosureSection from '@/components/common/DisclosureSection'
import type { ExplorerFeaturePage } from '@/data/explorerOperations'
import OperationsSurfaceNav from './OperationsSurfaceNav'
import OperationsActionGrid from './OperationsActionGrid'
import OperationsTrackNote from './OperationsTrackNote'

export type StatusTone = 'normal' | 'warning' | 'danger'

export function formatNumber(value?: number | null): string {
  if (typeof value !== 'number' || !Number.isFinite(value)) return '0'
  return new Intl.NumberFormat('en-US').format(value)
}

export function formatCurrency(value?: number | null): string {
  if (typeof value !== 'number' || !Number.isFinite(value)) return 'Unknown'
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: 0,
  }).format(value)
}

export function truncateMiddle(value?: string, start = 8, end = 6): string {
  if (!value) return 'Unknown'
  if (value.length <= start + end + 3) return value
  return `${value.slice(0, start)}...${value.slice(-end)}`
}

export function StatusBadge({
  status,
  tone = 'normal',
}: {
  status: string
  tone?: StatusTone
}) {
  const toneClass =
    tone === 'danger'
      ? 'bg-red-100 text-red-700 dark:bg-red-950/40 dark:text-red-300'
      : tone === 'warning'
        ? 'bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300'
        : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'

  return (
    <span className={`inline-flex rounded-full px-2.5 py-1 text-xs font-semibold uppercase tracking-wide ${toneClass}`}>
      {status}
    </span>
  )
}

export function MetricCard({
  title,
  value,
  description,
  className,
}: {
  title: string
  value: string
  description: string
  className?: string
}) {
  return (
    <Card className={className}>
      <div className="text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-300">
        {title}
      </div>
      <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{value}</div>
      <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">{description}</div>
    </Card>
  )
}

export default function OperationsPageShell({
  page,
  children,
  compact = true,
}: {
  page: ExplorerFeaturePage
  children: ReactNode
  compact?: boolean
}) {
  return (
    <div className={`container mx-auto px-4 ${compact ? 'py-4 sm:py-6' : 'py-6 sm:py-8'}`}>
      <div className={`max-w-4xl ${compact ? 'mb-4' : 'mb-6 sm:mb-8'}`}>
        <div className="mb-2 inline-flex rounded-full border border-sky-200 bg-sky-50 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-700 dark:border-sky-900/50 dark:bg-sky-950/30 dark:text-sky-200">
          {page.eyebrow}
        </div>
        <h1 className={`mb-2 font-bold text-gray-900 dark:text-white ${compact ? 'text-2xl sm:text-3xl' : 'mb-3 text-3xl sm:text-4xl'}`}>
          {page.title}
        </h1>
        <p className={`text-gray-600 dark:text-gray-400 ${compact ? 'text-sm leading-6' : 'text-base leading-7 sm:text-lg sm:leading-8'}`}>
          {page.description}
        </p>
      </div>

      {page.note ? (
        compact ? (
          <DisclosureSection title="Scope note" defaultOpen={false} alwaysCollapsible className="mb-4">
            <Card className="border border-amber-200 bg-amber-50/70 dark:border-amber-900/50 dark:bg-amber-950/20">
              <p className="text-sm leading-6 text-amber-950 dark:text-amber-100">{page.note}</p>
            </Card>
          </DisclosureSection>
        ) : (
          <Card className="mb-4 border border-amber-200 bg-amber-50/70 dark:border-amber-900/50 dark:bg-amber-950/20">
            <p className="text-sm leading-6 text-amber-950 dark:text-amber-100">{page.note}</p>
          </Card>
        )
      ) : null}

      {page.accessTrack && page.accessNote ? (
        <OperationsTrackNote track={page.accessTrack} note={page.accessNote} />
      ) : null}

      <OperationsSurfaceNav />

      {children}

      {compact ? (
        <DisclosureSection title="Related actions" defaultOpen={false} alwaysCollapsible className="mt-4">
          <OperationsActionGrid actions={page.actions} />
        </DisclosureSection>
      ) : (
        <OperationsActionGrid actions={page.actions} />
      )}
    </div>
  )
}
