import SwiftUI

struct ApprovalCardModifier: ViewModifier {
    var highlighted = false

    func body(content: Content) -> some View {
        content
            .padding(18)
            .background(
                RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
                    .fill(Color.idpSecondaryGroupedBackground)
            )
            .overlay(
                RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
                    .stroke(highlighted ? IdP.tint.opacity(0.7) : Color.idpSeparator.opacity(0.55), lineWidth: highlighted ? 1.5 : 1)
            )
            .overlay {
                if highlighted {
                    RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
                        .stroke(IdP.tint.opacity(0.12), lineWidth: 6)
                        .padding(-2)
                }
            }
    }
}

extension View {
    func approvalCard(highlighted: Bool = false) -> some View {
        modifier(ApprovalCardModifier(highlighted: highlighted))
    }

    func deviceRowStyle() -> some View {
        modifier(DeviceRowStyle())
    }
}

struct RequestHeroCard: View {
    let request: ApprovalRequest
    let handle: String

    var body: some View {
        HStack(alignment: .top, spacing: 16) {
            MonogramAvatar(title: request.source, size: 64)

            VStack(alignment: .leading, spacing: 8) {
                Text("\(request.source) wants to sign in as you")
                    .font(.title3.weight(.semibold))
                    .fixedSize(horizontal: false, vertical: true)

                Text("Continue as \(Text(handle).foregroundStyle(IdP.tint))")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)

                HStack(spacing: 8) {
                    Label(request.kind.title, systemImage: request.kind.systemImage)
                    Text(request.createdAt, style: .relative)
                }
                .font(.caption.weight(.medium))
                .foregroundStyle(.secondary)
            }
        }
        .approvalCard(highlighted: true)
    }
}

struct MonogramAvatar: View {
    let title: String
    var size: CGFloat = 40
    var tint: Color = IdP.tint

    private var monogram: String {
        String(title.trimmingCharacters(in: .whitespacesAndNewlines).first ?? "I").uppercased()
    }

    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: size * 0.34, style: .continuous)
                .fill(tint.opacity(0.14))

            Image("AppMonogram")
                .resizable()
                .scaledToFit()
                .frame(width: size * 0.44, height: size * 0.44)
                .opacity(0.18)

            Text(monogram)
                .font(.system(size: size * 0.42, weight: .semibold, design: .rounded))
                .foregroundStyle(tint)
        }
        .frame(width: size, height: size)
        .accessibilityHidden(true)
    }
}

struct DeviceRowStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding(.vertical, 4)
    }
}