<script setup lang="ts">
import { Check, Circle } from 'lucide-vue-next'

interface Phase {
  name: string
  label: string
  status: 'complete' | 'current' | 'upcoming'
  items: { text: string; done: boolean }[]
}

const phases: Phase[] = [
  {
    name: 'Phase 1',
    label: 'Foundation',
    status: 'complete',
    items: [
      { text: 'Core control plane', done: true },
      { text: 'Auto-Wiper with rollback', done: true },
      { text: 'Plugin management', done: true },
      { text: 'Public server site', done: true },
    ],
  },
  {
    name: 'Phase 2',
    label: 'Analytics',
    status: 'current',
    items: [
      { text: 'Player retention tracking', done: false },
      { text: 'Wipe performance insights', done: false },
      { text: 'Population heatmaps', done: false },
    ],
  },
  {
    name: 'Phase 3',
    label: 'Status Platform',
    status: 'upcoming',
    items: [
      { text: 'Public uptime tracking', done: false },
      { text: 'Server health dashboard', done: false },
    ],
  },
  {
    name: 'Phase 4',
    label: 'Module Marketplace',
    status: 'upcoming',
    items: [
      { text: 'Loot manager', done: false },
      { text: 'Event systems', done: false },
      { text: 'Advanced gameplay modules', done: false },
    ],
  },
  {
    name: 'Phase 5',
    label: 'Integrated Webstore',
    status: 'upcoming',
    items: [
      { text: 'Native item store', done: false },
      { text: 'Automated delivery', done: false },
      { text: 'Revenue dashboard', done: false },
    ],
  },
  {
    name: 'Phase 6',
    label: 'B2B Hosting Integration',
    status: 'upcoming',
    items: [
      { text: 'White-label panel', done: false },
      { text: 'Bulk license provisioning', done: false },
      { text: 'SSO integration', done: false },
    ],
  },
]

function phaseStatusClass(status: string): string {
  switch (status) {
    case 'complete': return 'bg-green-500/10 text-green-400 border-green-500/20'
    case 'current': return 'bg-oxide-500/10 text-oxide-400 border-oxide-500/20'
    default: return 'bg-neutral-800 text-neutral-500 border-neutral-700'
  }
}

function phaseStatusLabel(status: string): string {
  switch (status) {
    case 'complete': return 'Shipped'
    case 'current': return 'In Progress'
    default: return 'Planned'
  }
}
</script>

<template>
  <div>
    <!-- Header -->
    <section class="pt-20 pb-12">
      <div class="max-w-4xl mx-auto px-6 text-center">
        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">Roadmap</h1>
        <p class="text-lg text-neutral-400">
          Corrosion isn't a single plugin release. It's infrastructure for the Rust ecosystem.
        </p>
      </div>
    </section>

    <!-- Timeline -->
    <section class="pb-20">
      <div class="max-w-3xl mx-auto px-6">
        <div class="space-y-6">
          <div
            v-for="phase in phases"
            :key="phase.name"
            class="bg-neutral-900 border rounded-xl p-8 transition-colors"
            :class="phase.status === 'current' ? 'border-oxide-500/30' : 'border-neutral-800'"
          >
            <div class="flex items-center justify-between mb-5">
              <div>
                <span class="text-xs font-bold text-neutral-500 uppercase tracking-wider">{{ phase.name }}</span>
                <h3 class="text-xl font-bold text-neutral-100">{{ phase.label }}</h3>
              </div>
              <span
                class="text-xs font-semibold px-3 py-1 rounded-full border"
                :class="phaseStatusClass(phase.status)"
              >
                {{ phaseStatusLabel(phase.status) }}
              </span>
            </div>
            <ul class="space-y-3">
              <li
                v-for="item in phase.items"
                :key="item.text"
                class="flex items-center gap-3"
              >
                <Check v-if="item.done" class="w-4 h-4 text-green-400 shrink-0" />
                <Circle v-else class="w-4 h-4 text-neutral-600 shrink-0" />
                <span
                  class="text-sm"
                  :class="item.done ? 'text-neutral-300' : 'text-neutral-500'"
                >
                  {{ item.text }}
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
