import SwiftUI

struct ThemeSelectionView: View {
    @Environment(\.dismiss) private var dismiss
    @EnvironmentObject private var themeManager: ThemeManager

    var body: some View {
        NavigationStack {
            ZStack {
                WarmGradientBackground()
                    .ignoresSafeArea()

                List {
                    // Honeycomb pattern toggle
                    Section {
                        HStack(spacing: 14) {
                            ZStack {
                                RoundedRectangle(cornerRadius: 10, style: .continuous)
                                    .fill(Color.appPrimary.opacity(0.12))
                                    .frame(width: 40, height: 40)
                                Image(systemName: "hexagon")
                                    .font(.system(size: 18, weight: .semibold))
                                    .foregroundColor(Color.appPrimary)
                            }

                            VStack(alignment: .leading, spacing: 3) {
                                Text("Honeycomb Pattern")
                                    .font(.system(size: 16, weight: .semibold, design: .rounded))
                                    .foregroundColor(Color.appTextPrimary)
                                Text("Adds a subtle hexagonal grid overlay")
                                    .font(.system(size: 12, weight: .medium))
                                    .foregroundColor(Color.appTextSecondary)
                            }

                            Spacer()

                            Toggle("", isOn: Binding(
                                get: { themeManager.honeycombEnabled },
                                set: { newValue in
                                    let generator = UIImpactFeedbackGenerator(style: .light)
                                    generator.impactOccurred()
                                    AnalyticsManager.shared.track(.honeycombToggled(enabled: newValue))
                                    themeManager.setHoneycomb(newValue)
                                }
                            ))
                            .labelsHidden()
                            .tint(Color.appPrimary)
                            .accessibilityIdentifier("Theme.HoneycombToggle")
                        }
                        .padding(.vertical, 4)
                    }
                    .sectionBackground()

                    // Theme list
                    ForEach(ThemeID.allCases, id: \.self) { theme in
                        Button(action: {
                            selectTheme(theme)
                        }) {
                            ThemeRow(
                                theme: theme,
                                isSelected: themeManager.currentTheme == theme
                            )
                        }
                        .accessibilityIdentifier("Theme.Row.\(theme.rawValue)")
                        .sectionBackground()
                    }
                }
                .standardFormStyle()
            }
            .navigationTitle(L10n.Profile.appearance)
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .confirmationAction) {
                    Button(L10n.Common.done) {
                        dismiss()
                    }
                    .font(.system(size: 16, weight: .semibold, design: .rounded))
                }
            }
        }
    }

    private func selectTheme(_ theme: ThemeID) {
        // Haptic feedback
        let generator = UIImpactFeedbackGenerator(style: .medium)
        generator.impactOccurred()

        // Track theme change
        AnalyticsManager.shared.track(.themeChanged(theme: theme.rawValue))

        // Set theme without animation to prevent list rows from being removed/shuffled
        var transaction = Transaction()
        transaction.disablesAnimations = true
        withTransaction(transaction) {
            themeManager.currentTheme = theme
        }
    }
}

// MARK: - Theme Row Component
struct ThemeRow: View {
    let theme: ThemeID
    let isSelected: Bool

    var body: some View {
        HStack(spacing: 14) {
            // Theme preview circles
            HStack(spacing: 5) {
                ForEach(0..<3, id: \.self) { index in
                    Circle()
                        .fill(theme.previewColors[index])
                        .frame(width: 26, height: 26)
                        .overlay(
                            Circle()
                                .stroke(Color.appTextSecondary.opacity(0.1), lineWidth: 1)
                        )
                }
            }
            .padding(8)
            .background(Color.appBackgroundPrimary.opacity(0.5))
            .clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))

            // Theme info
            VStack(alignment: .leading, spacing: 3) {
                Text(theme.displayName)
                    .font(.system(size: 16, weight: .semibold, design: .rounded))
                    .foregroundColor(Color.appTextPrimary)

                Text(theme.description)
                    .font(.system(size: 12, weight: .medium))
                    .foregroundColor(Color.appTextSecondary)
            }

            Spacer()

            // Checkmark for selected theme
            if isSelected {
                ZStack {
                    Circle()
                        .fill(Color.appPrimary.opacity(0.12))
                        .frame(width: 32, height: 32)
                    Image(systemName: "checkmark")
                        .font(.system(size: 14, weight: .bold))
                        .foregroundColor(Color.appPrimary)
                }
            }
        }
        .padding(.vertical, 6)
        .contentShape(Rectangle())
        .accessibilityLabel(theme.displayName)
        .accessibilityValue(isSelected ? "Selected" : "")
    }
}

#Preview {
    ThemeSelectionView()
        .environmentObject(ThemeManager.shared)
}
