<template>
  <aside
    class="artifacts-panel"
    :class="{ 'is-open': open, 'is-resizing': isResizing }"
    :style="panelStyle"
    aria-label="Session artifacts"
  >
    <div
      class="artifacts-resize-handle"
      role="separator"
      aria-orientation="vertical"
      title="Resize artifacts"
      @pointerdown="startResize"
    />

    <div class="artifacts-header">
      <div class="artifacts-tabs">
        <button
          class="artifacts-tab"
          :class="{ 'is-active': activeTab === 'artifacts' }"
          @click="activeTab = 'artifacts'"
        >
          <i class="ph ph-files"></i>
          <span>Artifacts</span>
          <span class="artifacts-tab-count">{{ artifacts.length }}</span>
        </button>
        <button
          class="artifacts-tab"
          :class="{ 'is-active': activeTab === 'links' }"
          @click="activeTab = 'links'"
        >
          <i class="ph ph-link"></i>
          <span>Links</span>
          <span class="artifacts-tab-count">{{ links.length }}</span>
        </button>
        <button
          class="artifacts-tab"
          :class="{ 'is-active': activeTab === 'files' }"
          @click="activeTab = 'files'"
        >
          <i class="ph ph-folder"></i>
          <span>Files</span>
          <span class="artifacts-tab-count">{{ filesFlat.length }}</span>
        </button>
        <button
          class="artifacts-tab"
          :class="{ 'is-active': activeTab === 'terminals' }"
          @click="activeTab = 'terminals'"
        >
          <i class="ph ph-terminal"></i>
          <span>Terminals</span>
          <span class="artifacts-tab-count">{{ activeTerminalCount }}</span>
        </button>
      </div>
      <GnIconButton icon="ph ph-x" label="Close artifacts" class="artifacts-close" @click="emit('close')" />
    </div>

    <template v-if="activeTab === 'artifacts'">
      <div v-if="!artifacts.length" class="artifacts-empty">
        <i class="ph ph-files"></i>
        <span>No published files</span>
      </div>

      <template v-else>
        <div class="artifacts-list">
        <button
          v-for="item in artifacts"
          :key="item.id || item.filename"
          class="artifact-item"
          :class="{ 'is-active': selectedKey === artifactKey(item) }"
          @click="selectArtifact(item)"
        >
          <span class="artifact-icon"><i :class="iconClass(item)"></i></span>
          <span class="artifact-info">
            <span class="artifact-title">{{ item.title || item.filename }}</span>
            <span class="artifact-meta">{{ labelFor(item) }}</span>
          </span>
        </button>
      </div>

      <div v-if="selected" class="artifact-detail">
        <div class="artifact-detail-header">
          <div class="artifact-detail-title">{{ selected.title || selected.filename }}</div>
          <div class="artifact-detail-filename">{{ selected.filename }}</div>
        </div>

        <div class="artifact-actions">
          <a class="artifact-action" :href="previewUrl(selected)" target="_blank" rel="noopener noreferrer" title="Open preview">
            <i class="ph ph-arrow-square-out"></i>
          </a>
          <a class="artifact-action" :href="rawUrl(selected)" target="_blank" rel="noopener noreferrer" title="Open raw file">
            <i class="ph ph-file"></i>
          </a>
          <a class="artifact-action" :href="downloadUrl(selected)" title="Download">
            <i class="ph ph-download-simple"></i>
          </a>
          <button
            v-if="hasSource(selected)"
            class="artifact-action"
            :title="showSource ? 'Show preview' : 'Show source'"
            @click="toggleSource(selected)"
          >
            <i :class="showSource ? 'ph ph-eye' : 'ph ph-code'"></i>
          </button>
          <button class="artifact-action" title="Copy file link" @click="copyLink(selected)">
            <i :class="copyIcon(selected)"></i>
          </button>
        </div>

        <div class="artifact-preview">
          <div v-if="showSource" class="artifact-source">
            <div v-if="sourceLoading" class="artifact-source-state">
              <span class="spinner"></span>
              <span>Loading source...</span>
            </div>
            <pre v-else-if="sourceError" class="artifact-source-error">{{ sourceError }}</pre>
            <pre v-else class="artifact-source-code"><code class="hljs" :class="`language-${selectedSourceLanguage}`" v-html="highlightedSource"></code></pre>
          </div>
          <iframe
            v-else-if="isFramePreview(selected)"
            :src="previewUrl(selected)"
            class="artifact-frame"
            sandbox="allow-scripts allow-same-origin"
          />
          <img
            v-else-if="contentType(selected) === 'image'"
            :src="versionedUrl(selected)"
            :alt="selected.title || selected.filename"
            class="artifact-image"
          />
          <video
            v-else-if="contentType(selected) === 'video'"
            :src="versionedUrl(selected)"
            class="artifact-video"
            controls
            playsinline
          />
          <div v-else class="artifact-no-preview">
            <i class="ph ph-file"></i>
            <span>Preview unavailable</span>
          </div>
        </div>
      </div>
    </template>
    </template>

    <template v-if="activeTab === 'links'">
      <div v-if="!links.length" class="artifacts-empty">
        <i class="ph ph-link"></i>
        <span>No links found yet</span>
      </div>

      <template v-else>
        <div class="artifacts-list links-list">
          <a
            v-for="item in links"
            :key="item.url"
            class="artifact-item link-item"
            :href="item.url"
            target="_blank"
            rel="noopener noreferrer"
          >
            <span class="artifact-icon"><i class="ph ph-link"></i></span>
            <span class="artifact-info">
              <span class="artifact-title">{{ item.text || item.url }}</span>
              <span class="artifact-meta">{{ item.domain }} · {{ item.snippet }}</span>
            </span>
          </a>
        </div>

        <div class="link-detail">
          <div class="link-detail-header">
            <div class="link-detail-count">{{ links.length }} link{{ links.length === 1 ? '' : 's' }} in session</div>
          </div>
          <div class="link-actions">
            <button class="artifact-action" title="Copy all links" @click="copyAllLinks">
              <i class="ph ph-copy"></i>
            </button>
            <button class="artifact-action" title="Open all links" @click="openAllLinks">
              <i class="ph ph-arrow-square-out"></i>
            </button>
          </div>
        </div>
      </template>
    </template>

    <template v-if="activeTab === 'files'">
      <div
        class="files-tab-wrap"
        @touchstart="onFilesTouchStart"
        @touchmove="onFilesTouchMove"
        @touchend="onFilesTouchEnd"
      >
        <!-- Pull-to-refresh indicator (mobile only) -->
        <div
          class="ptr-indicator files-ptr"
          :class="{ 'ptr-active': filesPtrPulling && !filesRefreshing }"
          :style="filesPtrStyle"
        >
          <span
            class="ptr-spinner"
            :class="{ 'ptr-spinning': filesPtrTriggered }"
          ></span>
          <span class="ptr-label">{{ filesPtrLabel }}</span>
        </div>

        <!-- Desktop refresh button -->
        <button
          class="files-refresh-btn"
          title="Refresh files"
          :disabled="filesRefreshing"
          @click="refreshFiles"
        >
          <i class="ph ph-arrows-clockwise" :class="{ spinning: filesRefreshing }"></i>
        </button>

        <div v-if="!filesFlat.length" class="artifacts-empty">
          <i class="ph ph-folder"></i>
          <span>No files in session directory</span>
        </div>

        <template v-else>
          <div ref="filesListRef" class="artifacts-list files-list" :class="{ 'ptr-pulled': filesPtrPulling }">
            <div
              v-for="item in fileTree"
              :key="item.path"
              class="artifact-item file-item"
              :class="{ 'is-dir': item.is_dir }"
              :style="fileIndent(item)"
            >
              <span class="artifact-icon">
                <i :class="fileIcon(item)"></i>
              </span>
              <span class="artifact-info">
                <span class="artifact-title">{{ item.name }}</span>
                <span class="artifact-meta">{{ fileMeta(item) }}</span>
              </span>
              <div v-if="!item.is_dir" class="file-row-actions">
                <a
                  class="artifact-action file-row-action"
                  :href="fileDownloadUrl(item.path)"
                  title="Download"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i class="ph ph-download-simple"></i>
                </a>
                <a
                  v-if="isInlineFile(item.path)"
                  class="artifact-action file-row-action"
                  :href="fileDownloadUrl(item.path)"
                  title="Open inline"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i class="ph ph-eye"></i>
                </a>
              </div>
            </div>
          </div>
        </template>
      </div>
    </template>

    <template v-if="activeTab === 'terminals'">
      <div v-if="!terminalsList.length" class="artifacts-empty">
        <i class="ph ph-terminal"></i>
        <span>No active terminals</span>
      </div>

      <template v-else>
        <div class="artifacts-list terminals-list">
          <button
            v-for="item in terminalsList"
            :key="item.name"
            class="artifact-item terminal-item"
            :class="{ 'is-active': selectedTerminalName === item.name, 'is-closed': item.closed }"
            @click="selectTerminal(item)"
          >
            <span class="artifact-icon">
              <i :class="item.closed ? 'ph ph-x-circle' : (item.status === 'busy' ? 'ph ph-play-circle' : 'ph ph-pause-circle')"></i>
            </span>
            <span class="artifact-info">
              <span class="artifact-title">{{ item.name }}</span>
              <span class="artifact-meta">{{ item.description || item.command || 'Terminal' }}</span>
            </span>
            <span
              class="terminal-status-badge"
              :class="item.status === 'busy' ? 'status-busy' : (item.closed ? 'status-closed' : 'status-idle')"
            >
              {{ item.closed ? 'Closed' : (item.status === 'busy' ? 'Busy' : 'Idle') }}
            </span>
          </button>
        </div>

        <div v-if="selectedTerminal" class="terminal-detail">
          <div class="terminal-detail-header">
            <div>
              <div class="terminal-detail-title">{{ selectedTerminal.name }}</div>
              <div class="terminal-detail-meta">{{ selectedTerminal.description || selectedTerminal.command || 'Terminal' }}</div>
            </div>
            <button class="terminal-detail-close" title="Close details" @click="closeTerminalDetails">
              <i class="ph ph-x"></i>
            </button>
          </div>

          <div class="terminal-detail-grid">
            <div class="terminal-detail-row">
              <span class="terminal-detail-label">Status</span>
              <span class="terminal-detail-value" :class="selectedTerminal.status === 'busy' ? 'status-busy' : (selectedTerminal.closed ? 'status-closed' : 'status-idle')">
                {{ selectedTerminal.closed ? 'Closed' : (selectedTerminal.status === 'busy' ? 'Busy' : 'Idle') }}
              </span>
            </div>
            <div class="terminal-detail-row">
              <span class="terminal-detail-label">PID</span>
              <span class="terminal-detail-value">{{ selectedTerminal.pid || 'N/A' }}</span>
            </div>
            <div class="terminal-detail-row">
              <span class="terminal-detail-label">Command</span>
              <span class="terminal-detail-value terminal-detail-command">{{ selectedTerminal.command || 'N/A' }}</span>
            </div>
            <div class="terminal-detail-row">
              <span class="terminal-detail-label">CWD</span>
              <span class="terminal-detail-value">{{ selectedTerminal.cwd || 'N/A' }}</span>
            </div>
            <div v-if="selectedTerminal.uptime_seconds != null" class="terminal-detail-row">
              <span class="terminal-detail-label">Uptime</span>
              <span class="terminal-detail-value">{{ formatUptime(selectedTerminal.uptime_seconds) }}</span>
            </div>
            <div v-if="selectedTerminal.background != null" class="terminal-detail-row">
              <span class="terminal-detail-label">Background</span>
              <span class="terminal-detail-value">{{ selectedTerminal.background ? 'Yes' : 'No' }}</span>
            </div>
            <div v-if="selectedTerminal.closeReason" class="terminal-detail-row">
              <span class="terminal-detail-label">Reason</span>
              <span class="terminal-detail-value">{{ selectedTerminal.closeReason }}</span>
            </div>
          </div>

          <div v-if="selectedTerminal.output" class="terminal-output-wrap">
            <div class="terminal-output-header">Live output</div>
            <pre class="terminal-output">{{ selectedTerminal.output }}</pre>
          </div>
        </div>
      </template>
    </template>
  </aside>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useChatStore } from '@/stores/chat.js'
