import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
import 'dart:ui_web' as ui;
import 'package:web/web.dart' as html;

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SemanticsBinding.instance.ensureSemantics();
  runApp(MyApp());
}

// Represents the two states of our application's navigation.
class BugReproRoutePath {
  final bool isWebView;

  BugReproRoutePath.home() : isWebView = false;
  BugReproRoutePath.web() : isWebView = true;
}

// Parses route information (URL) into our custom route path class.
class BugReproRouteInformationParser
    extends RouteInformationParser<BugReproRoutePath> {
  @override
  Future<BugReproRoutePath> parseRouteInformation(
    RouteInformation routeInformation,
  ) async {
    final uri = Uri.parse(routeInformation.uri.path);
    if (uri.pathSegments.isNotEmpty && uri.pathSegments.first == 'web') {
      return BugReproRoutePath.web();
    } else {
      return BugReproRoutePath.home();
    }
  }

  @override
  RouteInformation? restoreRouteInformation(BugReproRoutePath configuration) {
    if (configuration.isWebView) {
      return RouteInformation(uri: Uri.parse('/web'));
    } else {
      return RouteInformation(uri: Uri.parse('/'));
    }
  }
}

// Manages the navigator's state and pages based on the current route path.
class BugReproRouterDelegate extends RouterDelegate<BugReproRoutePath>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<BugReproRoutePath> {
  @override
  final GlobalKey<NavigatorState> navigatorKey;

  BugReproRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>();

  BugReproRoutePath _currentPath = BugReproRoutePath.home();

  @override
  BugReproRoutePath get currentConfiguration => _currentPath;

  @override
  Future<void> setNewRoutePath(BugReproRoutePath configuration) async {
    _currentPath = configuration;
  }

  void showWebView() {
    if (!_currentPath.isWebView) {
      _currentPath = BugReproRoutePath.web();
      notifyListeners();
    }
  }

  void showMain() {
    if (_currentPath.isWebView) {
      _currentPath = BugReproRoutePath.home();
      notifyListeners();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: [
        MaterialPage(
          key: const ValueKey('MainInstructionsPage'),
          child: MainInstructionsPage(
            onNavigateToWeb: showWebView,
            onShowDialog: _showBugDialog,
          ),
        ),
        if (_currentPath.isWebView)
          MaterialPage(
            key: const ValueKey('WebViewPage'),
            child: WebViewPage(onClose: showMain),
          ),
      ],
      onPopPage: (route, result) {
        if (!route.didPop(result)) {
          return false;
        }
        // This handles the browser back button or AppBar back button on WebViewPage
        if (_currentPath.isWebView) {
          showMain();
        }
        return true;
      },
    );
  }

  // Helper to show the dialog using the navigator's context.
  void _showBugDialog() {
    showDialog(
      context: navigatorKey.currentContext!,
      barrierDismissible: true,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Dismiss Me'),
          content: const Text('Click outside this box to dismiss.'),
          actions: <Widget>[
            TextButton(
              child: const Text('Close & Go to Web'),
              onPressed: () {
                Navigator.of(context).pop();
                showWebView();
              },
            ),
          ],
        );
      },
    );
  }
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late BugReproRouterDelegate _routerDelegate;
  late BugReproRouteInformationParser _routeInformationParser;

  @override
  void initState() {
    super.initState();
    _routerDelegate = BugReproRouterDelegate();
    _routeInformationParser = BugReproRouteInformationParser();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter IFrame Bug Demo',
      routerDelegate: _routerDelegate,
      routeInformationParser: _routeInformationParser,
    );
  }
}

/// The page containing instructions and the dialog trigger.
class MainInstructionsPage extends StatelessWidget {
  final VoidCallback onNavigateToWeb;
  final VoidCallback onShowDialog;

  const MainInstructionsPage({
    super.key,
    required this.onNavigateToWeb,
    required this.onShowDialog,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('IFrame Bug - Main Page'),
        backgroundColor: Colors.blue.shade800,
      ),
      body: Container(
        alignment: Alignment.center,
        color: Colors.grey.shade200,
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'Steps to Reproduce:',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
            ),
            const SizedBox(height: 12),
            const Text('1. Click "Go to Web View" to open the web page.'),
            const SizedBox(height: 4),
            const Text(
              '2. Interact with the website, then press the back button in the app bar.',
            ),
            const SizedBox(height: 4),
            const Text('3. Back on this page, click "Show Dialog".'),
            const SizedBox(height: 4),
            const Text(
              '4. CRITICAL: Click the grayed-out barrier to dismiss the dialog.',
            ),
            const SizedBox(height: 4),
            const Text(
              '5. Click "Go to Web View" again. The website will now be unresponsive.',
            ),
            const SizedBox(height: 24),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 24,
                      vertical: 12,
                    ),
                  ),
                  onPressed: onNavigateToWeb,
                  child: const Text('Go to Web View'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 24,
                      vertical: 12,
                    ),
                    backgroundColor: Colors.red.shade400,
                  ),
                  onPressed: onShowDialog,
                  child: const Text('Show Dialog'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

/// A standalone page for the web view.
class WebViewPage extends StatefulWidget {
  final VoidCallback onClose;
  const WebViewPage({super.key, required this.onClose});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final html.HTMLIFrameElement _iframeElement;
  late final String _viewType;

  @override
  void initState() {
    super.initState();
    _viewType = 'iframeElement-${DateTime.now().millisecondsSinceEpoch}';
    _iframeElement =
        html.HTMLIFrameElement()
          ..style.border = 'none'
          ..style.width = '100%'
          ..style.height = '100%'
          ..src = 'https://flutter.dev/';

    ui.platformViewRegistry.registerViewFactory(
      _viewType,
      (int viewId) => _iframeElement,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Web View'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: widget.onClose,
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(child: HtmlElementView(viewType: _viewType)),
      ),
    );
  }
}