//
//  TourCard.swift
//  lichunWebsocket
//
//  Card component for UI tour steps
//

import SwiftUI

struct TourCard: View {
    let step: TourStep
    let currentStep: Int
    let totalSteps: Int

    var body: some View {
        VStack(spacing: AppSpacing.lg) {
            // Icon with warm gradient and glow
            ZStack {
                // Outer glow
                Circle()
                    .fill(
                        LinearGradient(
                            gradient: Gradient(colors: [
                                Color(hex: 0xFFB88C).opacity(0.3),
                                Color(hex: 0xFF8C94).opacity(0.3)
                            ]),
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .frame(width: 110, height: 110)
                    .blur(radius: 10)

                Circle()
                    .fill(
                        LinearGradient(
                            gradient: Gradient(colors: [
                                Color(hex: 0xFFB88C).opacity(0.2),
                                Color(hex: 0xFF8C94).opacity(0.2)
                            ]),
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .frame(width: 100, height: 100)

                Image(systemName: step.icon)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 50, height: 50)
                    .foregroundStyle(
                        LinearGradient(
                            gradient: Gradient(colors: [
                                Color(hex: 0xFFB88C),
                                Color(hex: 0xFF8C94)
                            ]),
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
            }
            .padding(.top, AppSpacing.md)
            .shadow(color: Color(hex: 0xFF8C94).opacity(0.2), radius: 20, y: 10)

            // Title with warmth
            Text(step.title)
                .font(.appLargeTitle)
                .fontWeight(.bold)
                .foregroundStyle(
                    LinearGradient(
                        gradient: Gradient(colors: [
                            Color(hex: 0xFF8C94),
                            Color(hex: 0xFFB88C)
                        ]),
                        startPoint: .leading,
                        endPoint: .trailing
                    )
                )
                .multilineTextAlignment(.center)

            // Description with increased readability
            Text(step.description)
                .font(.appBody)
                .foregroundColor(AppColors.primaryText.opacity(0.8))
                .multilineTextAlignment(.center)
                .lineSpacing(6)
                .padding(.horizontal, AppSpacing.lg)

            // Step indicator with soft styling
            HStack(spacing: AppSpacing.xs) {
                Image(systemName: "circle.fill")
                    .font(.system(size: 6))
                    .foregroundColor(Color(hex: 0xFF8C94))
                Text("\(currentStep) of \(totalSteps)")
                    .font(.appCaption)
                    .fontWeight(.medium)
                    .foregroundColor(AppColors.secondaryText)
            }
            .padding(.horizontal, AppSpacing.md)
            .padding(.vertical, AppSpacing.xs)
            .background(
                Capsule()
                    .fill(Color(hex: 0xFF8C94).opacity(0.1))
            )
            .padding(.top, AppSpacing.sm)
        }
        .frame(maxWidth: .infinity)
        .padding(.vertical, AppSpacing.xl)
        .background(
            RoundedRectangle(cornerRadius: 24)
                .fill(AppColors.surfaceElevated)
                .shadow(color: Color(hex: 0xFF8C94).opacity(0.15), radius: 30, y: 10)
        )
    }
}

// MARK: - Preview
#if DEBUG
struct TourCard_Previews: PreviewProvider {
    static var previews: some View {
        ZStack {
            Color.black
                .edgesIgnoringSafeArea(.all)

            TourCard(
                step: TourStep(
                    icon: "chart.bar.fill",
                    title: "Dashboard",
                    description: "Track your character's stats, relationships, and progress at a glance"
                ),
                currentStep: 1,
                totalSteps: 4
            )
            .padding()
        }
    }
}
#endif