"use client"
import { Input } from "@/components/ui/input";
import { getChats, Chat } from "@/services/userPanelService";
import { useAuth } from "@/context/AuthContext";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { FiSearch } from "react-icons/fi";
import { useEffect, useMemo, useState } from "react";
import { User as UserIcon } from "lucide-react";
import Timestamp from "@/components/Timestamp";
import { translate } from "@/lib/api";

const ChatsSidebar = () => {
    const path = usePathname();
    const { token, user } = useAuth();
    const [chats, setChats] = useState<Chat[]>([]);
    const [loading, setLoading] = useState(true);
    const [query, setQuery] = useState("");

    useEffect(() => {
        if (!token) return;
        async function loadChats() {
            setLoading(true);
            const data = await getChats(token as string);
            setChats(data);
            setLoading(false);
        }
        loadChats();
    }, [token]);

    const filteredChats = useMemo(() => {
        const q = query.trim().toLowerCase();
        if (!q) return chats;

        return chats.filter((c) => {
            const otherMember = c.chatMembers.find(m => m.memberId !== user?.id)?.memberable;
            const name = otherMember?.name.toLowerCase() || "";
            return name.includes(q);
        });
    }, [query, chats, user?.id]);

    return (
        <div className="flex gap-4 h-full">
            <div className="w-full md:w-100 h-full bg-[#F1F5F9] rounded-md flex flex-col gap-2 p-4">
                <div className="text-[#90A1B9] relative">
                    <FiSearch className="absolute top-1/2 -translate-y-1/2 right-2" />
                    <Input
                        type="text"
                        className="pr-8 bg-[#F8FAFC] border-[#CAD5E2] placeholder:text-[#90A1B9] text-[#45556C]"
                        placeholder="بحث"
                        value={query}
                        onChange={(e) => setQuery(e.target.value)}
                    />
                </div>
                <div className="flex flex-col gap-1 overflow-auto min-h-0">
                    {loading ? (
                        <div className="text-center py-4 text-gray-500">جاري التحميل...</div>
                    ) : filteredChats.length === 0 ? (
                        <div className="text-center py-4 text-gray-500">لا توجد محادثات</div>
                    ) : (
                        filteredChats.map((chat, index) => {
                            const isActive = path === `/user-panel/messages/${chat.id}`;
                            const isLast = index === filteredChats.length - 1;

                            // Find the other member in the chat (not the current user)
                            const otherMemberMember = chat.chatMembers.find(m => Number(m.memberId) !== Number(user?.id))
                                || chat.chatMembers[0]; // Fallback to first member if only one exists
                            const otherMember = otherMemberMember?.memberable;
                            const displayName = otherMember?.name || "مستخدم";
                            const displayAvatar = otherMember?.avatar;
                            const clientTypeLabel = translate(otherMember?.clientType || '');

                            return (
                                <Link
                                    key={chat.id}
                                    href={`/user-panel/messages/${chat.id}`}
                                    className={`flex items-start gap-3 py-4 px-3 rounded-md transition-colors
                                        ${isActive ? "bg-[#E2E8F0]" : "hover:bg-slate-200/50"}
                                        ${!isLast ? "border-b border-[#CAD5E2]" : ""}`}
                                >
                                    {/* Avatar */}
                                    <div className="size-10 flex-shrink-0">
                                        <img
                                            className="rounded-full w-full h-full object-cover border border-slate-200"
                                            src={displayAvatar || "/placeholder-avatar.png"}
                                            alt={displayName}
                                        />
                                    </div>

                                    {/* Content: Name, Time, Last Message */}
                                    <div className="flex-1 min-w-0 flex flex-col gap-1">
                                        {/* Row 1: Name + Timestamp */}
                                        <div className="flex items-center justify-between gap-2 w-full">
                                            {/* Name (with min-w-0 for ellipsis) */}
                                            <h4 className="text-[#1D293D] font-semibold truncate min-w-0 flex-1 flex flex-col">
                                                <span>{displayName}</span>
                                            </h4>

                                            {/* Timestamp on far LEFT (RTL context) */}
                                            <div className="flex-shrink-0">
                                                {chat.latestMessage?.createdAt ? (
                                                    <Timestamp
                                                        value={chat.latestMessage.createdAt}
                                                        format="time"
                                                        className="text-[#62748E] text-[11px] whitespace-nowrap"
                                                    />
                                                ) : null}
                                            </div>
                                        </div>

                                        {/* Row 2: Last Message with Ellipsis */}
                                        <p className="text-slate-500 text-sm truncate w-full">
                                            {chat.latestMessage?.text || "اضغط لمشاهدة الرسائل"}
                                        </p>
                                    </div>
                                </Link>
                            )
                        })
                    )}
                </div>
            </div>
        </div>
    );
}

export default ChatsSidebar;