<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { RouterLink } from 'vue-router'
import Icon from '@/components/ds/core/Icon.vue'
import CorrosionMark from '@/components/brand/CorrosionMark.vue'

const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''

type Status = 'shipped' | 'in-progress' | 'planned'

interface RoadmapItem {
  text: string
  note?: string
}

interface RoadmapGroup {
  status: Status
  label: string
  description: string
  items: RoadmapItem[]
}

const groups: RoadmapGroup[] = [
  {
    status: 'shipped',
    label: 'Phase 1 — Foundation',
    description:
      'The core control plane is live. Game server operators can install re-Agent, connect their server, and manage it entirely from Catalyst Console.',
    items: [
      { text: 're-Agent (Windows + Linux)', note: 'Outbound NATS, zero inbound ports' },
      { text: 'Core control plane', note: 'NestJS API, multi-tenant PostgreSQL, JWT RBAC' },
      { text: 'Auto-wiper with rollback', note: 'Map, BP, and full wipes as verified sequences' },
      { text: 'Plugin management', note: 'Rust uMod/Oxide — browse, install, configure from the browser' },
      { text: 'Real-time console', note: 'NATS-bridged live output' },
      { text: 'File manager', note: 'Browser-based file access via re-Agent' },
      { text: 'Scheduled tasks and maintenance windows' },
      { text: 'Player management and RBAC team access' },
      { text: 'Public server page', note: 'Live status, wipe countdown, player count' },
      { text: 'SteamCMD game update automation' },
      { text: 'Discord and notification webhooks' },
    ],
  },
  {
    status: 'shipped',
    label: 'Phase 2 — Multi-game runtime',
    description:
      're-Agent multi-instance support and the per-game scheduling engine are live. One agent process now manages N game server instances on the same host, and the auto-wiper and event scheduler fire per-game on their own cadence.',
    items: [
      { text: 'Multi-instance host runtime', note: 'One re-Agent managing N game processes on the same machine' },
      { text: 'Per-game wipe and event scheduling', note: 'Auto-wiper and event scheduler both fire per-game instance' },
    ],
  },
  {
    status: 'in-progress',
    label: 'Multi-game expansion — game Formulae',
    description:
      'Per-game Formulae extend the control plane with game-specific operational logic. Rust is the reference implementation; Dune, Conan, and Soulmask follow the same deployment model.',
    items: [
      { text: 'Dune: Awakening Formula', note: 'Battlegroup lifecycle shipped; Deep Desert wipe scheduling in progress' },
      { text: 'Conan Exiles Formula', note: 'Persistent world management, mod support, purge tracking' },
      { text: 'Soulmask Formula', note: 'Linked-world cluster deployment, port automation' },
    ],
  },
  {
    status: 'in-progress',
    label: 'API access and integrations',
    description:
      'Operator-grade API access so you can build your own tooling on top of the Corrosion control plane. Webhooks and per-license API keys are live; key-authenticated external API access lands next.',
    items: [
      { text: 'Public REST API for server management', note: 'REST API live with OpenAPI docs; key-authenticated external access wired (corr_ bearer key acts as the license owner)' },
      { text: 'Webhook events (wipe completed, server down, player banned)', note: 'Shipped — HMAC-SHA256 signed delivery, SSRF-guarded' },
      { text: 'API key management per license', note: 'Shipped — create, list, revoke with hashed storage' },
    ],
  },
  {
    status: 'planned',
    label: 'Integrated storefront',
    description:
      'A native store layer for server communities — item catalog, VIP packages, and automated in-game delivery. No Tebex dependency required.',
    items: [
      { text: 'Item catalog and categories' },
      { text: 'PayPal and Stripe payment processing' },
      { text: 'Automated in-game delivery via RCON/re-Agent' },
      { text: 'Transaction history and revenue dashboard' },
    ],
  },
  {
    status: 'planned',
    label: 'Fleet management for hosting partners',
    description:
      'Tools for hosting providers and multi-server operations running 50+ instances across multiple physical hosts.',
    items: [
      { text: 'Fleet-level dashboards and health monitoring' },
      { text: 'Multi-host re-Agent orchestration' },
      { text: 'Bulk wipe and update scheduling across a fleet' },
      { text: 'Fleet Block capacity management' },
    ],
  },
  {
    status: 'planned',
    label: 'More games',
    description:
      'Corrosion\'s agent model is not Rust-specific. The platform is being designed to support any game that can be managed via process control, file operations, and RCON-style commands.',
    items: [
      { text: 'Additional survival and sandbox games' },
      { text: 'Community-requested game Formulae' },
    ],
  },
]

function statusLabel(s: Status): string {
  if (s === 'shipped') return 'Shipped'
  if (s === 'in-progress') return 'In progress'
  return 'Planned'
}

