<template>
  <Section variant="plain" paddingY="md">
    <Stack gap="6">
        <Heading :level="1">Test Timeline Chart</Heading>

        <Card>
          <Stack gap="4">
            <Heading :level="3" weight="semibold">Hello World vue-timeline-chart</Heading>

            <ClientOnly>
              <Timeline
                :groups="timelineGroups"
                :items="timelineItems"
                :viewportMin="Date.parse('2024-08-01')"
                :viewportMax="Date.parse('2024-08-31')"
                style="height: 400px;"
              >
                <template #group-label="{ group }">
                  <Text weight="semibold">{{ group.label }}</Text>
                </template>
                <template #item="{ item }">
                  <Pill variant="primary">{{ item.label }}</Pill>
                </template>
              </Timeline>

              <template #fallback>
                <Card tone="muted" padding="lg" style="height: 384px;">
                  <Stack align="center" justify="center" gap="2" fullHeight>
                    <Text tone="muted">Loading...</Text>
                  </Stack>
                </Card>
              </template>
            </ClientOnly>
          </Stack>
        </Card>

        <Card tone="muted" padding="lg">
          <Stack gap="2">
            <Heading :level="4" weight="semibold">Debug info:</Heading>
            <Text tag="pre" mono size="base">{{ debugInfo }}</Text>
          </Stack>
        </Card>
      </Stack>
  </Section>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'topnav'
})

const timelineGroups = [
  { id: 'group1', label: 'Stage 1' },
  { id: 'group2', label: 'Stage 2' }
]

const timelineItems = [
  {
    id: 'item1',
    group: 'group1',
    start: Date.parse('2024-08-01'),
    end: Date.parse('2024-08-10'),
    label: 'Task 1'
  },
  {
    id: 'item2', 
    group: 'group2',
    start: Date.parse('2024-08-05'),
    end: Date.parse('2024-08-15'),
    label: 'Task 2'
  }
]

const debugInfo = computed(() =>
  JSON.stringify(
    {
      groups: timelineGroups,
      items: timelineItems,
      timestamp: new Date().toISOString(),
    },
    null,
    2
  )
)
</script>
