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: AnimatedInteractiveDrawer(), extendBody: true,
      body: Text("sdfsfs"),
    );
  }
}

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

  @override
  State<AnimatedInteractiveDrawer> createState() => _AnimatedInteractiveDrawerState();
}

class _AnimatedInteractiveDrawerState extends State<AnimatedInteractiveDrawer> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Color(0xFF1E202B),
              Color(0xFF323649),
              Color(0xFF1E202B),
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 50),
            const _AnimatedProfileHeader(),
            const SizedBox(height: 16),
            // Menü Öğeleri
            _buildInteractiveMenuItem(Icons.home, "Ana Sayfa"),
            _buildInteractiveMenuItem(Icons.settings, "Ayarlar"),
            _buildInteractiveMenuItem(Icons.favorite, "Favorilerim"),
            _buildInteractiveMenuItem(Icons.info, "Hakkında"),
            const Spacer(),
            // Çıkış
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: _buildInteractiveMenuItem(Icons.exit_to_app, "Çıkış Yap"),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildInteractiveMenuItem(IconData icon, String title) {
    return GestureDetector(
      onTap: () => debugPrint('$title tıklandı'),
      child: MouseRegion(
        onEnter: (event) => _controller.forward(),
        onExit: (event) => _controller.reverse(),
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            final scale = 1.0 + _controller.value * 0.1;
            final glow = 0.2 + _controller.value * 0.5;

            return Transform.scale(
              scale: scale,
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(glow),
                  borderRadius: BorderRadius.circular(12),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.cyanAccent.withOpacity(glow),
                      blurRadius: 20,
                      spreadRadius: 5,
                    ),
                  ],
                ),
                child: Row(
                  children: [
                    Icon(icon, color: Colors.white, size: 28),
                    const SizedBox(width: 12),
                    Text(
                      title,
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class _AnimatedProfileHeader extends StatelessWidget {
  const _AnimatedProfileHeader();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Column(
        children: [
          // Holografik Profil Avatarı
          Center(
            child: Stack(
              alignment: Alignment.center,
              children: [
                // Arka Plan Halo
                AnimatedContainer(
                  duration: const Duration(seconds: 2),
                  curve: Curves.easeInOut,
                  width: 120,
                  height: 120,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: RadialGradient(
                      colors: [Colors.cyan.withOpacity(0.4), Colors.blueAccent.withOpacity(0.2), Colors.transparent],
                    ),
                  ),
                ),
                // Profil Resmi
                Container(
                  width: 100,
                  height: 100,
                  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: 50,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 16),
          // Kullanıcı Adı
          const Text(
            "Kullanıcı Adı",
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 8),
          // E-posta
          const Text(
            "kullanici@example.com",
            style: TextStyle(
              color: Colors.white70,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }
}