<script lang="ts" setup>
import { Head } from '@inertiajs/vue3'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import MarketingLayout from '@/Layouts/MarketingLayout.vue'
import SectionHeader from '@/Components/Marketing/SectionHeader.vue'

defineOptions({ layout: MarketingLayout })

// --- Types ---

interface EndpointParam {
  name: string
  type: string
  required: boolean
  description: string
}

interface Endpoint {
  method: 'GET' | 'POST' | 'PUT' | 'DELETE'
  path: string
  description: string
  params?: EndpointParam[]
  bodyParams?: EndpointParam[]
  response?: string
  auth: 'customer'
}

interface EndpointGroup {
  id: string
  title: string
  icon: string
  description: string
  scope: 'customer'
  endpoints: Endpoint[]
}

interface ErrorCode {
  code: number
  status: string
  description: string
  color: string
}

// --- Sidebar ---

const activeSection = ref<string>('authentication')
const isSidebarVisible = ref<boolean>(true)

function scrollToSection(sectionId: string): void {
  activeSection.value = sectionId
  const el = document.getElementById(sectionId)
  if (el) {
    const offset = 80
    const top = el.getBoundingClientRect().top + window.scrollY - offset
    window.scrollTo({ top, behavior: 'smooth' })
  }
}

function handleScroll(): void {
  const sections = document.querySelectorAll('[data-section]')
  let current = 'authentication'

  sections.forEach(section => {
    const rect = section.getBoundingClientRect()
    if (rect.top <= 120) {
      current = section.getAttribute('data-section') || current
    }
  })

  activeSection.value = current
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

// --- Method badge config ---

const methodColors: Record<string, string> = {
  GET: 'success',
  POST: 'primary',
  PUT: 'warning',
  DELETE: 'error',
}

// --- Sidebar nav items ---

interface SidebarItem {
  id: string
  title: string
  icon: string
  scope?: 'customer'
}

const sidebarItems: SidebarItem[] = [
  { id: 'authentication', title: 'Authentication', icon: 'tabler-lock' },
  { id: 'services', title: 'Services', icon: 'tabler-server', scope: 'customer' },
  { id: 'invoices', title: 'Invoices', icon: 'tabler-file-invoice', scope: 'customer' },
  { id: 'subscriptions', title: 'Subscriptions', icon: 'tabler-refresh', scope: 'customer' },
  { id: 'tickets', title: 'Support Tickets', icon: 'tabler-ticket', scope: 'customer' },
  { id: 'errors', title: 'Error Codes', icon: 'tabler-alert-triangle' },
  { id: 'getting-started', title: 'Getting Started', icon: 'tabler-rocket' },
]

// --- Customer API endpoints ---

const customerEndpointGroups: EndpointGroup[] = [
  {
    id: 'services',
    title: 'Services',
    icon: 'tabler-server',
    description: 'Manage your provisioned services including VPS, dedicated servers, web hosting, and game servers.',
    scope: 'customer',
    endpoints: [
      {
        method: 'GET',
        path: '/api/v1/services',
        description: 'List all your active services with pagination support.',
        params: [
          { name: 'page', type: 'integer', required: false, description: 'Page number (default: 1)' },
          { name: 'per_page', type: 'integer', required: false, description: 'Items per page (default: 15, max: 100)' },
        ],
        response: `{
  "data": [
    {
      "id": 1,
      "service_type": "vps",
      "platform": "virtfusion",
      "status": "active",
      "hostname": "vps-us-east-01.ezscale.cloud",
      "ipv4_address": "198.51.100.42",
      "plan": {
        "name": "VPS Pro",
        "price": "12.99"
      },
      "provisioned_at": "2026-01-15T10:30:00Z",
      "created_at": "2026-01-15T10:28:00Z"
    }
  ],
  "links": { "first": "...", "last": "...", "prev": null, "next": "..." },
  "meta": { "current_page": 1, "last_page": 3, "per_page": 15, "total": 42 }
}`,
        auth: 'customer',
      },
      {
        method: 'GET',
        path: '/api/v1/services/{id}',
        description: 'Get detailed information about a specific service, including resource usage and credentials.',
        response: `{
  "data": {
    "id": 1,
    "service_type": "vps",
    "platform": "virtfusion",
    "status": "active",
    "hostname": "vps-us-east-01.ezscale.cloud",
    "ipv4_address": "198.51.100.42",
    "ipv6_address": "2001:db8::1",
    "plan": {
      "name": "VPS Pro",
      "price": "12.99",
      "cpu": 4,
      "ram_mb": 8192,
      "disk_gb": 160,
      "bandwidth_tb": 4
    },
    "provisioned_at": "2026-01-15T10:30:00Z",
    "expires_at": "2026-02-15T10:30:00Z",
    "created_at": "2026-01-15T10:28:00Z"
  }
}`,
        auth: 'customer',
      },
      {
        method: 'POST',
        path: '/api/v1/services/{id}/reboot',
        description: 'Reboot a VPS server. Only available for VPS service types with active status.',
        response: `{
  "message": "Server reboot initiated successfully.",
  "data": {
    "id": 1,
    "status": "rebooting",
    "estimated_downtime_seconds": 30
  }
}`,
        auth: 'customer',
      },
    ],
  },
  {
    id: 'invoices',
    title: 'Invoices',
    icon: 'tabler-file-invoice',
    description: 'Access your billing history, download invoice PDFs, and check payment statuses.',
    scope: 'customer',
    endpoints: [
      {
        method: 'GET',
        path: '/api/v1/invoices',
        description: 'List all invoices with optional status filtering.',
        params: [
          { name: 'status', type: 'string', required: false, description: 'Filter by status: paid, unpaid, overdue, void' },
          { name: 'page', type: 'integer', required: false, description: 'Page number (default: 1)' },
          { name: 'per_page', type: 'integer', required: false, description: 'Items per page (default: 15, max: 100)' },
        ],
        response: `{
  "data": [
    {
      "id": 1,
      "number": "INV-2026-0001",
      "status": "paid",
      "amount": "12.99",
      "currency": "USD",
      "due_date": "2026-02-01",
      "paid_at": "2026-01-28T14:22:00Z",
      "line_items": [
        { "description": "VPS Pro - Monthly", "amount": "12.99" }
      ],
      "created_at": "2026-01-15T00:00:00Z"
    }
  ],
  "links": { "first": "...", "last": "...", "prev": null, "next": "..." },
  "meta": { "current_page": 1, "last_page": 5, "per_page": 15, "total": 68 }
}`,
        auth: 'customer',
      },
      {
        method: 'GET',
        path: '/api/v1/invoices/{id}/pdf',
        description: 'Download the invoice as a PDF file. Returns a binary PDF response.',
        response: `// Returns binary PDF file with headers:
// Content-Type: application/pdf
// Content-Disposition: attachment; filename="INV-2026-0001.pdf"`,
        auth: 'customer',
      },
    ],
  },
  {
    id: 'subscriptions',
    title: 'Subscriptions',
    icon: 'tabler-refresh',
    description: 'View and manage your active subscriptions, including plan changes and cancellations.',
    scope: 'customer',
    endpoints: [
      {
        method: 'GET',
        path: '/api/v1/subscriptions',
        description: 'List all your subscriptions and their current billing status.',
        response: `{
  "data": [
    {
      "id": 1,
      "plan": {
        "id": 5,
        "name": "VPS Pro",
        "price": "12.99",
        "billing_cycle": "monthly"
      },
      "status": "active",
      "current_period_start": "2026-01-15T00:00:00Z",
      "current_period_end": "2026-02-15T00:00:00Z",
      "cancel_at_period_end": false,
      "created_at": "2026-01-15T10:28:00Z"
    }
  ]
}`,
        auth: 'customer',
      },
      {
        method: 'POST',
        path: '/api/v1/subscriptions/{id}/cancel',
        description: 'Cancel a subscription. The service remains active until the end of the current billing period.',
        bodyParams: [
          { name: 'reason', type: 'string', required: false, description: 'Cancellation reason for feedback' },
          { name: 'immediate', type: 'boolean', required: false, description: 'Cancel immediately instead of at period end (default: false)' },
        ],
        response: `{
  "message": "Subscription cancelled successfully.",
  "data": {
    "id": 1,
    "status": "active",
    "cancel_at_period_end": true,
    "current_period_end": "2026-02-15T00:00:00Z"
  }
}`,
        auth: 'customer',
      },
    ],
  },
  {
    id: 'tickets',
    title: 'Support Tickets',
    icon: 'tabler-ticket',
    description: 'Create and manage support tickets, view replies, and communicate with our team.',
    scope: 'customer',
    endpoints: [
      {
        method: 'GET',
        path: '/api/v1/tickets',
        description: 'List all your support tickets.',
        params: [
          { name: 'status', type: 'string', required: false, description: 'Filter: open, answered, customer_reply, closed' },
          { name: 'page', type: 'integer', required: false, description: 'Page number (default: 1)' },
          { name: 'per_page', type: 'integer', required: false, description: 'Items per page (default: 15)' },
        ],
        response: `{
  "data": [
    {
      "id": 1,
      "reference": "EZSCALE-1042",
      "subject": "Unable to SSH into server",
      "status": "open",
      "priority": "high",
      "department": "technical",
      "last_reply_at": "2026-02-10T08:15:00Z",
      "created_at": "2026-02-10T07:30:00Z"
    }
  ]
}`,
        auth: 'customer',
      },
      {
        method: 'POST',
        path: '/api/v1/tickets',
        description: 'Create a new support ticket.',
        bodyParams: [
          { name: 'subject', type: 'string', required: true, description: 'Ticket subject (max: 255 characters)' },
          { name: 'message', type: 'string', required: true, description: 'Initial message body (supports Markdown)' },
          { name: 'priority', type: 'string', required: false, description: 'low, medium, high (default: medium)' },
          { name: 'department', type: 'string', required: false, description: 'billing, technical, sales, general (default: general)' },
        ],
        response: `{
  "message": "Ticket created successfully.",
  "data": {
    "id": 42,
    "reference": "EZSCALE-1042",
    "subject": "Unable to SSH into server",
    "status": "open",
    "priority": "high",
    "department": "technical",
    "created_at": "2026-02-10T07:30:00Z"
  }
}`,
        auth: 'customer',
      },
      {
        method: 'GET',
        path: '/api/v1/tickets/{id}',
        description: 'Get a ticket with all its replies and metadata.',
        response: `{
  "data": {
    "id": 42,
    "reference": "EZSCALE-1042",
    "subject": "Unable to SSH into server",
    "status": "open",
    "priority": "high",
    "department": "technical",
    "replies": [
      {
        "id": 1,
        "message": "I cannot connect to my server via SSH...",
        "is_staff": false,
        "created_at": "2026-02-10T07:30:00Z"
      },
      {
        "id": 2,
        "message": "Let me check the firewall rules...",
        "is_staff": true,
        "created_at": "2026-02-10T08:15:00Z"
      }
    ],
    "created_at": "2026-02-10T07:30:00Z"
  }
}`,
        auth: 'customer',
      },
      {
        method: 'POST',
        path: '/api/v1/tickets/{id}/reply',
        description: 'Reply to an existing support ticket.',
        bodyParams: [
          { name: 'message', type: 'string', required: true, description: 'Reply message body (supports Markdown)' },
        ],
        response: `{
  "message": "Reply added successfully.",
  "data": {
    "id": 3,
    "message": "Thanks, the issue is resolved now!",
    "is_staff": false,
    "created_at": "2026-02-10T09:00:00Z"
  }
}`,
        auth: 'customer',
      },
    ],
  },
]


// --- Error codes ---

const errorCodes: ErrorCode[] = [
  { code: 200, status: 'OK', description: 'Request succeeded. Response body contains the requested data.', color: 'success' },
  { code: 201, status: 'Created', description: 'Resource created successfully. Response body contains the new resource.', color: 'success' },
  { code: 400, status: 'Bad Request', description: 'The request was malformed or contained invalid parameters.', color: 'warning' },
  { code: 401, status: 'Unauthorized', description: 'Authentication required. Provide a valid Bearer token.', color: 'error' },
  { code: 403, status: 'Forbidden', description: 'Authenticated but insufficient permissions for this resource.', color: 'error' },
  { code: 404, status: 'Not Found', description: 'The requested resource does not exist.', color: 'warning' },
  { code: 422, status: 'Validation Error', description: 'Request body failed validation. Check the errors object for field-specific messages.', color: 'warning' },
  { code: 429, status: 'Too Many Requests', description: 'Rate limit exceeded. Wait before retrying. Check Retry-After header.', color: 'error' },
  { code: 500, status: 'Server Error', description: 'An unexpected server error occurred. Contact support if the issue persists.', color: 'error' },
]

// --- Copy to clipboard ---

const copiedField = ref<string>('')

function copyToClipboard(text: string, label: string): void {
  navigator.clipboard.writeText(text)
  copiedField.value = label
  setTimeout(() => {
    copiedField.value = ''
  }, 2000)
}

// --- Expanded panels ---

const expandedPanels = ref<Record<string, number[]>>({})

function getGroupPanels(groupId: string): number[] {
  return expandedPanels.value[groupId] || []
}

function setGroupPanels(groupId: string, value: number[]): void {
  expandedPanels.value[groupId] = value
}
</script>

<template>
  <Head title="API Documentation | EZSCALE" />
  <div>
    <!-- Hero Section -->
    <div
      class="api-hero"
      style="padding-block: 6rem 4rem; background: linear-gradient(135deg, rgb(var(--v-theme-primary), 0.08), rgb(var(--v-theme-surface)));"
    >
      <VContainer>
        <VRow
          align="center"
          justify="center"
        >
          <VCol
            cols="12"
            md="8"
            class="text-center"
          >
            <VChip
              color="primary"
              variant="tonal"
              class="mb-4"
            >
              <VIcon
                icon="tabler-code"
                start
                size="16"
              />
              Developer Documentation
            </VChip>

            <h1 class="text-h3 text-md-h2 font-weight-bold mb-4">
              EZSCALE <span class="hero-gradient-text">API</span>
            </h1>

            <p
              class="text-h6 text-medium-emphasis font-weight-regular mb-6 mx-auto"
              style="max-inline-size: 640px;"
            >
              Programmatic access to manage your services, invoices, subscriptions, and support.
              Build powerful integrations with our RESTful API.
            </p>

            <!-- Base URL -->
            <VCard
              variant="outlined"
              class="d-inline-flex align-center px-5 py-3 rounded-lg mx-auto cursor-pointer"
              @click="copyToClipboard('https://api.ezscale.cloud/v1', 'base-url')"
            >
              <VIcon
                icon="tabler-world"
                size="20"
                class="me-3 text-medium-emphasis"
              />
              <span class="text-body-1 font-weight-medium text-mono">
                https://api.ezscale.cloud/v1
              </span>
              <VIcon
                :icon="copiedField === 'base-url' ? 'tabler-check' : 'tabler-copy'"
                size="18"
                class="ms-3"
                :color="copiedField === 'base-url' ? 'success' : undefined"
              />
            </VCard>

            <div class="d-flex justify-center ga-6 mt-6 flex-wrap">
              <div class="d-flex align-center ga-2">
                <VIcon
                  icon="tabler-lock"
                  size="18"
                  color="primary"
                />
                <span class="text-body-2 text-medium-emphasis">OAuth2 / Bearer Token</span>
              </div>
              <div class="d-flex align-center ga-2">
                <VIcon
                  icon="tabler-bolt"
                  size="18"
                  color="warning"
                />
                <span class="text-body-2 text-medium-emphasis">RESTful JSON</span>
              </div>
              <div class="d-flex align-center ga-2">
                <VIcon
                  icon="tabler-shield-check"
                  size="18"
                  color="success"
                />
                <span class="text-body-2 text-medium-emphasis">TLS Encrypted</span>
              </div>
            </div>
          </VCol>
        </VRow>
      </VContainer>
    </div>

    <!-- Main content with sidebar -->
    <VContainer
      class="py-12"
      fluid
      style="max-inline-size: 1400px;"
    >
      <VRow>
        <!-- Sticky Sidebar -->
        <VCol
          cols="12"
          md="3"
          class="d-none d-md-block"
        >
          <div
            class="api-sidebar"
            style="position: sticky; inset-block-start: 80px;"
          >
            <VCard variant="outlined">
              <VCardText class="pa-4">
                <div class="text-overline text-medium-emphasis mb-3">
                  Navigation
                </div>

                <VList
                  density="compact"
                  nav
                >
                  <template
                    v-for="item in sidebarItems"
                    :key="item.id"
                  >
                    <VListItem
                      :active="activeSection === item.id"
                      color="primary"
                      rounded="lg"
                      class="mb-1"
                      @click="scrollToSection(item.id)"
                    >
                      <template #prepend>
                        <VIcon
                          :icon="item.icon"
                          size="18"
                        />
                      </template>
                      <VListItemTitle class="text-body-2">
                        {{ item.title }}
                      </VListItemTitle>
                    </VListItem>
                  </template>
                </VList>
              </VCardText>
            </VCard>
          </div>
        </VCol>

        <!-- Main Content -->
        <VCol
          cols="12"
          md="9"
        >
          <!-- Authentication Section -->
          <div
            id="authentication"
            data-section="authentication"
            class="mb-12"
          >
            <SectionHeader
              label="Authentication"
              title="Secure API Access"
              subtitle="All API requests require authentication via OAuth2 Bearer tokens issued through Laravel Passport."
            />

            <VRow>
              <VCol
                cols="12"
                md="6"
              >
                <VCard
                  variant="outlined"
                  class="h-100"
                >
                  <VCardText class="pa-6">
                    <div class="d-flex align-center ga-3 mb-4">
                      <VAvatar
                        color="primary"
                        variant="tonal"
                        size="40"
                      >
                        <VIcon
                          icon="tabler-key"
                          size="20"
                        />
                      </VAvatar>
                      <div>
                        <h3 class="text-subtitle-1 font-weight-bold">
                          OAuth2 Token Flow
                        </h3>
                        <div class="text-caption text-medium-emphasis">
                          Laravel Passport
                        </div>
                      </div>
                    </div>

                    <p class="text-body-2 text-medium-emphasis mb-4">
                      Create a Personal Access Token from your account dashboard under
                      <strong>Settings &gt; API Tokens</strong>. Include it in the
                      <code class="code-inline">Authorization</code> header of every request.
                    </p>

                    <div class="code-block rounded-lg pa-4">
                      <div class="d-flex align-center justify-space-between mb-2">
                        <span class="text-caption text-disabled">HTTP Header</span>
                        <VBtn
                          icon
                          size="x-small"
                          variant="text"
                          @click="copyToClipboard('Authorization: Bearer YOUR_API_TOKEN', 'auth-header')"
                        >
                          <VIcon
                            :icon="copiedField === 'auth-header' ? 'tabler-check' : 'tabler-copy'"
                            size="14"
                            :color="copiedField === 'auth-header' ? 'success' : undefined"
                          />
                        </VBtn>
                      </div>
                      <pre class="text-body-2"><code>Authorization: Bearer YOUR_API_TOKEN
Content-Type: application/json
Accept: application/json</code></pre>
                    </div>
                  </VCardText>
                </VCard>
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VCard
                  variant="outlined"
                  class="h-100"
                >
                  <VCardText class="pa-6">
                    <div class="d-flex align-center ga-3 mb-4">
                      <VAvatar
                        color="warning"
                        variant="tonal"
                        size="40"
                      >
                        <VIcon
                          icon="tabler-clock"
                          size="20"
                        />
                      </VAvatar>
                      <div>
                        <h3 class="text-subtitle-1 font-weight-bold">
                          Rate Limiting
                        </h3>
                        <div class="text-caption text-medium-emphasis">
                          Per-token limits
                        </div>
                      </div>
                    </div>

                    <p class="text-body-2 text-medium-emphasis mb-4">
                      Rate limits are applied per token. Exceeding the limit returns a
                      <code class="code-inline">429</code> status with a
                      <code class="code-inline">Retry-After</code> header.
                    </p>

                    <VTable
                      density="compact"
                      class="border rounded-lg"
                    >
                      <thead>
                        <tr>
                          <th>Scope</th>
                          <th>Limit</th>
                          <th>Window</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>
                            <VChip
                              size="small"
                              color="primary"
                              variant="tonal"
                            >
                              Customer
                            </VChip>
                          </td>
                          <td class="font-weight-medium">
                            60 requests
                          </td>
                          <td class="text-medium-emphasis">
                            per minute
                          </td>
                        </tr>
                      </tbody>
                    </VTable>

                    <div class="d-flex align-center ga-2 mt-4">
                      <VIcon
                        icon="tabler-info-circle"
                        size="16"
                        color="primary"
                      />
                      <span class="text-caption text-medium-emphasis">
                        Rate limit headers are included in every response:
                        <code class="code-inline">X-RateLimit-Remaining</code>
                      </span>
                    </div>
                  </VCardText>
                </VCard>
              </VCol>
            </VRow>
          </div>

          <!-- API Endpoints Header -->
          <div class="mb-8">
            <div class="d-flex align-center ga-3 mb-2">
              <VChip
                color="primary"
                variant="tonal"
                size="small"
              >
                <VIcon
                  icon="tabler-code"
                  start
                  size="14"
                />
                Endpoints
              </VChip>
              <VDivider />
            </div>
            <p class="text-body-2 text-medium-emphasis">
              All endpoints require a valid Bearer token. Generate one from your account dashboard.
            </p>
          </div>

          <!-- Customer Endpoint Groups -->
          <div
            v-for="group in customerEndpointGroups"
            :id="group.id"
            :key="group.id"
            :data-section="group.id"
            class="mb-10"
          >
            <VCard variant="outlined">
              <VCardText class="pa-6">
                <div class="d-flex align-center ga-3 mb-2">
                  <VAvatar
                    color="primary"
                    variant="tonal"
                    size="40"
                  >
                    <VIcon
                      :icon="group.icon"
                      size="20"
                    />
                  </VAvatar>
                  <div>
                    <h3 class="text-h6 font-weight-bold">
                      {{ group.title }}
                    </h3>
                    <p class="text-body-2 text-medium-emphasis mb-0">
                      {{ group.description }}
                    </p>
                  </div>
                </div>
              </VCardText>

              <VDivider />

              <VExpansionPanels
                :model-value="getGroupPanels(group.id)"
                variant="accordion"
                multiple
                @update:model-value="(val: number[]) => setGroupPanels(group.id, val)"
              >
                <VExpansionPanel
                  v-for="(endpoint, eIdx) in group.endpoints"
                  :key="eIdx"
                >
                  <VExpansionPanelTitle>
                    <div class="d-flex align-center ga-3 flex-wrap w-100">
                      <VChip
                        :color="methodColors[endpoint.method]"
                        size="small"
                        variant="flat"
                        label
                        class="font-weight-bold text-mono"
                        style="min-inline-size: 60px; justify-content: center;"
                      >
                        {{ endpoint.method }}
                      </VChip>
                      <span class="text-body-1 font-weight-medium text-mono">
                        {{ endpoint.path }}
                      </span>
                      <VSpacer />
                      <VChip
                        color="primary"
                        size="x-small"
                        variant="tonal"
                        class="d-none d-sm-inline-flex"
                      >
                        <VIcon
                          icon="tabler-lock"
                          start
                          size="12"
                        />
                        Auth
                      </VChip>
                    </div>
                  </VExpansionPanelTitle>

                  <VExpansionPanelText>
                    <p class="text-body-2 text-medium-emphasis mb-4">
                      {{ endpoint.description }}
                    </p>

                    <!-- Query Parameters -->
                    <div
                      v-if="endpoint.params && endpoint.params.length > 0"
                      class="mb-4"
                    >
                      <h4 class="text-subtitle-2 font-weight-bold mb-2">
                        <VIcon
                          icon="tabler-filter"
                          size="16"
                          class="me-1"
                        />
                        Query Parameters
                      </h4>
                      <VTable
                        density="compact"
                        class="border rounded-lg params-table"
                      >
                        <thead>
                          <tr>
                            <th>Parameter</th>
                            <th>Type</th>
                            <th>Required</th>
                            <th>Description</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr
                            v-for="param in endpoint.params"
                            :key="param.name"
                          >
                            <td>
                              <code class="code-inline">{{ param.name }}</code>
                            </td>
                            <td class="text-caption">
                              {{ param.type }}
                            </td>
                            <td>
                              <VChip
                                :color="param.required ? 'error' : 'default'"
                                size="x-small"
                                :variant="param.required ? 'flat' : 'tonal'"
                              >
                                {{ param.required ? 'Required' : 'Optional' }}
                              </VChip>
                            </td>
                            <td class="text-body-2 text-medium-emphasis">
                              {{ param.description }}
                            </td>
                          </tr>
                        </tbody>
                      </VTable>
                    </div>

                    <!-- Body Parameters -->
                    <div
                      v-if="endpoint.bodyParams && endpoint.bodyParams.length > 0"
                      class="mb-4"
                    >
                      <h4 class="text-subtitle-2 font-weight-bold mb-2">
                        <VIcon
                          icon="tabler-code"
                          size="16"
                          class="me-1"
                        />
                        Request Body
                      </h4>
                      <VTable
                        density="compact"
                        class="border rounded-lg params-table"
                      >
                        <thead>
                          <tr>
                            <th>Field</th>
                            <th>Type</th>
                            <th>Required</th>
                            <th>Description</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr
                            v-for="param in endpoint.bodyParams"
                            :key="param.name"
                          >
                            <td>
                              <code class="code-inline">{{ param.name }}</code>
                            </td>
                            <td class="text-caption">
                              {{ param.type }}
                            </td>
                            <td>
                              <VChip
                                :color="param.required ? 'error' : 'default'"
                                size="x-small"
                                :variant="param.required ? 'flat' : 'tonal'"
                              >
                                {{ param.required ? 'Required' : 'Optional' }}
                              </VChip>
                            </td>
                            <td class="text-body-2 text-medium-emphasis">
                              {{ param.description }}
                            </td>
                          </tr>
                        </tbody>
                      </VTable>
                    </div>

                    <!-- Response Example -->
                    <div v-if="endpoint.response">
                      <h4 class="text-subtitle-2 font-weight-bold mb-2">
                        <VIcon
                          icon="tabler-arrow-back-up"
                          size="16"
                          class="me-1"
                        />
                        Response Example
                      </h4>
                      <div class="code-block rounded-lg pa-4">
                        <div class="d-flex align-center justify-space-between mb-2">
                          <div class="d-flex align-center ga-2">
                            <VChip
                              size="x-small"
                              color="success"
                              variant="flat"
                            >
                              200 OK
                            </VChip>
                            <span class="text-caption text-disabled">application/json</span>
                          </div>
                          <VBtn
                            icon
                            size="x-small"
                            variant="text"
                            @click="copyToClipboard(endpoint.response, `response-${group.id}-${eIdx}`)"
                          >
                            <VIcon
                              :icon="copiedField === `response-${group.id}-${eIdx}` ? 'tabler-check' : 'tabler-copy'"
                              size="14"
                              :color="copiedField === `response-${group.id}-${eIdx}` ? 'success' : undefined"
                            />
                          </VBtn>
                        </div>
                        <pre class="text-body-2 response-json"><code>{{ endpoint.response }}</code></pre>
                      </div>
                    </div>
                  </VExpansionPanelText>
                </VExpansionPanel>
              </VExpansionPanels>
            </VCard>
          </div>


          <!-- Error Codes Section -->
          <div
            id="errors"
            data-section="errors"
            class="mb-12 mt-16"
          >
            <SectionHeader
              label="Reference"
              title="HTTP Status Codes"
              subtitle="Standard HTTP status codes returned by the EZSCALE API."
            />

            <VCard variant="outlined">
              <VTable class="error-codes-table">
                <thead>
                  <tr>
                    <th>Code</th>
                    <th>Status</th>
                    <th>Description</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="error in errorCodes"
                    :key="error.code"
                  >
                    <td>
                      <VChip
                        :color="error.color"
                        size="small"
                        variant="flat"
                        label
                        class="font-weight-bold"
                      >
                        {{ error.code }}
                      </VChip>
                    </td>
                    <td class="font-weight-medium">
                      {{ error.status }}
                    </td>
                    <td class="text-body-2 text-medium-emphasis">
                      {{ error.description }}
                    </td>
                  </tr>
                </tbody>
              </VTable>
            </VCard>

            <!-- Validation Error Example -->
            <VCard
              variant="outlined"
              class="mt-4"
            >
              <VCardText class="pa-5">
                <h4 class="text-subtitle-2 font-weight-bold mb-3">
                  Validation Error Response (422)
                </h4>
                <div class="code-block rounded-lg pa-4">
                  <pre class="text-body-2 response-json"><code>{
  "message": "The given data was invalid.",
  "errors": {
    "subject": ["The subject field is required."],
    "message": ["The message field must be at least 10 characters."]
  }
}</code></pre>
                </div>
              </VCardText>
            </VCard>
          </div>

          <!-- Getting Started Section -->
          <div
            id="getting-started"
            data-section="getting-started"
            class="mb-12"
          >
            <SectionHeader
              label="Quickstart"
              title="Getting Started"
              subtitle="Start making API requests in three simple steps."
            />

            <VRow>
              <VCol
                v-for="(step, index) in [
                  {
                    step: 1,
                    icon: 'tabler-key',
                    color: 'primary',
                    title: 'Create an API Token',
                    description: 'Log in to your EZSCALE dashboard, navigate to Settings > API Tokens, and generate a new Personal Access Token.',
                  },
                  {
                    step: 2,
                    icon: 'tabler-lock',
                    color: 'warning',
                    title: 'Include Bearer Token',
                    description: 'Add the Authorization: Bearer YOUR_TOKEN header to every API request for authentication.',
                  },
                  {
                    step: 3,
                    icon: 'tabler-send',
                    color: 'success',
                    title: 'Make Requests',
                    description: 'Send requests to https://api.ezscale.cloud/v1 endpoints using your favorite HTTP client or SDK.',
                  },
                ]"
                :key="step.step"
                cols="12"
                md="4"
              >
                <VCard
                  variant="outlined"
                  class="h-100 feature-card-hover"
                >
                  <VCardText class="pa-6 text-center">
                    <div class="d-flex justify-center mb-4">
                      <VAvatar
                        :color="step.color"
                        variant="tonal"
                        size="56"
                      >
                        <span class="text-h5 font-weight-bold">{{ step.step }}</span>
                      </VAvatar>
                    </div>
                    <h3 class="text-subtitle-1 font-weight-bold mb-2">
                      {{ step.title }}
                    </h3>
                    <p class="text-body-2 text-medium-emphasis mb-0">
                      {{ step.description }}
                    </p>
                  </VCardText>
                </VCard>
              </VCol>
            </VRow>

            <!-- cURL Example -->
            <VCard
              variant="outlined"
              class="mt-6"
            >
              <VCardText class="pa-6">
                <div class="d-flex align-center ga-3 mb-4">
                  <VAvatar
                    color="primary"
                    variant="tonal"
                    size="40"
                  >
                    <VIcon
                      icon="tabler-terminal-2"
                      size="20"
                    />
                  </VAvatar>
                  <div>
                    <h3 class="text-subtitle-1 font-weight-bold">
                      Example Request
                    </h3>
                    <div class="text-caption text-medium-emphasis">
                      cURL
                    </div>
                  </div>
                </div>

                <div class="code-block rounded-lg pa-4">
                  <div class="d-flex align-center justify-space-between mb-2">
                    <span class="text-caption text-disabled">bash</span>
                    <VBtn
                      icon
                      size="x-small"
                      variant="text"
                      @click="copyToClipboard(`curl -X GET https://api.ezscale.cloud/v1/services \\\n  -H 'Authorization: Bearer YOUR_API_TOKEN' \\\n  -H 'Accept: application/json'`, 'curl-example')"
                    >
                      <VIcon
                        :icon="copiedField === 'curl-example' ? 'tabler-check' : 'tabler-copy'"
                        size="14"
                        :color="copiedField === 'curl-example' ? 'success' : undefined"
                      />
                    </VBtn>
                  </div>
                  <pre class="text-body-2 response-json"><code>curl -X GET https://api.ezscale.cloud/v1/services \
  -H 'Authorization: Bearer YOUR_API_TOKEN' \
  -H 'Accept: application/json'</code></pre>
                </div>

                <VDivider class="my-5" />

                <div class="d-flex align-center ga-3 mb-4">
                  <VAvatar
                    color="success"
                    variant="tonal"
                    size="40"
                  >
                    <VIcon
                      icon="tabler-arrow-back-up"
                      size="20"
                    />
                  </VAvatar>
                  <div>
                    <h3 class="text-subtitle-1 font-weight-bold">
                      Example Response
                    </h3>
                    <div class="text-caption text-medium-emphasis">
                      JSON
                    </div>
                  </div>
                </div>

                <div class="code-block rounded-lg pa-4">
                  <pre class="text-body-2 response-json"><code>{
  "data": [
    {
      "id": 1,
      "service_type": "vps",
      "status": "active",
      "hostname": "vps-us-east-01.ezscale.cloud",
      "ipv4_address": "198.51.100.42",
      "plan": { "name": "VPS Pro", "price": "12.99" }
    }
  ],
  "meta": { "current_page": 1, "total": 3 }
}</code></pre>
                </div>
              </VCardText>
            </VCard>

            <!-- SDK & Libraries Note -->
            <VCard
              variant="outlined"
              class="mt-6"
            >
              <VCardText class="pa-6">
                <div class="d-flex align-center ga-3">
                  <VAvatar
                    color="info"
                    variant="tonal"
                    size="40"
                  >
                    <VIcon
                      icon="tabler-package"
                      size="20"
                    />
                  </VAvatar>
                  <div class="flex-grow-1">
                    <h3 class="text-subtitle-1 font-weight-bold">
                      SDKs & Libraries
                    </h3>
                    <p class="text-body-2 text-medium-emphasis mb-0">
                      Official SDKs for PHP, Python, Node.js, and Go are coming soon.
                      In the meantime, the API works with any HTTP client that supports JSON and Bearer token authentication.
                    </p>
                  </div>
                </div>

                <VDivider class="my-4" />

                <div class="d-flex ga-3 flex-wrap">
                  <VChip
                    v-for="lang in ['PHP', 'Python', 'Node.js', 'Go', 'Ruby', 'cURL']"
                    :key="lang"
                    variant="tonal"
                    size="small"
                  >
                    {{ lang }}
                  </VChip>
                </div>
              </VCardText>
            </VCard>
          </div>
        </VCol>
      </VRow>
    </VContainer>
  </div>
