import 'package:fikoyt_ui/fikoyt_ui.dart';
import 'package:flutter/material.dart';

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

  @override
  State<FikoYTMerkezSayfa> createState() => _FikoYTMerkezSayfaState();
}

class _FikoYTMerkezSayfaState extends State<FikoYTMerkezSayfa> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ignore: avoid_unnecessary_containers
      appBar: AppBar(
        leading: IconButton(
          onPressed: () {
            context.vRouter.historyBack();
          },
          icon: const Image(
            image: AssetImage('assets/core/icons/logo.png'),
            filterQuality: FilterQuality.high,
            // width: widget.logoWidth * cardWidth,
          ),
          iconSize: 22,
          splashRadius: 20,
          color: Colors.blue.shade300,
        ),
        title: Stack(
          children: [
            Center(
              child: Padding(
                padding: const EdgeInsets.only(left: 55, top: 22),
                child: Container(
                  // width: double.infinity,
                  height: 18,
                  constraints: const BoxConstraints(maxWidth: 300),
                  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 2),
                  decoration: const BoxDecoration(
                    color: Colors.transparent,
                    borderRadius: BorderRadius.all(
                      Radius.circular(10),
                    ),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      FikoYTButton(
                        text: "Merkez",
                        tema: Theme.of(context).extension<FikoYTButtonTheme>()?.copyWith(
                              fontSize: 11,
                              textStrokeColor: Colors.transparent,
                              textColor: Colors.black,
                              backgroundColor: Colors.amber,
                            ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Center(
              child: Padding(
                padding: const EdgeInsets.only(left: 0, top: 36),
                child: Container(
                  // width: double.infinity,
                  height: 18,
                  constraints: const BoxConstraints(maxWidth: 300),
                  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 2),
                  decoration: const BoxDecoration(
                    color: Colors.transparent,
                    borderRadius: BorderRadius.all(
                      Radius.circular(10),
                    ),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      FikoYTButton(
                        text: "Alt Başlık",
                        tema: Theme.of(context).extension<FikoYTButtonTheme>()?.copyWith(
                              edgePadding: EdgeInsets.symmetric(horizontal: 15, vertical: 0),
                              fontSize: 12,
                              textStrokeWidth: 1,
                              textStrokeColor: Colors.transparent,
                              textColor: Colors.white,
                              backgroundColor: Colors.blue,
                            ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Center(
              child: Padding(
                  padding: const EdgeInsets.only(top: 0),
                  child: GestureDetector(
                    onTap: () {
                      context.vRouter.to("/");
                    }, // Image tapped
                    child: const Image(
                      image: AssetImage('assets/core/icons/fikoyt.png'),
                      filterQuality: FilterQuality.high,
                      height: 36,
                      // width: widget.logoWidth * cardWidth,
                    ),
                  )),
            ),
          ],
        ),
        actions: [
          IconButton(
            onPressed: () {
              // context.vRouter.to("/mesaici/ayarlar");
            },
            icon: const Text(
              "⚙️",
              style: TextStyle(
                fontSize: 22,
              ),
            ),
            // const Icon(
            //   Icons.settings,
            // ),
            iconSize: 22,
            splashRadius: 20,
            // color: Colors.blue.shade300,
          ),
        ],
        automaticallyImplyLeading: true,
        centerTitle: true,
        scrolledUnderElevation: 6.0,
      ),
      drawer: FuturisticDrawer(), extendBody: true,
      body: Text("sdfsfs"),
    );
  }
}

class FuturisticDrawer extends StatelessWidget {
  const FuturisticDrawer({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Color(0xFF1F1C2C),
              Color(0xFF928DAB),
              Color(0xFF2C5364),
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Üst Kısım (Profil Bölgesi)
            const _FuturisticHeader(),
            const SizedBox(height: 16),
            // Menü Öğeleri
            _buildMenuItem(Icons.home_outlined, "Ana Sayfa", context),
            _buildMenuItem(Icons.settings_outlined, "Ayarlar", context),
            _buildMenuItem(Icons.favorite_outline, "Favorilerim", context),
            _buildMenuItem(Icons.info_outline, "Hakkında", context),
            const Spacer(),
            // Çıkış
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: _buildMenuItem(Icons.exit_to_app_outlined, "Çıkış Yap", context),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildMenuItem(IconData icon, String title, BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: ListTile(
        leading: ShaderMask(
          shaderCallback: (bounds) => const LinearGradient(
            colors: [Colors.blue, Colors.cyan, Colors.purple],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ).createShader(bounds),
          child: Icon(
            icon,
            size: 28,
            color: Colors.white,
          ),
        ),
        title: Text(
          title,
          style: const TextStyle(
            fontWeight: FontWeight.w600,
            fontSize: 16,
            color: Colors.white,
          ),
        ),
        onTap: () => Navigator.pop(context),
        contentPadding: EdgeInsets.zero,
        horizontalTitleGap: 12.0,
      ),
    );
  }
}

class _FuturisticHeader extends StatelessWidget {
  const _FuturisticHeader();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Holografik Profil Avatarı
          Center(
            child: Stack(
              alignment: Alignment.center,
              children: [
                // Dış Halo
                Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: RadialGradient(
                      colors: [Colors.blue.withOpacity(0.2), Colors.blue.withOpacity(0.05), Colors.transparent],
                    ),
                  ),
                ),
                // Avatar
                Container(
                  width: 80,
                  height: 80,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: LinearGradient(
                      colors: [Colors.blue, Colors.purple],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                  ),
                  child: const Icon(
                    Icons.person,
                    size: 48,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 16),
          // Kullanıcı Bilgileri
          const Center(
            child: Text(
              "Ağlayan Bozkurt",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          const SizedBox(height: 8),
          const Center(
            child: Text(
              "bozkurt@example.com",
              style: TextStyle(color: Colors.white54),
            ),
          ),
        ],
      ),
    );
  }
}

class _ModernDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      backgroundColor: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Üst Profil Kartı
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              children: [
                // Avatar
                Container(
                  width: 64,
                  height: 64,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.grey[300],
                  ),
                  child: const Icon(
                    Icons.person,
                    color: Colors.grey,
                    size: 32,
                  ),
                ),
                const SizedBox(width: 16),
                // Kullanıcı Bilgileri
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    Text(
                      'Ağlayan Bozkurt',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 18,
                        color: Colors.black,
                      ),
                    ),
                    SizedBox(height: 4),
                    Text(
                      'bozkurt@example.com',
                      style: TextStyle(color: Colors.grey),
                    ),
                  ],
                ),
              ],
            ),
          ),
          const Divider(color: Colors.grey, thickness: 1),
          // Menü Öğeleri
          _buildMenuItem(Icons.home_outlined, "Ana Sayfa", () {
            Navigator.pop(context);
          }),
          _buildMenuItem(Icons.settings_outlined, "Ayarlar", () {
            Navigator.pop(context);
          }),
          _buildMenuItem(Icons.favorite_outline, "Favorilerim", () {
            Navigator.pop(context);
          }),
          _buildMenuItem(Icons.info_outline, "Hakkında", () {
            Navigator.pop(context);
          }),
          const Spacer(),
          // Çıkış
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: _buildMenuItem(Icons.exit_to_app_outlined, "Çıkış Yap", () {
              Navigator.pop(context);
            }),
          ),
        ],
      ),
    );
  }

  Widget _buildMenuItem(IconData icon, String title, VoidCallback onTap) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: ListTile(
        leading: Icon(icon, color: Colors.black),
        title: Text(
          title,
          style: const TextStyle(
            fontWeight: FontWeight.w600,
            fontSize: 16,
            color: Colors.black,
          ),
        ),
        onTap: onTap,
        contentPadding: EdgeInsets.zero,
        horizontalTitleGap: 8.0,
      ),
    );
  }
}

