//
//  DailyRewardsView.swift
//  lichunWebsocket
//
//  7-day daily login reward calendar with cozy UI design
//

import SwiftUI

struct DailyRewardsView: View {
    @EnvironmentObject var webSocketService: WebSocketService
    @Environment(\.dismiss) var dismiss
    @State private var selectedDay: DayReward?

    var state: DailyRewardState? {
        webSocketService.dailyRewardState
    }

    var body: some View {
        NavigationView {
            ZStack {
                // Cozy background
                AppColors.background.ignoresSafeArea()

                ScrollView {
                    VStack(spacing: AppSpacing.lg) {
                        // Header with warm, inviting icon and title
                        VStack(spacing: AppSpacing.sm) {
                            ZStack {
                                // Warm glow
                                Circle()
                                    .fill(
                                        LinearGradient(
                                            colors: [
                                                Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.3),
                                                Color(red: 1.0, green: 0.65, blue: 0.0).opacity(0.2)
                                            ],
                                            startPoint: .topLeading,
                                            endPoint: .bottomTrailing
                                        )
                                    )
                                    .frame(width: 100, height: 100)
                                    .blur(radius: 10)

                                Circle()
                                    .fill(
                                        LinearGradient(
                                            colors: [
                                                Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.15),
                                                Color(red: 0.85, green: 0.65, blue: 0.13).opacity(0.1)
                                            ],
                                            startPoint: .top,
                                            endPoint: .bottom
                                        )
                                    )
                                    .frame(width: 80, height: 80)

                                Image(systemName: "calendar.badge.clock")
                                    .font(.system(size: 40))
                                    .foregroundStyle(
                                        LinearGradient(
                                            colors: [
                                                Color(red: 1.0, green: 0.84, blue: 0.0),
                                                Color(red: 0.85, green: 0.65, blue: 0.13)
                                            ],
                                            startPoint: .top,
                                            endPoint: .bottom
                                        )
                                    )
                            }

                            Text("Daily Rewards")
                                .font(.system(size: 28, weight: .bold, design: .rounded))
                                .foregroundColor(AppColors.primaryText)

                            Text("Log in daily to earn amazing rewards!")
                                .font(.appBody)
                                .foregroundColor(AppColors.secondaryText)
                                .multilineTextAlignment(.center)
                        }
                        .padding(.top, AppSpacing.lg)

                        // Streak Info
                        if let state = state {
                            StreakCard(streak: state.currentStreak)
                        }

                        // Rewards Calendar
                        if let state = state {
                            VStack(spacing: AppSpacing.md) {
                                ForEach(state.rewards) { reward in
                                    DayRewardCard(
                                        reward: reward,
                                        canClaim: state.canClaim && reward.id == ((state.currentStreak % 7) + 1),
                                        onClaim: {
                                            claimReward(day: reward.id)
                                        }
                                    )
                                }
                            }
                            .padding(.horizontal, AppSpacing.md)
                        }

                        // Info Footer
                        InfoFooter()
                            .padding(.bottom, AppSpacing.xl)
                    }
                }
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: { dismiss() }) {
                        Image(systemName: "xmark.circle.fill")
                            .font(.title3)
                            .foregroundColor(AppColors.secondaryText)
                    }
                }
            }
        }
        .onAppear {
            webSocketService.fetchDailyRewards()
            AnalyticsManager.shared.trackScreenView("daily_rewards", screenClass: "DailyRewardsView")
        }
    }

    private func claimReward(day: Int) {
        webSocketService.claimDailyReward(day: day)
        AnalyticsManager.shared.track(.purchaseCompleted(
            itemId: "daily_reward_day\(day)",
            itemName: "Daily Reward Day \(day)",
            price: 0
        ))
    }
}

// MARK: - Supporting Views

struct StreakCard: View {
    let streak: Int