import { absoluteContentUrl, contentFileUrl, versionedContentUrl, viewerContentUrl } from '@/utils/contentLinks.js'
import { highlightSource, sourceLanguage } from '@/utils/sourceHighlight.js'

defineProps({
  open: { type: Boolean, default: false }
})

const emit = defineEmits(['close'])
const chat = useChatStore()
const selectedKey = ref(null)
const copiedKey = ref(null)
const showSource = ref(false)
const sourceText = ref('')
const sourceLoading = ref(false)
const sourceError = ref('')
const isResizing = ref(false)
const viewportWidth = ref(typeof window === 'undefined' ? 0 : window.innerWidth)
const activeTab = ref('artifacts')
const selectedTerminalName = ref(null)

// ── Terminals tab state ───────────────────────────────────────────────────
const terminalsList = computed(() => {
  return Object.values(chat.terminals)
    .filter(t => !t.closed || t.output)
    .sort((a, b) => (a.name || '').localeCompare(b.name || ''))
})
const selectedTerminal = computed(() => {
  if (!selectedTerminalName.value) return null
  return chat.terminals[selectedTerminalName.value] || null
})
const activeTerminalCount = computed(() => {
  return Object.values(chat.terminals).filter(t => !t.closed).length
})

function selectTerminal(item) {
  selectedTerminalName.value = selectedTerminalName.value === item.name ? null : item.name
}

