//
//  GameTableView.swift
//  Baccarat
//
//  The main baccarat table view with all game elements.
//

import SwiftUI
import CasinoKit

/// The main game table view containing all game elements.
struct GameTableView: View {
    @State private var settings = GameSettings()
    @State private var gameState: GameState?
    @State private var selectedChip: ChipDenomination = .hundred
    @State private var showSettings = false
    @State private var showRules = false
    @State private var showStats = false
    
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    @Environment(\.verticalSizeClass) private var verticalSizeClass
    
    // MARK: - Computed Properties
    
    /// Whether we're on iPad or large screen
    private var isLargeScreen: Bool {
        horizontalSizeClass == .regular
    }
    
    /// Whether we're in landscape mode (compact vertical on iPad)
    private var isLandscape: Bool {
        verticalSizeClass == .compact
    }
    
    /// Extra bottom padding for landscape mode where vertical space is tight
    private var bottomPadding: CGFloat {
        isLandscape ? Design.Spacing.medium : Design.Spacing.xSmall
    }
    
    /// Minimum spacer height - smaller in landscape to fit content
    private var minSpacerHeight: CGFloat {
        isLandscape ? 0 : Design.Spacing.xSmall
    }
    
    /// Smaller spacer height - reduced in landscape
    private var smallSpacerHeight: CGFloat {
        isLandscape ? Design.Spacing.xxSmall : Design.Spacing.small
    }
    
    /// Medium spacer height - reduced in landscape
    private var mediumSpacerHeight: CGFloat {
        isLandscape ? Design.Spacing.xSmall : Design.Spacing.medium
    }
    
    /// Maximum width for game content on large screens
    private var maxContentWidth: CGFloat {
        isLandscape ? CasinoDesign.Size.maxContentWidthLandscape : CasinoDesign.Size.maxContentWidthPortrait
    }
    
    private var state: GameState {
        gameState ?? GameState(settings: settings)
    }
    
    private var playerIsWinner: Bool {
        state.lastResult == .playerWins
    }
    
    private var bankerIsWinner: Bool {
        state.lastResult == .bankerWins
    }
    
    private var isTie: Bool {
        state.lastResult == .tie
    }
    
    // Use global debug flag from Design constants
    private var showDebugBorders: Bool { Design.showDebugBorders }
    
    // MARK: - Body
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // Table background (from CasinoKit)
                TableBackgroundView()
                
                // Main content
                mainContent(geometry: geometry)
                
