import { ChatItem } from '@admin/components/chat/chat-item';
import { Button } from '@admin/components/ui/button';
import { Input } from '@admin/components/ui/input';
import { Tabs, TabsList, TabsTrigger } from '@admin/components/ui/tabs';
import type { Chat } from '@admin/lib/types';
import { MessageSquareText, Search, SquarePen, Users } from 'lucide-react';
import { useState } from 'react';

interface ChatSidebarContentProps {
    chats: Chat[];
    activeChat?: string;
    onChatSelect?: (chatId: string) => void;
}

export function ChatSidebarContent({ chats, activeChat, onChatSelect }: ChatSidebarContentProps) {
    const [searchQuery, setSearchQuery] = useState('');

    const filteredChats = chats.filter((chat) => chat.name.toLowerCase().includes(searchQuery.toLowerCase()));

    return (
        <div className="flex h-full w-full flex-col bg-card">
            {/* Search Bar */}
            <div className="border-b border-border p-3">
                <div className="relative">
                    <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 bg-card text-muted-foreground" />
                    <Input placeholder="Search" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="bg-background pl-9" />
                    <Button size="icon" variant="ghost" className="absolute top-1/2 right-1 h-7 w-7 -translate-y-1/2">
                        <SquarePen className="h-4 w-4 text-text-gray" />
                    </Button>
                </div>
            </div>

            {/* Tabs */}
            <div className="border-b border-border p-2">
                <Tabs defaultValue="chats" className="w-full">
                    <TabsList className="grid w-full grid-cols-2 bg-background">
                        <TabsTrigger value="chats" className="gap-2">
                            <MessageSquareText className="h-4 w-4 text-text-gray" />
                            Chats
                        </TabsTrigger>
                        <TabsTrigger value="contacts" className="gap-2">
                            <Users className="h-4 w-4 text-text-gray" />
                            Contacts
                        </TabsTrigger>
                    </TabsList>
                </Tabs>
            </div>

            {/* Messages Header */}
            <div className="p-3">
                <h2 className="font-semibold">Messages</h2>
            </div>

            {/* Chat List */}
            <div className="flex-1 overflow-y-auto">
                {filteredChats.map((chat) => (
                    <ChatItem key={chat.id} chat={chat} active={activeChat === chat.id} onClick={() => onChatSelect?.(chat.id)} />
                ))}
            </div>
        </div>
    );
}