import 'package:autos/core/widgets/hamburger_button.dart';
import 'package:autos/core/widgets/side_menu.dart';
import 'package:autos/presentation/providers/user_provider.dart';
import 'package:flutter/material.dart';
import 'package:autos/core/theme/app_typography.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class DashboardScreen extends ConsumerStatefulWidget {
  const DashboardScreen({super.key});

  @override
  ConsumerState<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends ConsumerState<DashboardScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  String selected = 'dashboard';

  @override
  Widget build(BuildContext context) {
    final user = ref.watch(userDetailsProvider);
    final double topPadding = MediaQuery.of(context).padding.top + 16;

    return Scaffold(
      key: _scaffoldKey,
      drawer: SideMenu(
        selected: selected,
        onItemSelected: (key) {
          setState(() => selected = key);
        },
      ),
      body: Stack(
        children: [
          // 🔵 TOP BAR — RESPONSIVE & CENTERED
          Positioned(
            top: topPadding,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Data4Autos",
                  style: AppTypo.h2.copyWith(fontWeight: FontWeight.w700),
                ),
              ],
            ),
          ),

          // 👇 MAIN CONTENT SECTION
          SingleChildScrollView(
            padding: EdgeInsets.fromLTRB(
              16,
              topPadding + 70, // pushes content below title
              16,
              20,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // --- Welcome Header ---
                const SizedBox(height: 8),

                Row(
                  children: [
                    Text("👋", style: const TextStyle(fontSize: 32)),
                    const SizedBox(width: 8),
                    Text("Hi,", style: AppTypo.h3),
                  ],
                ),

                const SizedBox(height: 6),

                Text(
                  "Manage your Turn14 & eBay integrations effortlessly in one platform.",
                  style: AppTypo.body.copyWith(
                    color: Colors.black54,
                    height: 1.4,
                  ),
                ),

                const SizedBox(height: 32),

                // ⭐ INFO CARDS — RESPONSIVE
                InfoCard(
                  emoji: "🎥",
                  heading: "How to Access Your Store",
                  content: "Watch the full walkthrough.",
                  url: "https://youtu.be/g6qV2cQ2Fhw",
                ),

                InfoCard(
                  emoji: "📊",
                  heading: "About Data4Autos",
                  content:
                      "Data4Autos is an advanced automation platform for eCommerce sellers. Connect, manage, and automate your Turn14 and eBay stores effortlessly — all in one place.",
                ),

                InfoCard(
                  emoji: "⚙️",
                  heading: "About Turn14 Integration",
                  content:
                      "Sync your Turn14 account to automatically import products, pricing, and stock updates. Keep your online store current without manual effort.",
                ),

                InfoCard(
                  emoji: "🛒",
                  heading: "About eBay Integration",
                  content:
                      "Simplify eBay listing management, stock updates, and order automation directly from your dashboard.",
                ),

                InfoCard(
                  emoji: "💰",
                  heading: "Pricing & Plans",
                  content:
                      "Explore flexible pricing options for every business size. Upgrade anytime to unlock advanced features.",
                ),

                user.when(
                  loading: () => const CircularProgressIndicator(),
                  error: (err, _) => Text("Error: $err"),
                  data: (user) {
                    if (user == null) return SizedBox();

                    return UserDetailsCard(
                      name: user.name,
                      email: user.email,
                      phone: user.phoneNumber ?? "-",
                      role: user.role,
                    );
                  },
                ),

                const SizedBox(height: 30),
              ],
            ),
          ),

          // 🍔 Common Hamburger Button
          HamburgerButton(scaffoldKey: _scaffoldKey),
        ],
      ),
    );
  }
}

// ------------------------------------------------------------
// ⭐ REUSABLE INFO CARD
// ------------------------------------------------------------
class InfoCard extends StatefulWidget {
  final String emoji;
  final String heading;
  final String content;
  final String? url;

  const InfoCard({
    super.key,
    required this.emoji,
    required this.heading,
    required this.content,
    this.url,
  });

  @override
  State<InfoCard> createState() => _InfoCardState();
}

class _InfoCardState extends State<InfoCard> {
  YoutubePlayerController? _controller;
  bool _showPlayer = false;

  @override
  void initState() {
    super.initState();
    if (widget.url != null && widget.url!.trim().isNotEmpty) {
      final videoId = YoutubePlayer.convertUrlToId(widget.url!);
      if (videoId != null) {
        _controller = YoutubePlayerController(
          initialVideoId: videoId,
          flags: const YoutubePlayerFlags(autoPlay: false, mute: false),
        );
      }
    }
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 2,
      margin: const EdgeInsets.only(bottom: 18),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Header
            Row(
              children: [
                Text(widget.emoji, style: const TextStyle(fontSize: 26)),
                const SizedBox(width: 10),
                Expanded(
                  child: Text(
                    widget.heading,
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 10),
            Text(
              widget.content,
              style: const TextStyle(fontSize: 15, height: 1.4),
            ),
            const SizedBox(height: 14),

            // YouTube Player
            if (_controller != null)
              !_showPlayer
                  ? GestureDetector(
                      onTap: () => setState(() => _showPlayer = true),
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          // Thumbnail
                          Container(
                            height: 180,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(14),
                              image: DecorationImage(
                                image: NetworkImage(
                                  "https://img.youtube.com/vi/${_controller!.initialVideoId}/hqdefault.jpg",
                                ),
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          // Play button overlay
                          Container(
                            decoration: const BoxDecoration(
                              shape: BoxShape.circle,
                              color: Colors.white70,
                            ),
                            padding: const EdgeInsets.all(12),
                            child: const Icon(
                              Icons.play_arrow,
                              size: 40,
                              color: Colors.red,
                            ),
                          ),
                        ],
                      ),
                    )
                  : YoutubePlayer(
                      controller: _controller!,
                      showVideoProgressIndicator: true,
                      onReady: () {
                        _controller!.play();
                      },
                    ),
          ],
        ),
      ),
    );
  }
}

class UserDetailsCard extends StatelessWidget {
  final String name;
  final String email;
  final String phone;
  final String role;

  const UserDetailsCard({
    super.key,
    required this.name,
    required this.email,
    required this.phone,
    required this.role,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      elevation: 2,
      margin: const EdgeInsets.only(bottom: 18),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: const [
                Text("👤", style: TextStyle(fontSize: 26)),
                SizedBox(width: 10),
                Expanded(
                  child: Text("User Details", style: AppTypo.sectionHeader),
                ),
              ],
            ),

            const SizedBox(height: 12),

            _detailRow("Name", name),
            _detailRow("Email", email),
            _detailRow("Phone", phone),
            _detailRow("Role", role),
          ],
        ),
      ),
    );
  }

  Widget _detailRow(String label, String value) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 6),
      child: RichText(
        text: TextSpan(
          style: const TextStyle(
            fontSize: 15,
            color: Colors.black87,
            height: 1.4,
          ),
          children: [
            TextSpan(
              text: "$label: ",
              style: const TextStyle(
                fontSize: 15,
                color: Colors.black87,
                height: 1.4,
                fontWeight: FontWeight.bold,
              ),
            ),
            TextSpan(
              text: value,
              style: const TextStyle(
                fontSize: 15,
                color: Colors.black87,
                height: 1.4,
              ),
            ),
          ],
        ),
      ),
    );
  }
}