<template>
  <div class="message-dialog">
    <div class="dialog-header">
      <h2>Message Details</h2>
      <button class="close-button" @click="$emit('close')" aria-label="Close dialog">
        ✕
      </button>
    </div>
    
    <div class="dialog-content">
      <!-- Message Info Section -->
      <div class="info-section">
        <div class="info-item">
          <label>Message ID</label>
          <span>#{{ message.id }}</span>
        </div>
        
        <div class="info-item">
          <label>Sent</label>
          <time :datetime="message.created_at">
            {{ formatTimestampForScreenReader(message.created_at) }}
          </time>
        </div>
        
        <div class="info-item">
          <label>Channel</label>
          <span>{{ channelName }}</span>
        </div>
        
        <div v-if="hasFileAttachment" class="info-item">
          <label>Attachment</label>
          <div class="file-info">
            <span class="file-name">{{ message.originalName }}</span>
            <span class="file-size">({{ formatFileSize(message.fileSize || 0) }})</span>
          </div>
        </div>
      </div>
      
      <!-- Content Section -->
      <div class="content-section">
        <label for="message-content">Message Content</label>
        <div v-if="!isEditing" class="content-display">
          <p>{{ message.content }}</p>
          <BaseButton 
            @click="startEditing" 
            variant="secondary" 
            size="sm"
            class="edit-button"
          >
            Edit
          </BaseButton>
        </div>
        
        <div v-else class="content-edit">
          <BaseTextarea
            id="message-content"
            v-model="editedContent"
            placeholder="Message content..."
            :rows="4"
            auto-resize
            ref="contentTextarea"
          />
          <div class="edit-actions">
            <BaseButton @click="saveEdit" :disabled="!canSave" :loading="isSaving">
              Save
            </BaseButton>
            <BaseButton @click="cancelEdit" variant="secondary">
              Cancel
            </BaseButton>
          </div>
        </div>
      </div>
      
      <!-- File Actions Section (if file attachment exists) -->
      <div v-if="hasFileAttachment" class="file-actions-section">
        <h3>File Actions</h3>
        <div class="action-buttons">
          <BaseButton @click="downloadFile" variant="secondary">
            Download {{ message.originalName }}
          </BaseButton>
          
          <BaseButton 
            v-if="isImageFile" 
            @click="viewImage" 
            variant="secondary"
          >
            View Image
          </BaseButton>
          
          <BaseButton 
            v-if="isAudioFile" 
            @click="playAudio" 
            variant="secondary"
          >
            {{ isPlaying ? 'Stop' : 'Play' }} Audio
          </BaseButton>
        </div>
      </div>
      
      <!-- Message Actions Section -->
      <div class="actions-section">
        <h3>Message Actions</h3>
        <div class="action-buttons">
          <BaseButton @click="copyMessage" variant="secondary">
            Copy Content
          </BaseButton>
          
          <BaseButton 
            @click="readAloud" 
            variant="secondary"
            :disabled="!ttsEnabled"
          >
            Read Aloud
          </BaseButton>
          
          <BaseButton 
            @click="showDeleteConfirm = true" 
            variant="danger"
          >
            Delete Message
          </BaseButton>
          
          <BaseButton 
            @click="showMoveDialog = true" 
            variant="secondary"
          >
            Move Message
          </BaseButton>
        </div>
      </div>
    </div>
    
    <!-- Delete Confirmation Dialog -->
    <div v-if="showDeleteConfirm" class="confirm-overlay">
      <div class="confirm-dialog">
        <h3>Delete Message</h3>
        <p>Are you sure you want to delete this message? This cannot be undone.</p>
        <div class="confirm-actions">
          <BaseButton
            @click="showDeleteConfirm = false"
            variant="secondary"
          >
            Cancel
          </BaseButton>
          <BaseButton
            @click="deleteMessage"
            variant="danger"
            :loading="isDeleting"
          >
            Delete
          </BaseButton>
        </div>
      </div>
    </div>
    
    <!-- Move Message Dialog -->
    <div v-if="showMoveDialog" class="confirm-overlay">
      <div class="confirm-dialog">
        <h3>Move Message</h3>
        <p>Select the channel to move this message to:</p>
        <select v-model="selectedTargetChannelId" class="channel-select">
          <option value="">Select a channel...</option>
          <option 
            v-for="channel in availableChannels" 
            :key="channel.id" 
            :value="channel.id"
          >
            {{ channel.name }}
          </option>
        </select>
        <div class="confirm-actions">
          <BaseButton
            @click="showMoveDialog = false"
            variant="secondary"
          >
            Cancel
          </BaseButton>
          <BaseButton
            @click="moveMessage"
            variant="primary"
            :loading="isMoving"
            :disabled="!selectedTargetChannelId || selectedTargetChannelId === message.channel_id"
          >
            Move
          </BaseButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, onMounted } from 'vue'
