//
//  WalkthroughTags.swift
//  Blackjack
//
//  Defines the walkthrough steps for onboarding new players.
//

import SwiftUI
import CasinoKit

/// Walkthrough steps for Blackjack onboarding.
enum BlackjackWalkthroughTags: SherpaTags {
    // MARK: - Top Bar Elements
    
    /// Shows the current balance
    case balance
    
    /// Shows remaining cards in the shoe
    case cardsRemaining
    
    /// Opens statistics sheet
    case statsButton
    
    /// Opens rules/help sheet
    case rulesButton
    
    /// Opens settings sheet
    case settingsButton
    
    // MARK: - Gameplay Elements
    
    /// Introduce the betting zone where chips are placed
    case bettingZone
    
    /// Explain the chip selector for choosing bet amounts
    case chipSelector
    
    /// Show the deal button to start the round
    case dealButton
    
    func makeCallout() -> Callout {
        switch self {
        // Top Bar
        case .balance:
            return .custom(edge: .bottom) { onTap in
                WalkthroughCalloutView(
                    icon: "dollarsign.circle.fill",
                    text: String(localized: "walkthrough.balance"),
                    onTap: onTap
                )
            }
            
        case .cardsRemaining:
            return .custom(edge: .bottom) { onTap in
                WalkthroughCalloutView(
                    icon: "rectangle.portrait.on.rectangle.portrait.fill",
                    text: String(localized: "walkthrough.cardsRemaining"),
                    onTap: onTap
                )
            }
            
        case .statsButton:
            return .custom(edge: .bottom) { onTap in
                WalkthroughCalloutView(
                    icon: "chart.bar.fill",
                    text: String(localized: "walkthrough.statsButton"),
                    onTap: onTap
                )
            }
            
        case .rulesButton:
            return .custom(edge: .bottom) { onTap in
                WalkthroughCalloutView(
                    icon: "info.circle",
                    text: String(localized: "walkthrough.rulesButton"),
                    onTap: onTap
                )
            }
            
        case .settingsButton:
            return .custom(edge: .bottom) { onTap in
                WalkthroughCalloutView(
                    icon: "gearshape.fill",
                    text: String(localized: "walkthrough.settingsButton"),
                    onTap: onTap
                )
            }
            
        // Gameplay
        case .bettingZone:
            return .custom(edge: .top) { onTap in
                WalkthroughCalloutView(
                    icon: "hand.tap.fill",
                    text: String(localized: "walkthrough.bettingZone"),
                    onTap: onTap
                )
            }
            
        case .chipSelector:
            return .custom(edge: .top) { onTap in
                WalkthroughCalloutView(
                    icon: "circle.grid.2x2.fill",
                    text: String(localized: "walkthrough.chipSelector"),
                    onTap: onTap
                )
            }
            
        case .dealButton:
            return .custom(edge: .top) { onTap in
                WalkthroughCalloutView(
                    icon: "play.fill",
                    text: String(localized: "walkthrough.dealButton"),
                    onTap: onTap
                )
            }
        }
    }
}

// MARK: - Custom Callout View

/// Fully custom callout view with dark background and white text
struct WalkthroughCalloutView: View {
    let icon: String
    let text: String
    let onTap: () -> Void
    
    // Maximum width to prevent edge clipping
    private let maxCalloutWidth: CGFloat = 320
    
    var body: some View {
        Button(action: onTap) {
            HStack(spacing: Design.Spacing.small) {
                Image(systemName: icon)
                    .font(.system(size: Design.BaseFontSize.large, weight: .semibold))
                    .foregroundStyle(.yellow)
                
                Text(text)
                    .font(.system(size: Design.BaseFontSize.body, weight: .medium))
                    .foregroundStyle(.white)
                    .multilineTextAlignment(.leading)
                    .lineLimit(2)
                
                Spacer(minLength: 0)
                
                Text(String(localized: "walkthrough.close"))
                    .font(.system(size: Design.BaseFontSize.small, weight: .semibold))
                    .foregroundStyle(.white.opacity(Design.Opacity.medium))
            }
            .padding(Design.Spacing.medium)
            .frame(maxWidth: maxCalloutWidth)
            .background(
                RoundedRectangle(cornerRadius: Design.CornerRadius.medium)
                    .fill(Color.black.opacity(Design.Opacity.almostFull))
                    .shadow(
                        color: .black.opacity(Design.Opacity.medium),
                        radius: Design.Shadow.radiusLarge,
                        y: Design.Shadow.offsetMedium
                    )
            )
        }
        .buttonStyle(.plain)
        .padding(.horizontal, Design.Spacing.xLarge)
    }
}
