import React, { useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useCommunicationsStore } from './services/communicationsService';
import { CommunicationTab } from './types';
import { CommunicationsHeader } from './components/CommunicationsHeader';
import { MessengersView } from './components/MessengersView';
import { EmailView } from './components/EmailView';
import { ChannelsView } from './components/ChannelsView';
import { ContactsView } from './components/ContactsView';
import { SettingsView } from './components/SettingsView';
import {
  AddContactModal,
  ComposeEmailModal,
  ConnectChannelModal,
  CreateChannelModal,
} from './components/Modals';

export function CommunicationsModule() {
  const [searchParams, setSearchParams] = useSearchParams();
  const { activeTab, setActiveTab } = useCommunicationsStore();

  const [isComposeEmailOpen, setIsComposeEmailOpen] = useState(false);
  const [isCreateChannelOpen, setIsCreateChannelOpen] = useState(false);
  const [isAddContactOpen, setIsAddContactOpen] = useState(false);
  const [isConnectChannelOpen, setIsConnectChannelOpen] = useState(false);

  // Sync tab with URL search param
  const urlTab = searchParams.get('tab') as CommunicationTab | null;
  const currentTab = urlTab && ['messengers', 'email', 'channels', 'contacts', 'settings'].includes(urlTab)
    ? urlTab
    : activeTab;

  const handleTabChange = (tab: CommunicationTab) => {
    setActiveTab(tab);
    setSearchParams({ tab });
  };

  return (
    <div className="h-full min-h-0 flex flex-col bg-[var(--krona-bg-workspace)] overflow-hidden">
      {/* Header */}
      <CommunicationsHeader
        activeTab={currentTab}
        onTabChange={handleTabChange}
        onAddChannel={() => setIsConnectChannelOpen(true)}
        unreadChats={48}
        unreadEmails={10}
        unreadChannels={4}
      />

      {/* Body Views */}
      <main className="flex-1 min-h-0 flex flex-col overflow-hidden">
        {currentTab === 'messengers' && (
          <MessengersView
            onOpenConnectModal={() => setIsConnectChannelOpen(true)}
            onOpenAddContactModal={() => setIsAddContactOpen(true)}
          />
        )}
        {currentTab === 'email' && (
          <EmailView onComposeEmail={() => setIsComposeEmailOpen(true)} />
        )}
        {currentTab === 'channels' && (
          <ChannelsView onCreateChannelModal={() => setIsCreateChannelOpen(true)} />
        )}
        {currentTab === 'contacts' && (
          <ContactsView onAddContactModal={() => setIsAddContactOpen(true)} />
        )}
        {currentTab === 'settings' && <SettingsView />}
      </main>

      {/* Modals */}
      <ComposeEmailModal
        isOpen={isComposeEmailOpen}
        onClose={() => setIsComposeEmailOpen(false)}
      />
      <CreateChannelModal
        isOpen={isCreateChannelOpen}
        onClose={() => setIsCreateChannelOpen(false)}
      />
      <AddContactModal
        isOpen={isAddContactOpen}
        onClose={() => setIsAddContactOpen(false)}
      />
      <ConnectChannelModal
        isOpen={isConnectChannelOpen}
        onClose={() => setIsConnectChannelOpen(false)}
      />
    </div>
  );
}

export default CommunicationsModule;