import { motion } from 'framer-motion'
import { Card as Card_Type, Rank, get_rank_symbol } from '../game/types'
import { Hand } from './Hand'
import { Card } from './Card'
import { use_is_mobile } from '../hooks/use_is_mobile'

interface Player_Play {
  cards: Card_Type[]
  is_pass: boolean
}

interface Game_Props {
  hand: Card_Type[]
  level: Rank
  selected_ids: Set<number>
  on_card_click: (id: number) => void
  on_select_same_rank: (rank: number) => void
  on_play: () => void
  on_pass: () => void
  table_cards: Card_Type[]
  combo_type: string
  current_turn: number
  my_seat: number
  can_pass: boolean
  player_card_counts: number[]
  team_levels: [number, number]
  players_map: Record<number, string>
  last_play_seat: number | null
  player_plays: Record<number, Player_Play>
  leading_seat: number | null
}

export function Game({
  hand,
  level,
  selected_ids,
  on_card_click,
  on_select_same_rank,
  on_play,
  on_pass,
  combo_type,
  current_turn,
  my_seat,
  can_pass,
  player_card_counts,
  team_levels,
  players_map,
  player_plays,
  leading_seat,
}: Game_Props) {
  const is_my_turn = current_turn === my_seat
  const relative_positions = get_relative_positions(my_seat)
  const is_mobile = use_is_mobile()

  return (
    <div style={is_mobile ? mobile_styles.container : styles.container}>
      {/* Info bar */}
      <div style={is_mobile ? mobile_styles.info_bar : styles.info_bar}>
        <div style={is_mobile ? mobile_styles.level_badge : styles.level_badge}>
          Lvl: {get_rank_symbol(level)}
        </div>
        <div style={is_mobile ? mobile_styles.team_scores : styles.team_scores}>
          <span style={{ color: '#64b5f6' }}>T1: {get_rank_symbol(team_levels[0] as Rank)}</span>
          <span style={{ marginLeft: is_mobile ? 8 : 12, color: '#f48fb1' }}>T2: {get_rank_symbol(team_levels[1] as Rank)}</span>
        </div>
      </div>

      {/* Game area - relative container with absolute positioned elements */}
      <div style={is_mobile ? mobile_styles.game_area : styles.game_area}>
        {/* Top player badge + cards */}
        <Player_Badge
          seat={relative_positions.top}
          name={players_map[relative_positions.top]}
          count={player_card_counts[relative_positions.top]}
          is_turn={current_turn === relative_positions.top}
          is_leading={leading_seat === relative_positions.top}
          position="top"
          is_mobile={is_mobile}
        />
        <Played_Cards
          play={player_plays[relative_positions.top]}
          is_leading={leading_seat === relative_positions.top}
          combo_type={leading_seat === relative_positions.top ? combo_type : ''}
          level={level}
          position="top"
          is_mobile={is_mobile}
        />

        {/* Left player badge + cards */}
        <Player_Badge
          seat={relative_positions.left}
          name={players_map[relative_positions.left]}
          count={player_card_counts[relative_positions.left]}
          is_turn={current_turn === relative_positions.left}
          is_leading={leading_seat === relative_positions.left}
          position="left"
          is_mobile={is_mobile}
        />
        <Played_Cards
          play={player_plays[relative_positions.left]}
          is_leading={leading_seat === relative_positions.left}
          combo_type={leading_seat === relative_positions.left ? combo_type : ''}
          level={level}
          position="left"
          is_mobile={is_mobile}
        />

        {/* Right player badge + cards */}
        <Player_Badge
          seat={relative_positions.right}
          name={players_map[relative_positions.right]}
          count={player_card_counts[relative_positions.right]}
          is_turn={current_turn === relative_positions.right}
          is_leading={leading_seat === relative_positions.right}
          position="right"
          is_mobile={is_mobile}
        />
        <Played_Cards
          play={player_plays[relative_positions.right]}
          is_leading={leading_seat === relative_positions.right}
          combo_type={leading_seat === relative_positions.right ? combo_type : ''}
          level={level}
          position="right"
          is_mobile={is_mobile}
        />

        {/* My played cards - at bottom center of game area */}
        <My_Played_Cards
          play={player_plays[my_seat]}
          is_leading={leading_seat === my_seat}
          combo_type={leading_seat === my_seat ? combo_type : ''}
          level={level}
          is_mobile={is_mobile}
        />
      </div>

      {/* My area at bottom */}
      <div style={is_mobile ? mobile_styles.my_area : styles.my_area}>
        <Hand
          cards={hand}
          level={level}
          selected_ids={selected_ids}
          on_card_click={on_card_click}
          on_toggle_selection={on_card_click}
          on_select_same_rank={on_select_same_rank}
          on_play={on_play}
          on_pass={on_pass}
          is_my_turn={is_my_turn}
          can_pass={can_pass}
        />

        {/* Turn indicator - desktop only (mobile shows in Hand button row) */}
        {!is_mobile && is_my_turn && hand.length > 0 && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            style={styles.turn_indicator}
          >
            Your turn!
          </motion.div>
        )}
        {hand.length === 0 && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            style={{ ...(is_mobile ? mobile_styles.turn_indicator : styles.turn_indicator), backgroundColor: '#28a745' }}
          >
            You finished!
          </motion.div>
        )}
      </div>
    </div>
  )
}

