import SwiftUI
import CoreMotion
import UIKit

// AirbnbIdentityVerificationCardFlipScanSnippet
//
// An Airbnb-style identity sheet with a tap-to-flip profile card and a
// motion-reactive verification card. Tapping the host card flips it on
// the Y axis; once flipped, Core Motion drives the tilt, the portrait
// hologram, and the printed logo-field color shift. In Simulator, where
// there is no real motion sensor, dragging the verification card stands
// in for device tilt.
//
// The portrait loads once through a small cached image loader (not
// AsyncImage) so the photo stays resident while the card recomposes on
// every tilt frame, instead of flickering back to a loading state.
//
// HOW TO CUSTOMIZE: everything tweakable lives in Config below: copy,
// photo IDs, colors, layout, typography, and the flip/tilt motion.
//
// One file, Apple frameworks only. Network is required for the portrait
// and listing photo. Drop it into any iOS 26+ app or Swift Playground.


// MARK: - Config

/// All values a copy-paster might want to tweak. The rest of the file
/// reads from Config, so layout and interaction tuning stay centralized.
private enum Config {

    // MARK: Copy

    /// Host name shown on both card faces and in the listings heading.
    static let hostName = "Patrick Mahomes"
    /// Subtitle under the name on the profile (front) face.
    static let hostRole = "Host"
    /// Second line on the verification (back) face.
    static let verificationDate = "Verified since March 2025"
    /// Short blurb printed on the verification face itself.
    static let verificationCardBody = "Trust is the cornerstone of Airbnb's community, and identity verification is part of how we build it."
    /// Longer explainer shown below the card once it has flipped.
    static let verificationBody = "Our identity verification process checks a person's information against trusted third-party sources or a government ID. The process has safeguards, but doesn't guarantee that someone is who they say they are."
    /// Trailing link appended to `verificationBody`. The non-breaking
    /// space keeps "Learn more" from wrapping mid-phrase at the edge.
    static let learnMore = "Learn\u{00A0}more"
    /// Host bio paragraph shown on the profile face's detail list.
    static let profileBody = "I'm Patrick Mahomes, MVP quarterback and Sunday Funday connoisseur. I've been blessed to win multiple rings and compete on the biggest stage. But real talk, every day is a competition for me. If you love a chill day with sports, friends, and trophies, come hang with me."
    /// Heading above the listing row.
    static let listingsTitle = "Patrick Mahomes's listings"
    /// Title and blurb for the single sample listing.
    static let listingName = "Modern farmhouse in Belton"
    static let listingBody = "Texas sunsets, a big yard, and a football-ready game room."

    /// The "about me" rows on the profile face. The last row is the
    /// verified marker, which renders underlined.
    static let facts: [IdentityFact] = [
        .init(icon: "graduationcap", text: "Where I went to school: Texas Tech, Wreck 'Em!"),
        .init(icon: "clock", text: "I spend too much time: Playing golf and watching sports"),
        .init(icon: "heart", text: "I'm obsessed with: Competition"),
        .init(icon: "pawprint", text: "Pets: Two dogs, Steel and Silver"),
        .init(icon: "checkmark.shield", text: "Identity verified", underlined: true)
    ]

    // MARK: Photos

    /// Unsplash photo IDs (the part after `photo-` in any unsplash URL).
    /// The same portrait drives the avatar, the verification window, and
    /// its hologram. Swap for a real portrait and listing photo.
    static let hostPhotoID = "1507003211169-0a1dd7228f2d"
    static let listingPhotoID = "1505693416388-ac5ce068fe85"

    // MARK: Theme

    /// Page and front-face fills. Both white to match the Airbnb sheet.
    static let pageBackground: Color = .white
    static let cardFront: Color = .white
    /// Primary text color (near-black, slightly warm).
    static let ink: Color = Color(red: 0.11, green: 0.11, blue: 0.13)
    /// Secondary text color for roles and captions.
    static let mutedInk: Color = Color(red: 0.45, green: 0.45, blue: 0.48)
    /// Hairline rule between the bio and the listings section.
    static let divider: Color = Color.black.opacity(0.10)
    /// Fill of the small verified checkmark badge on the avatar.
    static let badgePink: Color = Color(red: 0.90, green: 0.10, blue: 0.38)
    /// The verification face's diagonal gradient, bottom-left to top-right.
    static let cardPurple: Color = Color(red: 0.69, green: 0.11, blue: 0.54)
    static let cardPink: Color = Color(red: 0.88, green: 0.10, blue: 0.48)
    static let cardOrange: Color = Color(red: 1.00, green: 0.25, blue: 0.22)
    /// Iridescent foil sheen colors that drift with tilt across the card.
    static let foilBlue: Color = Color(red: 0.45, green: 0.74, blue: 1.00)
    static let foilGold: Color = Color(red: 1.00, green: 0.74, blue: 0.24)
    static let foilViolet: Color = Color(red: 0.62, green: 0.42, blue: 0.96)
    /// Tint pair for the portrait's holographic "x-ray" wash on tilt.
    static let xrayLavender: Color = Color(red: 0.62, green: 0.52, blue: 0.95)
    static let xrayAmber: Color = Color(red: 0.94, green: 0.72, blue: 0.44)

    // MARK: Layout (points unless noted)

