'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/stores/useAuthStore';
import { useChannelStore } from '@/stores/useChannelStore';
import { useMessageStore } from '@/stores/useMessageStore';
import { wsClient } from '@/lib/socket';
import Sidebar from '@/components/sidebar/Sidebar';

export default function MainLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const { isAuthenticated, isLoading, loadUser, user } = useAuthStore();
  const { loadChannels } = useChannelStore();
  const { addMessage, addDirectMessage, setUserTyping, setUserStoppedTyping, loadConversations } = useMessageStore();

  useEffect(() => {
    loadUser();
  }, [loadUser]);

  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      router.push('/login');
    }
  }, [isAuthenticated, isLoading, router]);

  useEffect(() => {
    if (isAuthenticated) {
      loadChannels();
      loadConversations();

      // Setup WebSocket event handlers
      wsClient.updateHandlers({
        onNewMessage: (message) => {
          addMessage(message.channel_id, message);
        },
        onNewDM: (dm) => {
          addDirectMessage(dm);
          // Reload conversations to update unread count
          loadConversations();
        },
        onUserTyping: (data) => {
          if (data.user_id !== user?.id) {
            setUserTyping(data.channel_id, data.user_id);
            // Auto-clear typing after 3 seconds
            setTimeout(() => {
              setUserStoppedTyping(data.channel_id, data.user_id);
            }, 3000);
          }
        },
        onUserStoppedTyping: (data) => {
          setUserStoppedTyping(data.channel_id, data.user_id);
        },
      });
    }
  }, [isAuthenticated, loadChannels, loadConversations, addMessage, addDirectMessage, setUserTyping, setUserStoppedTyping, user]);

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-900">
        <div className="text-white text-xl">Loading...</div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return null;
  }

  return (
    <div className="flex h-screen bg-gray-900 text-white overflow-hidden">
      <Sidebar />
      <main className="flex-1 flex flex-col overflow-hidden">
        {children}
      </main>
    </div>
  );
}