import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/notifications_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(NotificationsController());
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      backgroundColor: isDark ? const Color(0xFF121212) : const Color(0xFFF5F7FA),
      appBar: AppBar(
        title: const Text('الإشعارات', style: TextStyle(fontWeight: FontWeight.bold)),
        backgroundColor: const Color(0xFF0F4C81),
        foregroundColor: Colors.white,
        actions: [
          Obx(() => controller.unreadCount.value > 0
              ? TextButton.icon(
                  onPressed: () => controller.markAllRead(),
                  icon: const Icon(Icons.done_all, color: Colors.white, size: 18),
                  label: const Text('قراءة الكل', style: TextStyle(color: Colors.white, fontSize: 12)),
                )
              : const SizedBox.shrink()),
        ],
      ),
      body: Obx(() {
        if (controller.isLoading.value) {
          return const Center(child: CircularProgressIndicator(color: Color(0xFF0F4C81)));
        }

        if (controller.notifications.isEmpty) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.notifications_none, size: 72, color: isDark ? Colors.white12 : Colors.grey.shade300),
                const SizedBox(height: 12),
                Text('لا توجد إشعارات', style: TextStyle(color: isDark ? Colors.white38 : Colors.grey, fontSize: 16)),
              ],
            ),
          );
        }

        return RefreshIndicator(
          onRefresh: controller.fetchNotifications,
          child: ListView.builder(
            padding: const EdgeInsets.all(12),
            itemCount: controller.notifications.length,
            itemBuilder: (context, index) {
              final notif = controller.notifications[index];
              return _buildNotifItem(notif, controller, isDark);
            },
          ),
        );
      }),
    );
  }

  Widget _buildNotifItem(Map<String, dynamic> notif, NotificationsController ctrl, bool isDark) {
    final isRead = notif['is_read'] == 1;
    final type = notif['type']?.toString() ?? 'info';
    final category = notif['category']?.toString() ?? 'general';

    final IconData icon;
    final Color color;
    switch (type) {
      case 'success':
        icon = Icons.check_circle;
        color = const Color(0xFF10B981);
        break;
      case 'warning':
        icon = Icons.warning_amber_rounded;
        color = const Color(0xFFF59E0B);
        break;
      case 'error':
        icon = Icons.error;
        color = const Color(0xFFEF4444);
        break;
      default:
        icon = _categoryIcon(category);
        color = const Color(0xFF3B82F6);
    }

    return GestureDetector(
      onTap: () {
        if (!isRead) ctrl.markAsRead(notif['id']);
        if (notif['entity_type'] == 'invoice' && notif['entity_id'] != null) {
          Get.toNamed('/invoice-detail', arguments: {'id': notif['entity_id']});
        }
      },
      child: Container(
        margin: const EdgeInsets.only(bottom: 8),
        padding: const EdgeInsets.all(14),
        decoration: BoxDecoration(
          color: isRead
              ? (isDark ? const Color(0xFF1E1E2E) : Colors.white)
              : (isDark ? const Color(0xFF1A2332) : const Color(0xFFF0F7FF)),
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: isRead
                ? (isDark ? Colors.white10 : Colors.grey.shade200)
                : const Color(0xFF3B82F6).withValues(alpha: 0.2),
          ),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 42, height: 42,
              decoration: BoxDecoration(
                color: color.withValues(alpha: 0.1),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Icon(icon, color: color, size: 20),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: Text(
                          notif['title'] ?? '',
                          style: TextStyle(
                            fontWeight: isRead ? FontWeight.w500 : FontWeight.w700,
                            fontSize: 14,
                            color: isDark ? Colors.white : Colors.black87,
                          ),
                        ),
                      ),
                      if (!isRead)
                        Container(
                          width: 8, height: 8,
                          decoration: const BoxDecoration(shape: BoxShape.circle, color: Color(0xFF3B82F6)),
                        ),
                    ],
                  ),
                  if (notif['body'] != null && notif['body'].toString().isNotEmpty) ...[
                    const SizedBox(height: 4),
                    Text(
                      notif['body'],
                      style: TextStyle(fontSize: 13, color: isDark ? Colors.white54 : Colors.grey.shade600),
                      maxLines: 2, overflow: TextOverflow.ellipsis,
                    ),
                  ],
                  const SizedBox(height: 6),
                  Text(
                    notif['created_at'] ?? '',
                    style: TextStyle(fontSize: 11, color: isDark ? Colors.white24 : Colors.grey.shade400, fontFamily: 'monospace'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  IconData _categoryIcon(String category) {
    return switch (category) {
      'invoice' => Icons.receipt_long,
      'payment' => Icons.payment,
      'subscription' => Icons.workspace_premium,
      'system' => Icons.settings,
      _ => Icons.notifications,
    };
  }
}