import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../constant/links.dart';
import '../../controller/functions/crud.dart';
import '../../print.dart';
import 'add_invoice_page.dart';

// نفترض أن هذا الموديل موجود في مشروعك، إذا لم يكن موجوداً يرجى إضافته أو تعديل الاستيراد
// import '../../model/invoice_model.dart';

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

  @override
  _InvoiceListPageState createState() => _InvoiceListPageState();
}

class _InvoiceListPageState extends State<InvoiceListPage> {
  List<dynamic> invoices = []; // استخدام dynamic لتجنب مشاكل الموديل إذا اختلف
  int totalCount = 0;
  double totalAmount = 0.0;
  bool isLoading = true;

  // الألوان "الإيجابية" للتصميم الجديد
  final Color primaryColor = const Color(0xFF4F46E5); // Indigo
  final Color secondaryColor = const Color(0xFF818CF8); // Lighter Indigo
  final Color moneyColor = const Color(0xFF059669); // Emerald Green
  final Color bgColor = const Color(0xFFF3F4F6); // Light Gray Background

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

  Future<void> fetchInvoices() async {
    if (!mounted) return;
    setState(() => isLoading = true);

    try {
      final response =
          await CRUD().post(link: AppLink.getInvoices, payload: {});

      if (response != 'failure' && response['status'] == 'success') {
        final data = response;
        if (mounted) {
          setState(() {
            invoices = data['data']; // استخدام البيانات مباشرة
            totalCount = int.tryParse(data['summary']['count'].toString()) ?? 0;
            totalAmount =
                double.tryParse(data['summary']['total'].toString()) ?? 0.0;
            isLoading = false;
          });
        }
      } else {
        if (mounted) {
          setState(() => isLoading = false);
          Get.snackbar("تنبيه", "لا توجد فواتير لعرضها أو حدث خطأ",
              backgroundColor: Colors.orange.withOpacity(0.2),
              colorText: Colors.orange[900]);
        }
      }
    } catch (e) {
      Log.print('Error fetching invoices: $e');
      if (mounted) setState(() => isLoading = false);
    }
  }

  void _showImageDialog(BuildContext context, String imageUrl) {
    showDialog(
      context: context,
      builder: (_) => Dialog(
        backgroundColor: Colors.transparent,
        child: Stack(
          alignment: Alignment.center,
          children: [
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20),
              ),
              padding: const EdgeInsets.all(5),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(15),
                child: InteractiveViewer(
                  panEnabled: true,
                  minScale: 0.5,
                  maxScale: 4,
                  child: Image.network(
                    imageUrl,
                    loadingBuilder: (context, child, loadingProgress) {
                      if (loadingProgress == null) return child;
                      return SizedBox(
                        height: 200,
                        width: 200,
                        child: Center(
                          child: CircularProgressIndicator(color: primaryColor),
                        ),
                      );
                    },
                    errorBuilder: (context, error, stackTrace) {
                      return const SizedBox(
                        height: 150,
                        width: 150,
                        child: Icon(Icons.broken_image,
                            size: 60, color: Colors.grey),
                      );
                    },
                  ),
                ),
              ),
            ),
            Positioned(
              top: 0,
              right: 0,
              child: CircleAvatar(
                backgroundColor: Colors.white,
                child: IconButton(
                  icon: const Icon(Icons.close, color: Colors.black),
                  onPressed: () => Navigator.pop(context),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bgColor,
      // زر عائم بتصميم متدرج
      floatingActionButton: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [primaryColor, secondaryColor]),
          borderRadius: BorderRadius.circular(30),
          boxShadow: [
            BoxShadow(
                color: primaryColor.withOpacity(0.4),
                blurRadius: 10,
                offset: const Offset(0, 4))
          ],
        ),
        child: FloatingActionButton.extended(
          onPressed: () => Get.to(() => AddInvoicePage()),
          label: const Text('إضافة فاتورة',
              style: TextStyle(fontWeight: FontWeight.bold)),
          icon: const Icon(Icons.add),
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
      ),
      body: Column(
        children: [
          // 1. رأس الصفحة (Header & Summary)
          _buildHeader(),

          // 2. قائمة الفواتير
          Expanded(
            child: isLoading
                ? Center(child: CircularProgressIndicator(color: primaryColor))
                : invoices.isEmpty
                    ? _buildEmptyState()
                    : RefreshIndicator(
                        onRefresh: fetchInvoices,
                        color: primaryColor,
                        child: ListView.builder(
                          padding: const EdgeInsets.fromLTRB(16, 0, 16, 80),
                          itemCount: invoices.length,
                          physics: const BouncingScrollPhysics(),
                          itemBuilder: (context, index) {
                            final invoice = invoices[index];
                            return _buildInvoiceCard(invoice);
                          },
                        ),
                      ),
          ),
        ],
      ),
    );
  }

