<template>
  <div class="messenger-configurator">
    <!-- Floating Action Button -->
    <div class="fab-container" @click="toggle">
      <div class="fab">
        <i class="fas fa-robot"></i>
      </div>
    </div>

    <!-- Messenger Configuration Panel -->
    <div v-if="isOpen" class="messenger-panel">
      <!-- Header -->
      <div class="messenger-header">
        <div class="bot-avatar">
          <i class="fas fa-robot"></i>
        </div>
        <div class="bot-info">
          <h4>AI Assistant</h4>
          <p>En ligne</p>
        </div>
        <div class="header-actions">
          <button class="btn-icon" @click="toggle">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>

      <!-- Chat Area -->
      <div class="chat-container">
        <!-- Bot Welcome Message -->
        <div class="message bot-message">
          <div class="message-avatar">
            <i class="fas fa-robot"></i>
          </div>
          <div class="message-content">
            <p>
              Bonjour ! Je suis votre assistant IA. Comment puis-je vous aider
              aujourd'hui ?
            </p>
            <span class="message-time">Maintenant</span>
          </div>
        </div>

        <!-- Configuration Options as Messages -->
        <div class="message bot-message">
          <div class="message-avatar">
            <i class="fas fa-robot"></i>
          </div>
          <div class="message-content">
            <p>Personnalisons mon comportement selon vos préférences :</p>

            <!-- Personality Selection -->
            <div class="option-group">
              <h6>Personnalité</h6>
              <div class="option-buttons">
                <button
                  class="option-btn"
                  :class="{ active: personality === 'professional' }"
                  @click="setPersonality('professional')"
                >
                  <i class="fas fa-suitcase"></i>
                  <span>Professionnel</span>
                </button>
                <button
                  class="option-btn"
                  :class="{ active: personality === 'friendly' }"
                  @click="setPersonality('friendly')"
                >
                  <i class="fas fa-smile"></i>
                  <span>Amical</span>
                </button>
                <button
                  class="option-btn"
                  :class="{ active: personality === 'technical' }"
                  @click="setPersonality('technical')"
                >
                  <i class="fas fa-code"></i>
                  <span>Technique</span>
                </button>
              </div>
            </div>

            <!-- Language Selection -->
            <div class="option-group">
              <h6>Langue</h6>
              <div class="option-buttons">
                <button
                  class="option-btn"
                  :class="{ active: language === 'fr' }"
                  @click="setLanguage('fr')"
                >
                  <i class="fas fa-flag"></i>
                  <span>Français</span>
                </button>
                <button
                  class="option-btn"
                  :class="{ active: language === 'en' }"
                  @click="setLanguage('en')"
                >
                  <i class="fas fa-flag-usa"></i>
                  <span>English</span>
                </button>
              </div>
            </div>

            <!-- Response Length -->
            <div class="option-group">
              <h6>Longueur des réponses</h6>
              <div class="option-buttons">
                <button
                  class="option-btn"
                  :class="{ active: responseLength === 'short' }"
                  @click="setResponseLength('short')"
                >
                  <i class="fas fa-comment-alt"></i>
                  <span>Court</span>
                </button>
                <button
                  class="option-btn"
                  :class="{ active: responseLength === 'medium' }"
                  @click="setResponseLength('medium')"
                >
                  <i class="fas fa-comments"></i>
                  <span>Moyen</span>
                </button>
                <button
                  class="option-btn"
                  :class="{ active: responseLength === 'detailed' }"
                  @click="setResponseLength('detailed')"
                >
                  <i class="fas fa-file-alt"></i>
                  <span>Détaillé</span>
                </button>
              </div>
            </div>

            <span class="message-time">Maintenant</span>
          </div>
        </div>

        <!-- User Selection Confirmation -->
        <div v-if="hasSelections" class="message user-message">
          <div class="message-content">
            <p>J'ai sélectionné :</p>
            <ul>
              <li v-if="personality">Personnalité: {{ getPersonalityText }}</li>
              <li v-if="language">Langue: {{ getLanguageText }}</li>
              <li v-if="responseLength">
                Longueur: {{ getResponseLengthText }}
              </li>
            </ul>
            <span class="message-time">Maintenant</span>
          </div>
          <div class="message-avatar user-avatar">
            <i class="fas fa-user"></i>
          </div>
        </div>

        <!-- Bot Confirmation Message -->
        <div v-if="hasSelections" class="message bot-message">
          <div class="message-avatar">
            <i class="fas fa-robot"></i>
          </div>
          <div class="message-content">
            <p>
              Parfait ! J'ai pris note de vos préférences. Souhaitez-vous
              enregistrer cette configuration ?
            </p>
            <div class="confirmation-actions">
              <button class="btn-primary" @click="saveConfiguration">
                <i class="fas fa-save"></i>
                Enregistrer
              </button>
              <button class="btn-secondary" @click="resetToDefault">
                <i class="fas fa-redo"></i>
                Réinitialiser
              </button>
            </div>
            <span class="message-time">Maintenant</span>
          </div>
        </div>
      </div>

      <!-- Input Area -->
      <div class="input-container">
        <div class="input-wrapper">
          <input
            type="text"
            placeholder="Tapez votre message..."
            class="message-input"
            v-model="userMessage"
            @keyup.enter="sendMessage"
          />
          <button class="send-btn" @click="sendMessage">
            <i class="fas fa-paper-plane"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MessengerConfigurator",
  props: {
    toggle: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      isOpen: false,
      personality: "professional",
      language: "fr",
      responseLength: "medium",
      userMessage: "",
      hasSelections: false,
    };
  },
  computed: {
    getPersonalityText() {
      const personalities = {
        professional: "Professionnel",
        friendly: "Amical",
        technical: "Technique",
      };
      return personalities[this.personality];
    },
    getLanguageText() {
      return this.language === "fr" ? "Français" : "English";
    },
    getResponseLengthText() {
      const lengths = {
        short: "Court",
        medium: "Moyen",
        detailed: "Détaillé",
      };
      return lengths[this.responseLength];
    },
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
      if (this.toggle) {
        this.toggle();
      }
    },
    setPersonality(type) {
      this.personality = type;
      this.hasSelections = true;
    },
    setLanguage(lang) {
      this.language = lang;
      this.hasSelections = true;
    },
    setResponseLength(length) {
      this.responseLength = length;
      this.hasSelections = true;
    },
    saveConfiguration() {
      // Save configuration logic
      this.$store.dispatch("saveAIAssistantConfig", {
        personality: this.personality,
        language: this.language,
        responseLength: this.responseLength,
      });

      // Show success message
      alert("Configuration enregistrée avec succès !");
    },
    resetToDefault() {
      this.personality = "professional";
      this.language = "fr";
      this.responseLength = "medium";
      this.hasSelections = false;
    },
    sendMessage() {
      if (this.userMessage.trim()) {
        // Handle user message
        console.log("User message:", this.userMessage);
        this.userMessage = "";
      }
    },
  },
};
</script>

