//
//  OnboardingTaskCard.swift
//  lichunWebsocket
//
//  Task card component for guided actions
//

import SwiftUI

struct OnboardingTaskCard: View {
    let task: OnboardingTask
    let isComplete: Bool
    let onTap: () -> Void

    @State private var isPressed = false

    var body: some View {
        Button(action: {
            if !isComplete {
                // Haptic feedback
                let impact = UIImpactFeedbackGenerator(style: .light)
                impact.impactOccurred()
                onTap()
            }
        }) {
            HStack(spacing: AppSpacing.md) {
                // Icon with warm gradient
                ZStack {
                    // Glow effect
                    Circle()
                        .fill(
                            isComplete
                                ? LinearGradient(
                                    colors: [Color(hex: 0x4CAF50).opacity(0.2)],
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                )
                                : LinearGradient(
                                    gradient: Gradient(colors: [
                                        Color(hex: 0xFFB88C).opacity(0.2),
                                        Color(hex: 0xFF8C94).opacity(0.2)
                                    ]),
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                )
                        )
                        .frame(width: 56, height: 56)
                        .blur(radius: 4)

                    Circle()
                        .fill(
                            isComplete
                                ? Color(hex: 0x4CAF50).opacity(0.15)
                                : Color.white
                        )
                        .frame(width: 50, height: 50)

                    Image(systemName: isComplete ? "checkmark.circle.fill" : task.icon)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 24, height: 24)
                        .foregroundStyle(
                            isComplete
                                ? LinearGradient(
                                    colors: [Color(hex: 0x4CAF50)],
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                )
                                : LinearGradient(
                                    gradient: Gradient(colors: [
                                        Color(hex: 0xFFB88C),
                                        Color(hex: 0xFF8C94)
                                    ]),
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                )
                        )
                }

                // Text content
                VStack(alignment: .leading, spacing: AppSpacing.xs) {
                    Text(task.title)
                        .font(.appHeadline)
                        .fontWeight(.semibold)
                        .foregroundColor(AppColors.primaryText)

                    Text(task.description)
                        .font(.appBody)
                        .foregroundColor(AppColors.secondaryText)
                        .lineLimit(2)
                }

                Spacer()

                // Arrow or checkmark
                if isComplete {
                    Image(systemName: "checkmark")
                        .foregroundColor(Color(hex: 0x4CAF50))
                        .font(.appHeadline)
                        .fontWeight(.bold)
                } else {
                    Image(systemName: "arrow.right.circle.fill")
                        .foregroundStyle(
                            LinearGradient(
                                gradient: Gradient(colors: [
                                    Color(hex: 0xFFB88C),
                                    Color(hex: 0xFF8C94)
                                ]),
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                        .font(.title3)
                }
            }
            .padding(AppSpacing.md)
            .background(
                RoundedRectangle(cornerRadius: 20)
                    .fill(AppColors.surfaceElevated)
                    .shadow(
                        color: isComplete
                            ? Color(hex: 0x4CAF50).opacity(0.15)
                            : Color(hex: 0xFF8C94).opacity(0.15),
                        radius: isPressed ? 8 : 15,
                        y: isPressed ? 2 : 6
                    )
            )
            .scaleEffect(isPressed ? 0.98 : 1.0)
            .opacity(isComplete ? 0.7 : 1.0)
        }
        .disabled(isComplete)
        .buttonStyle(PlainButtonStyle())
        .simultaneousGesture(
            DragGesture(minimumDistance: 0)
                .onChanged { _ in
                    if !isComplete {
                        withAnimation(.easeInOut(duration: 0.1)) {
                            isPressed = true
                        }
                    }
                }
                .onEnded { _ in
                    withAnimation(.easeInOut(duration: 0.1)) {
                        isPressed = false
                    }
                }
        )
    }
}

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

            VStack(spacing: AppSpacing.md) {
                OnboardingTaskCard(
                    task: OnboardingTask(
                        id: "test1",
                        icon: "message.fill",
                        title: "Talk to a Character",
                        description: "Start a conversation in the Social tab",
                        destination: .tab(2)
                    ),
                    isComplete: false,
                    onTap: {}
                )

                OnboardingTaskCard(
                    task: OnboardingTask(
                        id: "test2",
                        icon: "figure.run",
                        title: "Start an Activity",
                        description: "Choose an activity from the Activities tab",
                        destination: .tab(1)
                    ),
                    isComplete: true,
                    onTap: {}
                )
            }
            .padding()
        }
    }
}
#endif