import SwiftUI

struct BankSelectionView: View {
    @State private var selectedBank: String? = nil

    var body: some View {
        NavigationStack {
            VStack(spacing: 0) {
                VStack(spacing: 8) {
                    Image(systemName: "building.columns.fill")
                        .font(.system(size: 44))
                        .foregroundStyle(.tint)
                    Text("Add a Bank Account")
                        .font(.title2.bold())
                    Text("Choose which bank to connect.")
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }
                .padding(.top, 40)
                .padding(.bottom, 32)

                VStack(spacing: 16) {
                    BankCard(
                        bank: "MIB",
                        name: "Maldives Islamic Bank",
                        subtitle: "Faisanet personal & business",
                        icon: "building.2.fill",
                        color: .green,
                        destination: { CredentialsView(bank: "MIB") }
                    )
                    BankCard(
                        bank: "BML",
                        name: "Bank of Maldives",
                        subtitle: "Internet banking · all profiles",
                        icon: "creditcard.fill",
                        color: .blue,
                        destination: { CredentialsView(bank: "BML") }
                    )
                    BankCard(
                        bank: "FAHIPAY",
                        name: "Fahipay Wallet",
                        subtitle: "Mobile wallet · Ooredoo · Dhiraagu",
                        icon: "wallet.pass.fill",
                        color: .orange,
                        destination: { CredentialsView(bank: "FAHIPAY") }
                    )
                }
                .padding(.horizontal, 20)

                Spacer()
            }
            .navigationTitle("")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

private struct BankCard<Dest: View>: View {
    let bank: String
    let name: String
    let subtitle: String
    let icon: String
    let color: Color
    @ViewBuilder let destination: () -> Dest

    var body: some View {
        NavigationLink(destination: destination()) {
            HStack(spacing: 16) {
                RoundedRectangle(cornerRadius: 12)
                    .fill(color.opacity(0.15))
                    .frame(width: 52, height: 52)
                    .overlay(
                        Image(systemName: icon)
                            .font(.system(size: 24))
                            .foregroundStyle(color)
                    )

                VStack(alignment: .leading, spacing: 3) {
                    Text(name)
                        .font(.headline)
                        .foregroundStyle(.primary)
                    Text(subtitle)
                        .font(.caption)
                        .foregroundStyle(.secondary)
                }

                Spacer()

                Image(systemName: "chevron.right")
                    .font(.caption.weight(.semibold))
                    .foregroundStyle(.tertiary)
            }
            .padding(16)
            .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 16))
        }
        .buttonStyle(.plain)
    }
}

#Preview {
    BankSelectionView()
}