    /// Caps the sheet width on iPad so the card does not stretch huge.
    static let contentMaxWidth: CGFloat = 500
    /// Side margin around the whole sheet.
    static let sideInset: CGFloat = 34
    /// Gap from the safe area to the top bar.
    static let topInset: CGFloat = 16
    /// Gap from the top bar down to the card.
    static let cardTopSpacing: CGFloat = 28
    /// Gap from the card down to the detail copy.
    static let detailTopSpacing: CGFloat = 38
    /// Card width as a fraction of the content width (1.0 = full width).
    static let cardWidthFraction: CGFloat = 1.0
    /// Card height as a fraction of its width. 0.60 gives a credit-card
    /// landscape ratio.
    static let cardHeightFraction: CGFloat = 0.60
    /// Corner radius shared by the card and its hit shape.
    static let cardCornerRadius: CGFloat = 22
    /// Circular avatar diameter on the profile face.
    static let avatarSize: CGFloat = 84
    /// Diameter of the verified badge overlapping the avatar.
    static let badgeSize: CGFloat = 34
    /// Side of the square portrait window on the verification face.
    static let verificationPhotoSize: CGFloat = 88
    static let verificationPhotoCornerRadius: CGFloat = 14
    /// Text insets from the verification face's leading/top edges.
    static let verificationCardHorizontalInset: CGFloat = 24
    static let verificationCardVerticalInset: CGFloat = 22
    /// Inset of the portrait window from the card's bottom-right corner.
    static let verificationPhotoInset: CGFloat = 20
    /// Thumbnail size for the sample listing photo.
    static let listingImageWidth: CGFloat = 126
    static let listingImageHeight: CGFloat = 96

    // MARK: Typography (point sizes)

    static let frontNameSize: CGFloat = 26
    static let roleSize: CGFloat = 16
    static let factSize: CGFloat = 13.5
    static let bodySize: CGFloat = 13.5
    static let cardTitleSize: CGFloat = 16
    static let cardBodySize: CGFloat = 12.5
    static let listingsTitleSize: CGFloat = 16.5
    static let listingNameSize: CGFloat = 14
    static let listingBodySize: CGFloat = 13

    /// Smallest and largest belo (Airbnb logo) glyph in the printed
    /// spiral field. Glyphs shrink from max at the center to min at the
    /// outer edge of each spiral arm.
    static let verificationSpiralMinSize: CGFloat = 3.2
    static let verificationSpiralMaxSize: CGFloat = 16

    /// Line spacing and trailing inset for the explainer paragraph.
    static let verificationBodyLineSpacing: CGFloat = 3
    static let verificationBodyTrailingInset: CGFloat = 4

    // MARK: Motion

    /// 3D perspective for the flip. Lower values keep it from feeling too
    /// theatrical (closer to a flat card turning than a dramatic zoom).
    static let flipPerspective: CGFloat = 0.82
    /// How long the Y-axis flip takes, in seconds.
    static let flipDuration: Double = 0.56
    /// Max yaw (left/right) and pitch (up/down) the tilt adds, in degrees.
    static let maxYawDegrees: Double = 14
    static let maxPitchDegrees: Double = 10
    /// Extra shadow radius and lift at full tilt, on the verification face.
    static let maxShadowRadius: CGFloat = 30
    static let maxLift: CGFloat = 8
    /// How far the printed hologram bands slide across the portrait with
    /// horizontal tilt, as a fraction of the window width.
    static let hologramShift: CGFloat = 0.26

    // MARK: Flip choreography

    /// The detail copy below the card fades out this fast before the flip,
    /// so the two transitions do not overlap.
    static let detailExitDuration: Double = 0.18
    /// The new face's detail copy fades in this fast after the flip lands.
    static let detailRevealDuration: Double = 0.22
    /// Small beat after the flip finishes before revealing the new copy.
    static let detailRevealGap: Double = 0.03
    /// Beat after the copy reveal before the card is interactive again.
    static let flipSettleGap: Double = 0.22

    /// Detail copy slides up this far and blurs while hidden, then settles.
    static let detailEnterOffset: CGFloat = 18
    static let profileBlur: CGFloat = 3
    static let verificationBlur: CGFloat = 4

    /// Spring that returns the drag-preview tilt to rest in Simulator.
    static let fallbackSpring: Animation = .spring(duration: 0.42, bounce: 0.16)
}


// MARK: - IdentityFact

/// One row in the profile's "about me" list: an SF Symbol plus a line of
/// text. `underlined` is set only on the verified marker row.
private struct IdentityFact: Identifiable {
    let id = UUID()
    let icon: String
    let text: String
    let underlined: Bool

    init(icon: String, text: String, underlined: Bool = false) {
        self.icon = icon
        self.text = text
        self.underlined = underlined
    }
}


// MARK: - Root view

/// Airbnb-style identity sheet. A profile card flips on tap to reveal a
/// motion-reactive verification card; the detail copy below the card
/// hands off in sync with the flip. Core Motion drives the tilt on
/// device, a drag stands in on Simulator.
struct AirbnbIdentityVerificationCardFlipScanSnippet: View {
    @StateObject private var motion = DeviceTiltModel()

    /// Which face is showing, and whether a flip is mid-flight (locks out
    /// re-entry and tells the card to take taps vs. tilt drags).
    @State private var isShowingVerification = false
    @State private var isFlipAnimating = false
    /// Visibility of the two detail blocks below the card.
    @State private var showsProfileDetails = true
    @State private var showsVerificationDetails = false
    /// Current flip rotation in degrees (0 = profile, 180 = verification).
    @State private var flipAngle: Double = 0
    /// Drag-driven tilt used only when no motion sensor is available.
    @State private var fallbackTilt: CGSize = .zero
    /// The in-flight flip sequence, kept so a reverse flip can cancel it.
    @State private var flipTask: Task<Void, Never>?