  // === تصميم الهيدر (رأس الصفحة) ===
  Widget _buildHeader() {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.only(
        top: MediaQuery.of(context).padding.top + 20,
        bottom: 30,
        left: 20,
        right: 20,
      ),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [primaryColor, const Color(0xFF6366F1)],
        ),
        borderRadius: const BorderRadius.only(
          bottomLeft: Radius.circular(30),
          bottomRight: Radius.circular(30),
        ),
        boxShadow: [
          BoxShadow(
            color: primaryColor.withOpacity(0.3),
            blurRadius: 20,
            offset: const Offset(0, 10),
          ),
        ],
      ),
      child: Column(
        children: [
          // العنوان وزر الرجوع
          Row(
            children: [
              IconButton(
                icon: const Icon(Icons.arrow_back_ios,
                    color: Colors.white, size: 20),
                onPressed: () => Get.back(),
              ),
              const Expanded(
                child: Text(
                  "سجل الفواتير",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              const SizedBox(width: 40), // للمحاذاة
            ],
          ),
          const SizedBox(height: 25),

          // بطاقات الملخص
          Row(
            children: [
              Expanded(
                child: _buildSummaryItem(
                  title: "الإجمالي",
                  value: "${totalAmount.toStringAsFixed(1)} د.أ",
                  icon: Icons.attach_money,
                  isMoney: true,
                ),
              ),
              Container(width: 1, height: 40, color: Colors.white24),
              Expanded(
                child: _buildSummaryItem(
                  title: "عدد الفواتير",
                  value: "$totalCount",
                  icon: Icons.receipt_long,
                  isMoney: false,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildSummaryItem(
      {required String title,
      required String value,
      required IconData icon,
      required bool isMoney}) {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.2),
            shape: BoxShape.circle,
          ),
          child: Icon(icon, color: Colors.white, size: 20),
        ),
        const SizedBox(height: 8),
        Text(
          value,
          style: TextStyle(
            color: isMoney ? const Color(0xFFD1FAE5) : Colors.white,
            fontSize: 22,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          title,
          style: TextStyle(color: Colors.white.withOpacity(0.8), fontSize: 12),
        ),
      ],
    );
  }

  // === تصميم بطاقة الفاتورة ===
  Widget _buildInvoiceCard(dynamic invoice) {
    // استخراج البيانات بأمان
    String name = invoice['name'] ?? 'بدون اسم';
    String amount = invoice['amount']?.toString() ?? '0';
    String date = invoice['date'] ?? '';
    String invNumber = invoice['invoiceNumber']?.toString() ?? '#';
    String? imageUrl = invoice['imageLink'];

    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.03),
            blurRadius: 15,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          borderRadius: BorderRadius.circular(20),
          onTap: () {
            if (imageUrl != null && imageUrl.isNotEmpty) {
              _showImageDialog(context, imageUrl);
            } else {
              Get.snackbar("تنبيه", "لا توجد صورة مرفقة",
                  backgroundColor: Colors.grey[200], colorText: Colors.black);
            }
          },
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              children: [
                // 1. أيقونة أو صورة مصغرة
                Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                    color: primaryColor.withOpacity(0.08),
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: imageUrl != null && imageUrl.isNotEmpty
                      ? ClipRRect(
                          borderRadius: BorderRadius.circular(15),
                          child: Image.network(
                            imageUrl,
                            fit: BoxFit.cover,
                            errorBuilder: (_, __, ___) =>
                                Icon(Icons.receipt, color: primaryColor),
                          ),
                        )
                      : Icon(Icons.receipt_outlined, color: primaryColor),
                ),

                const SizedBox(width: 16),

                // 2. التفاصيل
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            name,
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 16,
                              color: Color(0xFF1F2937),
                            ),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                          Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 8, vertical: 4),
                            decoration: BoxDecoration(
                              color: Colors.grey[100],
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Text(
                              "#$invNumber",
                              style: TextStyle(
                                  fontSize: 10,
                                  color: Colors.grey[600],
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 6),
                      Text(
                        date,
                        style: TextStyle(color: Colors.grey[500], fontSize: 12),
                      ),
                    ],
                  ),
                ),

                const SizedBox(width: 12),

                // 3. المبلغ
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text(
                      "$amount",
                      style: TextStyle(
                        color: moneyColor,
                        fontWeight: FontWeight.w900,
                        fontSize: 18,
                      ),
                    ),
                    Text(
                      "د.أ",
                      style: TextStyle(
                        color: moneyColor.withOpacity(0.7),
                        fontWeight: FontWeight.w500,
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildEmptyState() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.receipt_long_rounded, size: 80, color: Colors.grey[300]),
          const SizedBox(height: 16),
          Text(
            "لا توجد فواتير حالياً",
            style: TextStyle(color: Colors.grey[500], fontSize: 16),
          ),
          const SizedBox(height: 8),
          TextButton.icon(
            onPressed: fetchInvoices,
            icon: const Icon(Icons.refresh),
            label: const Text("تحديث"),
          ),
        ],
      ),
    );
  }
}