import { type ReactNode, useEffect } from 'react'
import { X } from 'lucide-react'
import { num } from '../lib/format'

// Modal is a dependency free overlay: a dimmed backdrop plus a centered, scrollable panel. Escape and a
// backdrop click close it. The body scroll is locked while it is open so a tall result does not jump.
export function Modal({
  open,
  onClose,
  title,
  children,
}: {
  open: boolean
  onClose: () => void
  title: string
  children: ReactNode
}) {
  useEffect(() => {
    if (!open) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }
    document.addEventListener('keydown', onKey)
    const prev = document.body.style.overflow
    document.body.style.overflow = 'hidden'
    return () => {
      document.removeEventListener('keydown', onKey)
      document.body.style.overflow = prev
    }
  }, [open, onClose])

  if (!open) return null
  return (
    <div
      className="fixed inset-0 z-50 grid place-items-start overflow-y-auto bg-black/60 p-4 backdrop-blur-sm sm:p-8"
      onClick={onClose}
    >
      <div
        className="mx-auto w-full max-w-3xl rounded-xl border border-line/70 bg-surface shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <header className="flex items-center justify-between border-b border-line/60 px-4 py-3">
          <h3 className="text-sm font-bold">{title}</h3>
          <button
            onClick={onClose}
            aria-label="Close"
            className="grid size-7 place-items-center rounded-md text-muted hover:bg-navy-800 hover:text-ink"
          >
            <X size={16} />
          </button>
        </header>
        <div className="p-4">{children}</div>
      </div>
    </div>
  )
}

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