    var body: some View {
        GeometryReader { proxy in
            let contentWidth = min(proxy.size.width - Config.sideInset * 2, Config.contentMaxWidth)
            let cardWidth = Config.cardWidthFraction * contentWidth
            let cardHeight = cardWidth * Config.cardHeightFraction
            let activeTilt = currentTilt
            let tiltStrength = min(1, sqrt(activeTilt.width * activeTilt.width + activeTilt.height * activeTilt.height))

            ZStack(alignment: .top) {
                Config.pageBackground.ignoresSafeArea()

                VStack(spacing: 0) {
                    topBar
                        .padding(.top, Config.topInset)

                    flippingCard(
                        width: cardWidth,
                        height: cardHeight,
                        tilt: activeTilt,
                        tiltStrength: tiltStrength
                    )
                    .frame(maxWidth: .infinity)
                    .padding(.top, Config.cardTopSpacing)

                    ScrollView(.vertical, showsIndicators: false) {
                        VStack(alignment: .leading, spacing: 0) {
                            // Both detail blocks share the slot; only one
                            // is visible at a time, cross-fading with the flip.
                            ZStack(alignment: .topLeading) {
                                ProfileDetailsView()
                                    .opacity(showsProfileDetails ? 1 : 0)
                                    .offset(y: showsProfileDetails ? 0 : Config.detailEnterOffset)
                                    .blur(radius: showsProfileDetails ? 0 : Config.profileBlur)
                                    .allowsHitTesting(showsProfileDetails)

                                VerificationDetailsView()
                                    .opacity(showsVerificationDetails ? 1 : 0)
                                    .offset(y: showsVerificationDetails ? 0 : Config.detailEnterOffset)
                                    .blur(radius: showsVerificationDetails ? 0 : Config.verificationBlur)
                                    .allowsHitTesting(showsVerificationDetails)
                            }
                            .padding(.top, Config.detailTopSpacing)

                            Spacer(minLength: 36)
                        }
                    }
                }
                .frame(width: contentWidth, alignment: .leading)
                .padding(.horizontal, Config.sideInset)
            }
        }
        .preferredColorScheme(.light)
        .onAppear {
            motion.start()
        }
        .onDisappear {
            motion.stop()
            flipTask?.cancel()
        }    }

    /// Real device tilt when the sensor is reporting, otherwise the
    /// drag-preview tilt used in Simulator.
    private var currentTilt: CGSize {
        motion.isUsingDeviceMotion ? motion.tilt : fallbackTilt
    }

    /// Back arrow (only live on the verification face, flips back to the
    /// profile) and a close button.
    private var topBar: some View {
        HStack {
            Button {
                runFlip(toVerification: false)
            } label: {
                Image(systemName: "arrow.left")
                    .font(.system(size: 18, weight: .regular))
                    .foregroundStyle(Config.ink.opacity(isShowingVerification ? 1 : 0))
                    .frame(width: 28, height: 28)
            }
            .disabled(!isShowingVerification)

            Spacer()

            Button {
                // TODO: dismiss the sheet
            } label: {
                Image(systemName: "xmark")
                    .font(.system(size: 18, weight: .regular))
                    .foregroundStyle(Config.ink)
                    .frame(width: 28, height: 28)
            }
            .buttonStyle(.plain)
        }
    }

    /// Front/back face swap stays tied to the card rotation, not opacity.
    @ViewBuilder
    private func flippingCard(width: CGFloat, height: CGFloat, tilt: CGSize, tiltStrength: CGFloat) -> some View {
        let showsBackFace = flipAngle >= 90
        let cardFace = ZStack {
            if !showsBackFace {
                ProfileIdentityCard()
            } else {
                VerificationIdentityCard(tilt: tilt, tiltStrength: tiltStrength)
                    .rotation3DEffect(
                        .degrees(180),
                        axis: (x: 0, y: 1, z: 0),
                        perspective: Config.flipPerspective
                    )
            }
        }
        .frame(width: width, height: height)
        .contentShape(RoundedRectangle(cornerRadius: Config.cardCornerRadius, style: .continuous))
        .rotation3DEffect(
            .degrees(flipAngle),
            axis: (x: 0, y: 1, z: 0),
            perspective: Config.flipPerspective
        )
        .rotation3DEffect(
            .degrees(-Double(tilt.height) * Config.maxPitchDegrees),
            axis: (x: 1, y: 0, z: 0),
            perspective: 0.85
        )
        .rotation3DEffect(
            .degrees(Double(tilt.width) * Config.maxYawDegrees),
            axis: (x: 0, y: 1, z: 0),
            perspective: 0.85
        )
        .offset(y: -tiltStrength * Config.maxLift)
        .shadow(
            color: .black.opacity(isShowingVerification ? 0.16 + tiltStrength * 0.10 : 0.09),
            radius: isShowingVerification ? 18 + tiltStrength * Config.maxShadowRadius : 18,
            y: isShowingVerification ? 14 + tiltStrength * 12 : 12
        )
        .accessibilityAddTraits(.isButton)
        .background {
            if !showsBackFace {
                RoundedRectangle(cornerRadius: Config.cardCornerRadius, style: .continuous)
                    .fill(Color.black.opacity(0.001))
            }
        }

        if isShowingVerification && !isFlipAnimating {
            cardFace
                .gesture(tiltPreviewGesture(width: width, height: height))
        } else {
            cardFace
                .highPriorityGesture(
                    TapGesture()
                        .onEnded { runFlip(toVerification: true) }
                )
        }
    }

    /// Runs one flip in either direction. The choreography is symmetric:
    /// the outgoing face's detail copy fades out first so it does not
    /// overlap the flip, the underlying face swaps at the halfway point
    /// (when the card is edge-on), and the incoming copy fades in once the
    /// flip lands. Driven by `Task.sleep` rather than dispatched delays so
    /// a reverse flip can cancel an in-flight one.
    private func runFlip(toVerification: Bool) {
        // Ignore taps that would flip toward the face already showing, or
        // that land mid-flip.
        guard isShowingVerification != toVerification, !isFlipAnimating else { return }

        flipTask?.cancel()
        flipTask = Task { @MainActor in
            isFlipAnimating = true

            withAnimation(.easeInOut(duration: Config.detailExitDuration)) {
                if toVerification { showsProfileDetails = false }
                else { showsVerificationDetails = false }
            }
            withAnimation(.smooth(duration: Config.flipDuration)) {
                flipAngle = toVerification ? 180 : 0
            }

            // Swap the live state at the midpoint, when the card is edge-on
            // and neither face is readable.
            try? await Task.sleep(for: .seconds(Config.flipDuration / 2))
            guard !Task.isCancelled else { return }
            isShowingVerification = toVerification

            // Let the flip finish, then bring in the new face's copy.
            try? await Task.sleep(for: .seconds(Config.flipDuration / 2 + Config.detailRevealGap))
            guard !Task.isCancelled else { return }
            withAnimation(.easeOut(duration: Config.detailRevealDuration)) {
                if toVerification { showsVerificationDetails = true }
                else { showsProfileDetails = true }
            }

            // Hold the lock a beat past the reveal so a stray tap during
            // the settle does not start another flip.
            try? await Task.sleep(for: .seconds(Config.flipSettleGap))
            guard !Task.isCancelled else { return }
            isFlipAnimating = false
        }
    }

