<template>
  <div class="chat-view">
    <!-- 사이드바: 주제 선택 -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <h3>📚 주제 선택</h3>
        <button class="new-chat-btn" @click="startNewChat" title="새 대화">+</button>
      </div>
      <div class="topic-list">
        <label class="topic-item">
          <input 
            type="checkbox" 
            :checked="selectedTopics.length === 0"
            @change="selectAllTopics"
          />
          <span class="topic-icon">🌐</span>
          <span class="topic-name">전체</span>
        </label>
        <label 
          v-for="topic in topics" 
          :key="topic.topicId"
          class="topic-item"
        >
          <input 
            type="checkbox" 
            :value="topic.topicId"
            v-model="selectedTopics"
          />
          <span class="topic-icon">{{ topic.topicIcon }}</span>
          <span class="topic-name">{{ topic.topicName }}</span>
        </label>
      </div>
    </aside>

    <!-- 메인: 채팅 영역 -->
    <div class="chat-main">
      <!-- 메시지 목록 -->
      <div class="message-list" ref="messageListRef">
        <div v-if="messages.length === 0" class="empty-state">
          <div class="empty-icon">💬</div>
          <p>문서에 대해 질문해보세요!</p>
          <p class="empty-hint">예: "병원체 2위험군의 보관 온도는?"</p>
        </div>
        
        <div 
          v-for="(msg, index) in messages" 
          :key="index"
          :class="['message', msg.role]"
        >
          <div class="message-avatar">
            {{ msg.role === 'user' ? '👤' : '🤖' }}
          </div>
          <div class="message-content">
            <div class="message-text" v-html="renderMarkdown(msg.content)"></div>
            
            <!-- 참조 문서 (문서별 그룹핑) -->
            <div v-if="msg.sources && msg.sources.length > 0" class="message-sources">
              <div 
                class="sources-toggle"
                @click="msg.sourcesExpanded = !msg.sourcesExpanded"
              >
                <span class="toggle-icon">{{ msg.sourcesExpanded ? '▼' : '▶' }}</span>
                <span class="toggle-text">
                  📎 참조 문서 ({{ getUniqueDocCount(msg.sources) }}개 문서, {{ msg.sources.length }}개 구간)
                </span>
              </div>
              
              <transition name="slide">
                <div v-if="msg.sourcesExpanded" class="sources-list">
                  <!-- 문서별로 그룹핑 -->
                  <div 
                    v-for="(group, docId) in groupSourcesByDoc(msg.sources)" 
                    :key="docId"
                    class="doc-group"
                  >
                    <!-- 문서 헤더 -->
                    <div 
                      class="doc-header"
                      @click="group.expanded = !group.expanded"
                    >
                      <span class="doc-toggle">{{ group.expanded ? '▼' : '▶' }}</span>
                      <span class="file-type-badge" v-if="group.fileType">
                        {{ group.fileType.toUpperCase() }}
                      </span>
                      <span class="doc-name">📄 {{ group.docName || '문서 ' + docId }}</span>
                      <span class="doc-chunk-count">({{ group.chunks.length }}개 구간)</span>
                      <span class="doc-max-similarity">
                        최대 {{ (group.maxSimilarity * 100).toFixed(0) }}%
                      </span>
                    </div>
                    
                    <!-- 청크 목록 -->
                    <transition name="slide">
                      <div v-if="group.expanded" class="chunk-list">
                        <div 
                          v-for="(chunk, idx) in group.chunks" 
                          :key="idx"
                          class="chunk-card"
                        >
                          <div class="chunk-header">
                            <div 
                              class="similarity-badge"
                              :class="getSimilarityClass(chunk.similarity)"
                            >
                              <div class="similarity-bar" :style="{ width: (chunk.similarity * 100) + '%' }"></div>
                              <span class="similarity-text">{{ (chunk.similarity * 100).toFixed(0) }}%</span>
                            </div>
                            <span class="chunk-position">
                              구간 {{ chunk.chunkIndex + 1 }} / {{ chunk.totalChunks }}
                            </span>
                          </div>
                          <div class="chunk-content">
                            {{ chunk.expanded ? chunk.content : truncateText(chunk.content, 150) }}
                          </div>
                          <button 
                            v-if="chunk.content && chunk.content.length > 150"
                            class="expand-btn"
                            @click="chunk.expanded = !chunk.expanded"
                          >
                            {{ chunk.expanded ? '접기' : '더보기' }}
                          </button>
                        </div>
                      </div>
                    </transition>
                  </div>
                </div>
              </transition>
            </div>
          </div>
        </div>

        <!-- 로딩 표시 -->
        <div v-if="isLoading" class="message assistant">
          <div class="message-avatar">🤖</div>
          <div class="message-content loading-content">
            <div class="loading-text">답변을 생성하고 있습니다</div>
            <div class="loading-dots">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>

      <!-- 입력창 -->
      <div class="chat-input-area">
        <div class="input-wrapper">
          <textarea
            v-model="inputText"
            @keydown.enter.exact.prevent="sendMessage"
            placeholder="질문을 입력하세요..."
            rows="1"
            :disabled="isLoading"
          ></textarea>
          <button 
            class="send-btn"
            @click="sendMessage"
            :disabled="!inputText.trim() || isLoading"
          >
            <span class="send-icon">➤</span>
            전송
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { marked } from 'marked'
import { topicApi, chatApi } from '@/api'

