'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { CreditCard, Download, Eye } from 'lucide-react';
import AuthService from '@/app/services/AuthService';
import Link from 'next/link';

const mockPayments = [
  {
    id: 1,
    property: 'فيلا فاخرة في المزة',
    amount: 2500000,
    date: '2024-03-10',
    status: 'completed',
    invoiceId: 'INV-001'
  },
  {
    id: 2,
    property: 'شقة حديثة في الشهباء',
    amount: 750000,
    date: '2024-03-05',
    status: 'completed',
    invoiceId: 'INV-002'
  }
];

export default function PaymentsPage() {
  const router = useRouter();
  const [payments, setPayments] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (AuthService.isAdmin()) {
      router.push('/');
      return;
    }
    setTimeout(() => {
      setPayments(mockPayments);
      setIsLoading(false);
    }, 500);
  }, [router]);

  const formatCurrency = (amount) => amount?.toLocaleString() + ' ل.س';

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-amber-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
          <p className="text-gray-600">جاري التحميل...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="container mx-auto px-4 max-w-4xl">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">المدفوعات</h1>
          <p className="text-gray-600">سجل المعاملات المالية والفواتير</p>
        </div>

        {payments.length === 0 ? (
          <div className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300">
            <CreditCard className="w-16 h-16 text-gray-300 mx-auto mb-4" />
            <h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد معاملات</h3>
            <p className="text-gray-500">ستظهر هنا مدفوعاتك للحجوزات</p>
          </div>
        ) : (
          <div className="space-y-4">
            {payments.map((payment) => (
              <div key={payment.id} className="bg-white rounded-2xl shadow-sm border border-gray-200 p-5 hover:shadow-md transition-all">
                <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                  <div>
                    <h3 className="font-bold text-gray-900">{payment.property}</h3>
                    <p className="text-sm text-gray-500 mt-1">رقم الفاتورة: {payment.invoiceId}</p>
                    <p className="text-xs text-gray-400 mt-2">{payment.date}</p>
                  </div>
                  <div className="text-right">
                    <div className="text-xl font-bold text-amber-600">{formatCurrency(payment.amount)}</div>
                    <span className="inline-block px-2 py-1 bg-green-100 text-green-800 rounded-lg text-xs mt-1">
                      مكتمل
                    </span>
                  </div>
                </div>
               
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}