    /// Drag previews the motion-driven tilt on Simulator.
    private func tiltPreviewGesture(width: CGFloat, height: CGFloat) -> some Gesture {
        DragGesture(minimumDistance: 0)
            .onChanged { value in
                guard !motion.isUsingDeviceMotion, isShowingVerification else { return }
                let x = ((value.location.x / width) - 0.5) * 2
                let y = ((value.location.y / height) - 0.5) * 2
                fallbackTilt = CGSize(
                    width: x.clamped(to: -1...1),
                    height: y.clamped(to: -1...1)
                )
            }
            .onEnded { _ in
                guard !motion.isUsingDeviceMotion else { return }
                withAnimation(Config.fallbackSpring) {
                    fallbackTilt = .zero
                }
            }
    }
}


// MARK: - Profile card

/// The card's front (profile) face: avatar with a verified badge, name,
/// and role on a plain white surface.
private struct ProfileIdentityCard: View {
    var body: some View {
        VStack(spacing: 12) {
            ZStack(alignment: .bottomTrailing) {
                RemoteImage(photoID: Config.hostPhotoID, style: .portrait)
                    .frame(width: Config.avatarSize, height: Config.avatarSize)
                    .clipShape(Circle())

                Circle()
                    .fill(Config.badgePink)
                    .frame(width: Config.badgeSize, height: Config.badgeSize)
                    .overlay {
                        Image(systemName: "checkmark.shield.fill")
                            .font(.system(size: 14, weight: .bold))
                            .foregroundStyle(.white)
                    }
                    .offset(x: 4, y: 2)
            }

            Text(Config.hostName)
                .font(.system(size: Config.frontNameSize, weight: .semibold))
                .foregroundStyle(Config.ink)

            Text(Config.hostRole)
                .font(.system(size: Config.roleSize, weight: .regular))
                .foregroundStyle(Config.mutedInk)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .padding(.vertical, 24)
        .background(
            RoundedRectangle(cornerRadius: Config.cardCornerRadius, style: .continuous)
                .fill(Config.cardFront)
        )
    }
}


// MARK: - Verification card

/// The card's back (verification) face: a gradient surface printed with a
/// field of tiny logos, the name and verified date, a short blurb, the
/// holographic portrait window, and a tilt-reactive foil sheen on top.
private struct VerificationIdentityCard: View {
    let tilt: CGSize
    let tiltStrength: CGFloat

    var body: some View {
        GeometryReader { proxy in
            let size = proxy.size

            ZStack {
                RoundedRectangle(cornerRadius: Config.cardCornerRadius, style: .continuous)
                    .fill(
                        LinearGradient(
                            colors: [Config.cardPurple, Config.cardPink, Config.cardOrange],
                            startPoint: .bottomLeading,
                            endPoint: .topTrailing
                        )
                    )

                VerificationPattern(tilt: tilt)
                    .clipShape(RoundedRectangle(cornerRadius: Config.cardCornerRadius, style: .continuous))

                VStack(alignment: .leading, spacing: 6) {
                    Text(Config.hostName)
                        .font(.system(size: Config.cardTitleSize, weight: .semibold))
                        .foregroundStyle(.white)

                    Text(Config.verificationDate)
                        .font(.system(size: Config.cardTitleSize, weight: .medium))
                        .foregroundStyle(.white.opacity(0.92))
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
                .padding(.leading, Config.verificationCardHorizontalInset)
                .padding(.top, Config.verificationCardVerticalInset)

                Text(Config.verificationCardBody)
                    .font(.system(size: Config.cardBodySize, weight: .regular))
                    .foregroundStyle(.white.opacity(0.88))
                    .lineSpacing(2)
                    .frame(width: size.width * 0.52, alignment: .leading)
                    .fixedSize(horizontal: false, vertical: true)
                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
                    .padding(.leading, Config.verificationCardHorizontalInset)
                    .padding(.bottom, Config.verificationCardVerticalInset)

                VerificationPhotoWindow(tilt: tilt, tiltStrength: tiltStrength)
                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
                    .padding(.trailing, Config.verificationPhotoInset)
                    .padding(.bottom, Config.verificationPhotoInset)

                FoilOverlay(tilt: tilt, size: size)
                    .blendMode(.screen)
            }
            .clipShape(RoundedRectangle(cornerRadius: Config.cardCornerRadius, style: .continuous))
        }
    }
}


// MARK: - Verification photo

/// The small portrait window on the verification face. At rest it is a
/// plain photo; as the card tilts left/right an inverted copy and a stack
/// of tinted gradients fade in to read as a holographic security image.
private struct VerificationPhotoWindow: View {
    let tilt: CGSize
    let tiltStrength: CGFloat