function closeTerminalDetails() {
  selectedTerminalName.value = null
}

function formatUptime(seconds) {
  if (seconds < 60) return `${Math.round(seconds)}s`
  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${Math.round(seconds % 60)}s`
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  return `${h}h ${m}m`
}

// ── Files tab refresh state ───────────────────────────────────────────────
const filesRefreshing = ref(false)

async function refreshFiles() {
  if (filesRefreshing.value || !chat.currentId) return
  filesRefreshing.value = true
  try {
    await chat.fetchFiles(chat.currentId)
  } finally {
    filesRefreshing.value = false
  }
}

// ── Pull-to-refresh for files list (mobile) ───────────────────────────────
const FILES_PTR_THRESHOLD = 80
const FILES_PTR_MAX = 120
const filesPtrPulling = ref(false)
const filesPtrOffset = ref(0)
const filesPtrTriggered = ref(false)
const filesListRef = ref(null)

const filesPtrStyle = computed(() => ({
  transform: `translateY(${Math.min(filesPtrOffset.value, FILES_PTR_MAX)}px)`,
  opacity: filesPtrPulling.value ? Math.min(filesPtrOffset.value / FILES_PTR_THRESHOLD, 1) : 0,
}))

const filesPtrLabel = computed(() => {
  if (filesRefreshing.value) return 'Refreshing...'
  if (filesPtrTriggered.value) return 'Release to refresh'
  return 'Pull to refresh'
})

let _filesPtrStartY = 0
let _filesPtrStartScroll = 0

function onFilesTouchStart(e) {
  const list = filesListRef.value
  if (!list) return
  _filesPtrStartScroll = list.scrollTop || 0
  if (_filesPtrStartScroll > 2) return
  _filesPtrStartY = e.touches[0]?.clientY ?? 0
  filesPtrPulling.value = false
  filesPtrOffset.value = 0
  filesPtrTriggered.value = false
}

function onFilesTouchMove(e) {
  if (_filesPtrStartScroll > 2 || !_filesPtrStartY) return
  const y = e.touches[0]?.clientY ?? 0
  const delta = y - _filesPtrStartY
  if (delta <= 0) {
    filesPtrPulling.value = false
    return
  }
  if (delta > 4) {
    e.preventDefault()
  }
  filesPtrPulling.value = true
  filesPtrOffset.value = delta
  filesPtrTriggered.value = delta >= FILES_PTR_THRESHOLD
}

function onFilesTouchEnd() {
  if (filesPtrTriggered.value && !filesRefreshing.value) {
    refreshFiles()
  }
  filesPtrPulling.value = false
  filesPtrOffset.value = 0
  filesPtrTriggered.value = false
  _filesPtrStartY = 0
  _filesPtrStartScroll = 0
}

const DRAWER_DESKTOP_BREAKPOINT = 980
const CHAT_MIN_WIDTH = 500
const DRAWER_WIDTH_STORAGE_KEY = 'navi:artifacts-drawer-width'

const drawerWidth = ref(readSavedDrawerWidth())

const artifacts = computed(() => chat.artifacts)
const selected = computed(() => artifacts.value.find(item => artifactKey(item) === selectedKey.value) || artifacts.value[0] || null)

function stripTrailingPunctuation(url) {
  return url.replace(/[.,;:!?)\]}+]+$/, '')
}

function normalizeUrlForDedup(url) {
  try {
    const cleaned = stripTrailingPunctuation(url)
    const parsed = new URL(cleaned, window.location.origin)
    const host = parsed.hostname.toLowerCase().replace(/^www\./, '')
    let pathname = parsed.pathname.toLowerCase()
    pathname = pathname.replace(/\/$/, '')
    return `${host}${pathname}`
  } catch {
    return stripTrailingPunctuation(url).toLowerCase()
  }
}

const links = computed(() => {
  const seen = new Set()
  const out = []
  // Ranges occupied by markdown link hrefs — bare URLs inside them are skipped
  const protectedRanges = []

  // Pass 1: Markdown links have priority — they carry a title / caption.
  // We scan all messages first so a bare URL from a newer message never
  // shadows a markdown link from an older one.
  for (let i = chat.messages.length - 1; i >= 0; i--) {
    const m = chat.messages[i]
    if (m.role !== 'assistant') continue
    const text = m.text || ''
    let match

    const mdLinkRe = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g
    while ((match = mdLinkRe.exec(text)) !== null) {
      let url = match[2].trim()
      const norm = normalizeUrlForDedup(url)
      if (seen.has(norm)) continue
      seen.add(norm)
      out.push({
        url,
        text: match[1].trim(),
        snippet: snippetOf(text, match.index),
        domain: domainOf(url),
      })
      // Record the exact href range so bare-URL extraction skips it
      const urlOffsetInMatch = match[0].lastIndexOf(match[2])
      const urlStart = match.index + urlOffsetInMatch
      protectedRanges.push({ start: urlStart, end: urlStart + match[2].length })
    }
  }

  // Pass 2: Bare URLs — skip if already seen or inside a markdown link href.
  for (let i = chat.messages.length - 1; i >= 0; i--) {
    const m = chat.messages[i]
    if (m.role !== 'assistant') continue
    const text = m.text || ''
    let match

    const bareUrlRe = /https?:\/\/[^\s<>"{}|\\^`[\]]+/g
    while ((match = bareUrlRe.exec(text)) !== null) {
      let url = match[0].trim()
      // Strip trailing punctuation BEFORE dedup so "path." and "path" match
      url = stripTrailingPunctuation(url)
      const norm = normalizeUrlForDedup(url)
      if (seen.has(norm)) continue
      // Skip bare URLs that fall inside a markdown link href
      const matchStart = match.index
      const matchEnd = match.index + match[0].length
      const isInsideMarkdown = protectedRanges.some(
        r => matchStart >= r.start && matchEnd <= r.end
      )
      if (isInsideMarkdown) continue
      seen.add(norm)
      out.push({
        url,
        text: '',
        snippet: snippetOf(text, match.index),
        domain: domainOf(url),
      })
    }
  }

  return out
})

