<template>
  <q-page class="flex flex-center q-pa-md">
    <div style="max-width:600px;width:100%">
      <q-card flat bordered style="border-radius:16px" class="text-center q-pa-lg">
        <!-- Success icon -->
        <div class="q-mb-lg">
          <div class="success-circle q-mx-auto">
            <q-icon name="check" size="48px" color="white" />
          </div>
        </div>

        <div class="text-h4 text-weight-bold q-mb-sm">Commande confirmée!</div>
        <div class="text-subtitle1 text-grey-7 q-mb-lg">
          Merci pour votre commande. Voici votre confirmation.
        </div>

        <!-- Order number -->
        <q-card flat bordered class="q-pa-md q-mb-lg" style="border-radius:12px;background:#f5f7ff">
          <div class="text-caption text-grey-6">Numéro de commande</div>
          <div class="text-h5 text-weight-bold text-primary">{{ orderId }}</div>
        </q-card>

        <!-- Order summary -->
        <div v-if="orderData" class="text-left q-mb-lg">
          <div class="text-subtitle2 text-weight-bold q-mb-sm">Articles commandés</div>
          <q-list dense separator>
            <q-item v-for="item in orderData.items" :key="item.item_code">
              <q-item-section>
                <q-item-label>{{ item.item_name }}</q-item-label>
                <q-item-label caption>
                  {{ item.billing_type === 'Mensuel' ? 'Mensuel' : 'Achat unique' }}
                  <span v-if="item.qty > 1"> x{{ item.qty }}</span>
                </q-item-label>
              </q-item-section>
              <q-item-section side>
                <span class="text-weight-medium">{{ formatPrice(item.rate * item.qty) }}</span>
              </q-item-section>
            </q-item>
          </q-list>

          <q-separator class="q-my-sm" />
          <div class="row justify-between q-px-md">
            <span class="text-weight-bold">Total</span>
            <span class="text-weight-bold text-primary">
              {{ formatPrice(orderData.totals.grand_total) }}
            </span>
          </div>
        </div>

        <!-- Installation notice -->
        <q-banner
          v-if="orderData && orderData.installation"
          class="q-mb-lg text-left"
          rounded
          style="background:#e8f5e9"
        >
          <template #avatar>
            <q-icon name="engineering" color="positive" />
          </template>
          <div class="text-weight-medium">Installation prévue</div>
          <div class="text-body2 text-grey-8">
            Date souhaitée : {{ formatDate(orderData.installation.preferred_date) }}
            ({{ orderData.installation.preferred_slot === 'AM' ? 'Matin' : 'Après-midi' }})
          </div>
          <div class="text-body2 text-grey-7 q-mt-xs">
            Nous vous contacterons pour confirmer le rendez-vous d'installation.
          </div>
        </q-banner>

        <!-- No installation -->
        <q-banner
          v-else
          class="q-mb-lg text-left"
          rounded
          style="background:#e3f2fd"
        >
          <template #avatar>
            <q-icon name="local_shipping" color="primary" />
          </template>
          <div class="text-body2">
            Votre service sera activé dans les prochaines 24 heures. Vous recevrez un courriel de confirmation.
          </div>
        </q-banner>

        <!-- Contact info -->
        <q-card flat bordered class="q-pa-md q-mb-lg text-left" style="border-radius:12px">
          <div class="text-subtitle2 text-weight-bold q-mb-sm">Besoin d'aide?</div>
          <div class="text-body2 q-mb-xs">
            <q-icon name="email" class="q-mr-xs" size="16px" />
            support@gigafibre.ca
          </div>
          <div class="text-body2 q-mb-xs">
            <q-icon name="phone" class="q-mr-xs" size="16px" />
            1-888-GIGAFIBRE
          </div>
          <div class="text-body2">
            <q-icon name="schedule" class="q-mr-xs" size="16px" />
            Lundi - Vendredi, 8h - 20h
          </div>
        </q-card>

        <!-- Actions -->
        <div class="row q-gutter-sm justify-center">
          <q-btn
            color="primary"
            unelevated
            label="Retour au portail"
            icon="home"
            @click="$router.push('/')"
          />
          <q-btn
            outline
            color="primary"
            label="Voir le catalogue"
            icon="storefront"
            @click="$router.push('/catalogue')"
          />
        </div>
      </q-card>
    </div>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const orderId = ref(route.query.order || 'N/A')
const orderData = ref(null)

onMounted(() => {
  // Try to recover order data from navigation state or sessionStorage
  try {
    const stateRaw = window.history.state?.orderData
    if (stateRaw) {
      orderData.value = JSON.parse(stateRaw)
    }
  } catch {
    // Order data not available — show minimal confirmation
  }
})

function formatPrice (val) {
  return (val || 0).toFixed(2) + ' $'
}

function formatDate (dateStr) {
  if (!dateStr) return ''
  const d = new Date(dateStr + 'T00:00:00')
  return d.toLocaleDateString('fr-CA', { year: 'numeric', month: 'long', day: 'numeric' })
}
</script>

<style lang="scss" scoped>
.success-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #43a047, #2e7d32);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
</style>