    var body: some View {
        // Strength and band positions are driven by horizontal tilt only;
        // the hologram peaks at full left/right and vanishes at center.
        let horizontalTilt = tilt.width.clamped(to: -1...1)
        let hologramStrength = abs(horizontalTilt)
        let hologramStartX = 0.14 + horizontalTilt * Config.hologramShift
        let hologramEndX = 0.86 - horizontalTilt * Config.hologramShift

        CachedRemotePhoto(photoID: Config.hostPhotoID) { image in
            photoLayers(
                base: image,
                hologramStrength: hologramStrength,
                horizontalTilt: horizontalTilt,
                hologramStartX: hologramStartX,
                hologramEndX: hologramEndX
            )
        } fallback: {
            verificationFallback
        }
        .frame(width: Config.verificationPhotoSize, height: Config.verificationPhotoSize)
        .clipShape(RoundedRectangle(cornerRadius: Config.verificationPhotoCornerRadius, style: .continuous))
        .overlay {
            RoundedRectangle(cornerRadius: Config.verificationPhotoCornerRadius, style: .continuous)
                .stroke(Color.white.opacity(0.12 + tiltStrength * 0.08), lineWidth: 1)
        }
    }

    /// Stacks the base photo with the tilt-driven hologram layers: an
    /// inverted ghost, a diagonal color wash, a moving white streak, a
    /// soft-light cross gradient, and a bright spot. Every overlay's
    /// opacity tracks `hologramStrength`, so all of it disappears at rest.
    @ViewBuilder
    private func photoLayers(
        base image: Image,
        hologramStrength: CGFloat,
        horizontalTilt: CGFloat,
        hologramStartX: CGFloat,
        hologramEndX: CGFloat
    ) -> some View {
        ZStack {
            image
                .resizable()
                .scaledToFill()
                .saturation(1)
                .contrast(1.02)

            image
                .resizable()
                .scaledToFill()
                .grayscale(1)
                .contrast(1.18)
                .brightness(-0.03)
                .colorInvert()
                .opacity(hologramStrength)

            LinearGradient(
                colors: [
                    Config.xrayLavender.opacity(0.18 + hologramStrength * 0.68),
                    Config.xrayAmber.opacity(0.14 + hologramStrength * 0.64),
                    Config.foilBlue.opacity(0.10 + hologramStrength * 0.54)
                ],
                startPoint: UnitPoint(x: hologramStartX, y: 0.14),
                endPoint: UnitPoint(x: hologramEndX, y: 0.88)
            )
            .blendMode(.color)
            .opacity(hologramStrength)

            LinearGradient(
                colors: [
                    .clear,
                    Color.white.opacity(0.06 + hologramStrength * 0.28),
                    .clear
                ],
                startPoint: UnitPoint(x: 0.18 + horizontalTilt * 0.10, y: 0),
                endPoint: UnitPoint(x: 0.82 + horizontalTilt * 0.22, y: 1)
            )
            .blendMode(.overlay)
            .opacity(hologramStrength)

            LinearGradient(
                colors: [
                    Config.xrayAmber.opacity(0.04 + hologramStrength * 0.20),
                    .clear,
                    Config.xrayLavender.opacity(0.06 + hologramStrength * 0.24)
                ],
                startPoint: UnitPoint(x: 0.10 + horizontalTilt * 0.08, y: 0.10),
                endPoint: UnitPoint(x: 0.90 - horizontalTilt * 0.08, y: 0.92)
            )
            .blendMode(.softLight)
            .opacity(hologramStrength)

            RadialGradient(
                colors: [
                    Color.white.opacity(0.04 + hologramStrength * 0.14),
                    .clear
                ],
                center: UnitPoint(x: 0.50 + horizontalTilt * 0.18, y: 0.46),
                startRadius: 4,
                endRadius: Config.verificationPhotoSize * 0.72
            )
            .blendMode(.screen)
            .opacity(hologramStrength)
        }
    }

    /// Shown while the portrait is loading or if it fails: a soft frosted
    /// rectangle so the window never reads as empty.
    private var verificationFallback: some View {
        LinearGradient(
            colors: [
                Color.white.opacity(0.28),
                Color.white.opacity(0.14)
            ],
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
        .overlay {
            RoundedRectangle(cornerRadius: Config.verificationPhotoCornerRadius, style: .continuous)
                .fill(Color.black.opacity(0.04))
        }
    }
}


// MARK: - Foil overlay

/// The iridescent sheen drawn over the whole verification face. A blurred
/// diagonal gradient plus a radial highlight, both anchored to tilt so the
/// shine slides as the card moves. Screen-blended and non-interactive.
private struct FoilOverlay: View {
    let tilt: CGSize
    let size: CGSize

    var body: some View {
        ZStack {
            LinearGradient(
                colors: [
                    Color.white.opacity(0.02),
                    Config.foilBlue.opacity(0.08),
                    Config.foilViolet.opacity(0.10),
                    Config.foilGold.opacity(0.08),
                    Color.white.opacity(0.04)
                ],
                startPoint: UnitPoint(x: 0.08 + tilt.width * 0.24, y: 0.12 + tilt.height * 0.18),
                endPoint: UnitPoint(x: 0.92 - tilt.width * 0.24, y: 0.90 - tilt.height * 0.18)
            )
            .blur(radius: 14)

            RadialGradient(
                colors: [
                    Color.white.opacity(0.12),
                    Config.foilGold.opacity(0.08),
                    .clear
                ],
                center: UnitPoint(x: 0.45 + tilt.width * 0.20, y: 0.38 + tilt.height * 0.14),
                startRadius: 8,
                endRadius: max(size.width, size.height) * 0.55
            )
            .blendMode(.screen)
        }
        .allowsHitTesting(false)
    }
}


// MARK: - Profile details

/// Content below the profile face: the "about me" fact rows, the bio
/// paragraph, a divider, and one sample listing.
private struct ProfileDetailsView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 18) {
            ForEach(Config.facts) { fact in
                HStack(alignment: .center, spacing: 12) {
                    Image(systemName: fact.icon)
                        .font(.system(size: 18, weight: .regular))
                        .foregroundStyle(Config.ink)
                        .frame(width: 22)

                    if fact.underlined {
                        Text(fact.text)
                            .font(.system(size: Config.factSize, weight: .regular))
                            .foregroundStyle(Config.ink)
                            .underline()
                    } else {
                        Text(fact.text)
                            .font(.system(size: Config.factSize, weight: .regular))
                            .foregroundStyle(Config.ink)
                            .fixedSize(horizontal: false, vertical: true)
                    }
                }
            }