const filesFlat = computed(() => chat.files)
const fileTree = computed(() => {
  const list = filesFlat.value
  return list.map(item => {
    const parts = item.path.split('/')
    const name = parts[parts.length - 1]
    const depth = parts.length - 1
    return { ...item, name, depth }
  })
})
const selectedSourceLanguage = computed(() => selected.value ? sourceLanguage(selected.value) : 'plaintext')
const highlightedSource = computed(() => highlightSource(sourceText.value, selectedSourceLanguage.value))
const isDesktop = computed(() => viewportWidth.value > DRAWER_DESKTOP_BREAKPOINT)
const panelStyle = computed(() => {
  if (!isDesktop.value) return {}
  return { '--artifacts-width': `${currentDrawerWidth()}px` }
})

watch(
  artifacts,
  (items) => {
    if (!items.length) {
      selectedKey.value = null
      return
    }
    if (!selectedKey.value || !items.some(item => artifactKey(item) === selectedKey.value)) {
      selectedKey.value = artifactKey(items[0])
    }
  },
  { immediate: true }
)

function artifactKey(item) {
  return item.id || item.filename
}

function selectArtifact(item) {
  selectedKey.value = artifactKey(item)
  showSource.value = false
  sourceText.value = ''
  sourceError.value = ''
}