interface Player_Badge_Props {
  seat: number
  name?: string
  count: number
  is_turn: boolean
  is_leading: boolean
  position: 'top' | 'left' | 'right'
  is_mobile: boolean
}

function Player_Badge({ seat, name, count, is_turn, is_leading, position, is_mobile }: Player_Badge_Props) {
  const get_position_style = (): React.CSSProperties => {
    const base: React.CSSProperties = {
      position: 'absolute',
      zIndex: 10,
    }

    if (position === 'top') {
      return {
        ...base,
        top: is_mobile ? 2 : 8,
        left: '50%',
        transform: 'translateX(-50%)',
      }
    }
    if (position === 'left') {
      return {
        ...base,
        left: is_mobile ? 2 : 8,
        top: '40%',
        transform: 'translateY(-50%)',
      }
    }
    // right
    return {
      ...base,
      right: is_mobile ? 2 : 8,
      top: '40%',
      transform: 'translateY(-50%)',
    }
  }

  const get_border_color = () => {
    if (is_leading) return '#4caf50'
    if (is_turn) return '#ffc107'
    return 'rgba(255,255,255,0.2)'
  }

  const get_bg_color = () => {
    if (is_leading) return 'rgba(76, 175, 80, 0.3)'
    if (is_turn) return 'rgba(255, 193, 7, 0.3)'
    return 'rgba(0, 0, 0, 0.6)'
  }

  // Mobile: minimal floating badge with no border/background
  if (is_mobile) {
    return (
      <div
        style={{
          ...get_position_style(),
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          textShadow: '0 1px 3px rgba(0,0,0,0.8)',
        }}
      >
        <div style={{
          color: seat % 2 === 0 ? '#64b5f6' : '#f48fb1',
          fontSize: 9,
          fontWeight: 'bold',
          maxWidth: 50,
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        }}>
          {name || `P${seat + 1}`}
        </div>
        <div style={{
          color: is_turn ? '#ffc107' : is_leading ? '#4caf50' : '#fff',
          fontSize: 12,
          fontWeight: 'bold',
          lineHeight: 1,
        }}>
          {count}
        </div>
      </div>
    )
  }

  // Desktop: boxed badge
  return (
    <div
      style={{
        ...get_position_style(),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: '6px 12px',
        borderRadius: 10,
        border: `2px solid ${get_border_color()}`,
        backgroundColor: get_bg_color(),
        minWidth: 50,
      }}
    >
      <div style={{
        color: seat % 2 === 0 ? '#64b5f6' : '#f48fb1',
        fontSize: 12,
        fontWeight: 'bold',
        maxWidth: 70,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      }}>
        {name || `P${seat + 1}`}
      </div>
      <div style={{
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
        lineHeight: 1.2,
      }}>
        {count}
      </div>
    </div>
  )
}

