import SwiftUI

// MARK: - VerifiedBadge

/// Displays a verified badge for accounts with server-assigned verification.
///
/// Uses Tabler Icons SVG paths for desktop parity:
/// - Level 1: rosette with checkmark (blue) — `IconRosetteDiscountCheckFilled`
/// - Level 2: shield with checkmark (green) — `IconShieldCheckFilled`
/// - Level 3+: arrow badge down (gold) — group admin
///
/// Tapping the badge presents a dialog explaining the verification level.
struct VerifiedBadge: View {
    let verified: Int
    var size: CGFloat = 16
    var badgeTint: Color?
    /// When false, tapping the badge does nothing (no alert).
    var interactive: Bool = true

    @Environment(\.colorScheme) private var colorScheme
    @State private var showExplanation = false

    var body: some View {
        if verified > 0 {
            SVGPathShape(pathData: iconPath, viewBox: CGSize(width: 24, height: 24))
                .fill(resolvedColor)
                .frame(width: size, height: size)
                .onTapGesture { if interactive { showExplanation = true } }
                .accessibilityLabel(verified >= 3 ? "Group admin" : "Verified account")
                .alert(alertTitle, isPresented: $showExplanation) {
                    Button("OK", role: .cancel) {}
                } message: {
                    Text(annotationText)
                }
        }
    }

    private var alertTitle: String {
        verified >= 3 ? "Group Admin" : "Verified Account"
    }

    // MARK: - Private

    /// Desktop parity: different icon per verification level.
    /// Level 1 = rosette (public figure), Level 2 = shield (Rosetta admin),
    /// Level 3+ = shield (group admin).
    private var iconPath: String {
        switch verified {
        case 2:
            return TablerIconPath.shieldCheckFilled
        case 3...:
            return TablerIconPath.arrowBadgeDownFilled
        default:
            return TablerIconPath.rosetteDiscountCheckFilled
        }
    }

    /// Desktop parity: level 2 (Rosetta admin) uses green,
    /// level 3+ (group admin) uses gold, others use brand blue.
    private var resolvedColor: Color {
        if let badgeTint { return badgeTint }
        if verified == 2 {
            return RosettaColors.success // green
        }
        if verified >= 3 {
            return Color(hex: 0xFFD700) // gold — desktop parity
        }
        return RosettaColors.primaryBlue    // #248AE6 — same both themes (Telegram parity)
    }

    private var annotationText: String {
        switch verified {
        case 1:
            return "This is an official account belonging to a public figure, brand, or organization."
        case 2:
            return "This is an official account belonging to the administration of Rosetta."
        default:
            return "This user is an administrator of this group."
        }
    }
}

// MARK: - Tabler Icon Paths

/// SVG path data from Tabler Icons — exact match with desktop's verified badge icons.
/// Desktop reference: `@tabler/icons-react` → `IconRosetteDiscountCheckFilled`, `IconShieldCheckFilled`.
/// ViewBox: 24×24 for both icons.
enum TablerIconPath {

    /// Rosette with checkmark — verification level 1 (public figure/brand/organization).
    /// Desktop: `IconRosetteDiscountCheckFilled` from `@tabler/icons-react`.
    static let rosetteDiscountCheckFilled = "M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"

    /// Shield with checkmark — verification level 2 (Rosetta administration).
    /// Desktop: `IconShieldCheckFilled` from `@tabler/icons-react`.
    static let shieldCheckFilled = "M11.998 2l.118 .007l.059 .008l.061 .013l.111 .034a.993 .993 0 0 1 .217 .112l.104 .082l.255 .218a11 11 0 0 0 7.189 2.537l.342 -.01a1 1 0 0 1 1.005 .717a13 13 0 0 1 -9.208 16.25a1 1 0 0 1 -.502 0a13 13 0 0 1 -9.209 -16.25a1 1 0 0 1 1.005 -.717a11 11 0 0 0 7.531 -2.527l.263 -.225l.096 -.075a.993 .993 0 0 1 .217 -.112l.112 -.034a.97 .97 0 0 1 .119 -.021l.115 -.007zm3.71 7.293a1 1 0 0 0 -1.415 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"

    /// Arrow badge down — verification level 3+ (group admin/owner).
    /// Desktop: `IconArrowBadgeDownFilled` from `@tabler/icons-react`.
    static let arrowBadgeDownFilled = "M16.375 6.22l-4.375 3.498l-4.375 -3.5a1 1 0 0 0 -1.625 .782v6a1 1 0 0 0 .375 .78l5 4a1 1 0 0 0 1.25 0l5 -4a1 1 0 0 0 .375 -.78v-6a1 1 0 0 0 -1.625 -.78z"
}

// MARK: - Preview

#Preview {
    VStack(spacing: 16) {
        HStack {
            Text("Level 1 (rosette)")
            VerifiedBadge(verified: 1, size: 20)
        }
        HStack {
            Text("Level 2 (shield)")
            VerifiedBadge(verified: 2, size: 20)
        }
        HStack {
            Text("Not verified")
            VerifiedBadge(verified: 0, size: 20)
        }
    }
    .padding()
    .background(Color.black)
    .foregroundStyle(.white)
}