function contentType(item) {
  return item.content_type || 'unknown'
}

function iconClass(item) {
  const map = {
    stl: 'ph ph-cube',
    html: 'ph ph-browser',
    svg: 'ph ph-bezier-curve',
    pdf: 'ph ph-file-pdf',
    image: 'ph ph-image',
    video: 'ph ph-video',
  }
  return map[contentType(item)] || 'ph ph-paperclip'
}

function minDrawerWidth() {
  return Math.round(Math.min(600, viewportWidth.value * 0.42))
}

function maxDrawerWidth() {
  return Math.max(minDrawerWidth(), viewportWidth.value - CHAT_MIN_WIDTH)
}

function clampDrawerWidth(width) {
  return Math.min(Math.max(Math.round(width), minDrawerWidth()), maxDrawerWidth())
}

function currentDrawerWidth() {
  return clampDrawerWidth(drawerWidth.value ?? minDrawerWidth())
}

function syncViewportWidth() {
  viewportWidth.value = window.innerWidth
  if (drawerWidth.value !== null) drawerWidth.value = currentDrawerWidth()
}

function startResize(event) {
  if (!isDesktop.value) return
  event.preventDefault()
  isResizing.value = true
  document.body.style.cursor = 'col-resize'
  document.body.style.userSelect = 'none'
  window.addEventListener('pointermove', resizeDrawer)
  window.addEventListener('pointerup', stopResize, { once: true })
}

function resizeDrawer(event) {
  drawerWidth.value = clampDrawerWidth(viewportWidth.value - event.clientX)
}

function stopResize() {
  isResizing.value = false
  saveDrawerWidth()
  document.body.style.cursor = ''
  document.body.style.userSelect = ''
  window.removeEventListener('pointermove', resizeDrawer)
  window.removeEventListener('pointerup', stopResize)
}

function readSavedDrawerWidth() {
  if (typeof window === 'undefined') return null
  try {
    const value = Number(window.localStorage.getItem(DRAWER_WIDTH_STORAGE_KEY))
    return Number.isFinite(value) && value > 0 ? value : null
  } catch {
    return null
  }
}

function saveDrawerWidth() {
  if (typeof window === 'undefined' || drawerWidth.value === null) return
  try {
    window.localStorage.setItem(DRAWER_WIDTH_STORAGE_KEY, String(currentDrawerWidth()))
  } catch {
    // Storage may be unavailable in restricted browser contexts.
  }
}

onMounted(() => {
  window.addEventListener('resize', syncViewportWidth)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', syncViewportWidth)
  window.removeEventListener('pointermove', resizeDrawer)
  window.removeEventListener('pointerup', stopResize)
  if (isResizing.value) stopResize()
})

function labelFor(item) {
  const type = contentType(item).toUpperCase()
  const date = item.updated_at || item.created_at
  if (!date) return type
  return `${type} · ${formatDate(date)}`
}

function formatDate(value) {
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return value
  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
}

function versionedUrl(item) {
  return versionedContentUrl(item.url, item.updated_at || item.created_at || '')
}

