"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import ExpiredPropertiesEmptySvg from "@/public/main-page/expired-properties-empty.svg";
import EmptyState from "@/components/common/EmptyState";
import { useAuth } from "@/context/AuthContext";
import { getMyProperties, MyProperty } from "@/services/userPanelService";
import UnitCard from "@/components/units/UnitCard";
import { FiTrash2 } from "react-icons/fi";

const ExpiredProperties = () => {
    const { token } = useAuth();
    const [expiredProperties, setExpiredProperties] = useState<MyProperty[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        if (!token) { setLoading(false); return; }
        getMyProperties(token).then((data) => {
            // Filter for expired properties only
            const expired = data.filter((p) => p.isExpired);
            setExpiredProperties(expired);
            setLoading(false);
        });
    }, [token]);

    if (loading) {
        return (
            <div className="flex flex-col h-full">
                <h4 className="mb-2 text-[#1D293D] text-lg font-medium">عقارات منتهية الصلاحية</h4>
                <div className="flex-1 flex items-center justify-center">
                    <div className="w-8 h-8 border-2 border-[#0092B8] border-t-transparent rounded-full animate-spin" />
                </div>
            </div>
        );
    }

    return (
        <div className="flex flex-col h-full">
            <h4 className="mb-2 text-[#1D293D] text-lg font-medium">عقارات منتهية الصلاحية</h4>

            {expiredProperties.length > 0 ? (
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4">
                    {expiredProperties.map((property) => (
                        <UnitCard
                            key={property.id}
                            card={{
                                title: property.title,
                                subtitle: property.address,
                                image: property.image,
                                price: property.price,
                                label: 'منتهي',
                                isFavorite: false,
                                area: property.area,
                                bedrooms: property.bedrooms,
                                bathrooms: property.bathrooms,
                            }}
                            showButtonText={false}
                            showLabel={true}
                        />
                    ))}
                </div>
            ) : (
                <div className="flex-1 flex flex-col justify-center items-center">
                    <Image
                        className="w-50 h-50 md:w-80 md:h-80"
                        src={ExpiredPropertiesEmptySvg}
                        alt="expired-properties-empty"
                        width={20}
                        height={20}
                    />
                    <p className="mt-6 text-[#45556C] font-semibold text-lg">لا يوجد عقارات منتهية الصلاحية</p>
                </div>
            )}
        </div>
    );
};

export default ExpiredProperties;