    var body: some View {
        VStack(spacing: AppSpacing.sm) {
            ZStack {
                // Warm glow around flame
                Circle()
                    .fill(
                        RadialGradient(
                            colors: [
                                Color(red: 1.0, green: 0.5, blue: 0.0).opacity(0.4),
                                Color(red: 1.0, green: 0.5, blue: 0.0).opacity(0.0)
                            ],
                            center: .center,
                            startRadius: 20,
                            endRadius: 50
                        )
                    )
                    .frame(width: 100, height: 100)

                Image(systemName: "flame.fill")
                    .font(.system(size: 50))
                    .foregroundStyle(
                        LinearGradient(
                            colors: [
                                Color(red: 1.0, green: 0.84, blue: 0.0),
                                Color(red: 1.0, green: 0.5, blue: 0.0),
                                Color(red: 1.0, green: 0.3, blue: 0.0)
                            ],
                            startPoint: .top,
                            endPoint: .bottom
                        )
                    )
            }

            Text("\(streak) Day Streak!")
                .font(.system(size: 26, weight: .bold, design: .rounded))
                .foregroundColor(AppColors.primaryText)

            Text(streak >= 7 ? "You're on fire!" : "Keep the momentum going!")
                .font(.appBody)
                .foregroundColor(Color(red: 1.0, green: 0.5, blue: 0.0))
                .italic()
                .fontWeight(.medium)
        }
        .frame(maxWidth: .infinity)
        .padding(AppSpacing.lg)
        .background(
            LinearGradient(
                colors: [
                    Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.12),
                    Color(red: 1.0, green: 0.5, blue: 0.0).opacity(0.08),
                    Color(red: 1.0, green: 0.3, blue: 0.0).opacity(0.05)
                ],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
        )
        .cornerRadius(AppSpacing.cornerRadius)
        .overlay(
            RoundedRectangle(cornerRadius: AppSpacing.cornerRadius)
                .stroke(
                    LinearGradient(
                        colors: [
                            Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.4),
                            Color(red: 1.0, green: 0.5, blue: 0.0).opacity(0.3)
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    ),
                    lineWidth: 2
                )
        )
        .shadow(
            color: Color(red: 1.0, green: 0.5, blue: 0.0).opacity(0.15),
            radius: 8,
            x: 0,
            y: 4
        )
        .padding(.horizontal, AppSpacing.md)
    }
}

struct DayRewardCard: View {
    let reward: DayReward
    let canClaim: Bool
    let onClaim: () -> Void

    var cardState: CardState {
        if reward.claimed {
            return .claimed
        } else if canClaim {
            return .available
        } else {
            return .locked
        }
    }

    enum CardState {
        case locked, available, claimed
    }