function viewerUrl(item, viewerType) {
  return viewerContentUrl(viewerType, versionedUrl(item))
}

function previewUrl(item) {
  const type = contentType(item)
  if (['stl', 'html', 'svg', 'pdf'].includes(type)) return viewerUrl(item, type)
  return absoluteContentUrl(versionedUrl(item))
}

function rawUrl(item) {
  return contentFileUrl(item.url)
}

function sourceUrl(item) {
  const type = contentType(item)
  if (['html', 'svg'].includes(type)) return rawUrl(item)
  if (type === 'stl' && item.source_url) return contentFileUrl(item.source_url)
  return ''
}

function hasSource(item) {
  return Boolean(sourceUrl(item))
}

async function toggleSource(item) {
  showSource.value = !showSource.value
  if (showSource.value) await loadSource(item)
}

async function loadSource(item) {
  const url = sourceUrl(item)
  if (!url || sourceText.value || sourceLoading.value) return
  sourceLoading.value = true
  sourceError.value = ''
  try {
    const res = await fetch(url)
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    sourceText.value = await res.text()
  } catch (err) {
    sourceError.value = `Failed to load source: ${err?.message || err}`
  } finally {
    sourceLoading.value = false
  }
}

function shareUrl(item) {
  if (contentType(item) === 'stl') return previewUrl(item)
  return absoluteContentUrl(versionedUrl(item))
}

function downloadUrl(item) {
  const url = contentFileUrl(item.download_url || item.url)
  if (item.download_url || !url) return url
  return `${url}${url.includes('?') ? '&' : '?'}download=1`
}

function isFramePreview(item) {
  return ['stl', 'html', 'svg', 'pdf'].includes(contentType(item))
}

async function copyLink(item) {
  try {
    await navigator.clipboard.writeText(shareUrl(item))
    copiedKey.value = artifactKey(item)
    setTimeout(() => {
      if (copiedKey.value === artifactKey(item)) copiedKey.value = null
    }, 1500)
  } catch {
    // Clipboard can fail on non-secure origins; ignore.
  }
}

function copyIcon(item) {
  return copiedKey.value === artifactKey(item) ? 'ph ph-check' : 'ph ph-copy'
}

function domainOf(url) {
  try {
    return new URL(url).hostname.replace(/^www\./, '')
  } catch {
    return url.split('/')[2] || url
  }
}

function snippetOf(text, index, maxLen = 60) {
  const start = Math.max(0, index - maxLen)
  const end = Math.min(text.length, index + maxLen)
  let s = text.slice(start, end).replace(/\s+/g, ' ').trim()
  if (start > 0) s = '…' + s
  if (end < text.length) s = s + '…'
  return s
}

function copyAllLinks() {
  const lines = links.value.map(l => l.url)
  if (!lines.length) return
  navigator.clipboard.writeText(lines.join('\n')).catch(() => {})
}

function openAllLinks() {
  for (const l of links.value.slice(0, 8)) {
    window.open(l.url, '_blank', 'noopener,noreferrer')
  }
}

function fileIcon(item) {
  if (item.is_dir) return 'ph ph-folder'
  const ext = item.name.split('.').pop()?.toLowerCase() || ''
  const map = {
    js: 'ph ph-file-js',
    ts: 'ph ph-file-ts',
    py: 'ph ph-file-py',
    html: 'ph ph-file-html',
    css: 'ph ph-file-css',
    json: 'ph ph-file-json',
    md: 'ph ph-file-text',
    txt: 'ph ph-file-text',
    jpg: 'ph ph-file-image',
    jpeg: 'ph ph-file-image',
    png: 'ph ph-file-image',
    gif: 'ph ph-file-image',
    svg: 'ph ph-file-image',
    webp: 'ph ph-file-image',
    mp4: 'ph ph-file-video',
    webm: 'ph ph-file-video',
    mov: 'ph ph-file-video',
    mp3: 'ph ph-file-audio',
    wav: 'ph ph-file-audio',
    ogg: 'ph ph-file-audio',
    pdf: 'ph ph-file-pdf',
    zip: 'ph ph-file-zip',
    tar: 'ph ph-file-zip',
    gz: 'ph ph-file-zip',
    rar: 'ph ph-file-zip',
  }
  return map[ext] || 'ph ph-file'
}

function fileMeta(item) {
  if (item.is_dir) return 'Directory'
  const size = item.size
  if (size < 1024) return `${size} B`
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
  return `${(size / (1024 * 1024)).toFixed(1)} MB`
}

function fileIndent(item) {
  return { paddingLeft: `${12 + item.depth * 16}px` }
}

function fileDownloadUrl(path) {
  const sessionId = chat.currentId
  if (!sessionId) return '#'
  return `/api/sessions/${sessionId}/files/${encodeURIComponent(path)}?download=1`
}

function isInlineFile(path) {
  const ext = path.split('.').pop()?.toLowerCase() || ''
  const inlineExts = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'html', 'txt', 'md', 'pdf']
  return inlineExts.includes(ext)
}
</script>

