import { ChatAreaContent } from '@admin/components/addOns/addon-sidebars/chats/ChatAreaContent';
import { ChatSidebarContent } from '@admin/components/addOns/addon-sidebars/chats/ChatSidebarContent';
import { GroupInfoContent } from '@admin/components/addOns/addon-sidebars/chats/GroupInfoContent';
import { Button } from '@admin/components/ui/button';
import { chats, groupInfo, messages as initialMessages } from '@admin/data/chatdata';
import useAddOn from '@/hooks/use-addons';
import type { Message } from '@admin/lib/types';
import { Link } from '@inertiajs/react';
import { ArrowLeft, ExternalLinkIcon, Info, X } from 'lucide-react';
import { useState } from 'react';

type ChatView = 'sidebar' | 'chat' | 'info';

interface ChatAddOnSidebarProps {
    title?: string;
    onClose?: () => void;
}

export function ChatAddOnSidebar({ title = 'Chats', onClose }: ChatAddOnSidebarProps) {
    const { addOnClose } = useAddOn();

    const [activeChat, setActiveChat] = useState('2');
    const [messages, setMessages] = useState<Message[]>(initialMessages);
    const [showGroupInfo, setShowGroupInfo] = useState(false);
    const [chatView, setChatView] = useState<ChatView>('sidebar');

    const handleSendMessage = (content: string) => {
        const newMessage: Message = {
            id: String(messages.length + 1),
            senderId: 'current',
            senderName: 'You',
            content,
            timestamp: new Date().toLocaleTimeString('en-US', {
                hour: '2-digit',
                minute: '2-digit',
            }),
            read: false,
        };
        setMessages([...messages, newMessage]);
    };

    const handleChatSelect = (chatId: string) => {
        setActiveChat(chatId);
        setChatView('chat');
        setShowGroupInfo(false);
    };

    const handleGroupInfoToggle = () => {
        setShowGroupInfo(!showGroupInfo);
        if (!showGroupInfo) {
            setChatView('info');
        } else {
            setChatView('chat');
        }
    };

    const handleBackToSidebar = () => {
        setChatView('sidebar');
        setShowGroupInfo(false);
    };

    const currentChat = chats?.find((chat) => chat.id === activeChat);

    return (
        <div className="flex h-full w-full flex-col bg-card">
            {/* Header */}
            <div className="flex items-center justify-between border-b px-4 py-3">
                <div className="flex items-center gap-3">
                    {chatView !== 'sidebar' && (
                        <Button variant="ghost" size="sm" onClick={handleBackToSidebar} className="h-8 w-8 p-0">
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                    )}

                    <h2 className="text-xl font-semibold tracking-tight">
                        {chatView === 'sidebar' ? title : chatView === 'chat' ? currentChat?.name || 'Chat' : 'Chat Info'}
                    </h2>
                </div>
                <div className="flex items-center gap-2">
                    {chatView === 'chat' && (
                        <div className="">
                            <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={handleGroupInfoToggle}>
                                <Info className="h-4 w-4" />
                            </Button>
                        </div>
                    )}
                    <Link href="/tools/chats">
                        <Button variant="ghost" size="sm" onClick={onClose} className="h-8 w-8 bg-success/5 p-0">
                            <ExternalLinkIcon className="h-3 w-3 text-success" />
                        </Button>
                    </Link>
                    <Button variant="ghost" size="sm" onClick={addOnClose} className="h-8 w-8 p-0">
                        <X className="h-3 w-3" />
                    </Button>
                </div>
            </div>

            {/* Content */}
            <div className="flex-1 overflow-hidden">
                {chatView === 'sidebar' && <ChatSidebarContent chats={chats} activeChat={activeChat} onChatSelect={handleChatSelect} />}

                {chatView === 'chat' && <ChatAreaContent messages={messages} onSendMessage={handleSendMessage} onInfoClick={handleGroupInfoToggle} />}

                {chatView === 'info' && (
                    <GroupInfoContent
                        groupInfo={groupInfo}
                        onClose={() => {
                            setShowGroupInfo(false);
                            setChatView('chat');
                        }}
                    />
                )}
            </div>
        </div>
    );
}