<template>
  <div class="view-container" v-if="product">
    <button class="back-link" @click="router.back()">← Zurück</button>
    <div class="detail-layout">
      <div class="detail-main">
        <div class="large-image-placeholder"><span>{{ product.icon }}</span></div>
        <div style="display:flex;gap:8px;align-items:center;margin-top:12px">
          <span class="badge-cat">{{ product.category }}</span>
          <span style="font-size:13px;color:#888">Lagerbestand: {{ product.stock }} Stück</span>
        </div>
        <h2 style="margin:10px 0 4px">{{ product.title }}</h2>
        <p class="detail-price">{{ product.price }} €</p>
        <p style="color:#aaa;line-height:1.6">{{ product.description }}</p>

        <div class="comparison-box">
          <h3 style="margin-top:0">Preisvergleich</h3>
          <div class="comparison-row active">
            <span>{{ product.provider }}</span><strong>{{ product.price }} €</strong>
          </div>
          <div class="comparison-row" v-for="alt in alternatives" :key="alt.id">
            <span style="cursor:pointer;color:var(--primary-accent)" @click="router.push(`/produkt/${alt.id}`)">{{ alt.provider }}</span>
            <strong>{{ alt.price }} €</strong>
          </div>
          <div v-if="!alternatives.length" style="color:#666;font-size:13px;padding-top:8px">Keine weiteren Angebote in dieser Kategorie.</div>
        </div>
      </div>

      <div class="detail-sidebar">
        <div class="seller-card">
          <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px">
            <div class="seller-avatar">{{ provider?.initials }}</div>
            <div>
              <h3 style="margin:0;cursor:pointer;color:var(--primary-accent)" @click="router.push(`/anbieter/${provider?.id}`)">
                {{ provider?.name }}
              </h3>
              <p style="margin:4px 0 0;font-size:13px;color:#aaa">{{ provider?.type }}</p>
            </div>
          </div>
          <p style="font-size:13px;color:#aaa">📍 {{ product.distance }} km entfernt</p>
          <p style="font-size:13px;color:#aaa">📦 {{ provider?.address }}, {{ provider?.city }}</p>
          <div v-if="provider?.verified" style="font-size:12px;color:#4caf50;margin:8px 0">✅ Verifizierter Anbieter</div>
          <button class="btn-action" @click="requestPickup">✉️ Abholung anfragen</button>
          <button class="btn-action" style="background:#333;margin-top:8px" @click="router.push(`/anbieter/${provider?.id}`)">Alle Angebote ansehen</button>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="view-container"><p>Produkt nicht gefunden.</p></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { products, providers } from '@/stores/products'

const route = useRoute()
const router = useRouter()

const product = computed(() => products.find(p => p.id === Number(route.params.id)))
const provider = computed(() => providers.find(pr => pr.id === product.value?.providerId))
const alternatives = computed(() => products.filter(p => p.category === product.value?.category && p.id !== product.value?.id))

function requestPickup() { alert('Anfrage gesendet!') }
</script>
