<script lang="ts" setup>
import { usePage } from '@inertiajs/vue3'
import { computed } from 'vue'
import MarketingLayout from '@/Layouts/MarketingLayout.vue'
import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
import HeroSection from '@/Components/Marketing/HeroSection.vue'
import VpsHero from '@/Components/Marketing/VpsHero.vue'
import ScrollReveal from '@/Components/Marketing/ScrollReveal.vue'

defineOptions({ layout: MarketingLayout })

interface Plan {
  id: number
  name: string
  slug: string
  price: string
  features: Record<string, string | number> | null
  stock_quantity: number | null
}

interface PageProps {
  plans: Plan[]
  domains: { marketing: string; account: string; admin: string }
}

interface Feature {
  icon: string
  title: string
  description: string
}

const page = usePage()
const props = computed(() => page.props as unknown as PageProps)
const accountUrl = computed<string>(() => `https://${props.value.domains?.account}`)
const plans = computed(() => props.value.plans || [])

const startingPrice = computed<string>(() => {
  if (plans.value.length === 0) return '3.50'
  const lowest = Math.min(...plans.value.map(p => parseFloat(p.price)))
  return lowest % 1 === 0 ? lowest.toString() : lowest.toFixed(2)
})

const features: Feature[] = [
  { icon: 'tabler-database', title: 'RAID 10 SSD Storage', description: 'Redundant SSD arrays for fast read/write speeds and data protection.' },
  { icon: 'tabler-shield-check', title: 'DDoS Protection', description: 'Enterprise-grade protection against volumetric attacks.' },
  { icon: 'tabler-rocket', title: 'Instant Provisioning', description: 'Your server is deployed within seconds of ordering.' },
  { icon: 'tabler-refresh', title: 'VM Backups', description: 'Built-in VM backup and snapshot functionality.' },
  { icon: 'tabler-terminal', title: 'Full Root Access', description: 'Complete control over your server environment.' },
  { icon: 'tabler-server', title: 'VirtFusion Panel', description: 'Powerful control panel for managing your VPS with ease.' },
]

const includedFeatures: string[] = [
  '1 IPv4 & 1 /64 IPv6',
  'Near instant provisioning',
  'VM backups',
  'Windows (BYOL) & Linux support',
  'Full root access',
  'VirtFusion control panel',
  'RAID 10 backed storage',
  '14-day money back guarantee',
]

// Keys from features JSON that should not be shown as table columns
const internalKeys = new Set([
  'virtfusion_package_id',
  'virtfusion_server_id',
  'control_panel',
  'os',
  'ipv4',
  'ipv6',
])

function getFeature(plan: Plan, key: string): string {
  return String(plan.features?.[key] ?? '-')
}

function formatPrice(plan: Plan): string {
  const price = parseFloat(plan.price) || 0
  return price % 1 === 0 ? `$${price}` : `$${price.toFixed(2)}`
}
</script>

