//
//  CompatibilityBadge.swift
//  lichunWebsocket
//
//  Component that shows compatibility percentage with color coding
//

import SwiftUI

struct CompatibilityBadge: View {
    let percentage: Int
    let showExplanation: Bool
    let onTapExplanation: (() -> Void)?

    init(
        percentage: Int,
        showExplanation: Bool = true,
        onTapExplanation: (() -> Void)? = nil
    ) {
        self.percentage = percentage
        self.showExplanation = showExplanation
        self.onTapExplanation = onTapExplanation
    }

    var compatibilityColor: Color {
        switch percentage {
        case 70...100:
            return AppColors.success
        case 50..<70:
            return AppColors.warning
        default:
            return AppColors.error
        }
    }

    var heartIcon: String {
        switch percentage {
        case 80...100:
            return "heart.fill"
        case 60..<80:
            return "heart.fill"
        case 40..<60:
            return "heart"
        default:
            return "heart"
        }
    }

    var starRating: Int {
        switch percentage {
        case 90...100:
            return 5
        case 75..<90:
            return 4
        case 60..<75:
            return 3
        case 45..<60:
            return 2
        default:
            return 1
        }
    }

    var body: some View {
        VStack(spacing: AppSpacing.sm) {
            HStack(spacing: AppSpacing.sm) {
                ZStack {
                    Circle()
                        .fill(compatibilityColor.opacity(0.15))
                        .frame(width: 36, height: 36)

                    Image(systemName: heartIcon)
                        .foregroundColor(compatibilityColor)
                        .font(.appBody)
                }

                Text("\(percentage)%")
                    .font(.appLargeTitle)
                    .foregroundColor(compatibilityColor)

                Text("Compatible")
                    .font(.appBody)
                    .foregroundColor(AppColors.secondaryText)
            }

            // Star rating
            HStack(spacing: AppSpacing.xs) {
                ForEach(0..<5) { index in
                    Image(systemName: index < starRating ? "star.fill" : "star")
                        .font(.appCaption)
                        .foregroundColor(index < starRating ? compatibilityColor : AppColors.secondaryText.opacity(0.4))
                }

                if showExplanation, let onTap = onTapExplanation {
                    Button(action: {
                        hapticFeedback(style: .light)
                        onTap()
                    }) {
                        Text("Why?")
                            .font(.appCaption)
                            .foregroundColor(AppColors.primary)
                            .padding(.horizontal, AppSpacing.sm)
                            .padding(.vertical, 4)
                            .background(AppColors.primary.opacity(0.15))
                            .cornerRadius(8)
                    }
                }
            }
        }
        .padding(.horizontal, AppSpacing.md)
        .padding(.vertical, AppSpacing.sm)
        .background(
            ZStack {
                compatibilityColor.opacity(0.08)

                LinearGradient(
                    colors: [
                        compatibilityColor.opacity(0.12),
                        compatibilityColor.opacity(0.05)
                    ],
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
            }
        )
        .cornerRadius(AppSpacing.cornerRadius)
        .overlay(
            RoundedRectangle(cornerRadius: AppSpacing.cornerRadius)
                .stroke(compatibilityColor.opacity(0.2), lineWidth: 1)
        )
        .shadow(color: compatibilityColor.opacity(0.1), radius: 8, x: 0, y: 4)
    }
}

// MARK: - Preview
#if DEBUG
struct CompatibilityBadge_Previews: PreviewProvider {
    static var previews: some View {
        VStack(spacing: AppSpacing.lg) {
            // High compatibility
            CompatibilityBadge(
                percentage: 92,
                showExplanation: true,
                onTapExplanation: { print("Explain 92%") }
            )

            // Medium compatibility
            CompatibilityBadge(
                percentage: 65,
                showExplanation: true,
                onTapExplanation: { print("Explain 65%") }
            )

            // Low compatibility
            CompatibilityBadge(
                percentage: 35,
                showExplanation: true,
                onTapExplanation: { print("Explain 35%") }
            )

            // Without explanation button
            CompatibilityBadge(
                percentage: 80,
                showExplanation: false
            )
        }
        .padding()
        .background(AppColors.primaryBackground)
    }
}
#endif