// marked 옵션 설정
marked.setOptions({
  breaks: true,
  gfm: true
})

// 상태
const topics = ref([])
const selectedTopics = ref([])
const messages = ref([])
const inputText = ref('')
const isLoading = ref(false)
const messageListRef = ref(null)
const sessionKey = ref(null)

// 주제 목록 로드
const loadTopics = async () => {
  try {
    const { data } = await topicApi.getList()
    topics.value = data
  } catch (error) {
    console.error('주제 로드 실패:', error)
  }
}

// 전체 선택
const selectAllTopics = () => {
  selectedTopics.value = []
}

// 새 대화 시작
const startNewChat = () => {
  messages.value = []
  sessionKey.value = null
}

// 고유 문서 수 계산
const getUniqueDocCount = (sources) => {
  const uniqueDocs = new Set(sources.map(s => s.docId))
  return uniqueDocs.size
}

// 문서별로 소스 그룹핑
const groupSourcesByDoc = (sources) => {
  const groups = {}
  
  sources.forEach(source => {
    const docId = source.docId
    if (!groups[docId]) {
      groups[docId] = {
        docId: docId,
        docName: source.docName,
        fileType: source.fileType,
        totalChunks: source.totalChunks,
        chunks: [],
        maxSimilarity: 0,
        expanded: true  // 기본 펼침
      }
    }
    groups[docId].chunks.push({ ...source, expanded: false })
    if (source.similarity > groups[docId].maxSimilarity) {
      groups[docId].maxSimilarity = source.similarity
    }
  })
  
  // 청크 정렬 (chunkIndex 순)
  Object.values(groups).forEach(group => {
    group.chunks.sort((a, b) => a.chunkIndex - b.chunkIndex)
  })
  
  return groups
}

// 메시지 전송
const sendMessage = async () => {
  const question = inputText.value.trim()
  if (!question || isLoading.value) return

  // 사용자 메시지 추가
  messages.value.push({
    role: 'user',
    content: question
  })
  
  inputText.value = ''
  isLoading.value = true
  scrollToBottom()

  try {
    const { data } = await chatApi.send({
      question,
      topicIds: selectedTopics.value.length > 0 ? selectedTopics.value : null,
      sessionKey: sessionKey.value
    })

    if (data.sessionKey) {
      sessionKey.value = data.sessionKey
    }

    // AI 응답 추가
    messages.value.push({
      role: 'assistant',
      content: data.answer,
      sources: data.sources || [],
      sourcesExpanded: false
    })
  } catch (error) {
    console.error('채팅 오류:', error)
    messages.value.push({
      role: 'assistant',
      content: '죄송합니다. 오류가 발생했습니다. 다시 시도해주세요.'
    })
  } finally {
    isLoading.value = false
    scrollToBottom()
  }
}

// 마크다운 렌더링
const renderMarkdown = (text) => {
  return marked(text || '')
}

// 텍스트 자르기
const truncateText = (text, maxLength) => {
  if (!text) return ''
  if (text.length <= maxLength) return text
  return text.substring(0, maxLength) + '...'
}

// 유사도에 따른 클래스
const getSimilarityClass = (similarity) => {
  const percent = similarity * 100
  if (percent >= 50) return 'high'
  if (percent >= 40) return 'medium'
  return 'low'
}

// 스크롤 맨 아래로
const scrollToBottom = async () => {
  await nextTick()
  if (messageListRef.value) {
    messageListRef.value.scrollTop = messageListRef.value.scrollHeight
  }
}

onMounted(() => {
  loadTopics()
})
</script>

<style lang="scss" scoped>
.chat-view {
  display: flex;
  height: 100%;
}

// 사이드바
.sidebar {
  width: 260px;
  background: white;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
  
  h3 {
    font-size: 16px;
    font-weight: 600;
  }
  
  .new-chat-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #667eea;
    color: white;
    font-size: 18px;
    font-weight: bold;
    
    &:hover {
      background: #5a6fd6;
    }
  }
}

.topic-list {
  padding: 8px;
  overflow-y: auto;
}

.topic-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  
  &:hover {
    background: #f5f5f5;
  }
  
  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
  }
  
  .topic-icon {
    font-size: 20px;
  }
  
  .topic-name {
    font-size: 14px;
    color: #333;
  }
}

// 채팅 메인
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f8f9fc 0%, #eef1f8 100%);
}

.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #888;
  
  .empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
  }
  
  p {
    font-size: 16px;
  }
  
  .empty-hint {
    margin-top: 8px;
    font-size: 14px;
    color: #aaa;
  }
}

