'use client'

import { Sidebar } from '@/components/Sidebar'
import { useLanguage } from '@/lib/LanguageContext'
import { useTheme } from '@/lib/ThemeContext'
import { useMessagesPage } from './_components/useMessagesPage'
import { ConversationList } from './_components/ConversationList'
import { ChatArea } from './_components/ChatArea'
import { ContactInfoPanel } from './_components/ContactInfoPanel'
import { NewConversationModal } from './_components/NewConversationModal'
import { ContextMenu } from './_components/ContextMenu'

export default function MessagesPage() {
  const { t } = useLanguage()
  const { isDark } = useTheme()
  const msg = useMessagesPage()

  return (
    <div className={`min-h-screen relative overflow-hidden ${
      isDark
        ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
        : 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
    }`}>
      {/* Animated Background Blobs */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className={`absolute -top-40 -right-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${
          isDark ? 'bg-purple-500 opacity-70' : 'bg-purple-300 opacity-50'
        }`} />
        <div className={`absolute -bottom-40 -left-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${
          isDark ? 'bg-blue-500 opacity-70' : 'bg-blue-300 opacity-50'
        }`} />
        <div className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 ${
          isDark ? 'bg-green-500 opacity-70' : 'bg-green-300 opacity-50'
        }`} />
      </div>

      <div className="relative z-10 flex min-h-screen gap-4 p-4">
        <Sidebar selectedTab="messages" />

        <main className="flex-1 flex gap-4 h-[calc(100vh-32px)]">
          {/* Conversations List */}
          <ConversationList
            isDark={isDark}
            filteredConversations={msg.filteredConversations}
            currentConversationId={msg.currentConversationId}
            unreadCount={msg.unreadCount}
            searchQuery={msg.searchQuery}
            setSearchQuery={msg.setSearchQuery}
            setShowNewConversation={msg.setShowNewConversation}
            selectConversation={msg.selectConversation}
            getConversationContact={msg.getConversationContact}
          />

          {/* Chat Area */}
          <ChatArea
            isDark={isDark}
            currentConversation={msg.currentConversation}
            currentContact={msg.currentContact}
            groupedMessages={msg.groupedMessages}
            messageInput={msg.messageInput}
            sendWithEmail={msg.sendWithEmail}
            isSending={msg.isSending}
            showEmojiPicker={msg.showEmojiPicker}
            showTemplates={msg.showTemplates}
            templates={msg.templates}
            setMessageInput={msg.setMessageInput}
            setSendWithEmail={msg.setSendWithEmail}
            setShowEmojiPicker={msg.setShowEmojiPicker}
            setShowTemplates={msg.setShowTemplates}
            setShowContactInfo={msg.setShowContactInfo}
            showContactInfo={msg.showContactInfo}
            handleSendMessage={msg.handleSendMessage}
            handleEmojiSelect={msg.handleEmojiSelect}
            handleContextMenu={msg.handleContextMenu}
            getSenderName={msg.getSenderName}
            pinConversation={msg.pinConversation}
            muteConversation={msg.muteConversation}
            setShowNewConversation={msg.setShowNewConversation}
          />

          {/* Contact Info Panel */}
          {msg.showContactInfo && msg.currentConversation && (
            <ContactInfoPanel
              contact={msg.currentContact}
              conversation={msg.currentConversation}
              onClose={() => msg.setShowContactInfo(false)}
              isDark={isDark}
            />
          )}
        </main>
      </div>

      {/* Modals & Overlays */}
      {msg.showNewConversation && (
        <NewConversationModal
          isDark={isDark}
          contacts={msg.contacts}
          onStartConversation={msg.handleStartConversation}
          onClose={() => msg.setShowNewConversation(false)}
        />
      )}

      {msg.contextMenu && (
        <ContextMenu
          isDark={isDark}
          contextMenu={msg.contextMenu}
          currentConversationId={msg.currentConversationId}
          deleteMessage={msg.deleteMessage}
          onClose={() => msg.setContextMenu(null)}
        />
      )}

      {/* Blob Animation Styles */}
      <style jsx>{`
        @keyframes blob {
          0% { transform: translate(0px, 0px) scale(1); }
          33% { transform: translate(30px, -50px) scale(1.1); }
          66% { transform: translate(-20px, 20px) scale(0.9); }
          100% { transform: translate(0px, 0px) scale(1); }
        }
        .animate-blob {
          animation: blob 7s infinite;
        }
        .animation-delay-2000 {
          animation-delay: 2s;
        }
        .animation-delay-4000 {
          animation-delay: 4s;
        }
        .scrollbar-hide::-webkit-scrollbar {
          display: none;
        }
        .scrollbar-hide {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
      `}</style>
    </div>
  )
}