            Text(Config.profileBody)
                .font(.system(size: Config.bodySize, weight: .regular))
                .foregroundStyle(Config.ink)
                .lineSpacing(3)
                .padding(.top, 8)

            Rectangle()
                .fill(Config.divider)
                .frame(height: 1)
                .padding(.top, 6)

            Text(Config.listingsTitle)
                .font(.system(size: Config.listingsTitleSize, weight: .semibold))
                .foregroundStyle(Config.ink)
                .padding(.top, 4)

            HStack(spacing: 12) {
                RemoteImage(photoID: Config.listingPhotoID, style: .listing)
                    .frame(width: Config.listingImageWidth, height: Config.listingImageHeight)
                    .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))

                VStack(alignment: .leading, spacing: 6) {
                    Text(Config.listingName)
                        .font(.system(size: Config.listingNameSize, weight: .semibold))
                        .foregroundStyle(Config.ink)

                    Text(Config.listingBody)
                        .font(.system(size: Config.listingBodySize, weight: .regular))
                        .foregroundStyle(Config.mutedInk)
                        .lineSpacing(2)
                }
            }
        }
    }
}


// MARK: - Verification details

/// Explainer paragraph shown below the card after the flip, ending in an
/// underlined "Learn more" link.
private struct VerificationDetailsView: View {
    var body: some View {
        // Combine the plain body with the underlined link using Text string
        // interpolation, the supported replacement for the deprecated
        // `Text + Text` and for AttributedString.underlineStyle (whose key
        // path is not concurrency-safe under Swift 6).
        let lead = Text(Config.verificationBody + " ")
        let link = Text(Config.learnMore).underline()

        Text("\(lead)\(link)")
            .font(.system(size: Config.factSize, weight: .regular))
            .foregroundStyle(Config.ink)
            .lineSpacing(Config.verificationBodyLineSpacing)
            .fixedSize(horizontal: false, vertical: true)
            .padding(.trailing, Config.verificationBodyTrailingInset)
    }
}


// MARK: - Verification pattern

/// The field of tiny Airbnb belo logos printed across the verification
/// face, arranged as four nested spirals. With tilt the field shifts from
/// dark ink (tilted left) to light ink (tilted right), like a printed
/// security pattern catching the light.
private struct VerificationPattern: View {
    let tilt: CGSize

    /// The printed field reads a touch low of true center once the card
    /// tilts in perspective; used for the highlight that tracks the spiral.
    private let spiralCenter = CGPoint(x: 0.50, y: 0.54)

    /// Four spiral arms from widest/densest to tightest/faintest. Each one
    /// shares the same center and winds the same direction; they differ in
    /// radius, glyph count, glyph scale, and opacity.
    private let spiralSpecs: [VerificationSpiralSpec] = [
        .init(center: CGPoint(x: 0.50, y: 0.54), turns: 2.9, maxRadius: 0.50, count: 58, rotation: -.pi * 0.02, sizeScale: 1.00, opacity: 1.00, clockwise: true),
        .init(center: CGPoint(x: 0.50, y: 0.54), turns: 2.55, maxRadius: 0.38, count: 46, rotation: .pi * 0.06, sizeScale: 0.82, opacity: 0.86, clockwise: true),
        .init(center: CGPoint(x: 0.50, y: 0.54), turns: 2.15, maxRadius: 0.28, count: 34, rotation: .pi * 0.12, sizeScale: 0.66, opacity: 0.72, clockwise: true),
        .init(center: CGPoint(x: 0.50, y: 0.54), turns: 1.75, maxRadius: 0.20, count: 24, rotation: .pi * 0.18, sizeScale: 0.54, opacity: 0.58, clockwise: true)
    ]

    var body: some View {
        GeometryReader { proxy in
            let size = proxy.size
            let horizontalTilt = tilt.width.clamped(to: -1...1)
            // A small dead zone keeps the pattern neutral when the card is
            // near level, so it only "inks up" once you tilt with intent.
            let deadZone: CGFloat = 0.14
            let leftStrength = max(0, -horizontalTilt - deadZone) / (1 - deadZone)
            let rightStrength = max(0, horizontalTilt - deadZone) / (1 - deadZone)
            let spiralStrength = max(leftStrength, rightStrength)
            // Tilt left inks the logos dark (multiply), tilt right inks them
            // light (screen); both are drawn so the field flips polarity.
            let leftInk = Color.black.opacity(leftStrength * 0.62)
            let rightInk = Color.white.opacity(rightStrength * 0.64)

            ZStack {
                spiralLayer(specs: spiralSpecs, size: size, horizontalTilt: horizontalTilt, strokeStyle: leftInk)
                    .blendMode(.multiply)

                spiralLayer(specs: spiralSpecs, size: size, horizontalTilt: horizontalTilt, strokeStyle: rightInk)
                    .blendMode(.screen)

                RadialGradient(
                    colors: [
                        Color.white.opacity(spiralStrength * 0.10),
                        .clear
                    ],
                    center: UnitPoint(x: spiralCenter.x, y: spiralCenter.y),
                    startRadius: 10,
                    endRadius: size.width * 0.38
                )
                .blendMode(.screen)
            }
        }
    }

