import SwiftUI

private struct TopupPackage: Identifiable {
    let code: String
    let amount: Int
    var id: String { code }
}

struct WalletView: View {
    @StateObject private var vm: WalletViewModel
    @Environment(\.openURL) private var openURL

    private let packages = [
        TopupPackage(code: "P20", amount: 20),
        TopupPackage(code: "P50", amount: 50),
        TopupPackage(code: "P100", amount: 100),
    ]

    init(container: AppContainer) {
        _vm = StateObject(wrappedValue: WalletViewModel(wallet: container.walletRepository))
    }

    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(spacing: 12) {
                    balanceCard
                    Text("choose_package".localized)
                        .font(.headline)
                        .frame(maxWidth: .infinity, alignment: .leading)

                    ForEach(packages) { pkg in
                        HStack {
                            Text("\(pkg.amount) SAR").font(.headline)
                            Spacer()
                            BrandButton(title: "pay".localized, loading: vm.loading) {
                                vm.topUp(packageCode: pkg.code)
                            }
                            .frame(width: 140)
                        }
                        .card()
                    }

                    if let error = vm.error {
                        Text(error).font(.footnote).foregroundStyle(.red)
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                }
                .padding()
            }
            .navigationTitle("wallet_title".localized)
        }
        .task { vm.refresh() }
        .onChange(of: vm.paymentURL) { url in
            // Hand off to the hosted MyFatoorah checkout page.
            if let url {
                openURL(url)
                vm.paymentURL = nil
            }
        }
    }

    private var balanceText: String {
        if let balance = vm.balance {
            return String(format: "%.2f %@", balance.balance, balance.currency)
        }
        return ""
    }

    private var balanceCard: some View {
        VStack(alignment: .leading, spacing: 2) {
            Text("wallet_balance".localized).font(.caption).foregroundStyle(.secondary)
            Text(balanceText).font(.largeTitle).bold()
        }
        .brandCard()
    }
}