<style scoped>
.messenger-configurator {
  position: relative;
  z-index: 9999;
}

/* Floating Action Button */
.fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}

.fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}

.fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

/* Messenger Panel */
.messenger-panel {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 380px;
  height: 600px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
}

/* Header */
.messenger-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.bot-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.bot-info {
  flex: 1;
}

.bot-info h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.bot-info p {
  margin: 0;
  font-size: 12px;
  opacity: 0.8;
}

.header-actions {
  display: flex;
}

.btn-icon {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Chat Container */
.chat-container {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background: #f8f9fa;
}

/* Messages */
.message {
  display: flex;
  margin-bottom: 16px;
}

.bot-message {
  justify-content: flex-start;
}

.user-message {
  justify-content: flex-end;
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  flex-shrink: 0;
}

.bot-message .message-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.user-avatar {
  background: #e9ecef;
  color: #495057;
}

.message-content {
  max-width: 70%;
  background: white;
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bot-message .message-content {
  border-top-left-radius: 4px;
}

.user-message .message-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-top-right-radius: 4px;
}

.message-content p {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.4;
}

.message-time {
  font-size: 11px;
  opacity: 0.6;
}

/* Option Groups */
.option-group {
  margin: 16px 0;
}

.option-group h6 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: #495057;
}

.option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  color: #495057;
}

.option-btn:hover {
  background: #e9ecef;
}

.option-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
}

.option-btn i {
  font-size: 16px;
  margin-bottom: 4px;
}

/* Confirmation Actions */
.confirmation-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-primary,
.btn-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Input Area */
.input-container {
  padding: 16px;
  background: white;
  border-top: 1px solid #e9ecef;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 24px;
  padding: 8px 16px;
}

.message-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
}

.send-btn {
  background: none;
  border: none;
  color: #667eea;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
}

.send-btn:hover {
  background: #e9ecef;
}

/* Responsive */
@media (max-width: 480px) {
  .messenger-panel {
    width: 100vw;
    height: 100vh;
    bottom: 0;
    right: 0;
    border-radius: 0;
  }

  .fab-container {
    bottom: 16px;
    right: 16px;
  }
}
</style>
