"use client";

import { useEffect, useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import UnitCard from "@/components/units/UnitCard";
import { PropertyProjectCard } from "@/components/main-page/propertyProjectCard";
import { FilterControls } from "@/components/common/FilterControls";
import EmptyState from "@/components/common/EmptyState";
import { useAuth } from "@/context/AuthContext";
import { getFavorites, FavoriteProperty } from "@/services/userPanelService";
import { FiHeart } from "react-icons/fi";

const FavoritesPage = () => {
    const { token } = useAuth();
    const [favorites, setFavorites] = useState<FavoriteProperty[]>([]);
    const [loading, setLoading] = useState(true);
    const [propertyType, setPropertyType] = useState('all');

    useEffect(() => {
        if (!token) { setLoading(false); return; }
        getFavorites(token).then((data) => {
            setFavorites(data);
            setLoading(false);
        });
    }, [token]);

    // Split favorites by type_of_property
    const propertyFavorites = favorites.filter(f => f.typeOfProperty !== 'project');
    const projectFavorites = favorites.filter(f => f.typeOfProperty === 'project');

    // Further filter properties by section (sale/rent)
    const filteredProperties = propertyFavorites.filter(f => {
        if (propertyType === 'all') return true;
        return propertyType === 'rent' ? f.section === 'rent' : f.section === 'sale';
    });

    if (loading) {
        return (
            <div className="flex-1 flex flex-col">
                <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>
            <h4 className="mb-2 text-[#1D293D] text-lg font-medium">العقارات المفضلة</h4>

            <Tabs defaultValue="properties" dir="rtl">
                <div className="border-b mb-1">
                    <TabsList className="bg-transparent rounded-none">
                        <TabsTrigger
                            value="properties"
                            className="rounded-none px-4 py-2 text-gray-600 data-[state=active]:bg-transparent data-[state=active]:text-black text-base"
                        >
                            العقارات
                        </TabsTrigger>
                        <TabsTrigger
                            value="projects"
                            className="rounded-none px-4 py-2 text-gray-600 data-[state=active]:bg-transparent data-[state=active]:text-black text-base"
                        >
                            المشاريع
                        </TabsTrigger>
                    </TabsList>
                </div>

                <TabsContent value="properties">
                    <FilterControls propertyType={propertyType} setPropertyType={setPropertyType} />
                    {filteredProperties.length > 0 ? (
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4">
                            {filteredProperties.map((fav) => (
                                <UnitCard
                                    key={fav.id}
                                    card={{
                                        title: fav.title,
                                        subtitle: fav.subtitle,
                                        image: fav.image,
                                        price: fav.price,
                                        label: fav.badge || fav.section === 'sale' ? 'بيع' : 'إيجار',
                                        isFavorite: true,
                                        area: fav.area,
                                        bedrooms: fav.bedrooms,
                                        bathrooms: fav.bathrooms,
                                        isPremium: fav.isPremium,
                                    }}
                                    showButtonText={false}
                                    showLabel={false}
                                />
                            ))}
                        </div>
                    ) : (
                        <EmptyState
                            icon={FiHeart}
                            title="لا توجد عقارات مفضلة"
                            description={
                                propertyType === 'all'
                                    ? 'لم تقم بإضافة أي عقارات للمفضلة بعد'
                                    : propertyType === 'rent'
                                        ? 'لم تقم بإضافة عقارات إيجار للمفضلة بعد'
                                        : 'لم تقم بإضافة عقارات بيع للمفضلة بعد'
                            }
                        />
                    )}
                </TabsContent>

                <TabsContent value="projects">
                    {projectFavorites.length > 0 ? (
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                            {projectFavorites.map((fav) => (
                                <PropertyProjectCard
                                    key={fav.id}
                                    id={fav.propertyId}
                                    title={fav.title}
                                    subtitle={fav.subtitle}
                                    image={fav.image}
                                    price={fav.price}
                                    area={fav.area}
                                    bedrooms={fav.bedrooms}
                                    bathrooms={fav.bathrooms}
                                    floors={fav.floors}
                                    company={fav.company}
                                    companyLogo={fav.companyLogo}
                                    projectsno="مشروع"
                                    isFavorite={true}
                                />
                            ))}
                        </div>
                    ) : (
                        <EmptyState
                            icon={FiHeart}
                            title="لا توجد مشاريع مفضلة"
                            description="لم تقم بإضافة مشاريع للمفضلة بعد"
                        />
                    )}
                </TabsContent>
            </Tabs>
        </div>
    );
};

export default FavoritesPage;