import { THEMES, theme } from '../theme.ts'
import type { ThemeMode } from '../theme.ts'

interface Props {
  current: ThemeMode
  onSelect: (mode: ThemeMode) => void
  onClose: () => void
}

const modes = Object.keys(THEMES) as ThemeMode[]

export default function ThemeSelector({ current, onSelect, onClose }: Props) {
  return (
    <div
      style={{
        position: 'fixed', inset: 0, zIndex: 100,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'rgba(0,0,0,0.5)',
        animation: 'fadeIn 0.15s ease',
      }}
      onClick={onClose}
    >
      <div
        style={{
          background: theme.bgStr,
          border: `1px solid ${theme.border}`,
          borderRadius: 12,
          padding: '1.25rem',
          width: 'min(360px, 85vw)',
        }}
        onClick={(e) => e.stopPropagation()}
      >
        <span style={{
          color: theme.text, fontWeight: 600, fontSize: '1rem',
          display: 'block', marginBottom: '1rem',
        }}>
          Choose Theme
        </span>
        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: '0.6rem',
          justifyContent: 'center',
        }}>
          {modes.map((mode) => {
            const t = THEMES[mode]
            const isActive = mode === current
            return (
              <button
                key={mode}
                onClick={() => { onSelect(mode); onClose() }}
                style={{
                  display: 'flex', flexDirection: 'column',
                  alignItems: 'center', justifyContent: 'center',
                  gap: '0.3rem',
                  width: 'min(140px, calc(50% - 0.6rem))',
                  minHeight: 64,
                  padding: '0.6rem 0.4rem',
                  background: t.colors.bgPanel,
                  border: isActive ? `2px solid ${t.colors.player1Str}` : `1px solid ${theme.border}`,
                  borderRadius: 8,
                  cursor: 'pointer',
                  color: t.colors.text,
                  fontSize: '0.8rem',
                  fontWeight: isActive ? 600 : 400,
                  transition: 'border 0.15s ease',
                }}
              >
                <span style={{ fontSize: '1.4rem' }}>{t.emoji}</span>
                <span>{t.label}</span>
              </button>
            )
          })}
        </div>
      </div>
    </div>
  )
}