//
//  itemsView.swift
//  lichunWebsocket
//
//  Created by Craig Vander Galien on 8/17/23.
//

import SwiftUI
import SDWebImageSwiftUI

struct ItemsView: View {
    @EnvironmentObject var webSocketService: WebSocketService
    @State private var selectedItem: StoreItem?

    var body: some View {
        if webSocketService.person.items.isEmpty {
            // Cozy Empty State View
            VStack(spacing: AppSpacing.lg) {
                ZStack {
                    Circle()
                        .fill(
                            LinearGradient(
                                colors: [AppColors.surfaceElevated, AppColors.surfaceSubtle],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                        .frame(width: 120, height: 120)

                    Image(systemName: "bag.badge.questionmark")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 60, height: 60)
                        .foregroundColor(AppColors.secondaryText)
                }

                VStack(spacing: AppSpacing.xs) {
                    Text("No Items Yet")
                        .font(.appTitle)
                        .foregroundColor(AppColors.primaryText)

                    Text("Visit the shop to get your first item!")
                        .font(.appBody)
                        .foregroundColor(AppColors.secondaryText)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(AppColors.primaryBackground)
        } else {
            VStack(spacing: AppSpacing.lg) {
                // Cozy header
                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: 70, height: 70)
                            .shadow(color: Color(red: 0.8, green: 0.6, blue: 0.9).opacity(0.3), radius: 10, x: 0, y: 5)

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

                    Text("Inventory")
                        .font(.appTitle)
                        .foregroundStyle(AppColors.primaryText)

                    Text("\(webSocketService.person.items.count) items owned")
                        .font(.appCaption)
                        .foregroundColor(AppColors.secondaryText)
                }
                .padding(.top, AppSpacing.sm)

                // Details Section with cozy design
                if let item = selectedItem {
                    VStack(spacing: AppSpacing.md) {
                        ZStack {
                            RoundedRectangle(cornerRadius: 20)
                                .fill(
                                    LinearGradient(
                                        colors: [AppColors.intelligence.opacity(0.16), AppColors.accent.opacity(0.16)],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    )
                                )

                            WebImage(url: URL(string: item.image ?? ""))
                                .onSuccess { image, data, cacheType in
                                    print("🛍️ StoreItem: ✅ Loaded '\(item.name)' - size: \(image.size)")
                                }
                                .onFailure { error in
                                    print("🛍️ StoreItem: ❌ Failed '\(item.name)' - URL: \(item.image ?? "nil") - Error: \(error.localizedDescription)")
                                }
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 140, height: 140)
                                .onAppear {
                                    if let imageUrl = item.image, !imageUrl.isEmpty {
                                        print("🛍️ StoreItem: 🔄 Loading '\(item.name)' from: \(imageUrl)")
                                    } else {
                                        print("🛍️ StoreItem: ⚠️ No image URL for '\(item.name)'")
                                    }
                                }
                        }
                        .frame(width: 160, height: 160)
                        .shadow(color: Color.black.opacity(0.1), radius: 10, x: 0, y: 5)

                        VStack(spacing: AppSpacing.xs) {
                            Text(item.name)
                                .font(.appHeadline)
                                .foregroundStyle(AppColors.primaryText)

                            Text(item.description)
                                .font(.appBody)
                                .foregroundColor(AppColors.secondaryText)
                                .multilineTextAlignment(.center)
                                .lineLimit(3)
                        }
                        .padding(.horizontal, AppSpacing.md)
                    }
                    .padding(AppSpacing.md)
                    .background(AppColors.surfaceElevated)
                    .cornerRadius(20)
                    .shadow(color: Color.black.opacity(0.05), radius: 8, x: 0, y: 4)
                    .padding(.horizontal, AppSpacing.md)
                } else {
                    Text("Tap an item to view details")
                        .font(.appBody)
                        .foregroundColor(AppColors.secondaryText)
                        .padding()
                }

                // Grid Section with cozy styling
                ScrollView {
                    LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: AppSpacing.sm), count: 3), spacing: AppSpacing.sm) {
                        ForEach(webSocketService.person.items, id: \.id) { item in
                            VStack(spacing: AppSpacing.xs) {
                                ZStack {
                                    RoundedRectangle(cornerRadius: 12)
                                        .fill(
                                            item == selectedItem ?
                                            LinearGradient(
                                                colors: [Color(red: 0.8, green: 0.6, blue: 0.9).opacity(0.3), Color(red: 0.9, green: 0.7, blue: 0.4).opacity(0.3)],
                                                startPoint: .topLeading,
                                                endPoint: .bottomTrailing
                                            ) :
                                            LinearGradient(
                                                colors: [AppColors.surfaceElevated, AppColors.surfaceElevated],
                                                startPoint: .topLeading,
                                                endPoint: .bottomTrailing
                                            )
                                        )
                                        .overlay(
                                            RoundedRectangle(cornerRadius: 12)
                                                .stroke(
                                                    item == selectedItem ?
                                                    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
                                                    ) :
                                                    LinearGradient(
                                                        colors: [Color.clear, Color.clear],
                                                        startPoint: .topLeading,
                                                        endPoint: .bottomTrailing
                                                    ),
                                                    lineWidth: 2
                                                )
                                        )

                                    WebImage(url: URL(string: item.image ?? ""))
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .padding(AppSpacing.xs)
                                }
                                .frame(height: 80)

                                Text(item.name)
                                    .font(.appCaption)
                                    .foregroundStyle(AppColors.primaryText)
                                    .lineLimit(1)
                            }
                            .onTapGesture {
                                withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
                                    selectedItem = item
                                }
                            }
                        }
                    }
                    .padding(AppSpacing.md)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(AppColors.primaryBackground)
            .onAppear {
                // Initializing with the first item if available.
                selectedItem = webSocketService.person.items.first
            }
        }
    }
}

#Preview {
    ItemsView()
}