<template>
  <div class="app-details-container pb-16 md:pb-16">
    <!-- Desktop Back Button -->
    <button @click="goBack" class="hidden md:flex mb-6 items-center gap-2 text-white/70 hover:text-white transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
      {{ backButtonText }}
    </button>

    <!-- Mobile Full-Width Back Button (teleported to escape CSS transform containing block) -->
    <Teleport to="body">
      <button
        @click="goBack"
        class="md:hidden mobile-back-btn glass-button px-6 py-3 rounded-lg font-medium shadow-2xl flex items-center justify-center gap-2"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        <span>{{ backButtonText }}</span>
      </button>
    </Teleport>

    <div v-if="pkg">
      <!-- Compact Hero Section -->
      <div class="glass-card p-6 mb-6">
        <!-- Desktop: Single Row Layout -->
        <div class="hidden md:flex items-center gap-6">
          <!-- App Icon -->
      <img
        :src="pkg['static-files']?.icon || `/assets/img/app-icons/${pkg.manifest?.id || appId}.png`"
        :alt="pkg.manifest.title"
            class="w-20 h-20 rounded-xl shadow-xl flex-shrink-0"
            @error="handleImageError"
          />
          
          <!-- App Info (grows to fill space) -->
          <div class="flex-1 min-w-0">
            <h1 class="text-2xl font-bold text-white mb-1">{{ pkg.manifest.title }}</h1>
            <p class="text-white/70 text-sm mb-2">{{ pkg.manifest.description.short }}</p>
            <div class="flex items-center gap-2">
      <span
                class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium"
        :class="getStatusClass(pkg.state)"
      >
                <span class="w-1.5 h-1.5 rounded-full mr-1.5" :class="getStatusDotClass(pkg.state)"></span>
        {{ pkg.state }}
      </span>
              <span class="text-white/50 text-xs">v{{ pkg.manifest.version }}</span>
            </div>
          </div>

          <!-- Action Buttons -->
          <div class="flex items-center gap-2 flex-shrink-0">
            <button
              v-if="packageKey === 'lnd'"
              @click="router.push('/dashboard/apps/lnd/channels')"
              class="glass-button glass-button-sm px-4 py-2.5 rounded-lg text-sm font-medium flex items-center gap-2"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
              {{ t('appDetails.channels') }}
            </button>
        <button
              v-if="canLaunch"
          @click="launchApp"
              class="glass-button glass-button-sm px-6 py-2.5 rounded-lg text-sm font-semibold flex items-center gap-2"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
              </svg>
              {{ t('common.launch') }}
            </button>
            <template v-if="!isWebOnly">
            <button
              v-if="pkg.state === 'stopped'"
              @click="startApp"
              class="px-4 py-2.5 bg-green-500/20 border border-green-500/40 rounded-lg text-green-200 text-sm font-medium hover:bg-green-500/30 transition-colors flex items-center gap-2"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
              </svg>
              {{ t('common.start') }}
            </button>
            <button
              @click="restartApp"
              class="px-4 py-2.5 glass-button rounded-lg text-sm font-medium hover:bg-white/15 transition-colors flex items-center gap-2"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
              {{ t('common.restart') }}
            </button>
            <button
              v-if="pkg.state === 'running'"
              @click="stopApp"
              class="px-4 py-2.5 bg-yellow-500/20 border border-yellow-500/40 rounded-lg text-yellow-200 text-sm font-medium hover:bg-yellow-500/30 transition-colors flex items-center gap-2"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
              </svg>
              {{ t('common.stop') }}
            </button>
            <button
              @click="uninstallApp"
              class="px-4 py-2.5 bg-red-600/20 border border-red-600/40 rounded-lg text-red-300 text-sm font-medium hover:bg-red-600/30 transition-colors flex items-center gap-2"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
              {{ t('common.uninstall') }}
            </button>
            </template>
          </div>
        </div>

        <!-- Mobile: Two Column Grid Layout -->
        <div class="md:hidden">
          <!-- Header: Icon + Info + Delete -->
          <div class="flex items-start gap-4 mb-4">
            <!-- App Icon -->
            <img
              :src="pkg['static-files']?.icon || `/assets/img/app-icons/${pkg.manifest?.id || appId}.png`"
              :alt="pkg.manifest.title"
              class="w-20 h-20 rounded-xl shadow-xl flex-shrink-0"
              @error="handleImageError"
            />
            
            <!-- App Info -->
            <div class="flex-1 min-w-0">
              <h1 class="text-xl font-bold text-white mb-1">{{ pkg.manifest.title }}</h1>
              <p class="text-white/70 text-xs mb-2 line-clamp-2">{{ pkg.manifest.description.short }}</p>
              <div class="flex flex-wrap items-center gap-2">
                <span
                  class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
                  :class="getStatusClass(pkg.state)"
                >
                  <span class="w-1.5 h-1.5 rounded-full mr-1" :class="getStatusDotClass(pkg.state)"></span>
                  {{ pkg.state }}
                </span>
                <span class="text-white/50 text-xs">v{{ pkg.manifest.version }}</span>
              </div>
            </div>

            <!-- Uninstall Icon Button -->
            <button
              v-if="!isWebOnly"
              @click="uninstallApp"
              class="flex-shrink-0 w-10 h-10 rounded-lg bg-red-600/20 border border-red-600/40 text-red-300 hover:bg-red-600/30 transition-colors flex items-center justify-center"
              :title="t('common.uninstall')"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
        </button>
      </div>

          <!-- Action Buttons (Auto Grid) -->
          <div class="grid grid-cols-2 gap-2">
            <button
              v-if="canLaunch"
              @click="launchApp"
              :class="isWebOnly ? 'col-span-2' : ''"
              class="glass-button glass-button-sm px-4 py-2.5 rounded-lg text-sm font-semibold flex items-center justify-center gap-2"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
              </svg>
              {{ t('common.launch') }}
            </button>
            <template v-if="!isWebOnly">
        <button
          v-if="pkg.state === 'stopped'"
          @click="startApp"
              class="px-4 py-2.5 bg-green-500/20 border border-green-500/40 rounded-lg text-green-200 text-sm font-medium hover:bg-green-500/30 transition-colors flex items-center justify-center gap-2"
        >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
              </svg>
          {{ t('common.start') }}
        </button>
        <button
          v-if="pkg.state === 'running'"
          @click="stopApp"
              class="px-4 py-2.5 bg-yellow-500/20 border border-yellow-500/40 rounded-lg text-yellow-200 text-sm font-medium hover:bg-yellow-500/30 transition-colors flex items-center justify-center gap-2"
        >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
              </svg>
          {{ t('common.stop') }}
        </button>
        <button
          @click="restartApp"
              :class="[canLaunch && (pkg.state === 'stopped' || pkg.state === 'running') ? 'col-span-2' : '']"
              class="px-4 py-2.5 glass-button rounded-lg text-sm font-medium hover:bg-white/15 transition-colors flex items-center justify-center gap-2"
        >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
          {{ t('common.restart') }}
        </button>
            </template>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
          <!-- Screenshots Gallery -->
          <div class="glass-card p-6">
            <h2 class="text-2xl font-bold text-white mb-4">{{ t('appDetails.screenshots') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div
                v-for="i in 4"
                :key="i"
                class="aspect-video rounded-xl bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 transition-colors cursor-pointer"
              >
                <svg class="w-16 h-16 text-white/20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
              </div>
            </div>
            <p class="text-white/60 text-sm mt-3 text-center">{{ t('appDetails.screenshotPlaceholder') }}</p>
          </div>

          <!-- Description -->
          <div class="glass-card p-6">
            <h2 class="text-2xl font-bold text-white mb-4">{{ t('appDetails.about', { name: pkg.manifest.title }) }}</h2>
            <p class="text-white/80 leading-relaxed whitespace-pre-line">
              {{ pkg.manifest.description.long }}
            </p>
          </div>

          <!-- Features (if available) -->
          <div v-if="features.length > 0" class="glass-card p-6">
            <h2 class="text-2xl font-bold text-white mb-4">{{ t('appDetails.features') }}</h2>
            <ul class="space-y-3">
              <li
                v-for="(feature, index) in features"
                :key="index"
                class="flex items-start gap-3 text-white/80"
              >
                <svg class="w-6 h-6 text-green-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>{{ feature }}</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
          <!-- App Info Card -->
          <div class="glass-card p-6">
            <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.information') }}</h3>
            <div class="space-y-3">
              <div class="flex items-center justify-between py-2 border-b border-white/10">
                <span class="text-white/60 text-sm">{{ t('common.version') }}</span>
                <span class="text-white font-medium">{{ pkg.manifest.version }}</span>
              </div>
              <div v-if="pkg.manifest.author" class="flex items-center justify-between py-2 border-b border-white/10">
                <span class="text-white/60 text-sm">{{ t('common.developer') }}</span>
                <span class="text-white font-medium">{{ pkg.manifest.author }}</span>
              </div>
              <div class="flex items-center justify-between py-2 border-b border-white/10">
                <span class="text-white/60 text-sm">{{ t('common.status') }}</span>
                <span class="text-white font-medium capitalize">{{ pkg.state }}</span>
              </div>
              <div v-if="pkg.manifest.license" class="flex items-center justify-between py-2 border-b border-white/10">
                <span class="text-white/60 text-sm">{{ t('common.license') }}</span>
                <span class="text-white font-medium">{{ pkg.manifest.license }}</span>
              </div>
              <div class="flex items-center justify-between py-2">
                <span class="text-white/60 text-sm">{{ t('common.category') }}</span>
                <span class="text-white font-medium">App</span>
              </div>
            </div>
          </div>

          <!-- Fedimint Services Card -->
          <div v-if="packageKey === 'fedimint'" class="glass-card p-6">
            <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.services') }}</h3>
            <div class="space-y-3">
              <div class="flex items-center gap-3 py-2 border-b border-white/10">
                <span class="w-2 h-2 rounded-full" :class="pkg.state === 'running' ? 'bg-green-400' : 'bg-yellow-400'"></span>
                <div class="flex-1">
                  <p class="text-white/80 font-medium text-sm">{{ t('appDetails.guardian') }}</p>
                  <p class="text-white/50 text-xs capitalize">{{ pkg.state }}</p>
                </div>
              </div>
              <div class="flex items-center gap-3 py-2">
                <span class="w-2 h-2 rounded-full" :class="gatewayState === 'running' ? 'bg-green-400' : gatewayState === 'stopped' ? 'bg-yellow-400' : 'bg-red-400'"></span>
                <div class="flex-1">
                  <p class="text-white/80 font-medium text-sm">{{ t('appDetails.gateway') }}</p>
                  <p class="text-white/50 text-xs capitalize">{{ gatewayState }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- Access (LAN + Tor) Card -->
          <div v-if="interfaceAddresses" class="glass-card p-6">
            <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.access') }}</h3>
            <div class="space-y-3">
              <div v-if="interfaceAddresses['lan-address']" class="flex items-start gap-3">
                <svg class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                </svg>
                <div class="flex-1 min-w-0">
                  <p class="text-white/80 font-medium">{{ t('appDetails.lan') }}</p>
                  <a
                    :href="lanUrl"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="text-blue-400 hover:text-blue-300 text-sm break-all"
                  >
                    {{ interfaceAddresses['lan-address'] }}
                  </a>
                </div>
              </div>
              <div v-if="isRealOnionAddress(interfaceAddresses['tor-address'])" class="flex items-start gap-3">
                <svg class="w-5 h-5 text-amber-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                </svg>
                <div class="flex-1 min-w-0">
                  <p class="text-white/80 font-medium">{{ t('appDetails.tor') }}</p>
                  <span class="text-amber-300/90 text-sm font-mono break-all">{{ torUrl }}</span>
                  <p class="text-white/50 text-xs mt-1">{{ t('appDetails.requiresTor') }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- Requirements Card (hidden for web-only apps) -->
          <div v-if="!isWebOnly" class="glass-card p-6">
            <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.requirements') }}</h3>
            <div class="space-y-3">
              <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                </svg>
                <div class="flex-1">
                  <p class="text-white/80 font-medium">{{ t('appDetails.ram') }}</p>
                  <p class="text-white/60 text-sm">{{ t('appDetails.ramDesc') }}</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-purple-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                </svg>
                <div class="flex-1">
                  <p class="text-white/80 font-medium">{{ t('appDetails.storage') }}</p>
                  <p class="text-white/60 text-sm">{{ t('appDetails.storageDesc') }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- Links Card -->
          <div class="glass-card p-6">
            <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.links') }}</h3>
            <div class="space-y-2">
              <a
                v-if="pkg.manifest.website"
                :href="pkg.manifest.website"
                target="_blank"
                rel="noopener noreferrer"
                class="flex items-center gap-2 text-blue-400 hover:text-blue-300 transition-colors"
              >
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                </svg>
                {{ t('appDetails.website') }}
              </a>
              <a
                href="#"
                class="flex items-center gap-2 text-blue-400 hover:text-blue-300 transition-colors"
              >
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.840 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                </svg>
                {{ t('appDetails.sourceCode') }}
              </a>
              <a
                href="#"
                class="flex items-center gap-2 text-blue-400 hover:text-blue-300 transition-colors"
              >
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                {{ t('appDetails.documentation') }}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- App Not Found -->
    <div v-else class="glass-card p-12 text-center">
      <svg class="w-24 h-24 text-white/20 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <h3 class="text-2xl font-semibold text-white mb-2">{{ t('appDetails.notFoundTitle') }}</h3>
      <p class="text-white/70">{{ t('appDetails.notFoundMessage') }}</p>
    </div>

    <!-- Uninstall Confirmation Modal -->
    <Transition name="modal">
      <div
        v-if="uninstallModal.show"
        class="fixed inset-0 z-50 flex items-center justify-center p-4"
        @click="closeUninstallModal()"
      >
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
        <div
          ref="uninstallModalRef"
          @click.stop
          class="glass-card p-6 md:p-8 max-w-md w-full relative z-10"
        >
          <div class="flex items-start gap-4 mb-6">
            <div class="p-3 bg-red-500/20 rounded-lg flex-shrink-0">
              <svg class="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
            </div>
            <div class="flex-1 min-w-0">
              <h3 class="text-xl font-semibold text-white mb-2">{{ t('appDetails.uninstallTitle') }}</h3>
              <p class="text-white/70 text-sm">
                {{ t('appDetails.uninstallConfirm', { name: uninstallModal.appTitle }) }}
              </p>
            </div>
          </div>

          <div class="flex flex-col-reverse md:flex-row gap-3 md:justify-end">
            <button
              @click="closeUninstallModal()"
              class="w-full md:w-auto px-6 py-3 glass-button rounded-lg text-sm font-medium"
            >
              {{ t('common.cancel') }}
            </button>
            <button
              @click="confirmUninstall"
              class="w-full md:w-auto px-6 py-3 bg-red-600/80 hover:bg-red-600 rounded-lg text-white text-sm font-medium transition-colors"
            >
              {{ t('common.uninstall') }}
            </button>
          </div>
        </div>
      </div>
    </Transition>

    <!-- Action error toast -->
    <Transition name="fade">
      <div v-if="actionError" class="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 max-w-md w-full px-4" role="alert" aria-live="assertive">
        <div class="bg-red-500/20 border border-red-500/40 backdrop-blur-sm rounded-lg px-4 py-3 text-red-200 text-sm flex items-center justify-between gap-3">
          <span>{{ actionError }}</span>
          <button @click="actionError = ''" :aria-label="t('apps.dismissError')" class="text-red-300 hover:text-white shrink-0">&times;</button>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '../stores/app'
import { useAppLauncherStore } from '../stores/appLauncher'
import { PackageState } from '../types/api'
import { useModalKeyboard } from '@/composables/useModalKeyboard'
import { dummyApps } from '../utils/dummyApps'

const router = useRouter()
const route = useRoute()
const store = useAppStore()
const { t } = useI18n()

const appId = computed(() => route.params.id as string)

// Web-only app detection (no container — external websites)
const WEB_ONLY_APP_URLS: Record<string, string> = {
  'indeedhub': `${window.location.protocol}//${window.location.hostname}:7777`,
  'botfights': 'https://botfights.net',
  'nwnn': 'https://nwnn.l484.com',
  '484-kitchen': 'https://484.kitchen',
  'call-the-operator': 'https://cta.tx1138.com',
  'arch-presentation': 'https://present.l484.com',
  'syntropy-institute': 'https://syntropy.institute',
  't-zero': 'https://teeminuszero.net',
}

const isWebOnly = computed(() => appId.value in WEB_ONLY_APP_URLS)

/** Map route/marketplace app IDs to backend package keys (container names). */
const ROUTE_TO_PACKAGE_KEY: Record<string, string> = {
  mempool: 'mempool-web',
  'mempool-electrs': 'mempool-electrs',
  electrs: 'mempool-electrs',
  btcpay: 'btcpay-server',
  'btcpay-server': 'btcpay-server',
  fedimint: 'fedimint',
  'fedimint-gateway': 'fedimint-gateway',
  lnd: 'lnd',
  'lnd-ui': 'lnd',
  bitcoin: 'bitcoin-knots',
  'bitcoin-knots': 'bitcoin-knots',
  homeassistant: 'homeassistant',
  'home-assistant': 'homeassistant',
  grafana: 'grafana',
  searxng: 'searxng',
  ollama: 'ollama',
  onlyoffice: 'onlyoffice',
  penpot: 'penpot',
  nextcloud: 'nextcloud',
  vaultwarden: 'vaultwarden',
  jellyfin: 'jellyfin',
  photoprism: 'photoprism',
  immich: 'immich',
  filebrowser: 'filebrowser',
  'nginx-proxy-manager': 'nginx-proxy-manager',
  portainer: 'portainer',
  'uptime-kuma': 'uptime-kuma',
  tailscale: 'tailscale',
}

/** Backend may register under variant container names */
const PACKAGE_ALIASES: Record<string, string[]> = {
  immich: ['immich_server', 'immich-server'],
  nextcloud: ['nextcloud-aio', 'nextcloud-server'],
}

function resolvePackageKey(routeId: string): string {
  return ROUTE_TO_PACKAGE_KEY[routeId] ?? routeId
}

// Check both store.packages and dummyApps; resolve route ID to package key for backend data
const pkg = computed(() => {
  const routeId = appId.value
  const packageKey = resolvePackageKey(routeId)
  // First check real packages (try both route id and resolved key)
  if (store.packages[packageKey]) {
    return store.packages[packageKey]
  }
  if (store.packages[routeId]) {
    return store.packages[routeId]
  }
  // Check known aliases (backend may use variant container names)
  const aliases = PACKAGE_ALIASES[routeId]
  if (aliases) {
    for (const alias of aliases) {
      if (store.packages[alias]) {
        return store.packages[alias]
      }
    }
  }
  // Fall back to dummy apps
  if (dummyApps[routeId]) {
    return dummyApps[routeId]
  }
  return null
})

const interfaceAddresses = computed(() => {
  const main = pkg.value?.installed?.['interface-addresses']?.main
  if (!main) return null
  if (!main['lan-address'] && !isRealOnionAddress(main['tor-address'])) return null
  return main
})

/** V3 onion addresses are 56+ chars + .onion. Placeholders like "btcpay.onion" are not real. */
function isRealOnionAddress(addr: string | undefined): boolean {
  return !!(addr && addr.endsWith('.onion') && addr.length >= 60 && addr.length <= 70)
}

const lanUrl = computed(() => {
  const addr = interfaceAddresses.value?.['lan-address']
  if (!addr) return '#'
  if (addr.includes('localhost')) {
    return addr.replace('localhost', window.location.hostname)
  }
  return addr
})

/** Tor URL with http:// prefix for copy-paste into Tor Browser */
const torUrl = computed(() => {
  const addr = interfaceAddresses.value?.['tor-address']
  if (!addr || !isRealOnionAddress(addr)) return ''
  return addr.startsWith('http') ? addr : `http://${addr}`
})

/** Resolved package key for the current route */
const packageKey = computed(() => resolvePackageKey(appId.value))

/** Fedimint Gateway companion container state */
const gatewayState = computed(() => {
  const gw = store.packages['fedimint-gateway']
  return gw ? gw.state : 'not installed'
})

// Action error toast
const actionError = ref('')
let errorTimer: ReturnType<typeof setTimeout> | undefined

function showActionError(msg: string) {
  actionError.value = msg
  if (errorTimer) clearTimeout(errorTimer)
  errorTimer = setTimeout(() => { actionError.value = '' }, 5000)
}

const uninstallModal = ref({
  show: false,
  appTitle: ''
})
const uninstallModalRef = ref<HTMLElement | null>(null)
const uninstallRestoreFocusRef = ref<HTMLElement | null>(null)
function closeUninstallModal() {
  uninstallRestoreFocusRef.value?.focus?.()
  uninstallModal.value.show = false
}
useModalKeyboard(
  uninstallModalRef,
  computed(() => uninstallModal.value.show),
  closeUninstallModal,
  { restoreFocusRef: uninstallRestoreFocusRef }
)

// Determine back button text based on where user came from
const backButtonText = computed(() => {
  // Check if we came from marketplace via query parameter
  if (route.query.from === 'marketplace') {
    return t('appDetails.backToStore')
  }

  // Default to My Apps
  return t('appDetails.backToApps')
})

// Check if app has a UI interface and is running
const canLaunch = computed(() => {
  if (!pkg.value) return false
  // Web-only apps are always launchable
  if (isWebOnly.value) return true
  // For real apps, check for UI interface
  const hasUI = pkg.value.manifest.interfaces?.main?.ui || pkg.value.installed?.['interface-addresses']?.main
  const isRunning = pkg.value.state === 'running'
  return hasUI && isRunning
})

// Placeholder features - could be extracted from manifest later
const features = computed(() => {
  return [
    'Self-hosted and privacy-focused',
    'Easy installation and updates',
    'Automatic backups',
    'Secure by default'
  ]
})

function handleImageError(e: Event) {
  const target = e.target as HTMLImageElement
  const currentSrc = target.src
  const id = appId.value
  
  // If it's a dummy app, try to get icon from GitHub or use placeholder
  if (dummyApps[id]) {
    // Try alternative icon paths
    const iconPaths = [
      `https://raw.githubusercontent.com/Start9Labs/${id}-startos/main/icon.png`,
      `https://raw.githubusercontent.com/Start9Labs/${id}-startos/main/icon.svg`,
      `/assets/img/app-icons/${id}.png`,
      `/assets/img/app-icons/${id}.svg`,
    ]
    
    // Try next path if available
    const currentIndex = iconPaths.findIndex(path => currentSrc.includes(path))
    if (currentIndex < iconPaths.length - 1) {
      const nextPath = iconPaths[currentIndex + 1]
      if (nextPath !== undefined) {
        target.src = nextPath
        return
      }
    }
  }
  
  // Create a simple placeholder SVG
  const placeholderSvg = `data:image/svg+xml,${encodeURIComponent(`
    <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="80" height="80" rx="16" fill="rgba(255,255,255,0.1)"/>
      <path d="M40 25L50 35H45V50H35V35H30L40 25Z" fill="rgba(255,255,255,0.6)"/>
      <path d="M25 55H55V60H25V55Z" fill="rgba(255,255,255,0.4)"/>
    </svg>
  `)}`
  
  // Only set fallback if we haven't already tried it
  if (!currentSrc.includes('data:image')) {
    target.src = placeholderSvg
  } else {
    // Ultimate fallback
    target.src = '/assets/img/logo-archipelago.svg'
  }
}

function goBack() {
  router.back()
}


function launchApp() {
  if (!pkg.value) return

  const isDev = import.meta.env.DEV
  const id = appId.value

  // Web-only apps — use their external URL directly
  const webOnlyUrl = WEB_ONLY_APP_URLS[id]
  if (webOnlyUrl) {
    useAppLauncherStore().open({ url: webOnlyUrl, title: pkg.value.manifest.title })
    return
  }

  // Special handling for apps with Docker containers
  const appUrls: Record<string, { dev: string, prod: string }> = {
    'lorabell': {
      dev: 'http://192.168.1.166',
      prod: 'http://192.168.1.166'
    },
    'atob': {
      dev: 'http://localhost:8102',
      prod: 'https://app.atobitcoin.io'
    },
    'k484': {
      dev: 'http://localhost:8103',
      prod: 'http://localhost:8103' // Self-hosted splash screen
    },
    'indeedhub': {
      dev: 'https://archipelago.indeehub.studio',
      prod: 'https://archipelago.indeehub.studio'
    },
    // Dummy apps - replace with real URLs when packaged
    'bitcoin': {
      dev: 'http://localhost:8332',
      prod: 'http://localhost:8332'
    },
    'btcpay-server': {
      dev: 'http://localhost:23000',
      prod: 'http://localhost:23000'
    },
    'homeassistant': {
      dev: 'http://localhost:8123',
      prod: 'http://localhost:8123'
    },
    'grafana': {
      dev: 'http://localhost:3000',
      prod: 'http://localhost:3000'
    },
    'endurain': {
      dev: 'http://localhost:8080',
      prod: 'http://localhost:8080'
    },
    'fedimint': {
      dev: 'http://localhost:8175',
      prod: 'http://192.168.1.228:8175'
    },
    'fedimint-gateway': {
      dev: 'http://localhost:8176',
      prod: 'http://192.168.1.228:8176'
    },
    'morphos-server': {
      dev: 'http://localhost:8081',
      prod: 'http://localhost:8081'
    },
    'lightning-stack': {
      dev: 'http://localhost:9735',
      prod: 'http://localhost:9735'
    },
    'mempool': {
      dev: 'http://localhost:4080',
      prod: 'http://localhost:4080'
    },
    'ollama': {
      dev: 'http://localhost:11434',
      prod: 'http://localhost:11434'
    },
    'searxng': {
      dev: 'http://localhost:8888',
      prod: 'http://localhost:8888'
    },
    'onlyoffice': {
      dev: 'http://localhost:9980',
      prod: 'http://localhost:9980'
    },
    'penpot': {
      dev: 'http://localhost:9001',
      prod: 'http://localhost:9001'
    },
    'nextcloud': { dev: 'http://localhost:8085', prod: 'http://localhost:8085' },
    'vaultwarden': { dev: 'http://localhost:8082', prod: 'http://localhost:8082' },
    'jellyfin': { dev: 'http://localhost:8096', prod: 'http://localhost:8096' },
    'photoprism': { dev: 'http://localhost:2342', prod: 'http://localhost:2342' },
    'immich': { dev: 'http://localhost:2283', prod: 'http://localhost:2283' },
    'filebrowser': { dev: 'http://localhost:8083', prod: 'http://localhost:8083' },
    'nginx-proxy-manager': { dev: 'http://localhost:81', prod: 'http://localhost:81' },
    'portainer': { dev: 'http://localhost:9000', prod: 'http://localhost:9000' },
    'uptime-kuma': { dev: 'http://localhost:3001', prod: 'http://localhost:3001' },
    'tailscale': { dev: 'http://localhost:8240', prod: 'http://localhost:8240' },
    'lnd': { dev: 'http://localhost:8081', prod: 'http://localhost:8081' },
    'bitcoin-knots': { dev: 'http://localhost:8334', prod: 'http://localhost:8334' },
    'botfights': { dev: 'https://botfights.net', prod: 'https://botfights.net' },
    'nwnn': { dev: 'https://nwnn.l484.com', prod: 'https://nwnn.l484.com' },
    '484-kitchen': { dev: 'https://484.kitchen', prod: 'https://484.kitchen' },
    'call-the-operator': { dev: 'https://cta.tx1138.com', prod: 'https://cta.tx1138.com' },
    'arch-presentation': { dev: 'https://present.l484.com', prod: 'https://present.l484.com' },
    'syntropy-institute': { dev: 'https://syntropy.institute', prod: 'https://syntropy.institute' },
    't-zero': { dev: 'https://teeminuszero.net', prod: 'https://teeminuszero.net' }
  }
  
  if (appUrls[id]) {
    let url = isDev ? appUrls[id].dev : appUrls[id].prod
    // Replace localhost with current hostname for remote access
    if (url.includes('localhost')) {
      url = url.replace('localhost', window.location.hostname)
    }
    useAppLauncherStore().open({ url, title: pkg.value.manifest.title })
    return
  }
  
  // For other apps, construct the launch URL
  // In a real deployment, this would use the Tor or LAN address from interfaces
  const torAddress = pkg.value.manifest.interfaces?.main?.['tor-config']
  const lanConfig = pkg.value.manifest.interfaces?.main?.['lan-config']
  
  if (torAddress || lanConfig) {
    showActionError(t('appDetails.noLaunchUrl'))
  }
}

async function startApp() {
  try {
    await store.startPackage(appId.value)
  } catch (err) {
    showActionError(`Failed to start: ${err instanceof Error ? err.message : 'Unknown error'}`)
  }
}

async function stopApp() {
  try {
    await store.stopPackage(appId.value)
  } catch (err) {
    showActionError(`Failed to stop: ${err instanceof Error ? err.message : 'Unknown error'}`)
  }
}

async function restartApp() {
  try {
    await store.restartPackage(appId.value)
  } catch (err) {
    showActionError(`Failed to restart: ${err instanceof Error ? err.message : 'Unknown error'}`)
  }
}

function showUninstallModal() {
  if (!pkg.value) return
  uninstallModal.value = {
    show: true,
    appTitle: pkg.value.manifest.title
  }
}

async function confirmUninstall() {
  uninstallModal.value.show = false
  
  try {
    await store.uninstallPackage(appId.value)
    router.push('/dashboard/apps').catch(() => {})
  } catch (err) {
    showActionError(`Failed to uninstall: ${err instanceof Error ? err.message : 'Unknown error'}`)
  }
}

// Keep for backwards compatibility but redirect to modal
async function uninstallApp() {
  showUninstallModal()
}

function getStatusClass(state: PackageState): string {
  switch (state) {
    case PackageState.Running:
      return 'bg-green-500/20 text-green-200 border border-green-500/30'
    case PackageState.Stopped:
      return 'bg-gray-500/20 text-gray-200 border border-gray-500/30'
    case PackageState.Starting:
    case PackageState.Stopping:
    case PackageState.Restarting:
      return 'bg-yellow-500/20 text-yellow-200 border border-yellow-500/30'
    case PackageState.Installing:
      return 'bg-blue-500/20 text-blue-200 border border-blue-500/30'
    default:
      return 'bg-gray-500/20 text-gray-200 border border-gray-500/30'
  }
}

function getStatusDotClass(state: PackageState): string {
  switch (state) {
    case PackageState.Running:
      return 'bg-green-400'
    case PackageState.Stopped:
      return 'bg-gray-400'
    case PackageState.Starting:
    case PackageState.Stopping:
    case PackageState.Restarting:
      return 'bg-yellow-400 animate-pulse'
    case PackageState.Installing:
      return 'bg-blue-400 animate-pulse'
    default:
      return 'bg-gray-400'
  }
}
</script>

<style scoped>
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-active .glass-card,
.modal-leave-active .glass-card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .glass-card,
.modal-leave-to .glass-card {
  transform: scale(0.95);
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
