import SwiftUI

struct RoundView: View {
    @EnvironmentObject private var localization: LocalizationStore
    @State private var selectedOutcomeID = "home"

    private struct OutcomeOption: Identifiable {
        let id: String
        let label: String
        let odds: String
    }

    private var outcomeOptions: [OutcomeOption] {
        [
            OutcomeOption(id: "home", label: localization.string(for: "round.home"), odds: "1.85"),
            OutcomeOption(id: "away", label: localization.string(for: "round.away"), odds: "2.05"),
        ]
    }

    var body: some View {
        VStack(alignment: .leading, spacing: HermesTheme.sectionSpacing) {
            HermesSectionHeader(
                title: localization.string(for: "round.title"),
                subtitle: localization.string(for: "round.subtitle")
            )

            VStack(alignment: .leading, spacing: 14) {
                ZStack(alignment: .topTrailing) {
                    RoundedRectangle(cornerRadius: HermesTheme.cornerRadius, style: .continuous)
                        .fill(
                            LinearGradient(
                                colors: [HermesTheme.surfaceElevated, HermesTheme.background],
                                startPoint: .top,
                                endPoint: .bottom
                            )
                        )
                        .frame(height: 200)

                    Text(localization.string(for: "round.video_placeholder"))
                        .font(.caption.weight(.semibold))
                        .foregroundStyle(HermesTheme.textSecondary)
                        .padding(12)
                }

                HStack(spacing: 12) {
                    HermesCountdownBadge(
                        label: localization.string(for: "round.countdown_label"),
                        value: "00:47"
                    )
                    HermesMetricPill(label: localization.string(for: "round.odds_label"), value: "1.85 / 2.05")
                }

                Text(localization.string(for: "round.selection_prompt"))
                    .font(.callout)
                    .foregroundStyle(HermesTheme.textSecondary)

                VStack(spacing: 10) {
                    ForEach(outcomeOptions) { option in
                        outcomeButton(option)
                    }
                }

                Button {
                } label: {
                    Text(localization.string(for: "round.primary_cta"))
                }
                    .buttonStyle(HermesPrimaryButtonStyle())
            }
        }
        .hermesCard(elevated: true)
    }

    private func outcomeButton(_ option: OutcomeOption) -> some View {
        let isSelected = selectedOutcomeID == option.id

        return Button {
            selectedOutcomeID = option.id
        } label: {
            HStack {
                VStack(alignment: .leading, spacing: 4) {
                    Text(option.label)
                        .font(.headline.weight(.semibold))
                    Text(option.odds)
                        .font(.caption.weight(.semibold))
                        .foregroundStyle(isSelected ? HermesTheme.background.opacity(0.72) : HermesTheme.textSecondary)
                }

                Spacer()

                Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
                    .font(.headline)
            }
            .padding(.horizontal, 16)
            .padding(.vertical, 14)
            .foregroundStyle(isSelected ? HermesTheme.background : HermesTheme.textPrimary)
            .background(isSelected ? HermesTheme.accent : HermesTheme.surfaceElevated)
            .overlay(
                RoundedRectangle(cornerRadius: HermesTheme.insetRadius, style: .continuous)
                    .stroke(isSelected ? HermesTheme.accent : HermesTheme.accent.opacity(0.14), lineWidth: 1)
            )
            .clipShape(RoundedRectangle(cornerRadius: HermesTheme.insetRadius, style: .continuous))
        }
        .buttonStyle(.plain)
    }
}