//
//  StoreView.swift
//  lichunWebsocket
//
//  Main shopping view with grid of store items
//

import SwiftUI

struct StoreView: View {
    @EnvironmentObject var webSocketService: WebSocketService
    let columns: [GridItem] = Array(repeating: .init(.flexible()), count: 2)

    var body: some View {
        ZStack {
            // Full-bleed cozy background so the sheet/pushed view is never
            // white-on-white in dark mode (this view is always presented inside
            // an enclosing NavigationView, so it must NOT add its own).
            AppColors.background.ignoresSafeArea()

            ScrollView {
                VStack(spacing: AppSpacing.lg) {
                    // Cozy header with icon
                    VStack(spacing: AppSpacing.sm) {
                        ZStack {
                            Circle()
                                .fill(
                                    LinearGradient(
                                        colors: [Color(red: 0.8, green: 0.6, blue: 0.9), Color(red: 0.9, green: 0.7, blue: 0.4)],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    )
                                )
                                .frame(width: 80, height: 80)
                                .shadow(color: Color(red: 0.8, green: 0.6, blue: 0.9).opacity(0.3), radius: 12, x: 0, y: 6)

                            Image(systemName: "bag.fill")
                                .font(.system(size: 40))
                                .foregroundColor(.white)
                        }

                        Text("Shop")
                            .font(.appTitle)
                            .foregroundColor(AppColors.primaryText)

                        Text("Discover items for your journey")
                            .font(.appBody)
                            .foregroundColor(AppColors.secondaryText)
                    }
                    .padding(.top, AppSpacing.md)

                    LazyVGrid(columns: columns, spacing: AppSpacing.md) {
                        ForEach(sortedStoreItems, id: \.self) { item in
                            if let imageUrl = item.image,
                               !imageUrl.isEmpty,
                               URL(string: imageUrl) != nil {
                                StoreItemCard(item: item)
                            }
                        }
                    }
                }
                .padding(AppSpacing.md)
            }

            // Celebratory popup overlay
            if webSocketService.purchaseSuccessful,
               let itemId = webSocketService.monetization.lastStorePurchaseItemId,
               let currentItem = webSocketService.player.storeItems.first(where: { $0.id == itemId }),
               let url = URL(string: currentItem.image ?? "") {
                Color.black.opacity(0.5)
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture { dismissPurchaseCelebration() }

                CelebratoryPopup(itemName: currentItem.name, imageURL: url)
                    .transition(.scale(scale: 0.5, anchor: .center))
                    .onTapGesture { dismissPurchaseCelebration() }
            }
        }
        .onAppear {
            AnalyticsManager.shared.trackScreenView("store", screenClass: "StoreView")
        }
    }

    private func dismissPurchaseCelebration() {
        withAnimation {
            webSocketService.purchaseSuccessful = false
            webSocketService.monetization.lastStorePurchaseItemId = nil
        }
    }

    // MARK: - Computed Properties
    private var sortedStoreItems: [StoreItem] {
        webSocketService.player.storeItems.sorted(by: { $0.price < $1.price })
    }
}

// MARK: - Preview
// Preview removed - requires proper model initialization