    /// Draws all four spiral arms in one ink color. Called twice (dark and
    /// light) so the field can carry both polarities at once.
    @ViewBuilder
    private func spiralLayer<StrokeStyle: ShapeStyle>(
        specs: [VerificationSpiralSpec],
        size: CGSize,
        horizontalTilt: CGFloat,
        strokeStyle: StrokeStyle
    ) -> some View {
        ForEach(Array(specs.enumerated()), id: \.offset) { _, spec in
            SpiralLogoField(
                spec: spec,
                canvasSize: size,
                strokeStyle: strokeStyle,
                tilt: horizontalTilt,
                minWidth: Config.verificationSpiralMinSize * spec.sizeScale,
                maxWidth: Config.verificationSpiralMaxSize * spec.sizeScale
            )
            .opacity(spec.opacity)
        }
    }
}

/// One spiral arm of belo logos. Places `spec.count` glyphs along an
/// Archimedean-style spiral, shrinking them from `maxWidth` at the center
/// to `minWidth` at the outer end and rotating each to face along the arm.
private struct SpiralLogoField<StrokeStyle: ShapeStyle>: View {
    let spec: VerificationSpiralSpec
    let canvasSize: CGSize
    let strokeStyle: StrokeStyle
    let tilt: CGFloat
    let minWidth: CGFloat
    let maxWidth: CGFloat

    var body: some View {
        ZStack {
            ForEach(0..<spec.count, id: \.self) { index in
                let progress = CGFloat(index) / CGFloat(max(spec.count - 1, 1))
                let spiralProgress = 1 - progress
                let angleDirection: CGFloat = spec.clockwise ? 1 : -1
                let angle = spec.rotation + angleDirection * progress * spec.turns * .pi * 2
                let radius = canvasSize.width * spec.maxRadius * pow(spiralProgress, 0.86)
                let center = CGPoint(
                    x: canvasSize.width * spec.center.x,
                    y: canvasSize.height * spec.center.y
                )
                let x = center.x + cos(angle) * radius
                let y = center.y + sin(angle) * radius
                let width = maxWidth - progress * (maxWidth - minWidth)
                let height = width * 1.34
                let rotation = Angle(radians: Double(angle + .pi / 2 + tilt * 0.08))

                AirbnbBeloShape()
                    .stroke(strokeStyle, lineWidth: 1.05)
                    .frame(width: width, height: height)
                    .opacity(0.90 - progress * 0.26)
                    .rotationEffect(rotation)
                    .position(x: x, y: y)
            }
        }
    }
}

/// Parameters for one spiral arm in the logo field.
private struct VerificationSpiralSpec {
    /// Arm center in unit coordinates (0...1 of the canvas).
    let center: CGPoint
    /// Number of full turns from center to outer end.
    let turns: CGFloat
    /// Outer radius as a fraction of the canvas width.
    let maxRadius: CGFloat
    /// How many glyphs to place along the arm.
    let count: Int
    /// Starting angle offset, in radians, so the arms do not all align.
    let rotation: CGFloat
    /// Per-arm glyph size multiplier (inner arms run smaller).
    let sizeScale: CGFloat
    /// Per-arm opacity (inner arms run fainter).
    let opacity: CGFloat
    /// Winding direction.
    let clockwise: Bool
}

/// The Airbnb "belo" mark as a stroked `Shape`: the looping outline plus
/// the small inner pin, drawn in a unit rect so it scales to any size.
private struct AirbnbBeloShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        let width = rect.width
        let height = rect.height

        func point(_ x: CGFloat, _ y: CGFloat) -> CGPoint {
            CGPoint(x: rect.minX + x * width, y: rect.minY + y * height)
        }

        path.move(to: point(0.50, 0.95))
        path.addCurve(
            to: point(0.24, 0.43),
            control1: point(0.32, 0.82),
            control2: point(0.18, 0.63)
        )
        path.addCurve(
            to: point(0.50, 0.10),
            control1: point(0.24, 0.22),
            control2: point(0.40, 0.07)
        )
        path.addCurve(
            to: point(0.76, 0.43),
            control1: point(0.60, 0.07),
            control2: point(0.76, 0.22)
        )
        path.addCurve(
            to: point(0.50, 0.95),
            control1: point(0.82, 0.63),
            control2: point(0.68, 0.82)
        )

        path.move(to: point(0.50, 0.61))
        path.addCurve(
            to: point(0.39, 0.49),
            control1: point(0.45, 0.61),
            control2: point(0.39, 0.56)
        )
        path.addCurve(
            to: point(0.50, 0.33),
            control1: point(0.39, 0.41),
            control2: point(0.44, 0.33)
        )
        path.addCurve(
            to: point(0.61, 0.49),
            control1: point(0.56, 0.33),
            control2: point(0.61, 0.41)
        )
        path.addCurve(
            to: point(0.50, 0.61),
            control1: point(0.61, 0.56),
            control2: point(0.55, 0.61)
        )

        return path
    }
}


// MARK: - Device tilt model

/// Publishes a normalized tilt (each axis in -1...1) from Core Motion.
/// `isUsingDeviceMotion` stays false until the first real sample arrives,
/// which is how the view knows to fall back to drag-preview tilt in
/// Simulator. All published changes are hopped back to the main actor.
@MainActor
private final class DeviceTiltModel: ObservableObject {
    @Published private(set) var tilt: CGSize = .zero
    @Published private(set) var isUsingDeviceMotion = false

    private let motionManager = CMMotionManager()
    private let motionQueue: OperationQueue = {
        let queue = OperationQueue()
        queue.name = "AirbnbIdentityVerificationCardFlipScanSnippet.DeviceMotion"
        return queue
    }()