<template>
  <div>
    <!-- Hero -->
    <HeroSection>
      <template #content>
        <VChip color="primary" variant="tonal" class="mb-4">VPS Hosting</VChip>
        <h1 class="text-h2 font-weight-bold mb-3">
          Virtual Private <span class="hero-gradient-text">Servers</span>
        </h1>
        <p class="text-h6 text-medium-emphasis font-weight-regular mb-4" style="max-width: 600px;">
          High-performance VPS hosting with RAID 10 SSD storage, dedicated resources, and full root access from our Atlanta, GA datacenter.
        </p>
        <p class="text-body-1 text-medium-emphasis mb-8">
          Starting at just <span class="text-primary font-weight-bold">${{ startingPrice }}/mo</span>
        </p>
        <a :href="plans.length ? accountUrl + '/checkout/' + plans[0].id : '/pricing'" class="text-decoration-none">
          <VBtn color="primary" size="x-large" rounded="lg">
            Get Started
            <VIcon icon="tabler-arrow-right" end />
          </VBtn>
        </a>
      </template>

      <template #visual>
        <VpsHero />
      </template>
    </HeroSection>

    <!-- Features -->
    <VContainer class="marketing-section">
      <SectionHeader
        label="Features"
        title="Why Choose EZSCALE VPS?"
        highlight-word="EZSCALE"
        subtitle="Enterprise-grade infrastructure with the simplicity you deserve."
      />
      <VRow>
        <VCol v-for="(feature, index) in features" :key="feature.title" cols="12" sm="6" md="4">
          <div :class="['d-flex ga-3 mb-4 feature-card-hover pa-3 rounded-lg', `fade-in-up stagger-delay-${index + 1}`]">
            <VAvatar color="primary" variant="tonal" size="44">
              <VIcon :icon="feature.icon" size="22" />
            </VAvatar>
            <div>
              <h3 class="text-subtitle-1 font-weight-bold">{{ feature.title }}</h3>
              <p class="text-body-2 text-medium-emphasis mb-0">{{ feature.description }}</p>
            </div>
          </div>
        </VCol>
      </VRow>
    </VContainer>

    <!-- Plans Table -->
    <div class="section-alt-bg marketing-section">
      <VContainer>
        <SectionHeader
          label="Pricing"
          title="VPS Plans"
          highlight-word="Plans"
          subtitle="All plans hosted in our Atlanta, GA datacenter. DDoS protection, full root access, and VirtFusion panel included."
        />

        <VCard class="feature-card-hover">
          <VTable>
            <thead>
              <tr>
                <th>Plan</th>
                <th>CPU</th>
                <th>RAM</th>
                <th>Storage</th>
                <th>Bandwidth</th>
                <th>Price</th>
                <th />
              </tr>
            </thead>
            <tbody>
              <tr v-for="plan in plans" :key="plan.id">
                <td class="font-weight-bold">{{ plan.name }}</td>
                <td>{{ getFeature(plan, 'cpu') }}</td>
                <td>{{ getFeature(plan, 'ram') }}</td>
                <td>{{ getFeature(plan, 'storage') }}</td>
                <td>{{ getFeature(plan, 'bandwidth') }}</td>
                <td class="text-primary font-weight-bold">{{ formatPrice(plan) }}/mo</td>
                <td>
                  <a :href="accountUrl + '/checkout/' + plan.id" class="text-decoration-none">
                    <VBtn color="primary" size="small" variant="tonal">Order Now</VBtn>
                  </a>
                </td>
              </tr>
            </tbody>
          </VTable>
        </VCard>

        <!-- Included with all plans -->
        <VCard class="mt-8 pa-6 feature-card-hover">
          <h3 class="text-h5 font-weight-bold mb-4 text-center">Included With All Plans</h3>
          <VRow>
            <VCol
              v-for="item in includedFeatures"
              :key="item"
              cols="12"
              sm="6"
              md="4"
            >
              <div class="d-flex align-center ga-2 mb-2">
                <VIcon icon="tabler-circle-check" color="success" size="20" />
                <span class="text-body-1">{{ item }}</span>
              </div>
            </VCol>
          </VRow>
        </VCard>
      </VContainer>
    </div>

    <!-- CTA -->
    <div class="marketing-section" style="background: linear-gradient(135deg, rgb(var(--v-theme-primary), 0.08), rgb(var(--v-theme-surface)));">
      <VContainer class="text-center">
        <h2 class="text-h4 font-weight-bold mb-3">Ready to Get Started?</h2>
        <p class="text-body-1 text-medium-emphasis mb-6">
          Deploy your VPS in seconds with full root access, DDoS protection, and 24/7 support.
        </p>
        <div class="d-flex ga-3 justify-center flex-wrap">
          <a :href="plans.length ? accountUrl + '/checkout/' + plans[0].id : '/pricing'" class="text-decoration-none">
            <VBtn color="primary" size="large" rounded="lg">
              Get Started
              <VIcon icon="tabler-arrow-right" end />
            </VBtn>
          </a>
          <a href="/contact" class="text-decoration-none">
            <VBtn color="primary" variant="outlined" size="large" rounded="lg">
              Contact Sales
            </VBtn>
          </a>
        </div>
      </VContainer>
    </div>
  </div>
</template>
