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

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

@RoutePage()
class NotificationPage extends StatelessWidget {
  const NotificationPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.background,
      appBar: AppBar(
        title: Text(
          'Notifikasi',
          style: AppStyle.xl.copyWith(
            fontWeight: FontWeight.w600,
            color: AppColor.textPrimary,
          ),
        ),
        backgroundColor: AppColor.backgroundLight,
        elevation: 0,
        iconTheme: IconThemeData(color: AppColor.textPrimary),
        actions: [
          TextButton(
            onPressed: () => _markAllAsRead(context),
            child: Text(
              'Tandai Semua',
              style: AppStyle.sm.copyWith(
                color: AppColor.primary,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
        ],
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(1),
          child: Container(height: 1, color: AppColor.borderLight),
        ),
      ),
      body: ListView(
        padding: EdgeInsets.symmetric(vertical: 8),
        children: [
          // Today Section
          _buildSectionHeader('Hari Ini'),
          _buildNotificationItem(
            icon: Icons.local_offer,
            iconColor: AppColor.primary,
            iconBgColor: AppColor.primaryWithOpacity(0.1),
            title: 'Voucher Baru Tersedia!',
            subtitle: 'Dapatkan diskon 50% untuk pembelian pertama Anda',
            time: '2 menit lalu',
            isUnread: true,
          ),
          _buildNotificationItem(
            icon: Icons.shopping_bag,
            iconColor: AppColor.success,
            iconBgColor: AppColor.successWithOpacity(0.1),
            title: 'Pesanan Sedang Dikirim',
            subtitle: 'Pesanan #ORD-2024-001 sedang dalam perjalanan',
            time: '1 jam lalu',
            isUnread: true,
          ),
          _buildNotificationItem(
            icon: Icons.payment,
            iconColor: AppColor.info,
            iconBgColor: AppColor.info.withOpacity(0.1),
            title: 'Pembayaran Berhasil',
            subtitle:
                'Pembayaran untuk pesanan #ORD-2024-001 telah dikonfirmasi',
            time: '3 jam lalu',
            isUnread: false,
          ),

          // Yesterday Section
          _buildSectionHeader('Kemarin'),
          _buildNotificationItem(
            icon: Icons.star,
            iconColor: AppColor.warning,
            iconBgColor: AppColor.warningWithOpacity(0.1),
            title: 'Berikan Rating Produk',
            subtitle: 'Bagaimana pengalaman Anda dengan produk yang dibeli?',
            time: '1 hari lalu',
            isUnread: false,
          ),
          _buildNotificationItem(
            icon: Icons.local_shipping,
            iconColor: AppColor.success,
            iconBgColor: AppColor.successWithOpacity(0.1),
            title: 'Pesanan Telah Diterima',
            subtitle: 'Pesanan #ORD-2024-002 telah sampai di tujuan',
            time: '1 hari lalu',
            isUnread: false,
          ),

          // This Week Section
          _buildSectionHeader('Minggu Ini'),
          _buildNotificationItem(
            icon: Icons.campaign,
            iconColor: AppColor.primary,
            iconBgColor: AppColor.primaryWithOpacity(0.1),
            title: 'Flash Sale 12.12!',
            subtitle: 'Jangan lewatkan flash sale dengan diskon hingga 70%',
            time: '3 hari lalu',
            isUnread: false,
          ),
          _buildNotificationItem(
            icon: Icons.card_giftcard,
            iconColor: AppColor.secondary,
            iconBgColor: AppColor.secondary.withOpacity(0.1),
            title: 'Poin Reward Ditambahkan',
            subtitle: 'Selamat! Anda mendapat 100 poin dari transaksi terakhir',
            time: '5 hari lalu',
            isUnread: false,
          ),
          _buildNotificationItem(
            icon: Icons.security,
            iconColor: AppColor.textSecondary,
            iconBgColor: AppColor.textSecondary.withOpacity(0.1),
            title: 'Keamanan Akun',
            subtitle: 'Login dari perangkat baru terdeteksi',
            time: '6 hari lalu',
            isUnread: false,
          ),

          SizedBox(height: 16),
        ],
      ),
    );
  }

  Widget _buildSectionHeader(String title) {
    return Padding(
      padding: EdgeInsets.fromLTRB(16, 16, 16, 8),
      child: Text(
        title,
        style: AppStyle.md.copyWith(
          fontWeight: FontWeight.w600,
          color: AppColor.textSecondary,
        ),
      ),
    );
  }

  Widget _buildNotificationItem({
    required IconData icon,
    required Color iconColor,
    required Color iconBgColor,
    required String title,
    required String subtitle,
    required String time,
    required bool isUnread,
  }) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: isUnread
            ? AppColor.primary.withOpacity(0.02)
            : AppColor.backgroundLight,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: isUnread
              ? AppColor.primary.withOpacity(0.1)
              : AppColor.borderLight,
        ),
      ),
      child: InkWell(
        onTap: () => _handleNotificationTap(title),
        borderRadius: BorderRadius.circular(12),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Icon Container
            Container(
              width: 48,
              height: 48,
              decoration: BoxDecoration(
                color: iconBgColor,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Icon(icon, color: iconColor, size: 24),
            ),
            SizedBox(width: 12),

            // Content
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: Text(
                          title,
                          style: AppStyle.md.copyWith(
                            fontWeight: FontWeight.w600,
                            color: AppColor.textPrimary,
                          ),
                        ),
                      ),
                      if (isUnread)
                        Container(
                          width: 8,
                          height: 8,
                          decoration: BoxDecoration(
                            color: AppColor.primary,
                            shape: BoxShape.circle,
                          ),
                        ),
                    ],
                  ),
                  SizedBox(height: 4),
                  Text(
                    subtitle,
                    style: AppStyle.sm.copyWith(
                      color: AppColor.textSecondary,
                      height: 1.4,
                    ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  SizedBox(height: 8),
                  Text(
                    time,
                    style: AppStyle.xs.copyWith(color: AppColor.textLight),
                  ),
                ],
              ),
            ),

            // Options Menu
            IconButton(
              onPressed: () => _showNotificationOptions(title),
              icon: Icon(Icons.more_vert, color: AppColor.textLight, size: 20),
              constraints: BoxConstraints(),
              padding: EdgeInsets.all(4),
            ),
          ],
        ),
      ),
    );
  }

  void _markAllAsRead(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(
          'Semua notifikasi ditandai sebagai dibaca',
          style: AppStyle.md.copyWith(color: AppColor.white),
        ),
        backgroundColor: AppColor.success,
        behavior: SnackBarBehavior.floating,
        margin: EdgeInsets.all(16),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      ),
    );
  }

  void _handleNotificationTap(String title) {
    // Handle notification tap - navigate to relevant page
    print('Notification tapped: $title');
  }

  void _showNotificationOptions(String title) {
    // Show bottom sheet or popup menu for notification options
    print('Show options for: $title');
  }
}