<style scoped>
.artifacts-panel {
  width: var(--artifacts-width, min(600px, 42vw));
  min-width: var(--artifacts-width, min(600px, 42vw));
  max-width: var(--artifacts-width, min(600px, 42vw));
  display: flex;
  flex-direction: column;
  background: #16161E;
  border-left: 2px solid rgba(192, 202, 245, 0.24);
  min-height: 0;
  margin-right: calc(-1 * var(--artifacts-width, min(600px, 42vw)));
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  position: relative;
  transition:
    margin-right 0.22s ease,
    opacity 0.22s ease,
    transform 0.22s ease;
}

.artifacts-panel.is-open {
  margin-right: 0;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.artifacts-panel.is-resizing {
  transition: none;
}

.artifacts-resize-handle {
  position: absolute;
  top: 0;
  left: -4px;
  bottom: 0;
  width: 8px;
  z-index: 2;
  cursor: col-resize;
  touch-action: none;
}

.artifacts-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 1px;
  height: 100%;
  background: transparent;
  transition: background 0.15s ease;
}

.artifacts-resize-handle:hover::after,
.artifacts-panel.is-resizing .artifacts-resize-handle::after {
  background: #FF9E64;
}

.artifacts-header {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 15px;
  border-bottom: 2px solid rgba(192, 202, 245, 0.24);
}

.artifacts-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #787C99;
  font-size: 13px;
}

.artifacts-empty i {
  font-size: 28px;
}

.artifacts-tabs {
  display: flex;
  align-items: center;
  flex: 1;
}

.artifacts-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 15px;
  border: 0;
  border-right: 2px solid rgba(192, 202, 245, 0.08);
  background: transparent;
  color: #A9B1D6;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.artifacts-tab:hover {
  background: #7AA2F7;
  color: #16161E;
}

.artifacts-tab.is-active {
  background: #C0CAF5;
  color: #16161E;
}

.artifacts-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #1F2335;
  color: #787C99;
  font-size: 11px;
  font-weight: 600;
}

.artifacts-tab.is-active .artifacts-tab-count {
  background: rgba(22, 22, 30, 0.2);
  color: #16161E;
}

.artifacts-list {
  max-height: calc(58px * 4);
  overflow-y: auto;
  border-bottom: 2px solid rgba(192, 202, 245, 0.24);
}

.artifact-item {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 2px solid transparent;
  background: rgba(192, 202, 245, 0.045);
  color: #C0CAF5;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.artifact-item:hover {
  background: #7AA2F7;
  color: #16161E;
}

.artifact-item.is-active {
  border-color: #7AA2F7;
  background: #7AA2F7;
  color: #16161E;
}

.artifact-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FF9E64;
  background: rgba(192, 202, 245, 0.085);
}

.artifact-item:hover .artifact-icon,
.artifact-item.is-active .artifact-icon {
  color: #16161E;
  background: rgba(22, 22, 30, 0.12);
}

.artifact-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.artifact-title,
.artifact-detail-title,
.artifact-detail-filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifact-title {
  font-size: 13px;
  font-weight: 500;
}

.artifact-meta {
  font-size: 11px;
  color: #787C99;
}

.artifact-item:hover .artifact-meta,
.artifact-item.is-active .artifact-meta {
  color: rgba(22, 22, 30, 0.72);
}

.artifact-detail {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.artifact-detail-header {
  padding: 12px 15px 8px;
}

.artifact-detail-title {
  font-size: 14px;
  font-weight: 600;
  color: #C0CAF5;
}

.artifact-detail-filename {
  margin-top: 3px;
  font-size: 12px;
  color: #787C99;
}

.artifact-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 6px;
  padding: 0 15px 12px;
}

.artifact-action {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(192, 202, 245, 0.24);
  background: #1F2335;
  color: #C0CAF5;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.artifact-action:hover {
  background: #7AA2F7;
  border-color: #7AA2F7;
  color: #16161E;
}

.artifact-preview {
  flex: 1;
  min-height: 0;
  border-top: 2px solid rgba(192, 202, 245, 0.24);
  background: #0f0f14;
}

.artifact-frame,
.artifact-image,
.artifact-video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.artifact-image,
.artifact-video {
  object-fit: contain;
}

.artifact-source {
  height: 100%;
  overflow: auto;
  background: #0f0f14;
}

.artifact-source-code,
.artifact-source-error {
  margin: 0;
  padding: 14px;
  white-space: pre;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #C0CAF5;
}

.artifact-source-error {
  color: #F7768E;
}

.artifact-source-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  color: #787C99;
  font-size: 12px;
}

.artifact-no-preview {
  height: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #787C99;
  font-size: 13px;
}

.artifact-no-preview i {
  font-size: 28px;
}

