"use client"

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import UnitCard from "@/components/units/UnitCard";
import UserDetailsSidebar from "@/components/show-user-details/UserDetailsSidebar";
import Pagination from "@/components/common/pagination";
import { PropertyProjectCard } from "@/components/main-page/propertyProjectCard";
import { PropertyRequestsCard } from "@/components/main-page/propertyRequestsCard";
import { useEffect, useState, use } from "react";
import { getClientById, getOwnerProperties, getOwnerRequests } from "@/services/userPanelService";
import SegmentedControl from "@/components/common/SegmentedControl";

interface UserDetailsProps {
    params: Promise<{ id: string }>;
}

const UserDetails = ({ params }: UserDetailsProps) => {
    const { id } = use(params);
    const [client, setClient] = useState<any>(null);
    const [properties, setProperties] = useState<any[]>([]);
    const [requests, setRequests] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [estateFilter, setEstateFilter] = useState('all');

    useEffect(() => {
        if (!id) return;
        async function loadData() {
            setLoading(true);
            try {
                const [clientData, propsData, reqsData] = await Promise.all([
                    getClientById(id),
                    getOwnerProperties(id, 'client'),
                    getOwnerRequests(id)
                ]);
                setClient(clientData);
                setProperties(propsData);
                setRequests(reqsData);
            } catch (error) {
                console.error("Error loading user details:", error);
            } finally {
                setLoading(false);
            }
        }
        loadData();
    }, [id]);

    const estates = properties.filter(p => !p.is_project);
    const projects = properties.filter(p => p.is_project);

    const filteredEstates = estates.filter(p => {
        if (estateFilter === 'all') return true;
        if (estateFilter === 'rent') return p.section === 'rent';
        return p.section === 'sale' || p.section === 'بيع';
    });

    if (loading) {
        return (
            <div className="flex justify-center items-center min-h-[60vh]">
                <div className="text-center">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#0092B8] mx-auto mb-4"></div>
                </div>
            </div>
        );
    }

    if (!client) return null;

    return (
        <div className="flex flex-col md:flex-row gap-6 md:items-start py-8 px-6">
            <UserDetailsSidebar client={client} id={id} />

            <div className="flex-1">
                <Tabs defaultValue="estates" dir="rtl">
                    <div className="border-b mb-1">
                        <TabsList className="bg-transparent rounded-none">
                            <TabsTrigger
                                value="estates"
                                className="rounded-none px-4 py-2 text-gray-600 data-[state=active]:bg-transparent data-[state=active]:text-black text-base shadow-none border-none"
                            >
                                العقارات
                            </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 shadow-none border-none"
                            >
                                المشاريع
                            </TabsTrigger>
                            <TabsTrigger
                                value="requests"
                                className="rounded-none px-4 py-2 text-gray-600 data-[state=active]:bg-transparent data-[state=active]:text-black text-base shadow-none border-none"
                            >
                                الطلبات العقارية
                            </TabsTrigger>
                        </TabsList>
                    </div>

                    <TabsContent value="estates" className="mt-6">
                        <div className="mb-6">
                            <SegmentedControl
                                options={[
                                    { id: 'all', label: 'الكل' },
                                    { id: 'sale', label: 'بيع' },
                                    { id: 'rent', label: 'ايجار' },
                                ]}
                                value={estateFilter}
                                onChange={setEstateFilter}
                                className="md:justify-start my-0"
                            />
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            {filteredEstates.map((p, index) => (
                                <UnitCard
                                    key={index}
                                    card={{
                                        image: p.images?.[0]?.url || p.image || '/no-image.png',
                                        title: p.title || '',
                                        label: p.is_premium ? 'مميز' : '',
                                        isFavorite: false,
                                        price: p.price ? parseFloat(p.price).toLocaleString() : '0',
                                        area: p.spaces || 0,
                                        bedrooms: p.room || 0,
                                        bathrooms: p.bathroom || 0,
                                        isPremium: !!p.is_premium,
                                        subtitle: p.address || ''
                                    }}
                                    showButtonText={false}
                                />
                            ))}
                        </div>
                    </TabsContent>

                    <TabsContent value="projects" className="mt-6">
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            {projects.map((p) => (
                                <PropertyProjectCard
                                    key={p.id}
                                    id={p.id}
                                    title={p.title || ''}
                                    subtitle={p.address || ''}
                                    image={p.images?.[0]?.url || p.image || '/no-image.png'}
                                    price={p.price ? parseFloat(p.price).toLocaleString() : '0'}
                                    area={parseInt(p.spaces || '0')}
                                    bedrooms={parseInt(p.room || '0')}
                                    bathrooms={parseInt(p.bathroom || '0')}
                                    floors={0}
                                    company={p.owner?.name || client.name}
                                    companyLogo={p.owner?.avatar || client.avatar || '/placeholder-avatar.png'}
                                    projectsno={p.project_no || ""}
                                    isFavorite={false}
                                />
                            ))}
                        </div>
                    </TabsContent>

                    <TabsContent value="requests" className="mt-6">
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            {Array.isArray(requests) && requests.map((r) => (
                                <PropertyRequestsCard
                                    key={r.id}
                                    title={r.title || ''}
                                    subtitle={r.address || ''}
                                    badge={r.section === 'sale' || r.section === 'بيع' ? 'بيع' : 'إيجار'}
                                    price={r.price ? parseFloat(r.price).toLocaleString() : 'سعر السوق'}
                                    company={r.owner?.company_name || r.client?.name || r.owner?.name || ''}
                                    companyLogo={r.owner?.avatar || r.client?.avatar || '/placeholder-avatar.png'}
                                    daysLeft={r.created_at ? Math.max(0, Math.floor((new Date().getTime() - new Date(r.created_at).getTime()) / (1000 * 3600 * 24))) : 0}
                                    area={r.spaces}
                                    bedrooms={parseInt(r.room || '0')}
                                    bathrooms={parseInt(r.bathroom || '0')}
                                    propertyType={r.type_of_property || 'شقة'}
                                />
                            ))}
                        </div>
                    </TabsContent>
                </Tabs>
                <div className="mt-8">
                    <Pagination currentPage={1} totalPages={1} pageSize={10} totalCount={properties.length + requests.length} />
                </div>
            </div>

        </div>
    )
};

export default UserDetails;