function statusIcon(s: Status): string {
  if (s === 'shipped') return 'check'
  if (s === 'in-progress') return 'refresh-cw'
  return 'circle'
}

// Scroll-reveal
let io: IntersectionObserver | null = null

function initReveal(): void {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
  io = new IntersectionObserver(
    (entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in')
          io?.unobserve(e.target)
        }
      })
    },
    { threshold: 0.1 },
  )
  document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
}

onMounted(() => { initReveal() })
onUnmounted(() => { io?.disconnect() })
</script>

<template>
  <!-- PAGE HEADER -->
  <section class="hero" style="padding-bottom:0; border-bottom:none;">
    <div class="hero__atmo" />
    <div class="hero__grid" />
    <div class="hero__grain" />
    <div class="wrap hero__in" style="padding-bottom:52px;">
      <div class="hero__mark">
        <CorrosionMark :size="56" />
      </div>
      <span class="eyebrow">Roadmap</span>
      <h1 style="font-size:var(--text-5xl)">
        Where Corrosion
        <span class="accent">is going.</span>
      </h1>
      <p class="hero__sub">
        No specific dates. No fabricated percentages. Status labels only: Shipped, In progress,
        Planned. This roadmap reflects what is actually being built.
      </p>
    </div>
  </section>

  <!-- STATUS LEGEND -->
  <section class="sec" style="padding:32px 0; border-bottom: 1px solid var(--border-subtle);">
    <div class="wrap">
      <div class="rm-legend reveal">
        <div class="rm-badge rm-badge--shipped">
          <Icon name="check" :size="13" />Shipped
        </div>
        <div class="rm-badge rm-badge--progress">
          <Icon name="refresh-cw" :size="13" />In progress
        </div>
        <div class="rm-badge rm-badge--planned">
          <Icon name="circle" :size="13" />Planned
        </div>
      </div>
    </div>
  </section>

  <!-- ROADMAP GROUPS -->
  <section class="sec" id="roadmap">
    <div class="wrap">
      <div
        v-for="group in groups"
        :key="group.label"
        class="rm-group reveal"
        :data-status="group.status"
      >
        <div class="rm-group__head">
          <div
            class="rm-group__badge"
            :class="`rm-badge--${group.status}`"
          >
            <Icon :name="statusIcon(group.status)" :size="13" />
            {{ statusLabel(group.status) }}
          </div>
          <h3 class="rm-group__title">{{ group.label }}</h3>
        </div>
        <p class="rm-group__desc">{{ group.description }}</p>
        <ul class="rm-group__list">
          <li
            v-for="item in group.items"
            :key="item.text"
            class="rm-item"
          >
            <span class="rm-item__dot" :class="`rm-item__dot--${group.status}`" />
            <span>
              {{ item.text }}
              <span v-if="item.note" class="rm-item__note">— {{ item.note }}</span>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <!-- HONEST NOTE -->
  <section class="sec" style="padding:40px 0; border-bottom:none;">
    <div class="wrap">
      <div class="closing reveal">
        This roadmap reflects real development priorities, not marketing promises.
        Timelines are not published because they depend on real-world testing and operator
        feedback. <span class="accent">Join early access to influence what gets built next.</span>
      </div>
      <div class="hero__cta reveal" style="margin-top:28px">
        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
          Join early access
        </RouterLink>
        <a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
          <Icon name="key" :size="17" />Sign in
        </a>
      </div>
    </div>
  </section>
</template>

<style scoped>
/* Legend */
.rm-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Badges */
.rm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rm-badge--shipped {
  background: color-mix(in srgb, var(--status-online) 14%, transparent);
  color: var(--status-online);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-online) 28%, transparent);
}
.rm-badge--in-progress, .rm-badge--progress {
  background: var(--accent-soft);
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.rm-badge--planned {
  background: var(--surface-raised-2);
  color: var(--text-muted);
  box-shadow: var(--ring-default);
}

/* Groups */
.rm-group {
  max-width: 860px;
  margin: 0 auto 40px;
  padding: 28px 28px 24px;
  background: var(--surface-base);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring-default);
}
.rm-group[data-status="in-progress"] {
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.rm-group[data-status="shipped"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-online) 22%, transparent);
}
.rm-group__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.rm-group__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  flex: none;
}
.rm-group__title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--text-xl);
  margin: 0;
}
.rm-group__desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 680px;
}
.rm-group__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rm-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.rm-item__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  margin-top: 5px;
}
.rm-item__dot--shipped { background: var(--status-online); }
.rm-item__dot--in-progress { background: var(--accent); }
.rm-item__dot--planned {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-muted);
}
.rm-item__note {
  color: var(--text-muted);
  font-size: var(--text-xs);
}
</style>