    var body: some View {
        HStack(spacing: AppSpacing.md) {
            // Day indicator with status icon
            VStack(spacing: AppSpacing.xs) {
                Text(reward.dayLabel)
                    .font(.appHeadline)
                    .foregroundColor(AppColors.primaryText)

                ZStack {
                    Circle()
                        .fill(statusColor.opacity(0.15))
                        .frame(width: 50, height: 50)

                    Image(systemName: statusIcon)
                        .font(.title3)
                        .foregroundColor(statusColor)
                }
            }
            .frame(width: 80)

            // Rewards display
            VStack(alignment: .leading, spacing: AppSpacing.xs) {
                HStack(spacing: 6) {
                    Image(systemName: "gem.fill")
                        .font(.caption)
                        .foregroundColor(AppColors.diamond)
                    Text("\(reward.diamonds)")
                        .font(.appHeadline)
                        .foregroundColor(AppColors.primaryText)

                    if let energy = reward.energy {
                        Image(systemName: "bolt.fill")
                            .font(.caption)
                            .foregroundColor(AppColors.energy)
                        Text("\(energy)")
                            .font(.appBody)
                            .foregroundColor(AppColors.primaryText)
                    }

                    if let money = reward.money {
                        Image(systemName: "dollarsign.circle.fill")
                            .font(.caption)
                            .foregroundColor(AppColors.money)
                        Text("\(money)")
                            .font(.appBody)
                            .foregroundColor(AppColors.primaryText)
                    }
                }

                if reward.id == 7 {
                    HStack(spacing: 4) {
                        Image(systemName: "star.fill")
                            .font(.caption2)
                        Text("Week Complete Bonus!")
                            .font(.appCaption)
                            .fontWeight(.bold)
                    }
                    .foregroundStyle(
                        LinearGradient(
                            colors: [
                                Color(red: 1.0, green: 0.84, blue: 0.0),
                                Color(red: 0.85, green: 0.65, blue: 0.13)
                            ],
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                }
            }

            Spacer()

            // Claim button with warm golden styling
            if canClaim && !reward.claimed {
                Button(action: onClaim) {
                    HStack(spacing: 6) {
                        Image(systemName: "gift.fill")
                            .font(.caption)
                        Text("Claim")
                            .font(.system(size: 16, weight: .semibold, design: .rounded))
                    }
                    .foregroundColor(.white)
                    .padding(.horizontal, AppSpacing.md)
                    .padding(.vertical, AppSpacing.sm)
                    .background(
                        LinearGradient(
                            colors: [
                                Color(red: 1.0, green: 0.65, blue: 0.0),
                                Color(red: 0.85, green: 0.5, blue: 0.0)
                            ],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .cornerRadius(AppSpacing.pillCornerRadius)
                    .shadow(
                        color: Color(red: 1.0, green: 0.65, blue: 0.0).opacity(0.4),
                        radius: 8,
                        x: 0,
                        y: 4
                    )
                }
            }
        }
        .padding(AppSpacing.md)
        .background(backgroundColor)
        .cornerRadius(AppSpacing.cornerRadius)
        .overlay(
            RoundedRectangle(cornerRadius: AppSpacing.cornerRadius)
                .stroke(borderColor, lineWidth: cardState == .available ? 2 : 1)
        )
        .shadow(
            color: Color.black.opacity(cardState == .available ? 0.1 : 0.05),
            radius: AppSpacing.Shadow.radiusSoft,
            x: 0,
            y: AppSpacing.Shadow.offsetY
        )
    }

    var statusIcon: String {
        switch cardState {
        case .claimed:
            return "checkmark.circle.fill"
        case .available:
            return "star.fill"
        case .locked:
            return "lock.fill"
        }
    }

    var statusColor: Color {
        switch cardState {
        case .claimed:
            return AppColors.success
        case .available:
            return AppColors.accent
        case .locked:
            return AppColors.disabledText
        }
    }

    var backgroundColor: Color {
        switch cardState {
        case .claimed:
            return AppColors.success.opacity(0.1)
        case .available:
            return AppColors.primary.opacity(0.1)
        case .locked:
            return AppColors.surfaceElevated
        }
    }

    var borderColor: Color {
        switch cardState {
        case .claimed:
            return AppColors.success.opacity(0.3)
        case .available:
            return AppColors.primary
        case .locked:
            return AppColors.disabledText.opacity(0.2)
        }
    }
}

struct InfoFooter: View {
    var body: some View {
        VStack(spacing: AppSpacing.xs) {
            Image(systemName: "sparkles")
                .font(.title3)
                .foregroundStyle(
                    LinearGradient(
                        colors: [
                            Color(red: 1.0, green: 0.84, blue: 0.0),
                            Color(red: 0.85, green: 0.65, blue: 0.13)
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )

            Text("Complete the week for bonus rewards!")
                .font(.appCaption)
                .foregroundColor(AppColors.primaryText)
                .multilineTextAlignment(.center)
                .fontWeight(.medium)

            Text("Keep your streak alive by logging in every day")
                .font(.appSmall)
                .foregroundColor(AppColors.secondaryText)
                .multilineTextAlignment(.center)
                .italic()
        }
        .padding(AppSpacing.md)
        .background(
            LinearGradient(
                colors: [
                    Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.08),
                    Color(red: 1.0, green: 0.65, blue: 0.0).opacity(0.05)
                ],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
        )
        .cornerRadius(AppSpacing.cornerRadius)
        .overlay(
            RoundedRectangle(cornerRadius: AppSpacing.cornerRadius)
                .stroke(Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.3), lineWidth: 1)
        )
        .padding(.horizontal, AppSpacing.md)
    }
}

// MARK: - Preview
// Preview removed - requires backend connection