Immersive Website Environments in visionOS Safari

import SwiftUI
import WebKit

// MARK: - Message names bridged from JavaScript
struct JSMessage {
    static let immersiveChanged = "immersiveChanged"
    static let immersiveError   = "immersiveError"
}

// MARK: - SwiftUI wrapper
struct ImmersiveWebView: UIViewRepresentable {
    @Binding var isImmersive: Bool

    func makeCoordinator() -> Coordinator {
        Coordinator(isImmersive: $isImmersive)
    }

    func makeUIView(context: Context) -> WKWebView {
        let config = WKWebViewConfiguration()

        // Register native message handlers so JS can notify Swift
        config.userContentController.add(
            context.coordinator,
            name: JSMessage.immersiveChanged
        )
        config.userContentController.add(
            context.coordinator,
            name: JSMessage.immersiveError
        )

        // Inject JS that wires up the immersive API and posts messages back
        let script = WKUserScript(
            source: theaterScript,
            injectionTime: .atDocumentEnd,
            forMainFrameOnly: true
        )
        config.userContentController.addUserScript(script)

        let webView = WKWebView(frame: .zero, configuration: config)
        webView.scrollView.isScrollEnabled = true

        // Load the locally served theater-seat page
        if let url = URL(string: "https://localhost:8080/theater") {
            webView.load(URLRequest(url: url))
        }
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {}

    // MARK: - Injected JavaScript (bridging requestImmersive → WKScriptMessage)
    private var theaterScript: String {
        """
        (function() {
            // Check availability before showing the immersive button
            const supported = document.xrEnvironment?.isImmersiveSupported ?? false;
            const btn = document.getElementById('enter-btn');
            if (btn) btn.style.display = supported ? 'block' : 'none';

            const model = document.getElementById('theater-model');
            if (!model) return;

            // Listen for immersive state changes and relay to Swift
            model.addEventListener('immersivechange', () => {
                const immersive = document.xrEnvironment?.isImmersive ?? false;
                window.webkit.messageHandlers.immersiveChanged.postMessage({ isImmersive: immersive });
            });

            model.addEventListener('immersiveerror', (e) => {
                window.webkit.messageHandlers.immersiveError.postMessage({ error: e.message });
            });

            if (btn) {
                btn.addEventListener('click', async () => {
                    try {
                        await model.requestImmersive();
                    } catch(err) {
                        window.webkit.messageHandlers.immersiveError.postMessage({ error: err.message });
                    }
                });
            }
        })();
        """
    }

    // MARK: - Coordinator (WKScriptMessageHandler)
    final class Coordinator: NSObject, WKScriptMessageHandler {
        @Binding var isImmersive: Bool

        init(isImmersive: Binding<Bool>) {
            _isImmersive = isImmersive
        }

        func userContentController(
            _ userContentController: WKUserContentController,
            didReceive message: WKScriptMessage
        ) {
            guard let body = message.body as? [String: Any] else { return }
            switch message.name {
            case JSMessage.immersiveChanged:
                if let value = body["isImmersive"] as? Bool {
                    DispatchQueue.main.async { self.isImmersive = value }
                }
            case JSMessage.immersiveError:
                let err = body["error"] as? String ?? "Unknown error"
                print("[ImmersiveWeb] Error: \(err)")
            default:
                break
            }
        }
    }
}

// MARK: - Root view
struct ContentView: View {
    @State private var isImmersive = false

    var body: some View {
        ZStack(alignment: .bottom) {
            ImmersiveWebView(isImmersive: $isImmersive)
                .ignoresSafeArea()

            if isImmersive {
                Text("You are inside the theater — use the Digital Crown to exit")
                    .padding()
                    .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 12))
                    .padding(.bottom, 40)
                    .transition(.move(edge: .bottom).combined(with: .opacity))
            }
        }
        .animation(.easeInOut, value: isImmersive)
    }
}