<template>
  <aside class="asset-preview glass-panel">
    <header>
      <div>
        <span class="eyebrow">ASSET DETAILS</span>
        <h3>{{ asset?.name || 'No asset selected' }}</h3>
      </div>
      <button v-if="asset" class="ghost-button compact" type="button" @click="$emit('refresh')">
        <RotateCcw :size="14" />Refresh
      </button>
    </header>

    <div v-if="asset" class="asset-detail-stack">
      <div class="asset-kind-card">
        <component :is="kindIcon" :size="26" />
        <div>
          <strong>{{ asset.kind }}</strong>
          <small>{{ formatBytes(asset.sizeBytes) }} - {{ asset.mimeType }}</small>
        </div>
      </div>

      <div class="asset-preview-frame">
        <img v-if="previewUrl && asset.mimeType?.startsWith('image/')" :src="previewUrl" :alt="asset.name" />
        <iframe v-else-if="previewUrl && asset.mimeType === 'application/pdf'" :src="previewUrl" title="Asset preview" />
        <pre v-else-if="textPreview">{{ textPreview }}</pre>
        <div v-else class="asset-preview-empty">
          <FileText :size="24" />
          <span>Select View to load a preview for images, PDFs, and text-based assets.</span>
        </div>
      </div>

      <dl class="asset-meta-grid">
        <div><dt>Reference</dt><dd><code>{{ asset.referenceToken }}</code></dd></div>
        <div><dt>Package path</dt><dd>{{ asset.packagePath || asset.originalName }}</dd></div>
        <div><dt>Folder</dt><dd>{{ asset.folderName || 'Unfiled' }}</dd></div>
        <div><dt>Checksum</dt><dd><code>{{ asset.checksum?.slice(0, 18) }}...</code></dd></div>
      </dl>

      <div class="asset-action-grid">
        <button class="primary-action compact" type="button" @click="$emit('view', asset)">
          <Eye :size="15" />View
        </button>
        <button class="ghost-button compact" type="button" @click="$emit('download', asset)">
          <Download :size="15" />Download
        </button>
        <button class="ghost-button compact" type="button" @click="$emit('insert-reference', asset)">
          <Link2 :size="15" />Insert token
        </button>
        <button class="ghost-button compact" type="button" @click="$emit('link', asset)">
          <Network :size="15" />Link target
        </button>
      </div>
    </div>

    <div v-else class="asset-inspector-empty">
      <div><Package :size="24" /></div>
      <strong>No asset selected</strong>
      <p>Pick an asset to preview content, copy its token, download it, or link it into a package workflow.</p>
    </div>
  </aside>
</template>

<script setup>
import { computed } from 'vue';
import { Archive, Download, Eye, FileCog, FileText, Image, Link2, Network, Package, RotateCcw, ScrollText } from '@lucide/vue';

const props = defineProps({
  asset: { type: Object, default: null },
  previewUrl: { type: String, default: '' },
  textPreview: { type: String, default: '' }
});

defineEmits(['view', 'download', 'insert-reference', 'link', 'refresh']);

const kindIcon = computed(() => {
  const map = {
    archive: Archive,
    config: FileCog,
    document: FileText,
    image: Image,
    installer: Package,
    script: ScrollText,
    text: FileText
  };
  return map[props.asset?.kind] || FileText;
});

function formatBytes(bytes = 0) {
  if (!bytes) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB'];
  const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
  return `${(bytes / (1024 ** index)).toFixed(index ? 1 : 0)} ${units[index]}`;
}
</script>

<style scoped>
.asset-preview {
  min-width: 290px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 430px;
  height: 100%;
  padding: 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(125, 232, 255, .08), transparent 34%),
    linear-gradient(145deg, rgba(20, 25, 58, .88), rgba(7, 17, 42, .82));
}

.asset-preview header,
.asset-kind-card,
.asset-action-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.asset-preview h3 {
  margin: 2px 0 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.asset-inspector-empty {
  flex: 1;
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 22px;
  border: 1px dashed rgba(125, 232, 255, .18);
  border-radius: 16px;
  color: rgba(214, 226, 244, .68);
  background: rgba(3, 10, 26, .34);
  text-align: center;
}

.asset-inspector-empty > div {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(125, 232, 255, .2);
  border-radius: 18px;
  color: #79eaff;
  background: rgba(95, 219, 255, .09);
}

.asset-inspector-empty strong {
  color: #fff;
  font: 780 17px var(--display-font);
}

.asset-inspector-empty p {
  max-width: 260px;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.asset-detail-stack {
  display: grid;
  gap: 14px;
}

.asset-kind-card {
  justify-content: flex-start;
  padding: 12px;
  border: 1px solid rgba(95, 219, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.asset-kind-card small {
  display: block;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.75rem;
  margin-top: 2px;
}

.asset-preview-frame {
  min-height: 190px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(4, 10, 26, 0.56);
}

.asset-preview-frame img,
.asset-preview-frame iframe {
  display: block;
  width: 100%;
  min-height: 260px;
  border: 0;
  object-fit: contain;
}

.asset-preview-frame pre {
  margin: 0;
  padding: 14px;
  color: #b9ffca;
  font: 0.78rem/1.55 "JetBrains Mono", "Fira Code", Consolas, monospace;
  white-space: pre-wrap;
}

.asset-preview-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 22px;
  color: rgba(255, 255, 255, 0.54);
  text-align: center;
}

.asset-meta-grid {
  display: grid;
  gap: 8px;
  margin: 0;
}

.asset-meta-grid div {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.asset-meta-grid dt {
  color: rgba(125, 232, 255, 0.82);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.asset-meta-grid dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.78rem;
}

.asset-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
</style>
