import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import type { BoardInfo } from '../types'
import ThemeToggle from '../components/ThemeToggle'
import './Lobby.scss'

export function getNickname(): string {
  return localStorage.getItem('ww_name') || ''
}

export function setNickname(name: string) {
  localStorage.setItem('ww_name', name)
}

export default function Lobby() {
  const nav = useNavigate()
  const [name, setName] = useState(getNickname())
  const [boards, setBoards] = useState<BoardInfo[]>([])
  const [board, setBoard] = useState('classic12')
  const [joinCode, setJoinCode] = useState('')
  const [health, setHealth] = useState<{ llm_configured: boolean; model: string | null } | null>(null)
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    fetch('/api/health').then((r) => r.json()).then(setHealth).catch(() => {})
    fetch('/api/boards').then((r) => r.json()).then((b: BoardInfo[]) => {
      setBoards(b)
      if (b.length && !b.some((x) => x.key === board)) setBoard(b[0].key)
    }).catch(() => {})
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const ensureName = (): boolean => {
    if (!name.trim()) {
      setError('请先输入你的昵称')
      return false
    }
    setNickname(name.trim())
    return true
  }

  const createRoom = async () => {
    if (!ensureName()) return
    setBusy(true)
    setError('')
    try {
      const res = await fetch('/api/rooms', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ board, host_name: name.trim() }),
      })
      const data = await res.json()
      nav(`/room/${data.code}`)
    } catch {
      setError('创建房间失败，请确认后端已启动')
    } finally {
      setBusy(false)
    }
  }

  const joinRoom = () => {
    if (!ensureName()) return
    const code = joinCode.trim().toUpperCase()
    if (!code) {
      setError('请输入房间号')
      return
    }
    nav(`/room/${code}`)
  }

  const selectedBoard = boards.find((b) => b.key === board)

  return (
    <div className="lobby">
      <div className="lobby-card">
        <div className="card-top">
          <ThemeToggle />
        </div>
        <div className="logo">
          <span className="moon">🌕</span>
          <h1>狼人杀</h1>
          <p className="subtitle">WEREWOLVES · 人机混战 · 多人联机</p>
        </div>

        <div className="field">
          <label>你的昵称</label>
          <input
            value={name}
            maxLength={12}
            placeholder="给自己起个名字"
            onChange={(e) => setName(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && createRoom()}
          />
        </div>

        <div className="field">
          <label>选择板子</label>
          <select value={board} onChange={(e) => setBoard(e.target.value)}>
            {boards.map((b) => (
              <option key={b.key} value={b.key}>
                {b.name}
              </option>
            ))}
          </select>
          {selectedBoard && <p className="hint">共 {selectedBoard.seat_count} 个座位</p>}
        </div>

        <button className="primary big" disabled={busy} onClick={createRoom}>
          {busy ? '创建中…' : '创建房间'}
        </button>

        <div className="divider">或者</div>

        <div className="join-row">
          <input
            className="code-input"
            value={joinCode}
            maxLength={4}
            placeholder="房间号"
            onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
            onKeyDown={(e) => e.key === 'Enter' && joinRoom()}
          />
          <button onClick={joinRoom}>加入房间</button>
        </div>

        {error && <p className="error">{error}</p>}

        {health && (
          <p className="ai-status">
            AI 玩家：
            {health.llm_configured ? (
              <span className="ok">大模型已接入（{health.model}）</span>
            ) : (
              <span className="fallback">未配置密钥，使用内置启发式 AI</span>
            )}
          </p>
        )}
      </div>
    </div>
  )
}