import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mysql_client/mysql_client.dart';
import 'package:persistent_bottom_nav_bar_v2/persistent_bottom_nav_bar_v2.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MessagePage extends StatefulWidget {
  final String email; // 接收來自上個頁面的 email

  MessagePage({required this.email});

  @override
  _MessagePageState createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage> {
  late WebViewController _webViewController;
  late int _cameraId = 0;

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Container(
                height: 100,
                // APPBar height
                color: Color(0xFFF5E3C3),
                width: double.infinity,
                padding: EdgeInsets.all(10.0),
                child: Stack(children: [
                  Container(
                    padding: EdgeInsets.only(
                      left: MediaQuery.of(context).size.width,
                      top: MediaQuery.of(context).size.height / 2,
                    ),
                    child: Icon(Icons.settings, size: 48, color: Colors.orange),
                  ),
                  Center(
                    child: Text(
                      '全方位照護守護者',
                      style: TextStyle(fontSize: 24, height: 5),
                    ),
                  ),
                ])),
            Container(
              color: Color(0xFFFFF0E0),
              margin: EdgeInsets.only(top: 5),
              padding: EdgeInsets.all(16),
              child: Column(
                children: [
                  Container(
                    height: 240,
                    width: double.infinity,
                    child: Stack(
                      children: [
                        WebViewWidget(
                          controller: _webViewController
                            ..setJavaScriptMode(JavaScriptMode.unrestricted)
                            ..setNavigationDelegate(
                              NavigationDelegate(
                                onProgress: (int progress) {
                                  // Update loading bar.
                                },
                                onPageStarted: (String url) {},
                                onPageFinished: (String url) {},
                                onHttpError: (HttpResponseError error) {
                                  print("httpError");
                                },
                                onWebResourceError: (WebResourceError error) {
                                  print("httpResourceError");
                                  print(error.description);
                                },
                                onNavigationRequest: (NavigationRequest request) {
                                  if (request.url.startsWith('http://203.64.84.154:8088/video_feed')) {
                                    return NavigationDecision.prevent;
                                  }
                                  return NavigationDecision.navigate;
                                },
                              ),
                            )
                            ..loadRequest(Uri.parse('http://203.64.84.154:8088/0')),
                        ),
                        Align(
                          alignment: Alignment.bottomRight,
                          child: Padding(
                            padding: EdgeInsets.all(16.0),
                            // Adjust padding as needed
                            child: SizedBox(
                              width: 45.0, // Set custom width
                              height: 45.0, // Set custom height
                              child: FloatingActionButton(
                                onPressed: () {
                                  // Handle zoom-in action
                                  pushWithoutNavBar(
                                      context,
                                      MaterialPageRoute(
                                        builder: (context) => WebViewPage(_cameraId),
                                      ));
                                },
                                child: Icon(Icons.zoom_in),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Text(
                    '即時畫面',
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
            Expanded(
              child: GridView.count(
                crossAxisCount: 2,
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                padding: EdgeInsets.all(16),
                children: [
                  _buildGridItem(Icons.monitor_outlined, '畫面1', 0, context),
                  _buildGridItem(Icons.monitor_outlined, '畫面2', 1, context),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildGridItem(IconData icon, String label, int camera_id, BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      color: Colors.white,
      child: InkWell(
        onTap: () {
          _cameraId = camera_id;
          _webViewController.loadRequest(Uri.parse('http://203.64.84.154:8088/$camera_id'));
        },
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(icon, size: 48, color: Colors.orange),
              SizedBox(height: 8),
              Text(label, style: TextStyle(fontSize: 16)),
            ],
          ),
        ),
      ),
    );
  }
}

class WebViewPage extends StatefulWidget {
  final int _cameraId;

  WebViewPage(this._cameraId);

  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late WebViewController _webViewController;

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
    _webViewController = WebViewController();
  }

  @override
  void dispose() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: [
        WebViewWidget(
          controller: _webViewController
            ..setJavaScriptMode(JavaScriptMode.unrestricted)
            ..setNavigationDelegate(
              NavigationDelegate(
                onProgress: (int progress) {
                  // Update loading bar.
                },
                onPageStarted: (String url) {},
                onPageFinished: (String url) {},
                onHttpError: (HttpResponseError error) {
                  print("httpError");
                },
                onWebResourceError: (WebResourceError error) {
                  print("httpResourceError");
                  print(error.description);
                },
                onNavigationRequest: (NavigationRequest request) {
                  if (request.url.startsWith('http://203.64.84.154:8088/video_feed')) {
                    return NavigationDecision.prevent;
                  }
                  return NavigationDecision.navigate;
                },
              ),
            )
            ..loadRequest(Uri.parse('http://203.64.84.154:8088/${widget._cameraId}')),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: SizedBox(
              width: 45.0,
              height: 45.0,
              child: FloatingActionButton(
                backgroundColor: Color(0xFFF5E3C3),
                onPressed: () {
                  SystemChrome.setPreferredOrientations([
                    DeviceOrientation.portraitUp,
                    DeviceOrientation.portraitDown,
                  ]);
                  Navigator.pop(context);
                },
                child: Icon(Icons.arrow_back_ios),
              ),
            ),
          ),
        )
      ],
    ));
  }
}