<script lang="ts" setup>
import { Head, usePage, Link } from '@inertiajs/vue3'
import { computed } from 'vue'
import MarketingLayout from '@/Layouts/MarketingLayout.vue'
import DedicatedConfigurator from '@/Components/Marketing/Dedicated/DedicatedConfigurator/index.vue'
import BuildSummary from '@/Components/Marketing/Dedicated/DedicatedConfigurator/BuildSummary.vue'
import { useDedicatedConfiguratorStore } from '@/stores/dedicatedConfigurator'
import { crossDomainUrl } from '@/utils/resolvers'
import type { DedicatedPlan, DedicatedConfigGroup } from '@/stores/dedicatedConfigurator'

defineOptions({ layout: MarketingLayout })

interface PageProps {
  plan: DedicatedPlan
  configGroups: DedicatedConfigGroup[]
  domains: { marketing: string; account: string; admin: string }
}

const page = usePage()
const props = computed(() => page.props as unknown as PageProps)
const accountUrl = computed<string>(() => crossDomainUrl(props.value.domains?.account))
const plan = computed<DedicatedPlan>(() => props.value.plan)
const configGroups = computed<DedicatedConfigGroup[]>(() => props.value.configGroups || [])

const features = computed(() => plan.value.features ?? {})

const headlineSpecs = computed<Array<{ label: string; value: string; icon: string }>>(() => {
  const f = features.value as Record<string, string | number | undefined>
  const rows: Array<{ label: string; value: string; icon: string }> = []
  if (f.cpu) rows.push({ label: 'CPU', value: String(f.cpu), icon: 'tabler-cpu' })
  if (f.ram) rows.push({ label: 'RAM', value: String(f.ram), icon: 'tabler-device-sd-card' })
  if (f.boot) rows.push({ label: 'Boot', value: String(f.boot), icon: 'tabler-disc' })
  if (f.bays) rows.push({ label: 'Data bays', value: String(f.bays), icon: 'tabler-database' })
  if (f.storage_controller) rows.push({ label: 'Controller', value: String(f.storage_controller), icon: 'tabler-cpu-2' })
  if (f.idrac) rows.push({ label: 'Remote mgmt', value: String(f.idrac), icon: 'tabler-screen-share' })
  if (f.network) rows.push({ label: 'Network', value: String(f.network), icon: 'tabler-network' })
  if (f.bandwidth) rows.push({ label: 'Bandwidth', value: String(f.bandwidth), icon: 'tabler-arrows-right-left' })
  if (f.ipv4) rows.push({ label: 'IPv4', value: String(f.ipv4), icon: 'tabler-id-badge' })
  if (f.ipv6) rows.push({ label: 'IPv6', value: String(f.ipv6), icon: 'tabler-world' })
  return rows
})

const setupFee = computed<number>(() => parseFloat(String(plan.value.setup_fee ?? 0)) || 0)
const leadTime = computed<string>(() => String(features.value.lead_time_days ?? '7-10'))
const formFactor = computed<string>(() => String(features.value.form_factor ?? ''))
const formattedPrice = computed<string>(() => {
  const price = parseFloat(plan.value.price) || 0
  return price % 1 === 0 ? `${price}` : price.toFixed(2)
})

// Pull live state from the store so the sticky summary stays in sync with
// every selection change without prop-drilling through the configurator.
const store = useDedicatedConfiguratorStore()
</script>

