<script lang="ts" setup>
import { ref } from 'vue'
import type { EstimatorCycle } from '@/stores/estimator'

interface Props {
  cycleTotal: number
  monthlyEffective: number
  cycle: EstimatorCycle
  checkoutUrl: string | null
  shareUrl: string
  planSelected: boolean
}

defineProps<Props>()

const cycleLabel: Record<EstimatorCycle, string> = {
  monthly: 'monthly',
  quarterly: 'quarterly',
  annual: 'annual',
}

const copied = ref<boolean>(false)

async function copyShareLink(url: string): Promise<void> {
  try {
    await navigator.clipboard.writeText(url)
    copied.value = true
    setTimeout(() => { copied.value = false }, 2000)
  } catch {
    // fallback: select-and-copy via temporary textarea
    const ta = document.createElement('textarea')
    ta.value = url
    ta.style.position = 'fixed'
    ta.style.opacity = '0'
    document.body.appendChild(ta)
    ta.select()
    try { document.execCommand('copy') } catch { /* ignore */ }
    document.body.removeChild(ta)
    copied.value = true
    setTimeout(() => { copied.value = false }, 2000)
  }
}
</script>

<template>
  <div class="estimator-footer d-flex align-center flex-wrap ga-4">
    <div class="estimator-footer__total flex-grow-1">
      <div class="text-caption text-medium-emphasis">
        Your estimated total
      </div>
      <div class="d-flex align-baseline ga-2">
        <span class="text-h4 font-weight-bold text-primary">
          ${{ cycleTotal.toFixed(2) }}
        </span>
        <span class="text-body-2 text-medium-emphasis">
          billed {{ cycleLabel[cycle] }}
        </span>
      </div>
      <div v-if="cycle !== 'monthly'" class="text-caption text-medium-emphasis">
        Effective ${{ monthlyEffective.toFixed(2) }}/mo
      </div>
    </div>

    <div class="d-flex align-center ga-3 flex-wrap">
      <VBtn
        :variant="copied ? 'flat' : 'outlined'"
        :color="copied ? 'success' : 'primary'"
        size="large"
        :prepend-icon="copied ? 'tabler-check' : 'tabler-link'"
        @click="copyShareLink(shareUrl)"
      >
        {{ copied ? 'Copied!' : 'Copy share link' }}
      </VBtn>

      <a
        v-if="checkoutUrl && planSelected"
        :href="checkoutUrl"
        class="text-decoration-none"
      >
        <VBtn color="primary" size="large" rounded="lg" prepend-icon="tabler-shopping-cart">
          Order this configuration
          <VIcon icon="tabler-arrow-right" end />
        </VBtn>
      </a>
      <VBtn
        v-else
        color="primary"
        size="large"
        rounded="lg"
        disabled
        prepend-icon="tabler-shopping-cart"
      >
        Pick a workload first
      </VBtn>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.estimator-footer {
  padding: 22px 26px;
  border-radius: 18px;
  background: rgba(var(--v-theme-surface), 0.85);
  border: 1px solid rgba(var(--v-theme-primary), 0.22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  position: sticky;
  bottom: 16px;
  z-index: 5;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  @media (max-width: 600px) {
    position: relative;
    bottom: auto;
  }
}
</style>
