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

import '../../../../../../common/theme/theme.dart';

@RoutePage()
class DrawInfoPage extends StatefulWidget {
  const DrawInfoPage({super.key});

  @override
  State<DrawInfoPage> createState() => _DrawInfoPageState();
}

class _DrawInfoPageState extends State<DrawInfoPage>
    with TickerProviderStateMixin {
  bool showHadiah = true;

  late AnimationController _fadeController;
  late AnimationController _slideController;
  late AnimationController _scaleController;
  late AnimationController _tabController;

  late Animation<double> _fadeAnimation;
  late Animation<Offset> _slideAnimation;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();

    _fadeController = AnimationController(
      duration: Duration(milliseconds: 1200),
      vsync: this,
    );

    _slideController = AnimationController(
      duration: Duration(milliseconds: 800),
      vsync: this,
    );

    _scaleController = AnimationController(
      duration: Duration(milliseconds: 1000),
      vsync: this,
    );

    _tabController = AnimationController(
      duration: Duration(milliseconds: 300),
      vsync: this,
    );

    _fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: _fadeController, curve: Curves.easeInOut),
    );

    _slideAnimation = Tween<Offset>(begin: Offset(0, 0.3), end: Offset.zero)
        .animate(
          CurvedAnimation(parent: _slideController, curve: Curves.easeOutCubic),
        );

    _scaleAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
      CurvedAnimation(parent: _scaleController, curve: Curves.elasticOut),
    );

    _startAnimations();
  }

  void _startAnimations() async {
    await Future.delayed(Duration(milliseconds: 100));
    _fadeController.forward();

    await Future.delayed(Duration(milliseconds: 200));
    _slideController.forward();

    await Future.delayed(Duration(milliseconds: 300));
    _scaleController.forward();
  }

  @override
  void dispose() {
    _fadeController.dispose();
    _slideController.dispose();
    _scaleController.dispose();
    _tabController.dispose();
    super.dispose();
  }

  Widget _buildTitle() {
    return SlideTransition(
      position: _slideAnimation,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        child: Row(
          children: [
            Container(
              width: 3,
              height: 28,
              decoration: BoxDecoration(
                color: AppColor.white,
                borderRadius: BorderRadius.circular(2),
              ),
            ),
            SizedBox(width: 12),
            Text(
              'Hadiah & Info',
              style: AppStyle.h3.copyWith(
                color: AppColor.textWhite,
                fontWeight: FontWeight.w600,
                letterSpacing: -0.5,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTabButtons() {
    return ScaleTransition(
      scale: _scaleAnimation,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 20),
        child: Row(
          children: [
            Expanded(
              child: GestureDetector(
                onTap: () {
                  setState(() => showHadiah = true);
                  _tabController.forward();
                },
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                  padding: EdgeInsets.symmetric(vertical: 14),
                  decoration: BoxDecoration(
                    color: showHadiah
                        ? AppColor.white
                        : AppColor.white.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(16),
                    border: Border.all(
                      color: showHadiah
                          ? AppColor.white
                          : AppColor.white.withOpacity(0.3),
                      width: 1,
                    ),
                    boxShadow: showHadiah
                        ? [
                            BoxShadow(
                              color: AppColor.black.withOpacity(0.1),
                              blurRadius: 15,
                              offset: Offset(0, 5),
                            ),
                          ]
                        : null,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.card_giftcard_rounded,
                        color: showHadiah
                            ? AppColor.primary
                            : AppColor.white.withOpacity(0.8),
                        size: 18,
                      ),
                      SizedBox(width: 6),
                      Text(
                        'Hadiah',
                        style: AppStyle.sm.copyWith(
                          color: showHadiah
                              ? AppColor.primary
                              : AppColor.white.withOpacity(0.9),
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SizedBox(width: 12),
            Expanded(
              child: GestureDetector(
                onTap: () {
                  setState(() => showHadiah = false);
                  _tabController.forward();
                },
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                  padding: EdgeInsets.symmetric(vertical: 14),
                  decoration: BoxDecoration(
                    color: !showHadiah
                        ? AppColor.white
                        : AppColor.white.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(16),
                    border: Border.all(
                      color: !showHadiah
                          ? AppColor.white
                          : AppColor.white.withOpacity(0.3),
                      width: 1,
                    ),
                    boxShadow: !showHadiah
                        ? [
                            BoxShadow(
                              color: AppColor.black.withOpacity(0.1),
                              blurRadius: 15,
                              offset: Offset(0, 5),
                            ),
                          ]
                        : null,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.info_outline_rounded,
                        color: !showHadiah
                            ? AppColor.primary
                            : AppColor.white.withOpacity(0.8),
                        size: 18,
                      ),
                      SizedBox(width: 6),
                      Text(
                        'Info Undian',
                        style: AppStyle.sm.copyWith(
                          color: !showHadiah
                              ? AppColor.primary
                              : AppColor.white.withOpacity(0.9),
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildHadiahContent() {
    return ListView(
      physics: BouncingScrollPhysics(),
      padding: EdgeInsets.symmetric(horizontal: 20),
      children: [
        SizedBox(height: 20),
        _buildPrizeCard(
          'Emas Batangan 3KG',
          'Hadiah utama untuk pemenang harian',
          Icons.stars_rounded,
          true,
          0,
        ),
        _buildPrizeCard(
          'Motor Yamaha NMAX',
          'Hadiah mingguan untuk 1 pemenang',
          Icons.two_wheeler_rounded,
          false,
          1,
        ),
        _buildPrizeCard(
          'Voucher Belanja 1 Juta',
          'Hadiah bulanan untuk 5 pemenang',
          Icons.card_giftcard_rounded,
          false,
          2,
        ),
        _buildPrizeCard(
          'Smartphone Samsung',
          'Hadiah khusus acara tertentu',
          Icons.smartphone_rounded,
          false,
          3,
        ),
        SizedBox(height: 20),
        _buildContactButton(),
        SizedBox(height: 30),
      ],
    );
  }

  Widget _buildInfoContent() {
    return ListView(
      physics: BouncingScrollPhysics(),
      padding: EdgeInsets.symmetric(horizontal: 20),
      children: [
        SizedBox(height: 20),
        _buildInfoSection(
          'Cara Bermain',
          [
            'Setiap hari kamu akan mendapat 1 nomor undian otomatis',
            'Nomor undian global diumumkan setiap hari jam 8 malam',
            'Jika nomormu sama dengan nomor global, kamu menang!',
            'Pemenang akan dihubungi melalui kontak yang terdaftar',
          ],
          Icons.play_circle_outline_rounded,
          0,
        ),
        _buildInfoSection(
          'Syarat & Ketentuan',
          [
            'Peserta minimal berusia 18 tahun',
            'Satu akun per nomor telepon',
            'Hadiah wajib diambil dalam 30 hari',
            'Keputusan panitia tidak dapat diganggu gugat',
          ],
          Icons.gavel_rounded,
          1,
        ),
        _buildInfoSection(
          'FAQ',
          [
            'Q: Apakah gratis? A: Ya, sepenuhnya gratis',
            'Q: Berapa lama menunggu hasil? A: Maksimal 1 jam setelah pengumuman',
            'Q: Bisa ganti nomor? A: Tidak, nomor otomatis dari sistem',
            'Q: Pajak hadiah? A: Ditanggung penyelenggara',
          ],
          Icons.help_outline_rounded,
          2,
        ),
        SizedBox(height: 20),
        _buildContactButton(),
        SizedBox(height: 30),
      ],
    );
  }

  Widget _buildPrizeCard(
    String title,
    String description,
    IconData icon,
    bool isGold,
    int index,
  ) {
    return TweenAnimationBuilder<double>(
      tween: Tween(begin: 0.0, end: 1.0),
      duration: Duration(milliseconds: 800 + (index * 200)),
      curve: Curves.easeOutCubic,
      builder: (context, value, child) {
        return Transform.translate(
          offset: Offset(0, 30 * (1 - value)),
          child: Opacity(
            opacity: value,
            child: Container(
              margin: EdgeInsets.only(bottom: 16),
              decoration: BoxDecoration(
                color: isGold
                    ? AppColor.white
                    : AppColor.white.withOpacity(0.12),
                borderRadius: BorderRadius.circular(20),
                border: Border.all(
                  color: isGold
                      ? AppColor.warning.withOpacity(0.3)
                      : AppColor.white.withOpacity(0.2),
                  width: isGold ? 2 : 1,
                ),
                boxShadow: [
                  BoxShadow(
                    color: isGold
                        ? AppColor.warning.withOpacity(0.3)
                        : AppColor.black.withOpacity(0.05),
                    blurRadius: isGold ? 20 : 10,
                    offset: Offset(0, isGold ? 8 : 4),
                  ),
                ],
              ),
              child: Padding(
                padding: EdgeInsets.all(20),
                child: Row(
                  children: [
                    Container(
                      padding: EdgeInsets.all(16),
                      decoration: BoxDecoration(
                        gradient: isGold
                            ? LinearGradient(
                                colors: [
                                  AppColor.warning,
                                  AppColor.warning.withOpacity(0.8),
                                ],
                                begin: Alignment.topLeft,
                                end: Alignment.bottomRight,
                              )
                            : LinearGradient(
                                colors: AppColor.primaryGradient,
                                begin: Alignment.topLeft,
                                end: Alignment.bottomRight,
                              ),
                        borderRadius: BorderRadius.circular(16),
                        boxShadow: [
                          BoxShadow(
                            color: isGold
                                ? AppColor.warning.withOpacity(0.3)
                                : AppColor.primary.withOpacity(0.3),
                            blurRadius: 12,
                            offset: Offset(0, 4),
                          ),
                        ],
                      ),
                      child: Icon(icon, color: AppColor.white, size: 24),
                    ),
                    SizedBox(width: 16),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            title,
                            style: AppStyle.md.copyWith(
                              color: isGold ? AppColor.primary : AppColor.white,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                          SizedBox(height: 4),
                          Text(
                            description,
                            style: AppStyle.sm.copyWith(
                              color: isGold
                                  ? AppColor.textSecondary
                                  : AppColor.white.withOpacity(0.8),
                              fontWeight: FontWeight.w500,
                              height: 1.3,
                            ),
                          ),
                        ],
                      ),
                    ),
                    if (isGold)
                      Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 8,
                          vertical: 4,
                        ),
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: AppColor.primaryGradient,
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                          ),
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: Text(
                          'TOP',
                          style: AppStyle.xs.copyWith(
                            color: AppColor.white,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }

  Widget _buildInfoSection(
    String title,
    List<String> items,
    IconData icon,
    int index,
  ) {
    return TweenAnimationBuilder<double>(
      tween: Tween(begin: 0.0, end: 1.0),
      duration: Duration(milliseconds: 800 + (index * 200)),
      curve: Curves.easeOutCubic,
      builder: (context, value, child) {
        return Transform.translate(
          offset: Offset(0, 30 * (1 - value)),
          child: Opacity(
            opacity: value,
            child: Container(
              margin: EdgeInsets.only(bottom: 16),
              decoration: BoxDecoration(
                color: AppColor.white.withOpacity(0.12),
                borderRadius: BorderRadius.circular(20),
                border: Border.all(
                  color: AppColor.white.withOpacity(0.2),
                  width: 1,
                ),
                boxShadow: [
                  BoxShadow(
                    color: AppColor.black.withOpacity(0.05),
                    blurRadius: 15,
                    offset: Offset(0, 8),
                  ),
                ],
              ),
              child: Padding(
                padding: EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Container(
                          padding: EdgeInsets.all(8),
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: AppColor.primaryGradient,
                              begin: Alignment.topLeft,
                              end: Alignment.bottomRight,
                            ),
                            borderRadius: BorderRadius.circular(10),
                          ),
                          child: Icon(icon, color: AppColor.white, size: 18),
                        ),
                        SizedBox(width: 12),
                        Text(
                          title,
                          style: AppStyle.md.copyWith(
                            color: AppColor.white,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 16),
                    ...items
                        .map(
                          (item) => Padding(
                            padding: EdgeInsets.only(bottom: 8),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                  width: 4,
                                  height: 4,
                                  margin: EdgeInsets.only(top: 8, right: 12),
                                  decoration: BoxDecoration(
                                    color: AppColor.warning,
                                    shape: BoxShape.circle,
                                  ),
                                ),
                                Expanded(
                                  child: Text(
                                    item,
                                    style: AppStyle.sm.copyWith(
                                      color: AppColor.white.withOpacity(0.9),
                                      fontWeight: FontWeight.w500,
                                      height: 1.4,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                        .toList(),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }

  Widget _buildContactButton() {
    return TweenAnimationBuilder<double>(
      tween: Tween(begin: 0.0, end: 1.0),
      duration: Duration(milliseconds: 1200),
      curve: Curves.elasticOut,
      builder: (context, value, child) {
        return Transform.scale(
          scale: value,
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text(
                      'Menghubungi layanan pelanggan...',
                      style: AppStyle.sm.copyWith(color: AppColor.white),
                    ),
                    backgroundColor: AppColor.primary,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                    behavior: SnackBarBehavior.floating,
                  ),
                );
              },
              borderRadius: BorderRadius.circular(16),
              child: Container(
                width: double.infinity,
                padding: EdgeInsets.symmetric(vertical: 16),
                decoration: BoxDecoration(
                  color: AppColor.white.withOpacity(0.12),
                  borderRadius: BorderRadius.circular(16),
                  border: Border.all(
                    color: AppColor.white.withOpacity(0.2),
                    width: 1,
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.support_agent_rounded,
                      color: AppColor.white,
                      size: 20,
                    ),
                    SizedBox(width: 8),
                    Text(
                      'Hubungi Layanan Pelanggan',
                      style: AppStyle.md.copyWith(
                        color: AppColor.white,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: AppColor.primaryGradient,
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: SafeArea(
          child: FadeTransition(
            opacity: _fadeAnimation,
            child: Column(
              children: [
                SizedBox(height: 20),

                // Title
                _buildTitle(),

                SizedBox(height: 20),

                // Tab Buttons
                _buildTabButtons(),

                SizedBox(height: 20),

                // Content
                Expanded(
                  child: AnimatedSwitcher(
                    duration: Duration(milliseconds: 300),
                    transitionBuilder:
                        (Widget child, Animation<double> animation) {
                          return FadeTransition(
                            opacity: animation,
                            child: SlideTransition(
                              position: Tween<Offset>(
                                begin: Offset(0.0, 0.1),
                                end: Offset.zero,
                              ).animate(animation),
                              child: child,
                            ),
                          );
                        },
                    child: showHadiah
                        ? _buildHadiahContent()
                        : _buildInfoContent(),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