    /// Begins motion updates if a sensor is present. No-op on Simulator,
    /// which leaves `isUsingDeviceMotion` false so the drag fallback runs.
    func start() {
        guard motionManager.isDeviceMotionAvailable else { return }

        // Prefer the drift-corrected frame when available for a steadier
        // resting attitude.
        let frames = CMMotionManager.availableAttitudeReferenceFrames()
        let referenceFrame: CMAttitudeReferenceFrame

        if frames.contains(.xArbitraryCorrectedZVertical) {
            referenceFrame = .xArbitraryCorrectedZVertical
        } else {
            referenceFrame = .xArbitraryZVertical
        }

        motionManager.deviceMotionUpdateInterval = 1 / 60
        motionManager.startDeviceMotionUpdates(using: referenceFrame, to: motionQueue) { [weak self] motion, _ in
            guard let self, let motion else { return }

            // Normalize to -1...1 over a comfortable wrist range: +-45deg of
            // roll and +-36deg of pitch reach full tilt.
            let roll = (motion.attitude.roll / (.pi / 4)).clamped(to: -1...1)
            let pitch = (motion.attitude.pitch / (.pi / 5)).clamped(to: -1...1)

            Task { @MainActor in
                self.tilt = CGSize(width: roll, height: pitch)
                self.isUsingDeviceMotion = true
            }
        }
    }

    /// Stops updates and resets to a neutral, sensorless state.
    func stop() {
        motionManager.stopDeviceMotionUpdates()
        isUsingDeviceMotion = false
        tilt = .zero
    }
}


// MARK: - Remote image

/// A cached remote photo filling its frame, with a style-specific
/// placeholder shown while loading or on failure so a tile is never blank.
private struct RemoteImage: View {
    let photoID: String
    let style: RemoteImageStyle

    var body: some View {
        CachedRemotePhoto(photoID: photoID) { image in
            image
                .resizable()
                .scaledToFill()
        } fallback: {
            fallbackView
        }
    }

    /// A simple gradient skeleton: a head-and-shoulders silhouette for the
    /// portrait, a card-like block layout for the listing.
    private var fallbackView: some View {
        ZStack {
            switch style {
            case .portrait:
                LinearGradient(
                    colors: [Color(red: 0.83, green: 0.89, blue: 0.97), Color(red: 0.62, green: 0.74, blue: 0.88)],
                    startPoint: .top,
                    endPoint: .bottom
                )

                VStack(spacing: 0) {
                    Circle()
                        .fill(Color.white.opacity(0.70))
                        .frame(width: 34, height: 34)

                    RoundedRectangle(cornerRadius: 22, style: .continuous)
                        .fill(Color.white.opacity(0.62))
                        .frame(width: 62, height: 44)
                        .offset(y: -6)
                }
                .offset(y: 10)

            case .listing:
                LinearGradient(
                    colors: [Color(red: 0.85, green: 0.92, blue: 0.82), Color(red: 0.70, green: 0.80, blue: 0.66)],
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )

                VStack(spacing: 10) {
                    RoundedRectangle(cornerRadius: 8, style: .continuous)
                        .fill(Color.white.opacity(0.78))
                        .frame(height: 28)
                        .padding(.horizontal, 16)

                    HStack(spacing: 10) {
                        RoundedRectangle(cornerRadius: 10, style: .continuous)
                            .fill(Color.white.opacity(0.74))

                        RoundedRectangle(cornerRadius: 10, style: .continuous)
                            .fill(Color.white.opacity(0.54))
                    }
                    .frame(height: 32)
                    .padding(.horizontal, 16)
                }
            }
        }
    }
}

/// Picks which placeholder skeleton `RemoteImage` draws.
private enum RemoteImageStyle {
    case portrait
    case listing
}

/// Renders a remote photo once it has loaded, otherwise its fallback.
/// Backed by `RemoteImageLoader`, so the image survives view recomposition
/// (every tilt frame) without dropping back to a loading state.
private struct CachedRemotePhoto<Content: View, Fallback: View>: View {
    @StateObject private var loader: RemoteImageLoader

    private let content: (Image) -> Content
    private let fallback: Fallback

    init(
        photoID: String,
        @ViewBuilder content: @escaping (Image) -> Content,
        @ViewBuilder fallback: () -> Fallback
    ) {
        _loader = StateObject(wrappedValue: RemoteImageLoader(urlString: Self.unsplash(photoID)))
        self.content = content
        self.fallback = fallback()
    }

    var body: some View {
        Group {
            if let image = loader.image {
                content(Image(uiImage: image))
            } else {
                fallback
            }
        }
    }

    /// Shared Unsplash URL builder so the cached loader and the rest of
    /// the file resolve the exact same remote asset.
    private static func unsplash(_ id: String) -> String {
        "https://images.unsplash.com/photo-\(id)?w=800&h=800&fit=crop&crop=faces&auto=format&q=80"
    }
}

/// Loads one image URL and publishes the result, backed by a process-wide
/// `NSCache`. A second view asking for the same URL gets the cached image
/// immediately, so flipping and tilting never re-fetch the portrait.
@MainActor
private final class RemoteImageLoader: ObservableObject {
    private static let cache = NSCache<NSString, UIImage>()

    @Published private(set) var image: UIImage?

    private let urlString: String
    private var task: Task<Void, Never>?

    init(urlString: String) {
        self.urlString = urlString

        if let cached = Self.cache.object(forKey: urlString as NSString) {
            image = cached
        } else {
            load()
        }
    }

    deinit {
        task?.cancel()
    }

    /// Fetches the image off the main actor and stores it in the shared
    /// cache before publishing. Skips work if the task was cancelled.
    private func load() {
        guard let url = URL(string: urlString) else { return }

        task = Task {
            guard let (data, _) = try? await URLSession.shared.data(from: url),
                  !Task.isCancelled,
                  let image = UIImage(data: data) else { return }

            Self.cache.setObject(image, forKey: urlString as NSString)
            self.image = image
        }
    }
}


// MARK: - Helpers

private extension CGFloat {
    /// Constrains the value to `range`. Used to keep tilt and gradient
    /// positions inside their expected bounds.
    func clamped(to range: ClosedRange<CGFloat>) -> CGFloat {
        Swift.min(Swift.max(self, range.lowerBound), range.upperBound)
    }
}

#Preview {
    AirbnbIdentityVerificationCardFlipScanSnippet()
}