import 'package:SEFER/constant/info.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:video_player/video_player.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

import '../../../../controller/home/captin/help/video_controller.dart';

import 'package:flutter/cupertino.dart';

class VideoListPage extends StatelessWidget {
  final VideoController videoController = Get.put(VideoController());

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Videos Tutorials'.tr),
      ),
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(
              horizontal: 16.0,
              vertical: 10.0), // Outer padding around the list
          child: GetBuilder<VideoController>(
            builder: (videoController) {
              return ListView.builder(
                itemCount: videoController.videos.length,
                itemBuilder: (context, index) {
                  final video = videoController.videos[index];
                  return Container(
                    margin: const EdgeInsets.symmetric(
                        vertical: 8.0), // Spacing between each card
                    decoration: BoxDecoration(
                      color: CupertinoColors.white,
                      borderRadius:
                          BorderRadius.circular(12.0), // Rounded corners
                      boxShadow: [
                        BoxShadow(
                          color: CupertinoColors.systemGrey.withOpacity(0.3),
                          offset: const Offset(
                              0, 4), // Offset for shadow to appear below
                          blurRadius: 10.0, // Blur for softer shadow effect
                        ),
                      ],
                      border: Border.all(
                        color: CupertinoColors.systemGrey4,
                        width: 0.5, // Subtle border for a refined iOS-like look
                      ),
                    ),
                    child: CupertinoListTile(
                      title: Padding(
                        padding: const EdgeInsets.only(bottom: 4.0),
                        child: Text(
                          video['title'],
                          style: const TextStyle(
                            color: CupertinoColors.black,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      subtitle: Text(
                        video['description'],
                        style: const TextStyle(
                          color: CupertinoColors.systemGrey,
                        ),
                      ),
                      onTap: () {
                        // Navigate to video player page (iOS-style)
                        Get.to(() => VideoPlayerPage1(videoUrl: video['url']));
                      },
                    ),
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

class VideoPlayerPage extends StatelessWidget {
  final String videoUrl;

  VideoPlayerPage({required this.videoUrl});

  final VideoController videoController = Get.put(VideoController());

  @override
  Widget build(BuildContext context) {
    // Initialize the video when the page is loaded
    videoController.initializeVideo(videoUrl);

    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text(AppInformation.appName),
      ),
      child: SafeArea(
        child: Center(
          child: GetBuilder<VideoController>(
            builder: (controller) {
              if (!controller.videoPlayerController.value.isInitialized) {
                return const CircularProgressIndicator(); // Show loading indicator while initializing
              }

              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // Video player widget
                  AspectRatio(
                    aspectRatio:
                        controller.videoPlayerController.value.aspectRatio,
                    // child: VideoPlayer(controller.videoPlayerController),
                    child: VideoPlayer(controller.videoPlayerController),
                  ),
                  const SizedBox(height: 20),

                  // Play/pause button
                  CupertinoButton(
                    onPressed: () {
                      if (controller.videoPlayerController.value.isPlaying) {
                        controller.pause();
                      } else {
                        controller.play();
                      }
                    },
                    child: Icon(
                      controller.videoPlayerController.value.isPlaying
                          ? CupertinoIcons.pause
                          : CupertinoIcons.play_arrow,
                      color: CupertinoColors.activeBlue,
                      size: 30,
                    ),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

class VideoPlayerPage1 extends StatelessWidget {
  final String videoUrl;

  VideoPlayerPage1({required this.videoUrl});

  @override
  Widget build(BuildContext context) {
    // Extract the video ID from the URL
    String videoId = YoutubePlayer.convertUrlToId(videoUrl)!;

    // Create a YoutubePlayerController
    final YoutubePlayerController _controller = YoutubePlayerController(
      initialVideoId: videoId,
      flags: const YoutubePlayerFlags(
        autoPlay: true,
        loop: true,
        mute: false,
        captionLanguage: 'ar',
      ),
    );

    return Scaffold(
      body: Stack(
        children: [
          // Full-screen YouTube player
          Positioned.fill(
            child: YoutubePlayer(
              controller: _controller,
              showVideoProgressIndicator: true,
            ),
          ),
          // Overlay back button in the top left corner for exit
          Positioned(
            top: 40.0,
            left: 16.0,
            child: IconButton(
              icon: const Icon(Icons.arrow_back, color: Colors.white),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ),
        ],
      ),
    );
  }
}