//
//  RoadMapView.swift
//  Baccarat
//
//  A visual history display of recent game results (Big Road style).
//

import SwiftUI

/// A simple road display showing recent results.
struct RoadMapView: View {
    let results: [RoundResult]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text("HISTORY")
                .font(.system(size: 10, weight: .bold, design: .rounded))
                .foregroundStyle(.white.opacity(0.6))
                .tracking(1)
            
            ScrollView(.horizontal) {
                HStack(spacing: 4) {
                    ForEach(results) { result in
                        RoadDot(result: result.result)
                    }
                }
                .padding(.vertical, 4)
            }
            .scrollIndicators(.hidden)
        }
        .padding(.horizontal, 12)
        .padding(.vertical, 8)
        .background(
            RoundedRectangle(cornerRadius: 8)
                .fill(Color.black.opacity(0.3))
        )
    }
}

/// A single dot in the road display.
struct RoadDot: View {
    let result: GameResult
    
    private var color: Color {
        switch result {
        case .playerWins: return .blue
        case .bankerWins: return .red
        case .tie: return .green
        }
    }
    
    private var label: String {
        switch result {
        case .playerWins: return "P"
        case .bankerWins: return "B"
        case .tie: return "T"
        }
    }
    
    var body: some View {
        ZStack {
            Circle()
                .fill(color)
                .frame(width: 22, height: 22)
            
            Circle()
                .strokeBorder(Color.white.opacity(0.3), lineWidth: 1)
                .frame(width: 22, height: 22)
            
            Text(label)
                .font(.system(size: 10, weight: .bold))
                .foregroundStyle(.white)
        }
    }
}

#Preview {
    ZStack {
        Color(red: 0.0, green: 0.3, blue: 0.15)
            .ignoresSafeArea()
        
        RoadMapView(results: [
            RoundResult(result: .playerWins, playerValue: 8, bankerValue: 6),
            RoundResult(result: .bankerWins, playerValue: 4, bankerValue: 7),
            RoundResult(result: .tie, playerValue: 5, bankerValue: 5),
            RoundResult(result: .playerWins, playerValue: 9, bankerValue: 3),
            RoundResult(result: .bankerWins, playerValue: 2, bankerValue: 8)
        ])
        .padding()
    }
}