import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useRoomStore, Room } from '../stores/roomStore'
import { useAuthStore } from '../stores/authStore'

function RoomCard({ room, onJoin }: { room: Room; onJoin: (room: Room) => void }) {
  const statusColors: Record<string, string> = {
    open: 'text-accent-green',
    in_game: 'text-accent-orange',
    closed: 'text-text-muted',
  }
  const statusLabels: Record<string, string> = {
    open: '开放',
    in_game: '游戏中',
    closed: '已关闭',
  }

  return (
    <div className="card hover:border-border-DEFAULT hover:bg-bg-tertiary transition-colors duration-150 cursor-pointer group"
         onClick={() => onJoin(room)}>
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <h3 className="font-semibold text-text-primary truncate">{room.name}</h3>
            {room.has_password && (
              <svg className="w-3.5 h-3.5 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
              </svg>
            )}
          </div>
          <p className="text-text-muted text-xs mt-1">房主: {room.owner_username}</p>
        </div>
        <div className="text-right flex-shrink-0">
          <span className={`text-xs font-medium ${statusColors[room.status] ?? 'text-text-muted'}`}>
            {statusLabels[room.status] ?? room.status}
          </span>
        </div>
      </div>

      <div className="flex items-center gap-4 mt-3 pt-3 border-t border-border">
        <div className="flex items-center gap-1.5 text-text-secondary text-xs">
          <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
            <circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>
          {room.current_players}/{room.max_players}
        </div>
        <div className="flex items-center gap-1.5 text-text-secondary text-xs">
          <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="16 18 22 12 16 6"/>
            <polyline points="8 6 2 12 8 18"/>
          </svg>
          {room.game_version}
        </div>
      </div>
    </div>
  )
}

export default function DashboardPage() {
  const { rooms, loading, fetchRooms, joinRoom, createRoom } = useRoomStore()
  const { user } = useAuthStore()
  const navigate = useNavigate()

  const [showCreate, setShowCreate] = useState(false)
  const [createName, setCreateName] = useState('')
  const [createVersion, setCreateVersion] = useState('1.20')
  const [createMax, setCreateMax] = useState('10')
  const [createPw, setCreatePw] = useState('')
  const [createPublic, setCreatePublic] = useState(true)
  const [createError, setCreateError] = useState('')
  const [creating, setCreating] = useState(false)

  useEffect(() => {
    fetchRooms()
    const id = setInterval(fetchRooms, 10000)
    return () => clearInterval(id)
  }, [])

  const handleJoin = async (room: Room) => {
    try {
      let password: string | undefined
      if (room.has_password) {
        password = window.prompt(`房间 "${room.name}" 需要密码：`) ?? undefined
        if (password === undefined) return
      }
      await joinRoom(room.id, password)
      navigate(`/room/${room.id}`)
    } catch (e: any) {
      alert(`加入失败: ${e}`)
    }
  }

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault()
    setCreateError('')
    setCreating(true)
    try {
      const roomId = await createRoom({
        name: createName,
        maxPlayers: parseInt(createMax) || 10,
        isPublic: createPublic,
        password: createPw || undefined,
        gameVersion: createVersion,
      })
      await joinRoom(roomId)
      navigate(`/room/${roomId}`)
    } catch (e: any) {
      setCreateError(String(e))
      setCreating(false)
    }
  }

  return (
    <div className="h-full flex flex-col overflow-hidden">
      {/* Header */}
      <div className="px-6 py-4 border-b border-border flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold text-text-primary">游戏大厅</h1>
          <p className="text-text-muted text-xs mt-0.5">找到一个房间加入，或创建你自己的</p>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={() => fetchRooms()}
            className="btn-secondary flex items-center gap-2"
          >
            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="23 4 23 10 17 10"/>
              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
            </svg>
            刷新
          </button>
          <button
            onClick={() => setShowCreate(true)}
            className="btn-primary flex items-center gap-2"
          >
            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            创建房间
          </button>
        </div>
      </div>

      {/* Room grid */}
      <div className="flex-1 overflow-y-auto p-6">
        {loading && rooms.length === 0 ? (
          <div className="flex items-center justify-center h-32 text-text-muted text-sm">
            加载中...
          </div>
        ) : rooms.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-48 text-text-muted">
            <svg className="w-12 h-12 mb-3 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
              <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
            </svg>
            <p className="text-sm">暂无公开房间</p>
            <p className="text-xs mt-1">创建第一个房间开始游戏</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            {rooms.map((room) => (
              <RoomCard key={room.id} room={room} onJoin={handleJoin} />
            ))}
          </div>
        )}
      </div>

      {/* Create room modal */}
      {showCreate && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50 animate-fade-in">
          <div className="card w-full max-w-sm animate-slide-up">
            <div className="flex items-center justify-between mb-5">
              <h2 className="font-semibold text-text-primary">创建房间</h2>
              <button onClick={() => setShowCreate(false)} className="text-text-muted hover:text-text-primary">
                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
              </button>
            </div>

            <form onSubmit={handleCreate} className="space-y-3">
              <div>
                <label className="block text-xs text-text-secondary mb-1">房间名称</label>
                <input className="input-field" placeholder="我的房间" value={createName}
                  onChange={(e) => setCreateName(e.target.value)} required />
              </div>
              <div className="flex gap-3">
                <div className="flex-1">
                  <label className="block text-xs text-text-secondary mb-1">游戏版本</label>
                  <input className="input-field" placeholder="1.20" value={createVersion}
                    onChange={(e) => setCreateVersion(e.target.value)} />
                </div>
                <div className="flex-1">
                  <label className="block text-xs text-text-secondary mb-1">最大人数</label>
                  <input className="input-field" type="number" min="2" max="20" value={createMax}
                    onChange={(e) => setCreateMax(e.target.value)} />
                </div>
              </div>
              <div>
                <label className="block text-xs text-text-secondary mb-1">密码（可选）</label>
                <input className="input-field" type="password" placeholder="留空表示无密码" value={createPw}
                  onChange={(e) => setCreatePw(e.target.value)} />
              </div>
              <label className="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" checked={createPublic}
                  onChange={(e) => setCreatePublic(e.target.checked)}
                  className="w-4 h-4 rounded accent-accent-green" />
                <span className="text-sm text-text-secondary">公开房间</span>
              </label>

              {createError && (
                <div className="px-3 py-2 rounded-lg bg-accent-red/10 border border-accent-red/30 text-accent-red text-xs">
                  {createError}
                </div>
              )}

              <div className="flex gap-2 pt-1">
                <button type="button" className="btn-secondary flex-1" onClick={() => setShowCreate(false)}>取消</button>
                <button type="submit" className="btn-primary flex-1" disabled={creating}>
                  {creating ? '创建中...' : '创建'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  )
}