class _CustomDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Stack(
        children: [
          // Arka plan gradyan
          Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [Color(0xFF6DD5FA), Color(0xFFACF6DF)],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
            ),
          ),
          // İçerik
          ListView(
            padding: EdgeInsets.zero,
            children: [
              // Üst kısım (Profil bölümü)
              UserAccountsDrawerHeader(
                accountName: const Text(
                  "Ağlayan Bozkurt",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                ),
                accountEmail: const Text("bozkurt@example.com"),
                currentAccountPicture: CircleAvatar(
                  backgroundColor: Colors.white,
                  child: Text(
                    "AB",
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                      color: Colors.teal,
                    ),
                  ),
                ),
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFF00C9FF), Color(0xFF92FE9D)],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                ),
              ),
              // Menü Öğeleri
              _buildMenuItem(Icons.home, "Ana Sayfa", () {
                Navigator.pop(context);
              }),
              _buildMenuItem(Icons.settings, "Ayarlar", () {
                Navigator.pop(context);
              }),
              _buildMenuItem(Icons.favorite, "Favorilerim", () {
                Navigator.pop(context);
              }),
              _buildMenuItem(Icons.info, "Hakkında", () {
                Navigator.pop(context);
              }),
              const Divider(),
              _buildMenuItem(Icons.exit_to_app, "Çıkış Yap", () {
                // Çıkış işlemi
                Navigator.pop(context);
              }),
            ],
          ),
          // Alt Animasyon
          Positioned(
            bottom: 16,
            left: 0,
            right: 0,
            child: _AnimatedLogo(),
          ),
        ],
      ),
    );
  }

  Widget _buildMenuItem(IconData icon, String title, VoidCallback onTap) {
    return ListTile(
      leading: Icon(icon, color: Colors.teal),
      title: Text(
        title,
        style: const TextStyle(fontWeight: FontWeight.w600),
      ),
      onTap: onTap,
    );
  }
}

class _AnimatedLogo extends StatefulWidget {
  @override
  State<_AnimatedLogo> createState() => _AnimatedLogoState();
}

class _AnimatedLogoState extends State<_AnimatedLogo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..repeat(reverse: true);
    _animation = Tween<double>(begin: 0, end: 20).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(0, _animation.value),
          child: child,
        );
      },
      child: const Center(
        child: Text(
          "Muhteşem Drawer",
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 16,
            color: Colors.teal,
          ),
        ),
      ),
    );
  }
}