import { useAppStore } from '@/stores/app'
import { useToastStore } from '@/stores/toast'
import { useAudio } from '@/composables/useAudio'
import { formatTimestampForScreenReader } from '@/utils/time'
import BaseButton from '@/components/base/BaseButton.vue'
import BaseTextarea from '@/components/base/BaseTextarea.vue'
import type { ExtendedMessage } from '@/types'

interface Props {
  message: ExtendedMessage
  open: boolean
  startEditing?: boolean
}

const emit = defineEmits<{
  close: []
  edit: [messageId: number, content: string]
  delete: [messageId: number]
  move: [messageId: number, targetChannelId: number]
}>()

const props = defineProps<Props>()

const appStore = useAppStore()
const toastStore = useToastStore()
const { speak, playSound } = useAudio()

// Component state
const isEditing = ref(false)
const editedContent = ref('')
const showDeleteConfirm = ref(false)
const showMoveDialog = ref(false)
const selectedTargetChannelId = ref<number | ''>('')
const isSaving = ref(false)
const isDeleting = ref(false)
const isMoving = ref(false)
const isPlaying = ref(false)
const contentTextarea = ref()

// Computed properties
const channelName = computed(() => {
  const channel = appStore.channels.find(c => c.id === props.message.channel_id)
  return channel?.name || `Channel ${props.message.channel_id}`
})

const hasFileAttachment = computed(() => {
  return !!(props.message.fileId && props.message.originalName)
})

const isImageFile = computed(() => {
  if (!props.message.originalName) return false
  const ext = props.message.originalName.split('.').pop()?.toLowerCase()
  return ext && ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'].includes(ext)
})

const isAudioFile = computed(() => {
  if (!props.message.originalName) return false
  const ext = props.message.originalName.split('.').pop()?.toLowerCase()
  return ext && ['mp3', 'wav', 'webm', 'ogg', 'aac', 'm4a'].includes(ext)
})

const canSave = computed(() => {
  return editedContent.value.trim().length > 0 && 
         editedContent.value.trim() !== props.message.content
})

const ttsEnabled = computed(() => appStore.settings.ttsEnabled)

const availableChannels = computed(() => 
  appStore.channels.filter(channel => channel.id !== props.message.channel_id)
)

// Methods
const startEditing = async () => {
  isEditing.value = true
  editedContent.value = props.message.content
  await nextTick()
  contentTextarea.value?.focus()
}

const cancelEdit = () => {
  isEditing.value = false
  editedContent.value = ''
}

const saveEdit = async () => {
  if (!canSave.value) return
  
  isSaving.value = true
  try {
    emit('edit', props.message.id, editedContent.value.trim())
    isEditing.value = false
    toastStore.success('Message updated successfully')
  } catch (error) {
    toastStore.error('Failed to update message')
  } finally {
    isSaving.value = false
  }
}

const deleteMessage = async () => {
  isDeleting.value = true
  try {
    emit('delete', props.message.id)
    showDeleteConfirm.value = false
    toastStore.success('Message deleted successfully')
  } catch (error) {
    toastStore.error('Failed to delete message')
  } finally {
    isDeleting.value = false
  }
}

const moveMessage = async () => {
  if (!selectedTargetChannelId.value || selectedTargetChannelId.value === props.message.channel_id) {
    return
  }
  
  isMoving.value = true
  try {
    emit('move', props.message.id, selectedTargetChannelId.value as number)
    showMoveDialog.value = false
    selectedTargetChannelId.value = ''
    toastStore.success('Message moved successfully')
  } catch (error) {
    toastStore.error('Failed to move message')
  } finally {
    isMoving.value = false
  }
}