.links-list {
  max-height: none;
  flex: 1;
  overflow-y: auto;
}

.link-item {
  text-decoration: none;
}

.link-item .artifact-title {
  color: #FF9E64;
}

.link-item:hover .artifact-title,
.link-item.is-active .artifact-title {
  color: #16161E;
}

.link-detail {
  padding: 12px 15px;
  border-top: 2px solid rgba(192, 202, 245, 0.24);
}

.link-detail-header {
  margin-bottom: 8px;
}

.link-detail-count {
  font-size: 12px;
  color: #787C99;
}

.link-actions {
  display: flex;
  gap: 6px;
}

.files-list {
  max-height: none;
  flex: 1;
  overflow-y: auto;
}

.file-item {
  cursor: default;
}

.file-item.is-dir {
  cursor: default;
}

.file-item.is-dir .artifact-title {
  color: #A9B1D6;
}

.file-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.file-item:hover .file-row-actions {
  opacity: 1;
}

.file-row-action {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
}

@media (max-width: 980px) {
  .artifacts-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    margin-right: 0;
    transform: translateX(100%);
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
  }

  .artifacts-resize-handle {
    display: none;
  }

  .artifacts-panel.is-open {
    transform: translateX(0);
  }

  /* Hide tab text labels on mobile to fit the close button */
  .artifacts-header {
    gap: 6px;
    padding: 0 10px;
  }
  .artifacts-tab {
    padding: 8px 10px;
    gap: 4px;
  }
  .artifacts-tab > span:not(.artifacts-tab-count) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .artifacts-panel {
    transition: none;
  }
}

/* ── Files tab refresh button ─────────────────────────────────────────────── */
.files-tab-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.files-refresh-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(192, 202, 245, 0.24);
  background: #1F2335;
  color: #C0CAF5;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.files-refresh-btn:hover {
  background: #7AA2F7;
  border-color: #7AA2F7;
  color: #16161E;
}

.files-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.files-refresh-btn i.spinning {
  display: inline-block;
  animation: refresh-spin 0.8s linear infinite;
}

@keyframes refresh-spin {
  to { transform: rotate(360deg); }
}

/* Hide refresh button on mobile */
@media (max-width: 980px) {
  .files-refresh-btn { display: none; }
}

/* ── Pull-to-refresh for files tab (mobile) ──────────────────────────────── */
.files-ptr {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  font-size: 12px;
  color: var(--color-text-dark, #787c99);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  will-change: transform, opacity;
}

.ptr-pulled {
  transition: transform 0.15s;
}

@media (min-width: 981px) {
  .files-ptr { display: none; }
}
/* ── Terminals tab ────────────────────────────────────────────────────────── */
.terminals-list {
  max-height: none;
  flex: 1;
  overflow-y: auto;
}

.terminal-item.is-closed {
  opacity: 0.6;
}

.terminal-item .artifact-meta {
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.terminal-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid transparent;
}

.status-busy {
  background: #73DACA;
  color: #16161E;
  border-color: #73DACA;
}

.status-idle {
  background: #7AA2F7;
  color: #16161E;
  border-color: #7AA2F7;
}

.status-closed {
  background: #F7768E;
  color: #16161E;
  border-color: #F7768E;
}

.terminal-detail {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 2px solid rgba(192, 202, 245, 0.24);
  overflow-y: auto;
}

.terminal-detail-header {
  padding: 12px 15px 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.terminal-detail-title {
  font-size: 14px;
  font-weight: 600;
  color: #C0CAF5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal-detail-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(192, 202, 245, 0.24);
  background: #1F2335;
  color: #C0CAF5;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.terminal-detail-close:hover {
  background: #7AA2F7;
  border-color: #7AA2F7;
  color: #16161E;
}

.terminal-detail-meta {
  margin-top: 3px;
  font-size: 12px;
  color: #787C99;
  word-break: break-word;
  line-height: 1.5;
}

.terminal-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 15px 12px;
  border-bottom: 2px solid rgba(192, 202, 245, 0.12);
}

.terminal-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.terminal-detail-label {
  color: #787C99;
  flex-shrink: 0;
}

.terminal-detail-value {
  color: #C0CAF5;
  text-align: right;
  word-break: break-all;
}

/* Status colours inside detail rows — must be after .terminal-detail-value
   so their color overrides the default #C0CAF5. */
.terminal-detail-value.status-busy {
  color: #73DACA;
}

.terminal-detail-value.status-idle {
  color: #7AA2F7;
}

.terminal-detail-value.status-closed {
  color: #F7768E;
}

.terminal-detail-command {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: #FF9E64;
}

.terminal-output-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #0f0f14;
}

.terminal-output-header {
  padding: 8px 15px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #787C99;
  border-bottom: 2px solid rgba(192, 202, 245, 0.12);
}

.terminal-output {
  flex: 1;
  margin: 0;
  padding: 14px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #C0CAF5;
}
</style>
