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

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

// Models (simplified)
class DrawEvent {
  final String id;
  final String name;
  final String description;
  final int entryPoints;
  final String icon;
  final Color primaryColor;
  final String prize;
  final String prizeValue;
  final DateTime drawDate;
  final int totalParticipants;
  final int hadiah;
  final String status; // 'active', 'ended'
  final int minSpending;

  DrawEvent({
    required this.id,
    required this.name,
    required this.description,
    required this.entryPoints,
    required this.icon,
    required this.primaryColor,
    required this.prize,
    required this.prizeValue,
    required this.drawDate,
    required this.totalParticipants,
    required this.hadiah,
    required this.status,
    required this.minSpending,
  });

  bool get isActive => status == 'active';
}

class UserEntry {
  final String drawId;
  final DateTime entryDate;

  UserEntry({required this.drawId, required this.entryDate});
}

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

  @override
  State<DrawPage> createState() => _DrawPageState();
}

class _DrawPageState extends State<DrawPage> {
  String selectedTab = 'active'; // 'active' or 'finished'

  final List<UserEntry> userEntries = [
    UserEntry(
      drawId: "1",
      entryDate: DateTime.now().subtract(Duration(hours: 3)),
    ),
  ];

  final List<DrawEvent> drawEvents = [
    DrawEvent(
      id: "1",
      name: "Emas 3 Gram",
      description: "Gebyar Undian Enaklo\nMenangkan hadiah menarik",
      entryPoints: 0,
      icon: "👑",
      primaryColor: AppColor.primary,
      prize: "Emas 3 Gram",
      prizeValue: "Rp 2.500.000",
      drawDate: DateTime.now().add(Duration(hours: 1, minutes: 20)),
      totalParticipants: 0,
      hadiah: 2,
      status: 'active',
      minSpending: 50000,
    ),
    DrawEvent(
      id: "2",
      name: "iPhone 15 Pro",
      description: "Undian Smartphone Premium\nDapatkan iPhone terbaru",
      entryPoints: 0,
      icon: "📱",
      primaryColor: AppColor.info,
      prize: "iPhone 15 Pro",
      prizeValue: "Rp 18.000.000",
      drawDate: DateTime.now().subtract(Duration(days: 1)),
      totalParticipants: 156,
      hadiah: 1,
      status: 'ended',
      minSpending: 100000,
    ),
  ];

  List<DrawEvent> get filteredDraws {
    return drawEvents.where((draw) {
      if (selectedTab == 'active') {
        return draw.isActive;
      } else {
        return !draw.isActive;
      }
    }).toList();
  }

  bool _isUserEntered(String drawId) {
    return userEntries.any((entry) => entry.drawId == drawId);
  }

