<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 WebHostingHero from '@/Components/Marketing/WebHostingHero.vue'
import ScrollReveal from '@/Components/Marketing/ScrollReveal.vue'
import { crossDomainUrl } from '@/utils/resolvers'

defineOptions({ layout: MarketingLayout })

interface Plan {
  id: number
  name: string
  slug: string
  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 page = usePage()
const props = computed(() => page.props as unknown as PageProps)
const accountUrl = computed<string>(() => crossDomainUrl(props.value.domains?.account))
const plans = computed(() => props.value.plans || [])

const startingPrice = computed<string>(() => {
  if (plans.value.length === 0) return '2.39'
  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-layout-dashboard', title: 'Enhance Control Panel', description: 'Modern, intuitive control panel for effortless website and server management.' },
  { icon: 'tabler-lock', title: 'Free SSL Certificates', description: 'Auto-provisioned SSL certificates for all your domains at no extra cost.' },
  { icon: 'tabler-cloud', title: 'Cloudflare DNS', description: 'Enterprise-grade DNS with DDoS protection and global CDN included.' },
  { icon: 'tabler-database', title: 'Redis Cache', description: 'Built-in Redis object caching for blazing-fast page load times.' },
  { icon: 'tabler-brand-wordpress', title: 'WordPress Installer', description: 'One-click WordPress installation with automatic updates and optimization.' },
  { icon: 'tabler-terminal-2', title: 'SSH Access', description: 'Full SSH access for advanced users who need command-line control.' },
]

const includedFeatures: string[] = [
  'Free SSL',
  'Cloudflare DNS',
  'Redis Cache',
  'WordPress Installer',
  'SSH Access',
  'Enhance Panel',
]

const internalKeys = new Set(['enhance_package_id', 'ssl', 'panel'])

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)}`
}

interface PlanFeatureRow {
  key: string
  icon: string
  label: string
}

const featureRows: PlanFeatureRow[] = [
  { key: 'storage', icon: 'tabler-database', label: 'Storage' },
  { key: 'databases', icon: 'tabler-stack-2', label: 'Databases' },
  { key: 'email', icon: 'tabler-mail', label: 'Email' },
  { key: 'domains', icon: 'tabler-world', label: 'Domains' },
  { key: 'bandwidth', icon: 'tabler-arrows-transfer-up', label: 'Bandwidth' },
  { key: 'ram', icon: 'tabler-device-desktop-analytics', label: 'RAM' },
  { key: 'cpu', icon: 'tabler-cpu', label: 'CPU' },
]
</script>

<template>
  <Head title="Web Hosting | EZSCALE" />
  <div>
    <!-- Hero -->
    <HeroSection>
      <template #content>
        <VChip color="warning" variant="tonal" class="mb-4">Web Hosting</VChip>
        <h1 class="text-h3 font-weight-bold mb-3">
          Managed Web <span class="hero-gradient-text">Hosting</span>
        </h1>
        <p class="text-h6 text-medium-emphasis font-weight-regular mb-4" style="max-width: 600px;">
          Fast, secure, and reliable web hosting powered by Enhance with free SSL, Cloudflare DNS, and Redis caching.
        </p>
        <p class="text-body-1 text-medium-emphasis mb-8">
          Starting at just <span class="text-warning font-weight-bold">${{ startingPrice }}/mo</span>
        </p>
        <a :href="plans.length ? accountUrl + '/checkout/' + plans[0].id : '/pricing'" class="text-decoration-none">
          <VBtn color="warning" size="large" rounded="lg">
            Get Started
            <VIcon icon="tabler-arrow-right" end />
          </VBtn>
        </a>
      </template>

      <template #visual>
        <WebHostingHero />
      </template>
    </HeroSection>

    <!-- Features -->
    <VContainer class="marketing-section">
      <SectionHeader
        label="Features"
        label-color="warning"
        title="Everything You Need"
        highlight-word="Need"
        subtitle="Every plan comes loaded with the tools and features you need to build and grow your website."
      />
      <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-${index + 1}`]">
            <VAvatar color="warning" 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 -->
    <div class="section-alt-bg marketing-section">
      <VContainer>
        <SectionHeader
          label="Pricing"
          label-color="warning"
          title="Hosting Plans"
          highlight-word="Plans"
          subtitle="Choose the plan that fits your needs. All plans include free SSL, Cloudflare DNS, and the Enhance control panel."
        />

        <VRow justify="center">
          <VCol v-for="(plan, index) in plans" :key="plan.id" cols="12" sm="6" lg="3">
            <VCard
              :variant="index === 1 ? 'elevated' : 'outlined'"
              :class="['h-100 feature-card-hover', `fade-in-up stagger-${index + 1}`, { 'border-warning border-opacity-100': index === 1 }]"
              :elevation="index === 1 ? 8 : 0"
            >
              <VCardText class="pa-6 text-center">
                <VChip
                  v-if="index === 1"
                  color="warning"
                  size="small"
                  class="mb-2"
                >
                  Most Popular
                </VChip>

                <h3 class="text-h5 font-weight-bold mb-1">{{ plan.name }}</h3>
                <div class="text-h4 font-weight-bold text-warning mb-4">
                  {{ formatPrice(plan) }}<span class="text-body-2 text-medium-emphasis">/mo</span>
                </div>

                <VDivider class="mb-4" />

                <VList density="compact" class="pa-0">
                  <VListItem v-for="row in featureRows" :key="row.key" class="px-0">
                    <template #prepend>
                      <VIcon :icon="row.icon" color="warning" size="18" class="me-2" />
                    </template>
                    <VListItemTitle class="text-body-2">{{ getFeature(plan, row.key) }}</VListItemTitle>
                  </VListItem>
                </VList>

                <VDivider class="my-4" />

                <div class="d-flex flex-wrap justify-center ga-1 mb-4">
                  <VChip
                    v-for="feat in includedFeatures"
                    :key="feat"
                    size="x-small"
                    variant="tonal"
                    color="warning"
                  >
                    {{ feat }}
                  </VChip>
                </div>

                <a :href="accountUrl + '/checkout/' + plan.id" class="text-decoration-none d-block">
                  <VBtn
                    color="warning"
                    :variant="index === 1 ? 'elevated' : 'tonal'"
                    block
                  >
                    Choose Plan
                  </VBtn>
                </a>
              </VCardText>
            </VCard>
          </VCol>
        </VRow>
      </VContainer>
    </div>

    <!-- CTA -->
    <div class="marketing-section" style="background: linear-gradient(135deg, rgb(var(--v-theme-warning), 0.12), rgb(var(--v-theme-surface)));">
      <VContainer class="text-center">
        <h2 class="text-h4 font-weight-bold mb-3">Ready to Launch Your Website?</h2>
        <p class="text-body-1 text-medium-emphasis mb-6">
          Get started with managed hosting that includes free SSL, Cloudflare DNS, and the Enhance control panel.
        </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="warning" size="large" rounded="lg">
              Get Started
              <VIcon icon="tabler-arrow-right" end />
            </VBtn>
          </a>
          <a href="/contact" class="text-decoration-none">
            <VBtn color="warning" variant="outlined" size="large" rounded="lg">
              Contact Sales
            </VBtn>
          </a>
        </div>
      </VContainer>
    </div>
  </div>
</template>