                // Overlays
                overlays
            }
        }
        .onAppear {
            if gameState == nil {
                gameState = GameState(settings: settings)
            }
        }
        .sheet(isPresented: $showSettings) {
            if let state = gameState {
                SettingsView(settings: settings, gameState: state) {
                    gameState?.applySettings()
                }
            }
        }
        .sheet(isPresented: $showRules) {
            RulesHelpView()
        }
        .sheet(isPresented: $showStats) {
            StatisticsSheetView(results: state.roundHistory)
        }
    }
    
    // MARK: - Private Views
    
    @ViewBuilder
    private func mainContent(geometry: GeometryProxy) -> some View {
        // Use geometry to detect landscape on iPad (width > height and large screen)
        let isLandscapeLayout = isLargeScreen && geometry.size.width > geometry.size.height
        
        if isLandscapeLayout {
            // Landscape iPad: RoadMap on left, game content on right
            landscapeLayout
        } else {
            // Portrait or iPhone: vertical stack with RoadMap inline
            portraitLayout
        }
    }
    
    /// Landscape layout with TopBar spanning full width, RoadMap grid on left below TopBar
    private var landscapeLayout: some View {
        VStack(spacing: 0) {
            // Top bar spans full width
            TopBarView(
                balance: state.balance,
                secondaryInfo: settings.showCardsRemaining ? "\(state.engine.shoe.cardsRemaining)" : nil,
                secondaryIcon: settings.showCardsRemaining ? "rectangle.portrait.on.rectangle.portrait.fill" : nil,
                onSettings: { showSettings = true },
                onHelp: { showRules = true },
                onStats: { showStats = true }
            )
            .debugBorder(showDebugBorders, color: .cyan, label: "TopBar")
            
            // Main content area with optional sidebar
            HStack(spacing: 0) {
                // Left side: Road map history grid
                if settings.showHistory {
                    VStack(alignment: .leading, spacing: Design.Spacing.xSmall) {
                        // Header with reading instructions
                        VStack(alignment: .leading, spacing: 5) {
                            Text("HISTORY")
                                .font(.system(size: Design.BaseFontSize.xLarge, weight: .bold, design: .rounded))
                                .foregroundStyle(.white.opacity(Design.Opacity.strong))
                            
                            Text("↓ then →")
                                .font(.system(size: Design.BaseFontSize.large, design: .rounded))
                                .foregroundStyle(.white.opacity(Design.Opacity.medium))
                        }
                        .padding(.leading, Design.Spacing.small)
                        .padding(.horizontal, Design.Spacing.small)
                        .padding(.top, Design.Spacing.small)
                        
                        // Grid-based road map (rows calculated dynamically)
                        RoadMapGridView(
                            results: state.recentResults,
                            dotSize: 32
                        )
                        .frame(maxHeight: .infinity)
                        
                        Spacer(minLength: 0)
                    }
                    .frame(width: 240)
                    .background(
                        RoundedRectangle(cornerRadius: Design.CornerRadius.medium)
                            .fill(Color.black.opacity(Design.Opacity.light))
                            .padding(Design.Spacing.xSmall)
                    )
                    .padding(.leading, Design.Spacing.medium)
                    .debugBorder(showDebugBorders, color: .orange, label: "RoadMap")
                }
                
                // Right side: Main game content
                VStack(spacing: 0) {
                    Spacer(minLength: 0)
                    
                    // Cards display area
                    CardsDisplayArea(
                        playerCards: state.visiblePlayerCards,
                        bankerCards: state.visibleBankerCards,
                        playerCardsFaceUp: state.playerCardsFaceUp,
                        bankerCardsFaceUp: state.bankerCardsFaceUp,
                        playerValue: state.playerHandValue,
                        bankerValue: state.bankerHandValue,
                        playerIsWinner: playerIsWinner,
                        bankerIsWinner: bankerIsWinner,
                        isTie: isTie
                    )
                    .frame(maxWidth: maxContentWidth)
                    .padding(.horizontal, Design.Spacing.medium)
                    .debugBorder(showDebugBorders, color: .red, label: "CardsArea")
                    
                    Spacer(minLength: 0)
                    
                    // Betting table
                    BettingTableView(
                        gameState: state,
                        selectedChip: selectedChip
                    )
                    .frame(maxWidth: maxContentWidth)
                    .padding(.horizontal, Design.Spacing.medium)
                    .debugBorder(showDebugBorders, color: .blue, label: "BetTable")
                    
                    Spacer(minLength: Design.Spacing.xSmall)
                    
                    // Chip selector
                    ChipSelectorView(
                        selectedChip: $selectedChip,
                        balance: state.balance,
                        currentBet: state.totalBetAmount,
                        maxBet: state.maxBet
                    )
                    .frame(maxWidth: maxContentWidth)
                    .debugBorder(showDebugBorders, color: .pink, label: "ChipSelector")
                    
                    Spacer(minLength: Design.Spacing.xSmall)
                    
                    // Action buttons
                    ActionButtonsView(
                        gameState: state,
                        onDeal: {
                            Task {
                                await state.deal()
                            }
                        },
                        onClear: { state.clearBets() },
                        onNewRound: { state.newRound() }
                    )
                    .frame(maxWidth: maxContentWidth * 0.8)
                    .padding(.horizontal)
                    .padding(.bottom, Design.Spacing.small)
                    .debugBorder(showDebugBorders, color: .green, label: "ActionBtns")
                }
                .frame(maxWidth: .infinity)
                .debugBorder(showDebugBorders, color: .white, label: "GameContent")
            }
        }
        .safeAreaPadding(.bottom, Design.Spacing.small)
    }
    
    /// Portrait layout with RoadMap inline
    private var portraitLayout: some View {
        VStack(spacing: 0) {
            // Top bar with balance and info (from CasinoKit)
            TopBarView(
                balance: state.balance,
                secondaryInfo: settings.showCardsRemaining ? "\(state.engine.shoe.cardsRemaining)" : nil,
                secondaryIcon: settings.showCardsRemaining ? "rectangle.portrait.on.rectangle.portrait.fill" : nil,
                onSettings: { showSettings = true },
                onHelp: { showRules = true },
                onStats: { showStats = true }
            )
            .debugBorder(showDebugBorders, color: .cyan, label: "TopBar")
            
            Spacer(minLength: minSpacerHeight)
                .debugBorder(showDebugBorders, color: .yellow, label: "Spacer1")
            
            // Cards display area
            CardsDisplayArea(
                playerCards: state.visiblePlayerCards,
                bankerCards: state.visibleBankerCards,
                playerCardsFaceUp: state.playerCardsFaceUp,
                bankerCardsFaceUp: state.bankerCardsFaceUp,
                playerValue: state.playerHandValue,
                bankerValue: state.bankerHandValue,
                playerIsWinner: playerIsWinner,
                bankerIsWinner: bankerIsWinner,
                isTie: isTie
            )
            .frame(maxWidth: isLargeScreen ? maxContentWidth : .infinity)
            .padding(.horizontal, Design.Spacing.medium)
            .debugBorder(showDebugBorders, color: .red, label: "CardsArea")
            
            Spacer(minLength: minSpacerHeight)
                .debugBorder(showDebugBorders, color: .yellow, label: "Spacer2")
            
            // Road map history
            if settings.showHistory {
                RoadMapView(results: state.recentResults)
                    .frame(maxWidth: isLargeScreen ? maxContentWidth : .infinity)
                    .padding(.horizontal, Design.Spacing.medium)
                    .debugBorder(showDebugBorders, color: .orange, label: "RoadMap")
            }
            
            Spacer(minLength: smallSpacerHeight)
                .debugBorder(showDebugBorders, color: .yellow, label: "Spacer3")
            
            // Betting table
            BettingTableView(
                gameState: state,
                selectedChip: selectedChip
            )
            .frame(maxWidth: isLargeScreen ? maxContentWidth : .infinity)
            .padding(.horizontal, Design.Spacing.medium)
            .debugBorder(showDebugBorders, color: .blue, label: "BetTable")
            
            Spacer(minLength: mediumSpacerHeight)
                .debugBorder(showDebugBorders, color: .yellow, label: "Spacer4")
            
            // Chip selector (from CasinoKit)
            ChipSelectorView(
                selectedChip: $selectedChip,
                balance: state.balance,
                currentBet: state.totalBetAmount,
                maxBet: state.maxBet
            )
            .frame(maxWidth: isLargeScreen ? maxContentWidth : .infinity)
            .debugBorder(showDebugBorders, color: .pink, label: "ChipSelector")
            
            Spacer(minLength: smallSpacerHeight)
                .debugBorder(showDebugBorders, color: .yellow, label: "Spacer5")
            
            // Action buttons
            ActionButtonsView(
                gameState: state,
                onDeal: {
                    Task {
                        await state.deal()
                    }
                },
                onClear: { state.clearBets() },
                onNewRound: { state.newRound() }
            )
            .frame(maxWidth: isLargeScreen ? maxContentWidth * 0.8 : .infinity)
            .padding(.horizontal)
            .padding(.bottom, bottomPadding)
            .debugBorder(showDebugBorders, color: .green, label: "ActionBtns")
        }
        .safeAreaPadding(.bottom)
        .debugBorder(showDebugBorders, color: .white, label: "MainContent")
    }
    
    @ViewBuilder
    private var overlays: some View {
        // Result banner overlay
        if state.showResultBanner, let result = state.lastResult {
            ResultBannerView(
                result: result,
                totalWinnings: state.lastWinnings,
                betResults: state.betResults,
                playerHadPair: state.playerHadPair,
                bankerHadPair: state.bankerHadPair,
                currentBalance: state.balance,
                minBet: state.minBet,
                onNewRound: { state.newRound() },
                onGameOver: {
                    state.resetGame()
                }
            )
            .transition(.opacity)
            
            // Confetti for wins (from CasinoKit)
            if state.lastWinnings > 0 {
                ConfettiView()
            }
        }
        
        // Game Over overlay
        if state.balance == 0 && state.currentBets.isEmpty && !state.isAnimating {
            GameOverView(
                roundsPlayed: state.roundHistory.count,
                onPlayAgain: { state.resetGame() }
            )
            .transition(.opacity)
        }
    }
}

// MARK: - Previews

#Preview("Game Table") {
    GameTableView()
}