  String _getTimeRemaining(DateTime targetDate) {
    final now = DateTime.now();
    final difference = targetDate.difference(now);

    if (difference.isNegative) return "Berakhir";

    if (difference.inHours > 0) {
      return "${difference.inHours}h ${difference.inMinutes % 60}m";
    } else if (difference.inMinutes > 0) {
      return "${difference.inMinutes}m";
    } else {
      return "Sekarang!";
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.background,
      appBar: AppBar(title: Text("Undian")),
      body: Column(
        children: [
          // Tab selector
          Container(
            margin: EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: AppColor.surface,
              borderRadius: BorderRadius.circular(25),
              boxShadow: [
                BoxShadow(
                  color: AppColor.black.withOpacity(0.05),
                  blurRadius: 8,
                  offset: Offset(0, 2),
                ),
              ],
            ),
            child: Row(
              children: [
                Expanded(
                  child: GestureDetector(
                    onTap: () => setState(() => selectedTab = 'active'),
                    child: Container(
                      padding: EdgeInsets.symmetric(vertical: 12),
                      decoration: BoxDecoration(
                        color: selectedTab == 'active'
                            ? AppColor.primary
                            : Colors.transparent,
                        borderRadius: BorderRadius.circular(25),
                      ),
                      child: Text(
                        "Aktif (${drawEvents.where((d) => d.isActive).length})",
                        textAlign: TextAlign.center,
                        style: AppStyle.md.copyWith(
                          color: selectedTab == 'active'
                              ? AppColor.textWhite
                              : AppColor.textSecondary,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: GestureDetector(
                    onTap: () => setState(() => selectedTab = 'finished'),
                    child: Container(
                      padding: EdgeInsets.symmetric(vertical: 12),
                      decoration: BoxDecoration(
                        color: selectedTab == 'finished'
                            ? AppColor.primary
                            : Colors.transparent,
                        borderRadius: BorderRadius.circular(25),
                      ),
                      child: Text(
                        "Selesai (${drawEvents.where((d) => !d.isActive).length})",
                        textAlign: TextAlign.center,
                        style: AppStyle.md.copyWith(
                          color: selectedTab == 'finished'
                              ? AppColor.textWhite
                              : AppColor.textSecondary,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),

          // Draw list
          Expanded(
            child: ListView.builder(
              padding: EdgeInsets.symmetric(horizontal: 16),
              itemCount: filteredDraws.length,
              itemBuilder: (context, index) {
                final draw = filteredDraws[index];
                return _buildSimpleDrawCard(draw);
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSimpleDrawCard(DrawEvent draw) {
    _isUserEntered(draw.id);
    final timeRemaining = _getTimeRemaining(draw.drawDate);

    return Container(
      margin: EdgeInsets.only(bottom: 16),
      decoration: BoxDecoration(
        color: AppColor.surface,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: AppColor.black.withOpacity(0.08),
            blurRadius: 12,
            offset: Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        children: [
          // Header with gradient background
          Container(
            height: 160,
            width: double.infinity,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [draw.primaryColor, draw.primaryColor.withOpacity(0.8)],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
            ),
            child: Stack(
              children: [
                // Background pattern (coins and gold bar)
                Positioned(
                  right: 20,
                  top: 20,
                  child: Opacity(
                    opacity: 0.3,
                    child: Column(
                      children: [
                        Row(
                          children: [
                            _buildCoin(),
                            SizedBox(width: 8),
                            _buildCoin(),
                          ],
                        ),
                        SizedBox(height: 8),
                        _buildGoldBar(),
                      ],
                    ),
                  ),
                ),

                // Content
                Padding(
                  padding: EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      if (draw.isActive)
                        Container(
                          padding: EdgeInsets.symmetric(
                            horizontal: 8,
                            vertical: 4,
                          ),
                          decoration: BoxDecoration(
                            color: AppColor.success,
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Text(
                            "AKTIF",
                            style: AppStyle.xs.copyWith(
                              color: AppColor.textWhite,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      SizedBox(height: 8),
                      Text(
                        "MAKAN\nDAPAT",
                        style: AppStyle.h5.copyWith(
                          color: AppColor.textWhite,
                          fontWeight: FontWeight.bold,
                          height: 0.9,
                        ),
                      ),
                      SizedBox(height: 4),
                      Text(
                        draw.description,
                        style: AppStyle.sm.copyWith(color: AppColor.textWhite),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

          // Card content
          Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              children: [
                // Prize info
                Row(
                  children: [
                    Text(draw.icon, style: AppStyle.h5),
                    SizedBox(width: 8),
                    Text(
                      draw.prize,
                      style: AppStyle.lg.copyWith(
                        fontWeight: FontWeight.bold,
                        color: AppColor.textPrimary,
                      ),
                    ),
                  ],
                ),

                SizedBox(height: 16),

                // Stats row
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        Text(
                          "-",
                          style: AppStyle.h5.copyWith(
                            fontWeight: FontWeight.bold,
                            color: AppColor.textPrimary,
                          ),
                        ),
                        Text(
                          "Peserta",
                          style: AppStyle.sm.copyWith(
                            color: AppColor.textSecondary,
                          ),
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        Text(
                          "${draw.hadiah}",
                          style: AppStyle.h5.copyWith(
                            fontWeight: FontWeight.bold,
                            color: AppColor.textPrimary,
                          ),
                        ),
                        Text(
                          "Hadiah",
                          style: AppStyle.sm.copyWith(
                            color: AppColor.textSecondary,
                          ),
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        Text(
                          "0",
                          style: AppStyle.h5.copyWith(
                            fontWeight: FontWeight.bold,
                            color: AppColor.error,
                          ),
                        ),
                        Text(
                          "Voucher Anda",
                          style: AppStyle.sm.copyWith(
                            color: AppColor.textSecondary,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),

                SizedBox(height: 16),

                // Timer
                if (draw.isActive)
                  Row(
                    children: [
                      Icon(Icons.access_time, color: AppColor.error, size: 16),
                      SizedBox(width: 4),
                      Text(
                        "Berakhir dalam:",
                        style: AppStyle.md.copyWith(
                          color: AppColor.textPrimary,
                        ),
                      ),
                      Spacer(),
                      Text(
                        timeRemaining,
                        style: AppStyle.lg.copyWith(
                          fontWeight: FontWeight.bold,
                          color: AppColor.error,
                        ),
                      ),
                    ],
                  ),

                SizedBox(height: 12),

                // Spending requirement
                GestureDetector(
                  onTap: () => _showSpendingInfo(draw),
                  child: Container(
                    padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                    decoration: BoxDecoration(
                      color: AppColor.backgroundLight,
                      borderRadius: BorderRadius.circular(8),
                      border: Border.all(color: AppColor.borderLight, width: 1),
                    ),
                    child: Row(
                      children: [
                        Expanded(
                          child: Text(
                            "Belanja min. Rp ${_formatCurrency(draw.minSpending)} untuk berpartisipasi",
                            style: AppStyle.sm.copyWith(
                              color: AppColor.textSecondary,
                            ),
                          ),
                        ),
                        Icon(
                          Icons.chevron_right,
                          color: AppColor.textSecondary,
                          size: 16,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCoin() {
    return Container(
      width: 20,
      height: 20,
      decoration: BoxDecoration(
        color: AppColor.warning,
        shape: BoxShape.circle,
        border: Border.all(color: Colors.yellow, width: 1),
      ),
      child: Center(
        child: Text(
          "₹",
          style: AppStyle.xs.copyWith(
            color: Colors.orange[800],
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  Widget _buildGoldBar() {
    return Container(
      width: 30,
      height: 15,
      decoration: BoxDecoration(
        color: AppColor.warning,
        borderRadius: BorderRadius.circular(2),
        border: Border.all(color: Colors.yellow, width: 1),
      ),
      child: Center(
        child: Text(
          "GOLD",
          style: TextStyle(
            color: Colors.orange[800],
            fontSize: 6,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  String _formatCurrency(int amount) {
    return amount.toString().replaceAllMapped(
      RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'),
      (Match m) => '${m[1]}.',
    );
  }

  void _showSpendingInfo(DrawEvent draw) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        backgroundColor: AppColor.surface,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        title: Text(
          "Syarat Partisipasi",
          style: AppStyle.lg.copyWith(
            fontWeight: FontWeight.w600,
            color: AppColor.textPrimary,
          ),
        ),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Untuk mengikuti undian ${draw.name}, Anda perlu:",
              style: AppStyle.md.copyWith(color: AppColor.textPrimary),
            ),
            SizedBox(height: 12),
            Row(
              children: [
                Icon(Icons.shopping_cart, color: draw.primaryColor, size: 20),
                SizedBox(width: 8),
                Expanded(
                  child: Text(
                    "Belanja minimum Rp ${_formatCurrency(draw.minSpending)}",
                    style: AppStyle.md.copyWith(
                      fontWeight: FontWeight.w600,
                      color: AppColor.textPrimary,
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 8),
            Row(
              children: [
                Icon(Icons.schedule, color: draw.primaryColor, size: 20),
                SizedBox(width: 8),
                Expanded(
                  child: Text(
                    "Sebelum ${_formatDateTime(draw.drawDate)}",
                    style: AppStyle.md.copyWith(
                      fontWeight: FontWeight.w600,
                      color: AppColor.textPrimary,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text(
              "Mengerti",
              style: AppStyle.md.copyWith(
                color: AppColor.primary,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
        ],
      ),
    );
  }

  String _formatDateTime(DateTime date) {
    return "${date.day}/${date.month}/${date.year} ${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}";
  }
}