'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { 
  DollarSign, 
  Calendar, 
  User, 
  Home,
  Download,
  Filter,
  Search,
  TrendingUp,
  TrendingDown,
  Wallet,
  Shield,
  FileText,
  Printer,
  X,
  CheckCircle
} from 'lucide-react';
import { formatCurrency } from '@/app/utils/calculations';
import toast, { Toaster } from 'react-hot-toast';
import * as XLSX from 'xlsx';

export default function LedgerBook({ userType = 'admin' }) {
  const [transactions, setTransactions] = useState([]);
  const [filteredTransactions, setFilteredTransactions] = useState([]);
  const [dateRange, setDateRange] = useState({ start: '', end: '' });
  const [searchTerm, setSearchTerm] = useState('');
  const [summary, setSummary] = useState({
    totalRevenue: 0,
    pendingPayments: 0,
    securityDeposits: 0,
    commissionEarned: 0
  });
  const [isExporting, setIsExporting] = useState(false);

  useEffect(() => {
    loadTransactions();
  }, []);

  useEffect(() => {
    filterTransactions();
    calculateSummary();
  }, [transactions, dateRange, searchTerm]);

  const loadTransactions = async () => {
    const mockTransactions = [
      {
        id: 'T001',
        date: '2024-02-20',
        type: 'rent_payment',
        description: 'دفعة إيجار - فيلا في دمشق',
        amount: 500000,
        commission: 25000,
        fromUser: 'أحمد محمد',
        toUser: 'مالك العقار',
        propertyId: 1,
        propertyName: 'luxuryVillaDamascus',
        status: 'completed',
        paymentMethod: 'cash'
      },
      {
        id: 'T002',
        date: '2024-02-19',
        type: 'security_deposit',
        description: 'سلفة ضمان - شقة في حلب',
        amount: 250000,
        commission: 0,
        fromUser: 'سارة أحمد',
        toUser: 'مالك العقار',
        propertyId: 2,
        propertyName: 'modernApartmentAleppo',
        status: 'pending_refund',
        paymentMethod: 'cash'
      },
      {
        id: 'T003',
        date: '2024-02-18',
        type: 'commission',
        description: 'عمولة منصة - فيلا في درعا',
        amount: 30000,
        commission: 30000,
        fromUser: 'محمد الحلبي',
        toUser: 'المنصة',
        propertyId: 5,
        propertyName: 'villaDaraa',
        status: 'completed',
        paymentMethod: 'cash'
      }
    ];
    setTransactions(mockTransactions);
  };

  const filterTransactions = () => {
    let filtered = [...transactions];

    if (dateRange.start && dateRange.end) {
      filtered = filtered.filter(t => 
        t.date >= dateRange.start && t.date <= dateRange.end
      );
    }

    if (searchTerm) {
      filtered = filtered.filter(t =>
        t.description.includes(searchTerm) ||
        t.fromUser.includes(searchTerm) ||
        t.toUser.includes(searchTerm)
      );
    }

    setFilteredTransactions(filtered);
  };

  const calculateSummary = () => {
    const summary = filteredTransactions.reduce((acc, t) => {
      if (t.type === 'rent_payment' || t.type === 'commission') {
        acc.totalRevenue += t.amount;
      }
      if (t.type === 'security_deposit' && t.status === 'pending_refund') {
        acc.securityDeposits += t.amount;
      }
      if (t.commission) {
        acc.commissionEarned += t.commission;
      }
      if (t.status === 'pending') {
        acc.pendingPayments += t.amount;
      }
      return acc;
    }, {
      totalRevenue: 0,
      pendingPayments: 0,
      securityDeposits: 0,
      commissionEarned: 0
    });

    setSummary(summary);
  };

  const getTransactionIcon = (type) => {
    switch(type) {
      case 'rent_payment':
        return <Home className="w-4 h-4 text-blue-600" />;
      case 'security_deposit':
        return <Shield className="w-4 h-4 text-green-600" />;
      case 'commission':
        return <TrendingUp className="w-4 h-4 text-amber-600" />;
      default:
        return <DollarSign className="w-4 h-4" />;
    }
  };

  const exportToExcel = async () => {
    if (filteredTransactions.length === 0) {
      toast.error('لا توجد معاملات للتصدير');
      return;
    }

    setIsExporting(true);
    toast.loading('جاري تصدير البيانات...', { id: 'export' });

    try {
      const exportData = filteredTransactions.map(t => ({
        'رقم العملية': t.id,
        'التاريخ': t.date,
        'نوع العملية': t.type === 'rent_payment' ? 'دفعة إيجار' :
                       t.type === 'security_deposit' ? 'سلفة ضمان' :
                       t.type === 'commission' ? 'عمولة' : 'أخرى',
        'الوصف': t.description,
        'من': t.fromUser,
        'إلى': t.toUser,
        'المبلغ (ل.س)': t.amount,
        'العمولة (ل.س)': t.commission || 0,
        'الحالة': t.status === 'completed' ? 'مكتمل' :
                  t.status === 'pending' ? 'معلق' :
                  t.status === 'pending_refund' ? 'بإنتظار الاسترداد' : 'مؤكد',
      }));

      const summaryRow = {
        'رقم العملية': '',
        'التاريخ': '',
        'نوع العملية': '',
        'الوصف': '',
        'من': '',
        'إلى': '',
        'المبلغ (ل.س)': summary.totalRevenue,
        'العمولة (ل.س)': summary.commissionEarned,
        'الحالة': ''
      };
      
      exportData.push(summaryRow);

      const worksheet = XLSX.utils.json_to_sheet(exportData);
      
      const columnWidths = [
        { wch: 12 }, // رقم العملية
        { wch: 12 }, // التاريخ
        { wch: 12 }, // نوع العملية
        { wch: 30 }, // الوصف
        { wch: 20 }, // من
        { wch: 20 }, // إلى
        { wch: 15 }, // المبلغ
        { wch: 15 }, // العمولة
        { wch: 12 }, // الحالة
      ];
      worksheet['!cols'] = columnWidths;

      const range = XLSX.utils.decode_range(worksheet['!ref']);
      for (let C = range.s.c; C <= range.e.c; ++C) {
        const address = XLSX.utils.encode_col(C) + '1';
        if (!worksheet[address]) continue;
        worksheet[address].s = {
          font: { bold: true, sz: 12 },
          fill: { fgColor: { rgb: "F59E0B" } },
          alignment: { horizontal: "center", vertical: "center" }
        };
      }

      
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'دفتر الحسابات');
      
      const fileName = `دفتر_الحسابات_${new Date().toISOString().split('T')[0]}.xlsx`;
      
      XLSX.writeFile(workbook, fileName);
      
      toast.success(`تم تصدير ${filteredTransactions.length} معاملة بنجاح!`, { id: 'export' });
      
    } catch (error) {
      console.error('Error exporting to Excel:', error);
      toast.error('حدث خطأ أثناء تصدير البيانات', { id: 'export' });
    } finally {
      setIsExporting(false);
    }
  };

  const printReport = () => {
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`
      <!DOCTYPE html>
      <html dir="rtl">
      <head>
        <meta charset="UTF-8">
        <title>تقرير دفتر الحسابات</title>
        <style>
          body {
            font-family: 'Cairo', Arial, sans-serif;
            padding: 20px;
            direction: rtl;
          }
          .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f59e0b;
          }
          .title {
            font-size: 24px;
            font-weight: bold;
            color: #1f2937;
          }
          .subtitle {
            color: #6b7280;
            margin-top: 5px;
          }
          .summary {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-bottom: 30px;
          }
          .summary-card {
            background: #f9fafb;
            padding: 15px;
            border-radius: 12px;
            text-align: center;
          }
          .summary-value {
            font-size: 20px;
            font-weight: bold;
            color: #f59e0b;
          }
          table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
          }
          th, td {
            border: 1px solid #e5e7eb;
            padding: 10px;
            text-align: right;
          }
          th {
            background: #f59e0b;
            color: white;
            font-weight: bold;
          }
          .footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e5e7eb;
            color: #9ca3af;
            font-size: 12px;
          }
          @media print {
            .no-print {
              display: none;
            }
          }
        </style>
      </head>
      <body>
        <div class="header">
          <div class="title">تقرير دفتر الحسابات</div>
          <div class="subtitle">الفترة: ${dateRange.start || 'بداية السجلات'} - ${dateRange.end || 'حتى الآن'}</div>
          <div class="subtitle">تاريخ التقرير: ${new Date().toLocaleDateString('ar-SA')}</div>
        </div>
        
        <div class="summary">
          <div class="summary-card">
            <div>إجمالي الإيرادات</div>
            <div class="summary-value">${formatCurrency(summary.totalRevenue)}</div>
          </div>
          <div class="summary-card">
            <div>أرباح المنصة</div>
            <div class="summary-value">${formatCurrency(summary.commissionEarned)}</div>
          </div>
          <div class="summary-card">
            <div>سلف الضمان</div>
            <div class="summary-value">${formatCurrency(summary.securityDeposits)}</div>
          </div>
          <div class="summary-card">
            <div>المدفوعات المعلقة</div>
            <div class="summary-value">${formatCurrency(summary.pendingPayments)}</div>
          </div>
        </div>
        
        <table>
          <thead>
            <tr>
              <th>التاريخ</th>
              <th>الوصف</th>
              <th>من</th>
              <th>إلى</th>
              <th>المبلغ</th>
              <th>العمولة</th>
              <th>الحالة</th>
            </tr>
          </thead>
          <tbody>
            ${filteredTransactions.map(t => `
              <tr>
                <td>${t.date}</td>
                <td>${t.description}</td>
                <td>${t.fromUser}</td>
                <td>${t.toUser}</td>
                <td>${formatCurrency(t.amount)}</td>
                <td>${t.commission ? formatCurrency(t.commission) : '-'}</td>
                <td>${t.status === 'completed' ? 'مكتمل' : t.status === 'pending' ? 'معلق' : 'بإنتظار الرد'}</td>
              </tr>
            `).join('')}
          </tbody>
        </table>
        
        <div class="footer">
          <p>تقرير صادر عن نظام SweetHome لإدارة العقارات</p>
          <p>جميع الحقوق محفوظة © ${new Date().getFullYear()}</p>
        </div>
        
        <div class="no-print" style="text-align: center; margin-top: 20px;">
          <button onclick="window.print()" style="padding: 10px 20px; background: #f59e0b; color: white; border: none; border-radius: 8px; cursor: pointer;">
            طباعة التقرير
          </button>
        </div>
      </body>
      </html>
    `);
    printWindow.document.close();
  };

  return (
    <div className="space-y-6">
      <Toaster position="top-center" reverseOrder={false} />
      
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-gradient-to-br from-blue-600 to-blue-700 text-white rounded-xl p-5"
        >
          <div className="flex items-center justify-between mb-3">
            <Wallet className="w-8 h-8 opacity-80" />
            <span className="text-sm opacity-90">إجمالي الإيرادات</span>
          </div>
          <div className="text-2xl font-bold">{formatCurrency(summary.totalRevenue)}</div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-gradient-to-br from-amber-600 to-amber-700 text-white rounded-xl p-5"
        >
          <div className="flex items-center justify-between mb-3">
            <TrendingUp className="w-8 h-8 opacity-80" />
            <span className="text-sm opacity-90">أرباح المنصة</span>
          </div>
          <div className="text-2xl font-bold">{formatCurrency(summary.commissionEarned)}</div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-gradient-to-br from-green-600 to-green-700 text-white rounded-xl p-5"
        >
          <div className="flex items-center justify-between mb-3">
            <Shield className="w-8 h-8 opacity-80" />
            <span className="text-sm opacity-90">سلف الضمان</span>
          </div>
          <div className="text-2xl font-bold">{formatCurrency(summary.securityDeposits)}</div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="bg-gradient-to-br from-red-600 to-red-700 text-white rounded-xl p-5"
        >
          <div className="flex items-center justify-between mb-3">
            <TrendingDown className="w-8 h-8 opacity-80" />
            <span className="text-sm opacity-90">المدفوعات المعلقة</span>
          </div>
          <div className="text-2xl font-bold">{formatCurrency(summary.pendingPayments)}</div>
        </motion.div>
      </div>

      <div className="bg-white rounded-xl p-5 shadow-sm border">
        <div className="flex flex-col md:flex-row gap-4">
          <div className="flex-1 relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="بحث في المعاملات..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          
          <div className="flex gap-2">
            <input
              type="date"
              value={dateRange.start}
              onChange={(e) => setDateRange({...dateRange, start: e.target.value})}
              className="px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <span className="text-gray-500 self-center">إلى</span>
            <input
              type="date"
              value={dateRange.end}
              onChange={(e) => setDateRange({...dateRange, end: e.target.value})}
              className="px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <div className="flex gap-2">
            <button
              onClick={exportToExcel}
              disabled={isExporting || filteredTransactions.length === 0}
              className="px-5 py-3 bg-green-600 text-white rounded-xl flex items-center gap-2 hover:bg-green-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isExporting ? (
                <>
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  جاري التصدير...
                </>
              ) : (
                <>
                  <Download className="w-5 h-5" />
                  تصدير Excel
                </>
              )}
            </button>
            <button
              onClick={printReport}
              disabled={filteredTransactions.length === 0}
              className="px-5 py-3 bg-blue-600 text-white rounded-xl flex items-center gap-2 hover:bg-blue-700 transition-colors disabled:opacity-50"
            >
              <Printer className="w-5 h-5" />
              طباعة
            </button>
          </div>
        </div>

        {(dateRange.start || dateRange.end || searchTerm) && (
          <div className="mt-4 pt-4 border-t flex justify-between items-center">
            <div className="text-sm text-gray-500">
              <span className="font-medium">{filteredTransactions.length}</span> معاملة من إجمالي <span className="font-medium">{transactions.length}</span>
            </div>
            <button
              onClick={() => {
                setDateRange({ start: '', end: '' });
                setSearchTerm('');
              }}
              className="text-sm text-red-500 hover:text-red-600 flex items-center gap-1"
            >
              <X className="w-4 h-4" />
              إلغاء الفلترة
            </button>
          </div>
        )}
      </div>

      <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50 border-b">
              <tr>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">التاريخ</th>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">الوصف</th>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">من</th>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">إلى</th>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">المبلغ</th>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">العمولة</th>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">الحالة</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {filteredTransactions.map((transaction, index) => (
                <motion.tr
                  key={transaction.id}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: index * 0.05 }}
                  className="hover:bg-gray-50"
                >
                  <td className="px-6 py-4 text-sm">
                    <div className="flex items-center gap-2">
                      <Calendar className="w-4 h-4 text-gray-400" />
                      {transaction.date}
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                      {getTransactionIcon(transaction.type)}
                      <span className="text-sm font-medium">{transaction.description}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                      <User className="w-4 h-4 text-gray-400" />
                      <span className="text-sm">{transaction.fromUser}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                      <User className="w-4 h-4 text-gray-400" />
                      <span className="text-sm">{transaction.toUser}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 text-sm font-bold text-green-600">
                    {formatCurrency(transaction.amount)}
                  </td>
                  <td className="px-6 py-4 text-sm text-amber-600">
                    {transaction.commission ? formatCurrency(transaction.commission) : '-'}
                  </td>
                  <td className="px-6 py-4">
                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                      transaction.status === 'completed' ? 'bg-green-100 text-green-800' :
                      transaction.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
                      'bg-blue-100 text-blue-800'
                    }`}>
                      {transaction.status === 'completed' ? 'مكتمل' :
                       transaction.status === 'pending' ? 'معلق' : 'بإنتظار الرد'}
                    </span>
                  </td>
                </motion.tr>
              ))}
            </tbody>
          </table>
        </div>

        {filteredTransactions.length === 0 && (
          <div className="text-center py-12">
            <Wallet className="w-12 h-12 text-gray-300 mx-auto mb-3" />
            <p className="text-gray-500">لا توجد معاملات في هذه الفترة</p>
          </div>
        )}
      </div>

      {userType === 'owner' && (
        <div className="bg-blue-50 rounded-xl p-5">
          <h3 className="font-bold mb-4 flex items-center gap-2">
            <User className="w-5 h-5" />
            أرصدة المستأجرين
          </h3>
          <div className="space-y-3">
            <p className="text-gray-500 text-sm">لا توجد أرصدة حالياً</p>
          </div>
        </div>
      )}
    </div>
  );
}