const copyMessage = async () => {
  try {
    await navigator.clipboard.writeText(props.message.content)
    playSound('copy')
    toastStore.success('Message copied to clipboard')
  } catch (error) {
    toastStore.error('Failed to copy message')
  }
}

const readAloud = async () => {
  if (appStore.settings.ttsEnabled) {
    try {
      await speak(props.message.content)
      toastStore.info('Reading message aloud')
    } catch (error) {
      toastStore.error('Failed to read message aloud')
    }
  } else {
    toastStore.info('Text-to-speech is disabled')
  }
}

const downloadFile = () => {
  if (props.message.filePath) {
    const link = document.createElement('a')
    link.href = `/api/files/${props.message.filePath}`
    link.download = props.message.originalName || 'download'
    link.click()
    toastStore.success('Download started')
  }
}

const viewImage = () => {
  if (props.message.filePath) {
    window.open(`/api/files/${props.message.filePath}`, '_blank')
  }
}

const playAudio = () => {
  if (props.message.filePath) {
    if (isPlaying.value) {
      // Stop audio (would need audio instance management)
      isPlaying.value = false
    } else {
      const audio = new Audio(`/api/files/${props.message.filePath}`)
      audio.onended = () => { isPlaying.value = false }
      audio.onerror = () => { 
        isPlaying.value = false
        toastStore.error('Failed to play audio file')
      }
      audio.play()
      isPlaying.value = true
    }
  }
}

const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// Handle escape key to close dialog
const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Escape') {
    if (isEditing.value) {
      cancelEdit()
    } else if (showDeleteConfirm.value) {
      showDeleteConfirm.value = false
    } else if (showMoveDialog.value) {
      showMoveDialog.value = false
      selectedTargetChannelId.value = ''
    } else {
      emit('close')
    }
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)

  // Auto-start editing if requested
  if (props.startEditing) {
    startEditing()
  }
})

// Cleanup on unmount
const cleanup = () => {
  document.removeEventListener('keydown', handleKeydown)
}

defineExpose({ cleanup })
</script>

<style scoped>
.message-dialog {
  background: white;
  border-radius: 12px;
  width: 90vw;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.dialog-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-button:hover {
  background: #f3f4f6;
  color: #374151;
}

.dialog-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-item label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-item span,
.info-item time {
  font-size: 0.875rem;
  color: #374151;
}

.file-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.file-name {
  font-weight: 500;
}

.file-size {
  font-size: 0.75rem !important;
  color: #6b7280 !important;
}

.content-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.content-section > label {
  font-weight: 600;
  color: #374151;
}

.content-display {
  position: relative;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.content-display p {
  margin: 0;
  line-height: 1.5;
  color: #374151;
  white-space: pre-wrap;
}

.edit-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.content-edit {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.edit-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.file-actions-section,
.actions-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.file-actions-section h3,
.actions-section h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-dialog {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 400px;
  margin: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.confirm-dialog h3 {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #dc2626;
}

.confirm-dialog p {
  margin: 0 0 1.5rem 0;
  color: #6b7280;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.channel-select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.channel-select:focus {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .message-dialog {
    background: #1f2937;
  }
  
  .dialog-header {
    border-bottom-color: #374151;
  }
  
  .dialog-header h2 {
    color: #f9fafb;
  }
  
  .close-button {
    color: #9ca3af;
  }
  
  .close-button:hover {
    background: #374151;
    color: #f3f4f6;
  }
  
  .info-section {
    background: #374151;
  }
  
  .info-item label {
    color: #9ca3af;
  }
  
  .info-item span,
  .info-item time {
    color: #f3f4f6;
  }
  
  .content-section > label,
  .file-actions-section h3,
  .actions-section h3 {
    color: #f3f4f6;
  }
  
  .content-display {
    background: #374151;
    border-color: #4b5563;
  }
  
  .content-display p {
    color: #f3f4f6;
  }
  
  .confirm-dialog {
    background: #1f2937;
  }
  
  .confirm-dialog p {
    color: #9ca3af;
  }
  
  .channel-select {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
  }
  
  .channel-select:focus {
    outline-color: #60a5fa;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .message-dialog {
    width: 95vw;
    margin: 1rem;
  }
  
  .info-section {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .edit-actions {
    flex-direction: column-reverse;
  }
}
</style>