</template>

<style lang="scss" scoped>
.text-mono {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

.code-inline {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(var(--v-theme-primary), 0.08);
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Monaco, Consolas, monospace;
  font-size: 0.85em;
}

.code-block {
  overflow-x: auto;
  background: rgb(var(--v-theme-surface));
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));

  pre {
    margin: 0;
    overflow-x: auto;
    white-space: pre;
    font-family: "JetBrains Mono", "Fira Code", "SF Mono", Monaco, Consolas, monospace;

    code {
      color: rgb(var(--v-theme-on-surface));
    }
  }
}

.v-theme--dark .code-block {
  background: #1e1e2e;
  border-color: rgba(255, 255, 255, 0.08);
}

.response-json {
  line-height: 1.6;
}

.params-table {
  th {
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

.error-codes-table {
  th {
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

.cursor-pointer {
  cursor: pointer;
}

.api-sidebar {
  .v-list-item {
    cursor: pointer;
  }
}

// Expansion panel styling
:deep(.v-expansion-panel-title) {
  padding: 12px 20px;
  min-block-size: 52px;
}

:deep(.v-expansion-panel-text__wrapper) {
  padding: 0 20px 20px;
}

:deep(.v-expansion-panel--active > .v-expansion-panel-title) {
  min-block-size: 52px;
}
</style>
