<template>
  <div class="chat-container">
    <header class="header">
      <h1>SingleChat</h1>
    </header>
    
    <MenuBar />
    
    <div class="horizontal-box">
      <UserList />
      
      <div class="content">
        <div v-if="!chatStore.isLoggedIn" class="login-form">
          <LoginForm />
        </div>
        
        <div v-else class="main-content-wrapper">
          <SearchView v-if="chatStore.currentView === 'search'" />
          <InboxView v-else-if="chatStore.currentView === 'inbox'" />
          <HistoryView v-else-if="chatStore.currentView === 'history'" />
          <div v-else class="chat-content">
            <div v-if="chatStore.errorMessage" class="error-message">
              {{ chatStore.errorMessage }}
            </div>
            <div v-else-if="chatStore.currentConversation && currentUserInfo" :class="['chat-header', 'chat-header-gender-' + currentUserInfo.gender]">
              <h2>{{ chatStore.currentConversation }} ({{ currentUserInfo.gender }})</h2>
              <div class="chat-header-info">
                <span v-if="currentUserInfo">{{ currentUserInfo.age }}</span>
                <span v-if="currentUserInfo">{{ currentUserInfo.country }}</span>
              </div>
            </div>
            <ChatWindow v-if="!chatStore.errorMessage" />
            <ChatInput v-if="chatStore.currentConversation && !chatStore.errorMessage" />
          </div>
        </div>
      </div>
    </div>
    
    <ImprintContainer />
  </div>
</template>

<script setup>
import { onMounted, computed } from 'vue';
import { useChatStore } from '../stores/chat';
import { useI18n } from 'vue-i18n';
import MenuBar from '../components/MenuBar.vue';
import UserList from '../components/UserList.vue';
import LoginForm from '../components/LoginForm.vue';
import ChatWindow from '../components/ChatWindow.vue';
import ChatInput from '../components/ChatInput.vue';
import SearchView from '../components/SearchView.vue';
import InboxView from '../components/InboxView.vue';
import HistoryView from '../components/HistoryView.vue';
import ImprintContainer from '../components/ImprintContainer.vue';

const chatStore = useChatStore();
const { t } = useI18n();

const currentUserInfo = computed(() => {
  if (!chatStore.currentConversation) return null;
  return chatStore.users.find(u => u.userName === chatStore.currentConversation);
});

function formatGender(gender) {
  const genderMap = {
    'F': t('gender_female'),
    'M': t('gender_male'),
    'P': t('gender_pair'),
    'TF': t('gender_trans_mf'),
    'TM': t('gender_trans_fm')
  };
  return genderMap[gender] || gender;
}

onMounted(async () => {
  // Versuche Session wiederherzustellen
  const sessionRestored = await chatStore.restoreSession();
  
  if (!sessionRestored) {
    // Keine gültige Session, versuche trotzdem WebSocket-Verbindung herzustellen
    // Die Verbindung wird beim Login automatisch wiederhergestellt, falls nötig
    try {
      await chatStore.connectWebSocket();
    } catch (error) {
      console.log('WebSocket-Verbindung beim Laden fehlgeschlagen (wird beim Login automatisch wiederhergestellt):', error.message);
    }
  }
});
</script>

<style scoped>
.main-content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.chat-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.chat-header {
  padding: 0.5em 1em;
  flex-shrink: 0;
  border-bottom: 1px solid #999;
}

.chat-header-gender-M {
  background-color: #0066CC;
}

.chat-header-gender-F {
  background-color: #FF4081;
}

.chat-header-gender-P {
  background-color: #FFC107;
}

.chat-header-gender-TF {
  background-color: #8E24AA;
}

.chat-header-gender-TM {
  background-color: #90caf9;
}

.chat-header h2 {
  margin: 0 0 0.3em 0;
  font-size: 1.5em;
  color: #fff;
}

.chat-header-info {
  font-size: 0.75em;
  color: #fff;
  display: flex;
  flex-direction: row;
  gap: 0.8em;
  align-items: center;
}

.error-message {
  padding: 1em;
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ef5350;
  margin: 1em;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}
</style>