<template>
  <Head :title="`${plan.name} | EZSCALE Dedicated Servers`" />
  <div>
    <!-- Breadcrumb + back link -->
    <VContainer class="mt-6">
      <Link href="/dedicated-servers" class="text-decoration-none text-body-2 text-medium-emphasis">
        <VIcon icon="tabler-arrow-left" size="16" class="me-1" />
        Back to dedicated servers
      </Link>
    </VContainer>

    <!-- Header -->
    <VContainer class="marketing-section pt-4">
      <div class="detail-header">
        <div class="detail-header__main">
          <div class="d-flex align-center ga-2 mb-3 flex-wrap">
            <VChip color="info" variant="tonal" size="small" prepend-icon="tabler-tools">
              Build to order · {{ leadTime }} business days
            </VChip>
            <VChip v-if="formFactor" color="default" variant="tonal" size="small">
              {{ formFactor }}
            </VChip>
          </div>
          <h1 class="text-h3 font-weight-bold mb-3">{{ plan.name }}</h1>
          <p v-if="plan.description" class="text-body-1 text-medium-emphasis mb-4" style="max-width: 660px;">
            {{ plan.description }}
          </p>
          <div class="d-flex align-baseline ga-3 flex-wrap mb-2">
            <span class="text-h4 font-weight-bold text-primary">${{ formattedPrice }}/mo</span>
            <span v-if="setupFee > 0" class="text-body-2 text-medium-emphasis">
              + ${{ setupFee.toFixed(0) }} setup
              <span class="text-caption">(waived on 6+ month commits)</span>
            </span>
          </div>
          <div class="text-caption text-medium-emphasis">
            Starting price for the locked baseline build. Configure below to see your actual total.
          </div>
        </div>

        <div class="detail-header__specs">
          <h3 class="text-overline mb-3">Locked baseline build</h3>
          <div class="detail-header__spec-list">
            <div v-for="row in headlineSpecs" :key="row.label" class="detail-header__spec-row">
              <VIcon :icon="row.icon" size="16" class="me-2 text-medium-emphasis flex-shrink-0" />
              <span class="detail-header__spec-label">{{ row.label }}</span>
              <span class="detail-header__spec-value">{{ row.value }}</span>
            </div>
          </div>
        </div>
      </div>
    </VContainer>

    <!-- Configurator + sticky build summary -->
    <div class="section-alt-bg marketing-section">
      <VContainer>
        <div class="text-center mb-6">
          <VChip color="primary" variant="tonal" size="small" class="mb-2">Configure</VChip>
          <h2 class="text-h4 font-weight-bold mb-2">Build it your way</h2>
          <p class="text-body-1 text-medium-emphasis">
            Pick a billing cycle and customize the upgrades. The build summary on the right updates as you go.
          </p>
        </div>

        <div class="detail-grid">
          <div class="detail-grid__configurator">
            <DedicatedConfigurator
              :plan="plan"
              :config-groups="configGroups"
              :account-url="accountUrl"
            />
          </div>
          <div class="detail-grid__summary">
            <BuildSummary
              :plan="plan"
              :config-groups="configGroups"
              :selections="store.selections"
              :cycle="store.cycle"
              :baseline-price="store.baselinePrice"
              :cycle-subtotal="store.cycleSubtotal"
              :setup-fee="store.setupFee"
              :baseline-setup-fee="setupFee"
              :is-setup-fee-waived="store.isSetupFeeWaived"
              :monthly-effective="store.monthlyEffective"
              :cycle-total="store.cycleTotal"
              :checkout-url="store.checkoutUrl"
              :share-url="store.shareUrl"
            />
          </div>
        </div>
      </VContainer>
    </div>

    <!-- Need a custom drive layout? -->
    <VContainer class="marketing-section">
      <VCard class="pa-6 detail-bay-card">
        <div class="d-flex align-start ga-4 flex-wrap">
          <VIcon icon="tabler-info-circle" size="28" color="primary" class="flex-shrink-0" />
          <div class="flex-grow-1">
            <h3 class="text-h6 font-weight-bold mb-2">Need a custom drive layout?</h3>
            <p class="text-body-2 text-medium-emphasis mb-0">
              The drive bay configurator covers the most common configurations. If you need a heterogeneous setup (mixed sizes per bay, hot spares, RAID layout preference, specific drive vendor) — <a href="/contact" class="text-primary text-decoration-none">open a ticket</a> with your spec and we'll build to it.
            </p>
          </div>
        </div>
      </VCard>
    </VContainer>
  </div>
</template>

<style lang="scss" scoped>
.detail-header {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;

  @media (max-width: 960px) {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.detail-header__specs {
  padding: 22px;
  border-radius: 16px;
  background: rgba(var(--v-theme-surface), 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
}

.detail-header__spec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-header__spec-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.detail-header__spec-label {
  width: 110px;
  flex-shrink: 0;
  color: rgba(var(--v-theme-on-surface), 0.55);
  font-weight: 500;
}

.detail-header__spec-value {
  color: rgba(var(--v-theme-on-surface), 0.92);
  flex-grow: 1;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  // Default `stretch` behaviour: the right column grows to the row's full
  // height (matching the configurator column). Combined with sticky on
  // .detail-grid__summary that gives us a sidebar that stays in view all
  // the way down through the configurator scroll.

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.detail-grid__summary {
  position: sticky;
  // 64px navbar (Vuetify VAppBar default) + 16px breathing room.
  top: 80px;
  align-self: start; // stop the cell from stretching the inner card vertically
  max-height: calc(100vh - 96px);
  overflow-y: auto;

  @media (max-width: 1024px) {
    position: relative;
    top: auto;
    max-height: none;
    overflow-y: visible;
    order: -1; // mobile: summary above configurator so total is visible first
  }
}

.detail-bay-card {
  background: rgba(var(--v-theme-surface), 0.6) !important;
  border: 1px solid rgba(var(--v-theme-info), 0.18) !important;
}
</style>