.message {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  animation: fadeIn 0.3s ease;
  
  &.user {
    flex-direction: row-reverse;
    
    .message-content {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 20px 20px 4px 20px;
      max-width: 60%;
    }
    
    .message-avatar {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
  }
  
  &.assistant {
    .message-content {
      background: white;
      border-radius: 20px 20px 20px 4px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      max-width: 80%;
    }
    
    .message-avatar {
      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
      color: white;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-content {
  padding: 16px 20px;
  
  &.loading-content {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

.loading-text {
  color: #666;
  font-size: 14px;
}

.message-text {
  line-height: 1.7;
  font-size: 15px;
  
  :deep(p) {
    margin-bottom: 12px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  :deep(ul), :deep(ol) {
    margin: 12px 0;
    padding-left: 24px;
    
    li {
      margin-bottom: 6px;
    }
  }
  
  :deep(strong) {
    font-weight: 600;
    color: #333;
  }
  
  :deep(code) {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
    font-size: 13px;
  }
  
  :deep(pre) {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 16px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 12px 0;
    
    code {
      background: none;
      color: inherit;
      padding: 0;
    }
  }
  
  :deep(blockquote) {
    border-left: 4px solid #667eea;
    margin: 12px 0;
    padding: 8px 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 0 8px 8px 0;
  }
  
  :deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
    
    th, td {
      border: 1px solid #e0e0e0;
      padding: 8px 12px;
      text-align: left;
    }
    
    th {
      background: #f5f7fa;
      font-weight: 600;
    }
    
    tr:nth-child(even) {
      background: #fafbfc;
    }
  }
}

// 참조 문서 섹션
.message-sources {
  margin-top: 16px;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.sources-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.2s;
  
  &:hover {
    background: #f5f7fa;
  }
  
  .toggle-icon {
    font-size: 10px;
    color: #888;
  }
  
  .toggle-text {
    font-size: 13px;
    font-weight: 500;
    color: #555;
  }
}

.sources-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

// 문서 그룹
.doc-group {
  background: #f8f9fc;
  border: 1px solid #e8ebf0;
  border-radius: 12px;
  overflow: hidden;
}

.doc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f0f2f8 0%, #e8ebf2 100%);
  cursor: pointer;
  transition: background 0.2s;
  
  &:hover {
    background: linear-gradient(135deg, #e8ebf2 0%, #dfe3ed 100%);
  }
  
  .doc-toggle {
    font-size: 10px;
    color: #888;
  }
  
  .doc-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #333;
  }
  
  .doc-chunk-count {
    font-size: 12px;
    color: #888;
  }
  
  .doc-max-similarity {
    font-size: 11px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    border-radius: 10px;
    font-weight: 600;
  }
}

.file-type-badge {
  font-size: 10px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

// 청크 목록
.chunk-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chunk-card {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 12px;
  transition: all 0.2s;
  
  &:hover {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
  }
}

.chunk-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.chunk-position {
  font-size: 11px;
  color: #888;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 8px;
}

.similarity-badge {
  position: relative;
  min-width: 55px;
  height: 22px;
  background: #e8e8e8;
  border-radius: 11px;
  overflow: hidden;
  
  .similarity-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 11px;
    transition: width 0.3s ease;
  }
  
  .similarity-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 10px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  
  &.high .similarity-bar {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
  }
  
  &.medium .similarity-bar {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
  }
  
  &.low {
    .similarity-bar {
      background: linear-gradient(90deg, #ffecd2 0%, #fcb69f 100%);
    }
    .similarity-text {
      color: #666;
    }
  }
}

.chunk-content {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  word-break: break-word;
}

.expand-btn {
  margin-top: 8px;
  padding: 4px 12px;
  font-size: 11px;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 10px;
  transition: all 0.2s;
  
  &:hover {
    background: rgba(102, 126, 234, 0.2);
  }
}

// 슬라이드 트랜지션
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  max-height: 0;
}

.slide-enter-to,
.slide-leave-from {
  opacity: 1;
  max-height: 2000px;
}

// 로딩 애니메이션
.loading-dots {
  display: flex;
  gap: 6px;
  
  span {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
    
    &:nth-child(1) { animation-delay: -0.32s; }
    &:nth-child(2) { animation-delay: -0.16s; }
  }
}

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

// 입력 영역
.chat-input-area {
  padding: 20px 24px;
  background: white;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.input-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  max-width: 900px;
  margin: 0 auto;
  
  textarea {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid #e8e8e8;
    border-radius: 16px;
    resize: none;
    font-size: 15px;
    line-height: 1.5;
    max-height: 120px;
    transition: all 0.2s;
    
    &:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }
    
    &:disabled {
      background: #f5f5f5;
    }
    
    &::placeholder {
      color: #aaa;
    }
  }
  
  .send-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s;
    
    .send-icon {
      font-size: 16px;
    }
    
    &:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }
    
    &:active:not(:disabled) {
      transform: translateY(0);
    }
    
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}
</style>
