import type { ReactNode } from 'react';
import Wordmark from './Wordmark';

export interface EmptyStateAction {
  label: string;
  href: string;
  /** Primary = the one green CTA (color contract #9: never two competing). */
  primary?: boolean;
}

export interface EmptyStateProps {
  /** The system-voice code line, e.g. "TEAM NOT FOUND" (amber, mono, glitch-free data-adjacent chrome). */
  code: string;
  /** Human headline. */
  title: string;
  /** One muted mono line — say less, never invent (VOICE). */
  message?: string;
  /** CTA hierarchy — at most one `primary`. */
  actions?: EmptyStateAction[];
  /** Show the glitch wordmark above the code (default true — the 404 north-star look). */
  wordmark?: boolean;
  /** Compact inline variant (no full-viewport min-height) — for in-page empties like the ledger. */
  inline?: boolean;
  /** Extra content below the actions (legends, secondary copy). */
  children?: ReactNode;
}

/**
 * EmptyState (DS5 · DESIGN-SPEC Part 8, #20) — ONE designed empty/error system,
 * modeled on the north-star 404 (app/not-found.tsx): scanlines + optional glitch
 * wordmark + a mono amber system-voice code line + correct CTA hierarchy. It
 * REPLACES the scattered bare-red "Team not found", the naked "Game not found",
 * and the flat offseason-empty voices — one on-brand surface everywhere.
 *
 * Amber (not red) is the system-voice accent (matches the 404): an empty board
 * is a state, not an error to alarm about. Data never glitches — only the
 * wordmark chrome carries the glitch (Part 4). prefers-reduced-motion freezes
 * the crt-sweep via the global CSS rule.
 */
export default function EmptyState({
  code,
  title,
  message,
  actions = [],
  wordmark = true,
  inline = false,
  children,
}: EmptyStateProps) {
  return (
    <section
      className="scanlines"
      style={{
        minHeight: inline ? undefined : 'calc(100vh - 240px)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: inline ? '40px 24px' : '56px 24px',
        textAlign: 'center',
        position: 'relative',
        border: inline ? '1px solid var(--border)' : undefined,
        borderRadius: inline ? 12 : undefined,
        background: inline ? 'var(--bg-1)' : undefined,
      }}
    >
      {/* CRT sweep — fires once on mount; frozen under reduced motion. */}
      <div className="crt-sweep" />

      {wordmark && (
        <div style={{ marginBottom: 18 }}>
          <Wordmark size={inline ? 'md' : 'lg'} cursor />
        </div>
      )}

      <div
        className="mono amber-glow"
        style={{ fontSize: inline ? 11 : 12.5, letterSpacing: '0.28em', color: 'var(--amber)', marginBottom: 16 }}
      >
        {code}
      </div>

      <h2 style={{ fontSize: inline ? 20 : 26, fontWeight: 800, letterSpacing: '-0.02em', margin: 0, color: 'var(--text-0)' }}>
        {title}
      </h2>

      {message && (
        <p className="mono" style={{ fontSize: 13.5, color: 'var(--text-1)', marginTop: 12, maxWidth: 460, lineHeight: 1.55 }}>
          {message}
        </p>
      )}

      {actions.length > 0 && (
        <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap', justifyContent: 'center' }}>
          {actions.map((a) => (
            <a
              key={a.href + a.label}
              href={a.href}
              className={a.primary ? 'btn-primary' : 'btn-ghost'}
              style={{ padding: '11px 20px', textDecoration: 'none', fontSize: 13.5 }}
            >
              {a.label}
            </a>
          ))}
        </div>
      )}

      {children}
    </section>
  );
}
