import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { AppDispatch, RootState } from '../app/store';
import { fetchMessageData } from '../app/reducers/messages';
import LoadingSpinner from '../components/partials/LoadingSpinner';
import MetaTags from '../components/partials/MetaTags';

// Define the chat interface
interface Chat {
  id: number;
  name: string;
  avatar: string;
  lastMessage: string;
  time: string;
  isOnline: boolean;
  unread: number;
}

export default function Message() {
    const { messages, dataFetched } = useSelector((state: RootState) => state.messages);
    const dispatch = useDispatch<AppDispatch>();

    const [activeTab, setActiveTab] = useState('chat'); // 'chat' or 'expired'
    const navigate = useNavigate();
    
    useEffect(() => {
        dispatch(fetchMessageData())
    }, [dispatch]);
    // Static support chat that will always be shown first
    const supportChat: Chat = {
        id: 1,
        name: 'Support',
        avatar: '/src/images/matrimonial_icon.png',
        lastMessage: 'Here are a few...',
        time: '50 min ago',
        isOnline: false,
        unread: 0
    };
   

    const handleChatClick = (chatId: number, receiver_photo: string, receiver_name: string) => {
        localStorage.setItem('chat_receiver_photo', receiver_photo);
        localStorage.setItem('chat_receiver_name', receiver_name);
        navigate(`/messages/${chatId}`);
    };


    return (
        <div className="max-w-7xl mt-[72px] md:mt-[20px] mx-auto px-4 pb-4 pt-5">
            <MetaTags title="Messages" />
            {!dataFetched && <LoadingSpinner text='Getting Messages' />}
            {/* Container with rounded top and bottom and shadow */}
            <div className="bg-white rounded-t-2xl rounded-b-2xl shadow-md max-w-7xl mx-auto">
                {/* Tabs - centered and smaller */}
                <div className="flex justify-center rounded-t-2xl overflow-hidden">
                    <div className="flex w-full md:w-3/4 lg:w-1/2">
                        <button 
                            className={`flex-1 py-3 text-center font-medium ${activeTab === 'chat' ? 'bg-amber-100 text-amber-900' : 'bg-gray-100 text-gray-600'}`}
                            onClick={() => setActiveTab('chat')}
                        >
                            Chat
                        </button>
                        <button 
                            className={`flex-1 py-3 text-center font-medium ${activeTab === 'expired' ? 'bg-amber-100 text-amber-900' : 'bg-gray-100 text-gray-600'}`}
                            onClick={() => setActiveTab('expired')}
                        >
                            Expired
                        </button>
                    </div>
                </div>

                {/* Chat List */}
                <div className="rounded-b-2xl overflow-hidden">
                <div 
                    key={supportChat.id}
                    className={`p-4 border-b cursor-pointer hover:bg-gray-50 bg-amber-50`}
                    onClick={() => handleChatClick(supportChat.id, supportChat.avatar, supportChat.name)}
                >
                    <div className="flex items-center">
                        <div className="relative">
                            <img 
                                src="/src/images/matrimonial_icon.png"
                                alt={supportChat.name} 
                                className="w-12 h-12 rounded-full object-cover"
                            />
                            {supportChat.isOnline && (
                                <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
                            )}
                        </div>
                        <div className="ml-3 flex-1">
                            <div className="flex justify-between items-center">
                                <h3 className="font-medium">{supportChat.name}</h3>
                                <span className="text-xs text-gray-500">{supportChat.lastMessage}</span>
                            </div>
                            <p className="text-sm text-gray-600 truncate">{supportChat.lastMessage}</p>
                        </div>
                        {supportChat.unread > 0 && (
                            <div className="ml-2 bg-primary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                                {supportChat.unread}
                            </div>
                        )}
                    </div>
                </div>
                    {
                        messages.filter(chat => chat !== null).map(chat => (
                            <div 
                                key={chat.id}
                                className={`p-4 border-b cursor-pointer hover:bg-gray-50 ${chat.id === supportChat.id ? 'bg-amber-50' : ''}`}
                                onClick={() => handleChatClick(chat.id, chat.member_photo || "/src/images/registration/profile.png", chat.member_name)}
                            >
                                <div className="flex items-center">
                                    <div className="relative">
                                        <img 
                                            src={chat.member_photo || "/src/images/registration/profile.png"}
                                            alt={chat.member_name || "User"} 
                                            className="w-12 h-12 rounded-full object-cover"
                                            referrerPolicy='no-referrer'
                                        />
                                        {chat.active == 1 && (
                                            <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
                                        )}
                                    </div>
                                    <div className="ml-3 flex-1">
                                        <div className="flex justify-between items-center">
                                            <h3 className="font-medium">{chat.member_name || "Unknown User"}</h3>
                                            <span className="text-xs text-gray-500">{chat.last_message_time || ""}</span>
                                        </div>
                                        <p className="text-sm text-gray-600 truncate">{chat.last_message || "No messages yet"}</p>
                                    </div>
                                    {chat.unseen_message_count > 0 && (
                                        <div className="ml-2 bg-primary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                                            {chat.unseen_message_count}
                                        </div>
                                    )}
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>
    );
}