import { useState } from 'react'
import { motion } from 'framer-motion'
import { Player_Info } from '../game/types'

interface Lobby_Props {
  room_id: string | null
  players: Player_Info[]
  on_create_room: (name: string) => void
  on_join_room: (room_id: string, name: string) => void
  on_fill_bots: () => void
}

export function Lobby({ room_id, players, on_create_room, on_join_room, on_fill_bots }: Lobby_Props) {
  const [name, set_name] = useState('')
  const [join_code, set_join_code] = useState('')
  const [mode, set_mode] = useState<'select' | 'create' | 'join'>('select')

  const handle_create = () => {
    if (name.trim()) {
      on_create_room(name.trim())
    }
  }

  const handle_join = () => {
    if (name.trim() && join_code.trim()) {
      on_join_room(join_code.trim(), name.trim())
    }
  }

  if (room_id) {
    return (
      <div style={styles.container}>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          style={styles.card}
        >
          <h2 style={styles.title}>Room: {room_id}</h2>
          <p style={styles.subtitle}>Waiting for players... ({players.length}/4)</p>

          <div style={styles.players_grid}>
            {[0, 1, 2, 3].map((seat) => {
              const player = players.find((p) => p.seat === seat)
              const team = seat % 2
              return (
                <motion.div
                  key={seat}
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ delay: seat * 0.1 }}
                  style={{
                    ...styles.player_slot,
                    backgroundColor: team === 0 ? '#e3f2fd' : '#fce4ec',
                    borderColor: team === 0 ? '#2196f3' : '#e91e63',
                  }}
                >
                  {player ? (
                    <>
                      <div style={styles.player_name}>{player.name}</div>
                      <div style={styles.player_team}>Team {team + 1}</div>
                    </>
                  ) : (
                    <div style={styles.empty_slot}>Empty</div>
                  )}
                </motion.div>
              )
            })}
          </div>

          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={on_fill_bots}
            style={{ ...styles.button, backgroundColor: '#ff9800', marginBottom: 16 }}
          >
            Fill with Bots
          </motion.button>

          <p style={styles.hint}>Share room code with friends to join</p>
        </motion.div>
      </div>
    )
  }

  return (
    <div style={styles.container}>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        style={styles.card}
      >
        <h1 style={styles.logo}>掼蛋</h1>
        <h2 style={styles.title}>Guan Dan</h2>

        {mode === 'select' && (
          <div style={styles.buttons}>
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => set_mode('create')}
              style={styles.button}
            >
              Create Room
            </motion.button>
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => set_mode('join')}
              style={{ ...styles.button, backgroundColor: '#28a745' }}
            >
              Join Room
            </motion.button>
          </div>
        )}

        {mode === 'create' && (
          <div style={styles.form}>
            <input
              type="text"
              placeholder="Your name"
              value={name}
              onChange={(e) => set_name(e.target.value)}
              style={styles.input}
            />
            <div style={styles.buttons}>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={handle_create}
                style={styles.button}
              >
                Create
              </motion.button>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => set_mode('select')}
                style={{ ...styles.button, backgroundColor: '#6c757d' }}
              >
                Back
              </motion.button>
            </div>
          </div>
        )}

        {mode === 'join' && (
          <div style={styles.form}>
            <input
              type="text"
              placeholder="Your name"
              value={name}
              onChange={(e) => set_name(e.target.value)}
              style={styles.input}
            />
            <input
              type="text"
              placeholder="Room code"
              value={join_code}
              onChange={(e) => set_join_code(e.target.value)}
              style={styles.input}
            />
            <div style={styles.buttons}>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={handle_join}
                style={{ ...styles.button, backgroundColor: '#28a745' }}
              >
                Join
              </motion.button>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => set_mode('select')}
                style={{ ...styles.button, backgroundColor: '#6c757d' }}
              >
                Back
              </motion.button>
            </div>
          </div>
        )}
      </motion.div>
    </div>
  )
}

const styles: Record<string, React.CSSProperties> = {
  container: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    minHeight: '100vh',
    backgroundColor: '#1a1a2e',
  },
  card: {
    backgroundColor: '#16213e',
    padding: 40,
    borderRadius: 16,
    textAlign: 'center',
    boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
    minWidth: 360,
  },
  logo: {
    fontSize: 64,
    margin: 0,
    color: '#fff',
  },
  title: {
    color: '#fff',
    marginTop: 8,
    marginBottom: 24,
  },
  subtitle: {
    color: '#aaa',
    marginBottom: 24,
  },
  buttons: {
    display: 'flex',
    gap: 12,
    justifyContent: 'center',
  },
  button: {
    padding: '12px 24px',
    fontSize: 16,
    border: 'none',
    borderRadius: 8,
    backgroundColor: '#007bff',
    color: '#fff',
    cursor: 'pointer',
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
  },
  input: {
    padding: '12px 16px',
    fontSize: 16,
    border: '2px solid #333',
    borderRadius: 8,
    backgroundColor: '#0f3460',
    color: '#fff',
    outline: 'none',
  },
  players_grid: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 12,
    marginBottom: 24,
  },
  player_slot: {
    padding: 16,
    borderRadius: 8,
    border: '2px solid',
  },
  player_name: {
    fontWeight: 'bold',
    color: '#333',
  },
  player_team: {
    fontSize: 12,
    color: '#666',
  },
  empty_slot: {
    color: '#999',
  },
  hint: {
    color: '#666',
    fontSize: 12,
  },
}