interface Played_Cards_Props {
  play?: Player_Play
  is_leading: boolean
  combo_type: string
  level: Rank
  position: 'top' | 'left' | 'right'
  is_mobile: boolean
}

function Played_Cards({ play, is_leading, combo_type, level, position, is_mobile }: Played_Cards_Props) {
  if (!play) return null

  const get_position_style = (): React.CSSProperties => {
    const base: React.CSSProperties = {
      position: 'absolute',
      zIndex: 5,
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
    }

    // Cards appear toward the center from the badge
    if (position === 'top') {
      return {
        ...base,
        top: is_mobile ? 28 : 70,
        left: '50%',
        transform: 'translateX(-50%)',
      }
    }
    if (position === 'left') {
      return {
        ...base,
        left: is_mobile ? 45 : 80,
        top: '40%',
        transform: 'translateY(-50%)',
      }
    }
    // right
    return {
      ...base,
      right: is_mobile ? 45 : 80,
      top: '40%',
      transform: 'translateY(-50%)',
    }
  }

  if (play.is_pass) {
    return (
      <div style={get_position_style()}>
        <div style={{
          color: '#aaa',
          fontSize: is_mobile ? 11 : 16,
          fontStyle: 'italic',
          backgroundColor: 'rgba(0,0,0,0.4)',
          padding: is_mobile ? '2px 8px' : '4px 12px',
          borderRadius: 4,
        }}>
          Pass
        </div>
      </div>
    )
  }

  // Less overlap for played cards so all cards are visible
  const card_overlap = is_mobile ? -20 : -28

  return (
    <div style={get_position_style()}>
      <div style={{
        display: 'flex',
        flexDirection: 'row',
        // No container border on mobile, only on desktop for leading
        padding: (!is_mobile && is_leading) ? 4 : 0,
        borderRadius: 6,
        border: (!is_mobile && is_leading) ? '2px solid #4caf50' : 'none',
        backgroundColor: (!is_mobile && is_leading) ? 'rgba(76, 175, 80, 0.15)' : 'transparent',
      }}>
        {play.cards.map((card, idx) => (
          <motion.div
            key={card.Id}
            initial={{ opacity: 0, scale: 0.5, y: position === 'top' ? -20 : 0, x: position === 'left' ? -20 : position === 'right' ? 20 : 0 }}
            animate={{ opacity: 1, scale: 1, y: 0, x: 0 }}
            transition={{ delay: idx * 0.03 }}
            style={{ marginLeft: idx > 0 ? card_overlap : 0 }}
          >
            <Card
              card={card}
              level={level}
              selected={false}
              on_click={() => {}}
              size="small"
            />
          </motion.div>
        ))}
      </div>
      {is_leading && combo_type && (
        <div style={{
          marginLeft: is_mobile ? 4 : 8,
          padding: is_mobile ? '2px 4px' : '3px 8px',
          backgroundColor: 'rgba(0,0,0,0.7)',
          color: '#fff',
          fontSize: is_mobile ? 8 : 12,
          borderRadius: 4,
        }}>
          {combo_type}
        </div>
      )}
    </div>
  )
}

interface My_Played_Cards_Props {
  play?: Player_Play
  is_leading: boolean
  combo_type: string
  level: Rank
  is_mobile: boolean
}

