<script lang="ts" setup>
import { Head, 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 GameServerHero from '@/Components/Marketing/GameServerHero.vue'
import ScrollReveal from '@/Components/Marketing/ScrollReveal.vue'

defineOptions({ layout: MarketingLayout })

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

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

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

const gameIcons: Record<string, string> = {
  'Minecraft': 'tabler-cube',
  'Rust': 'tabler-shield',
  'ARK: Survival Evolved': 'tabler-dinosaur',
  'Valheim': 'tabler-sword',
  'CS2': 'tabler-crosshair',
  'Palworld': 'tabler-paw',
}

const page = usePage()
const props = computed(() => page.props as unknown as PageProps)
const plans = computed(() => props.value.plans || [])

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

function getIcon(plan: Plan): string {
  return gameIcons[plan.name] || 'tabler-device-gamepad-2'
}

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

const features: Feature[] = [
  { icon: 'tabler-bolt', title: 'Low Latency', description: 'Optimized network routing for minimal ping.' },
  { icon: 'tabler-puzzle', title: 'Mod Support', description: 'Easy plugin and mod installation with one-click tools.' },
  { icon: 'tabler-shield-check', title: 'DDoS Protection', description: 'Always-on protection to keep your server online.' },
  { icon: 'tabler-clock', title: 'Instant Setup', description: 'Your game server is ready in under 5 minutes.' },
]
</script>

<template>
  <Head title="Game Servers | EZSCALE" />
  <div>
    <!-- Hero -->
    <HeroSection>
      <template #content>
        <VChip color="error" variant="tonal" class="mb-4">Game Servers</VChip>
        <h1 class="text-h3 font-weight-bold mb-3">
          Game Server <span class="hero-gradient-text">Hosting</span>
        </h1>
        <p class="text-h6 text-medium-emphasis font-weight-regular mb-4" style="max-width: 600px;">
          Low-latency game server hosting with instant setup, mod support, and DDoS protection.
        </p>
        <VChip color="warning" variant="flat" class="mb-8">
          <VIcon icon="tabler-clock" start size="16" />
          Coming Soon
        </VChip>
        <div>
          <a href="/contact" class="text-decoration-none">
            <VBtn color="error" size="large" rounded="lg">
              Notify Me
              <VIcon icon="tabler-bell" end />
            </VBtn>
          </a>
        </div>
      </template>

      <template #visual>
        <GameServerHero />
      </template>
    </HeroSection>

    <!-- Supported Games -->
    <VContainer class="marketing-section">
      <SectionHeader
        label="Games"
        label-color="error"
        title="Supported Games"
        highlight-word="Games"
        subtitle="Popular titles with more being added regularly."
      />

      <VRow>
        <VCol v-for="(plan, index) in plans" :key="plan.id" cols="12" sm="6" md="4">
          <VCard variant="outlined" :class="['h-100 feature-card-hover', `fade-in-up stagger-${index + 1}`]">
            <VCardText class="pa-5">
              <div class="d-flex align-center ga-4 mb-3">
                <VAvatar color="error" variant="tonal" size="44">
                  <VIcon :icon="getIcon(plan)" size="22" />
                </VAvatar>
                <div>
                  <h3 class="text-subtitle-1 font-weight-bold">{{ plan.name }}</h3>
                  <p class="text-body-2 text-medium-emphasis mb-0">{{ plan.description }}</p>
                </div>
              </div>

              <VDivider class="mb-3" />

              <div class="d-flex flex-wrap ga-2 mb-3">
                <VChip size="x-small" variant="tonal" color="error">{{ getFeature(plan, 'ram') }} RAM</VChip>
                <VChip size="x-small" variant="tonal" color="error">{{ getFeature(plan, 'slots') }}</VChip>
                <VChip size="x-small" variant="tonal" color="error">{{ getFeature(plan, 'storage') }}</VChip>
                <VChip size="x-small" variant="tonal" color="error">{{ getFeature(plan, 'mods') }}</VChip>
              </div>

              <div class="d-flex align-center justify-space-between">
                <span class="text-h6 text-error font-weight-bold">{{ formatPrice(plan) }}<span class="text-body-2 text-medium-emphasis font-weight-regular">/mo</span></span>
                <VChip color="warning" size="x-small" variant="flat">Coming Soon</VChip>
              </div>
            </VCardText>
          </VCard>
        </VCol>
      </VRow>
    </VContainer>

    <!-- Features -->
    <div class="section-alt-bg marketing-section">
      <VContainer>
        <SectionHeader
          label="Features"
          label-color="error"
          title="Why Gamers Choose EZSCALE"
          highlight-word="EZSCALE"
        />
        <VRow>
          <VCol v-for="(feature, index) in features" :key="feature.title" cols="12" sm="6" md="3">
            <VCard variant="flat" :class="['text-center pa-4 h-100 bg-transparent feature-card-hover', `fade-in-up stagger-${index + 1}`]">
              <VAvatar color="error" variant="tonal" size="44" class="mb-3">
                <VIcon :icon="feature.icon" size="22" />
              </VAvatar>
              <h3 class="text-subtitle-1 font-weight-bold mb-1">{{ feature.title }}</h3>
              <p class="text-body-2 text-medium-emphasis mb-0">{{ feature.description }}</p>
            </VCard>
          </VCol>
        </VRow>
      </VContainer>
    </div>

    <!-- Battlefield Admin Panel -->
    <VContainer class="marketing-section">
      <ScrollReveal>
        <VCard variant="outlined" class="overflow-hidden">
          <VRow no-gutters align="center">
            <VCol cols="12" md="7">
              <VCardText class="pa-6">
                <VChip color="info" variant="tonal" class="mb-3">Featured</VChip>
                <h2 class="text-h5 font-weight-bold mb-3">Battlefield Admin Control Panel</h2>
                <p class="text-body-1 text-medium-emphasis mb-4">
                  A modern web-based admin panel for Battlefield 3, 4, and Hardline servers. 24 ported ProCon plugins, ML-powered analytics, ban appeal system, and live RCON — no desktop app required.
                </p>
                <div class="d-flex flex-wrap ga-2 mb-4">
                  <VChip size="small" variant="tonal" color="info">24 Plugins</VChip>
                  <VChip size="small" variant="tonal" color="info">ML Analytics</VChip>
                  <VChip size="small" variant="tonal" color="info">Ban Appeals</VChip>
                  <VChip size="small" variant="tonal" color="info">Live RCON</VChip>
                </div>
                <a href="/contact" class="text-decoration-none">
                  <VBtn color="info" size="large">
                    Learn More
                    <VIcon icon="tabler-arrow-right" end />
                  </VBtn>
                </a>
              </VCardText>
            </VCol>
            <VCol cols="12" md="5" class="d-none d-md-flex align-center justify-center pa-6">
              <VAvatar color="info" variant="tonal" size="80">
                <VIcon icon="tabler-military-rank" size="40" />
              </VAvatar>
            </VCol>
          </VRow>
        </VCard>
      </ScrollReveal>
    </VContainer>

    <!-- CTA -->
    <div class="marketing-section" style="background: linear-gradient(135deg, rgb(var(--v-theme-error), 0.12), rgb(var(--v-theme-surface)));">
      <VContainer class="text-center">
        <h2 class="text-h4 font-weight-bold mb-3">Be the First to Know</h2>
        <p class="text-body-1 text-medium-emphasis mb-6">
          Game server hosting is coming soon. Sign up to get notified when we launch.
        </p>
        <div class="d-flex ga-3 justify-center flex-wrap">
          <a href="/contact" class="text-decoration-none">
            <VBtn color="error" size="large" rounded="lg">
              Notify Me
              <VIcon icon="tabler-bell" end />
            </VBtn>
          </a>
          <a href="/contact" class="text-decoration-none">
            <VBtn color="error" variant="outlined" size="large" rounded="lg">
              Contact Us
            </VBtn>
          </a>
        </div>
      </VContainer>
    </div>
  </div>
</template>
