'use client'
import { useState, useEffect } from 'react';
import Link from 'next/link'; // من upstream
import Pagination from '@/components/common/pagination';
import { PropertyRequestsCard } from '@/components/main-page/propertyRequestsCard';
import SectionTitle from '@/components/common/sectionTitle';
import { getPropertyRequests, PropertyRequestSearchItem } from '@/lib/api'; // من كودك لضمان الربط
import { Button } from '@/components/ui/button'; // من upstream

export default function PropertyRequests() {
  const [page, setPage] = useState(1);
  const [requests, setRequests] = useState<PropertyRequestSearchItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [totalPages, setTotalPages] = useState(1);
  const [totalCount, setTotalCount] = useState(0);
  const pageSize = 12;

  // الحفاظ على منطق الـ Fetch الخاص بك
  useEffect(() => {
    const fetchRequests = async () => {
      setLoading(true);
      try {
        const result = await getPropertyRequests({ per_page: pageSize, page });
        setRequests(result.requests);
        setTotalPages(result.meta.last_page);
        setTotalCount(result.meta.total);
      } catch (error) {
        console.error("Error fetching property requests:", error);
        setRequests([]);
      } finally {
        setLoading(false);
      }
    };
    fetchRequests();
  }, [page]);

  return (
    <div className="container mx-auto px-4 py-8">
      {/* دمج الهيدر الجديد (زر الإضافة) مع عنوانك */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <SectionTitle
          title="الطلبات العقارية"
          description="استكشف أحدث العقارات المنشورة واطّلع على الطلبات العقارية النشطة. فرصة مثالية للبيع أو الشراء بخطوات بسيطة وواضحة."
        />
        <Link href="/property-requests/add" className="shrink-0">
          <Button className="rounded-full bg-[#052531] hover:bg-[#052531]/90">
            إضافة طلب عقار
          </Button>
        </Link>
      </div>

      {/* الحفاظ على منطق التحميل والبيانات الحقيقية الخاص بك */}
      {loading ? (
        <div className="flex justify-center items-center py-20">
          <div className="text-lg text-gray-500">جاري التحميل...</div>
        </div>
      ) : requests.length === 0 ? (
        <div className="flex flex-col justify-center items-center py-20">
          <div className="text-lg text-gray-500 mb-2">لا توجد طلبات جارية</div>
          <p className="text-gray-400 text-center max-w-xs">
            حالياً لا توجد طلبات عقارية نشطة. سيتم تحديث القائمة فور وصول طلبات جديدة.
          </p>
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-8">
            {requests.map((request) => (
              <PropertyRequestsCard key={request.id} {...request} />
            ))}
          </div>
          <div className="mt-8">
            <Pagination
              currentPage={page}
              totalPages={totalPages}
              pageSize={pageSize}
              totalCount={totalCount}
              onPageChange={setPage}
            />
          </div>
        </>
      )}
    </div>
  );
}