function My_Played_Cards({ play, is_leading, combo_type, level, is_mobile }: My_Played_Cards_Props) {
  if (!play) return null

  const base_style: React.CSSProperties = {
    position: 'absolute',
    zIndex: 5,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    bottom: is_mobile ? 8 : 16,
    left: '50%',
    transform: 'translateX(-50%)',
  }

  if (play.is_pass) {
    return (
      <div style={base_style}>
        <div style={{
          color: '#aaa',
          fontSize: is_mobile ? 11 : 16,
          fontStyle: 'italic',
          backgroundColor: 'rgba(0,0,0,0.4)',
          padding: is_mobile ? '2px 8px' : '4px 12px',
          borderRadius: 4,
        }}>
          Pass
        </div>
      </div>
    )
  }

  // Less overlap for played cards so all cards are visible
  const card_overlap = is_mobile ? -20 : -28

  return (
    <div style={base_style}>
      <div style={{
        display: 'flex',
        flexDirection: 'row',
        padding: is_leading ? (is_mobile ? 2 : 4) : 0,
        borderRadius: 6,
        border: is_leading ? '2px solid #4caf50' : 'none',
        backgroundColor: is_leading ? 'rgba(76, 175, 80, 0.15)' : 'transparent',
      }}>
        {play.cards.map((card, idx) => (
          <motion.div
            key={card.Id}
            initial={{ opacity: 0, scale: 0.5, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            transition={{ delay: idx * 0.03 }}
            style={{ marginLeft: idx > 0 ? card_overlap : 0 }}
          >
            <Card
              card={card}
              level={level}
              selected={false}
              on_click={() => {}}
              size="small"
            />
          </motion.div>
        ))}
      </div>
      {is_leading && combo_type && (
        <div style={{
          marginLeft: is_mobile ? 4 : 8,
          padding: is_mobile ? '2px 4px' : '3px 8px',
          backgroundColor: 'rgba(0,0,0,0.7)',
          color: '#fff',
          fontSize: is_mobile ? 8 : 12,
          borderRadius: 4,
        }}>
          {combo_type}
        </div>
      )}
    </div>
  )
}

function get_relative_positions(my_seat: number) {
  return {
    top: (my_seat + 2) % 4,
    left: (my_seat + 1) % 4,
    right: (my_seat + 3) % 4,
  }
}

const styles: Record<string, React.CSSProperties> = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    height: '100vh',
    backgroundColor: '#0f3460',
    overflow: 'hidden',
  },
  info_bar: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '4px 12px',
    backgroundColor: '#16213e',
    flexShrink: 0,
  },
  level_badge: {
    padding: '3px 8px',
    backgroundColor: '#ffc107',
    color: '#000',
    borderRadius: 6,
    fontWeight: 'bold',
    fontSize: 12,
  },
  team_scores: {
    color: '#fff',
    fontSize: 12,
  },
  game_area: {
    flex: 1,
    position: 'relative',
    minHeight: 0,
    overflow: 'hidden',
  },
  my_area: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    paddingTop: 4,
    paddingBottom: 8,
    borderTop: '1px solid rgba(255,255,255,0.1)',
    flexShrink: 0,
    backgroundColor: 'rgba(0,0,0,0.2)',
  },
  turn_indicator: {
    marginTop: 4,
    padding: '4px 10px',
    backgroundColor: '#ffc107',
    color: '#000',
    borderRadius: 6,
    fontWeight: 'bold',
    fontSize: 11,
  },
}

const mobile_styles: Record<string, React.CSSProperties> = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    height: '100dvh',
    backgroundColor: '#0f3460',
    overflow: 'hidden',
  },
  info_bar: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '3px 8px',
    backgroundColor: '#16213e',
    flexShrink: 0,
  },
  level_badge: {
    padding: '2px 6px',
    backgroundColor: '#ffc107',
    color: '#000',
    borderRadius: 6,
    fontWeight: 'bold',
    fontSize: 10,
  },
  team_scores: {
    color: '#fff',
    fontSize: 10,
  },
  game_area: {
    flex: 1,
    position: 'relative',
    minHeight: 0,
    overflow: 'hidden',
  },
  my_area: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    paddingTop: 2,
    paddingBottom: 4,
    flexShrink: 0,
  },
  turn_indicator: {
    marginTop: 2,
    padding: '2px 6px',
    backgroundColor: '#28a745',
    color: '#fff',
    borderRadius: 4,
    fontWeight: 'bold',
    fontSize: 9,
  },
}