import type { ReactNode } from 'react'
import { num } from '../lib/format'

export function Panel({
  children,
  className = '',
  title,
  hint,
}: {
  children: ReactNode
  className?: string
  title?: string
  hint?: string
}) {
  return (
    <section
      className={`rounded-xl border border-line/70 bg-surface/80 backdrop-blur-sm shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset] ${className}`}
    >
      {title && (
        <header className="flex items-center justify-between px-4 pt-3.5 pb-2">
          <h3 className="text-[11px] font-bold uppercase tracking-[0.14em] text-muted">{title}</h3>
          {hint && <span className="text-[11px] text-faint">{hint}</span>}
        </header>
      )}
      <div className={title ? 'px-4 pb-4' : 'p-4'}>{children}</div>
    </section>
  )
}

export function Bar({ value, color }: { value: number; color: string }) {
  return (
    <div className="h-2 w-full overflow-hidden rounded-full bg-navy-800">
      <div
        className="h-full rounded-full transition-[width] duration-700 ease-out"
        style={{ width: `${Math.max(0, Math.min(100, value))}%`, background: color }}
      />
    </div>
  )
}

export function Badge({
  children,
  color,
  subtle = false,
}: {
  children: ReactNode
  color: string
  subtle?: boolean
}) {
  return (
    <span
      className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide"
      style={
        subtle
          ? { color, background: `color-mix(in srgb, ${color} 14%, transparent)` }
          : { color: '#06121f', background: color }
      }
    >
      {children}
    </span>
  )
}

export function Dot({ color }: { color: string }) {
  return <span className="inline-block size-2 rounded-full" style={{ background: color }} />
}

export function Stat({
  label,
  value,
  accent,
  icon,
}: {
  label: string
  value: ReactNode
  accent?: string
  icon?: ReactNode
}) {
  return (
    <Panel className="px-4 py-3.5">
      <div className="flex items-center justify-between">
        <span className="text-[11px] font-semibold uppercase tracking-wider text-muted">{label}</span>
        {icon && <span style={{ color: accent ?? 'var(--color-blue-soft)' }}>{icon}</span>}
      </div>
      <div className="mt-1 text-3xl font-extrabold tabular-nums" style={{ color: accent }}>
        {value}
      </div>
    </Panel>
  )
}

// CheckRow renders a met (✓) / unmet (⚠) requirement line.
export function CheckRow({ ok, label }: { ok: boolean; label: string }) {
  return (
    <div className="flex items-center gap-2 text-sm">
      <span
        className="grid size-4 place-items-center rounded-full text-[10px] font-bold"
        style={{
          color: '#06121f',
          background: ok ? 'var(--color-ok)' : 'var(--color-warn)',
        }}
      >
        {ok ? '✓' : '!'}
      </span>
      <span className={ok ? 'text-ink' : 'text-warn'}>{label}</span>
    </div>
  )
}

export function ScoreRow({
  name,
  weight,
  score,
  color,
}: {
  name: string
  weight: string
  score: string
  color: string
}) {
  return (
    <div className="grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1.5">
      <div className="flex items-baseline justify-between">
        <span className="text-sm text-ink">{name}</span>
        <span className="text-[11px] text-faint">{Math.round(Number(weight) * 100)}%</span>
      </div>
      <span className="text-sm font-semibold tabular-nums" style={{ color }}>
        {num(score).toFixed(0)}%
      </span>
      <div className="col-span-2 -mt-0.5">
        <Bar value={num(score)} color={color} />
      </div>
    </div>
  )
}