import 'package:design_system/design_system.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

/// A wrapper widget that renders the application inside an iPhone-like frame
/// specifically for Flutter Web. On other platforms, it simply returns the child.
class WebMobileFrame extends StatelessWidget {
  const WebMobileFrame({
    super.key,
    required this.child,
    required this.logo,
    required this.appName,
  });

  final Widget child;
  final Widget logo;
  final String appName;

  @override
  Widget build(BuildContext context) {
    if (!kIsWeb) return child;

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
      home: _WebFrameContent(logo: logo, appName: appName, child: child),
    );
  }
}

class _WebFrameContent extends StatefulWidget {
  const _WebFrameContent({
    required this.child,
    required this.logo,
    required this.appName,
  });

  final Widget child;
  final Widget logo;
  final String appName;

  @override
  State<_WebFrameContent> createState() => _WebFrameContentState();
}

class _WebFrameContentState extends State<_WebFrameContent> {
  // ignore: unused_field
  Offset _cursorPosition = Offset.zero;
  // ignore: unused_field
  bool _isHovering = false;

  @override
  Widget build(BuildContext context) {
    // iPhone 14 Pro Max-ish dimensions (scaled for frame look)
    const double frameWidth = 390 * 1.2;
    const double frameHeight = 844 * 1.3;
    const double borderRadius = 54.0;
    const double borderThickness = 12.0;

    return Scaffold(
      backgroundColor: UiColors.foreground,
      body: MouseRegion(
        cursor: SystemMouseCursors.none,
        onHover: (PointerHoverEvent event) {
          setState(() {
            _cursorPosition = event.position;
            _isHovering = true;
          });
        },
        onExit: (_) => setState(() => _isHovering = false),
        child: Stack(
          children: <Widget>[
            // Logo and Title on the left (Web only)
            Positioned(
              left: 60,
              top: 0,
              bottom: 0,
              child: Center(
                child: Opacity(
                  opacity: 0.5,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      SizedBox(width: 140, child: widget.logo),
                      const SizedBox(height: 12),
                      Text(
                        widget.appName,
                        textAlign: TextAlign.left,
                        style: UiTypography.display1b.copyWith(
                          color: UiColors.white,
                        ),
                      ),
                      const SizedBox(height: 4),
                      Container(
                        height: 2,
                        width: 40,
                        color: UiColors.white.withOpacity(0.3),
                      ),
                    ],
                  ),
                ),
              ),
            ),

            // Frame and Content
            Center(
              child: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  // Scale down if screen is too small
                  final double scaleX = constraints.maxWidth / (frameWidth - 150);
                  final double scaleY = constraints.maxHeight / (frameHeight - 220);
                  final double scale = (scaleX < 1 || scaleY < 1)
                      ? (scaleX < scaleY ? scaleX : scaleY)
                      : 1.0;

                  return Transform.scale(
                    scale: scale,
                    child: Container(
                      width: frameWidth,
                      height: frameHeight,
                      decoration: BoxDecoration(
                        color: UiColors.black,
                        borderRadius: BorderRadius.circular(borderRadius),
                        boxShadow: <BoxShadow>[
                          BoxShadow(
                            color: UiColors.black.withOpacity(0.6),
                            blurRadius: 40,
                            spreadRadius: 10,
                          ),
                        ],
                        border: Border.all(
                          color: const Color(0xFF2C2C2C),
                          width: borderThickness,
                        ),
                      ),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(
                          borderRadius - borderThickness,
                        ),
                        child: Stack(
                          children: <Widget>[
                            // The actual app + status bar
                            Column(
                              children: <Widget>[
                                // Mock iOS Status Bar
                                Container(
                                  height: 48,
                                  padding: const EdgeInsets.symmetric(
                                    horizontal: 24,
                                  ),
                                  decoration: const BoxDecoration(
                                    color: UiColors.background,
                                    border: Border(
                                      bottom: BorderSide(
                                        color: UiColors.border,
                                        width: 0.5,
                                      ),
                                    ),
                                  ),
                                  child: const Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: <Widget>[
                                      // Time side
                                      SizedBox(
                                        width: 80,
                                        child: Text(
                                          '9:41 PM',
                                          textAlign: TextAlign.center,
                                          style: TextStyle(
                                            color: UiColors.black,
                                            fontWeight: FontWeight.w700,
                                            fontSize: 14,
                                            letterSpacing: -0.2,
                                          ),
                                        ),
                                      ),
                                      // Status Icons side
                                      SizedBox(
                                        width: 80,
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.end,
                                          spacing: 12,
                                          children: <Widget>[
                                            Icon(
                                              Icons.signal_cellular_alt,
                                              size: 14,
                                              color: UiColors.black,
                                            ),
                                            Icon(
                                              Icons.wifi,
                                              size: 14,
                                              color: UiColors.black,
                                            ),
                                            Icon(
                                              Icons.battery_full,
                                              size: 14,
                                              color: UiColors.black,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                // The main app content
                                Expanded(child: widget.child),
                              ],
                            ),

                            // Dynamic Island / Notch Mockup
                            Align(
                              alignment: Alignment.topCenter,
                              child: Container(
                                width: 120,
                                height: 35,
                                margin: const EdgeInsets.only(top: 10),
                                decoration: BoxDecoration(
                                  color: UiColors.black,
                                  borderRadius: BorderRadius.circular(20),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
            if (_isHovering)
              Positioned(
                left: _cursorPosition.dx - 15,
                top: _cursorPosition.dy - 15,
                child: IgnorePointer(
                  child: Container(
                    width: 30,
                    height: 30,
                    decoration: BoxDecoration(
                      color: UiColors.mutedForeground.withOpacity(0.3),
                      shape: BoxShape.circle,
                      border: Border.all(color: UiColors.white.withOpacity(0.7), width: 2),
                      boxShadow: <BoxShadow>[
                        BoxShadow(
                          color: UiColors.black.withOpacity(0.2),
                          blurRadius: 4,
                          spreadRadius: 1,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}
