<script setup lang="ts">
import { Card, Typography, Divider, List, Timeline, Space } from 'ant-design-vue'

const pathways = [
    'Admin: system settings, user management, reporting, invitations.',
    'Manager: create onboarding flows, assign roles, monitor team progress.',
    'Employee: complete training modules, assessments, and track personal progress.',
]

const highlights = [
    'Ready for agent-driven workflows that guide people through onboarding tasks.',
    'Flexible role-based gating across pages (managers/admins vs employees).',
    'Django REST API + Vue 3 frontend with a shared Pinia auth/session store.',
    'Docker-friendly dev setup (frontend on 5173, API on 8000).',
]

const roadmap = [
    {
        title: 'Short term',
        items: [
            'Add richer assessments with adaptive scoring.',
            'Improve content versioning for training modules.',
            'Expose activity feed for audits.',
        ],
    },
    {
        title: 'Next',
        items: [
            'Integrate external IDP (SSO) and SCIM user sync.',
            'Launch webhooks for downstream HRIS updates.',
            'Add multilingual content support.',
        ],
    },
]

const steps = [
    'Register or login (demo credentials only).',
    'Complete Onboarding and Training to simulate a role journey.',
    'Managers assign employees to roles and review progress reports.',
]
</script>

<template>
    <div class="page">
        <Card class="panel" :bordered="false">
            <Typography.Title :level="2">About Agentic Trainers</Typography.Title>
            <Typography.Paragraph type="secondary">
                Agentic Trainers is a lightweight platform for onboarding, training, and assessing
                employees with modular content and agent-driven workflows. It is designed for teams
                that want to ship tangible learning experiences quickly without complex LMS setup.
            </Typography.Paragraph>

            <Divider />
            <Typography.Title :level="4">Role pathways</Typography.Title>
            <List :data-source="pathways" :bordered="false">
                <template #renderItem="{ item }">
                    <List.Item class="row">{{ item }}</List.Item>
                </template>
            </List>

            <Divider />
            <Typography.Title :level="4">Highlights</Typography.Title>
            <List :data-source="highlights" :bordered="false">
                <template #renderItem="{ item }">
                    <List.Item class="row">{{ item }}</List.Item>
                </template>
            </List>

            <Divider />
            <Typography.Title :level="4">Getting started</Typography.Title>
            <List :data-source="steps" :bordered="false">
                <template #renderItem="{ item, index }">
                    <List.Item class="row">
                        <strong>{{ index + 1 }}.</strong>
                        &nbsp;{{ item }}
                    </List.Item>
                </template>
            </List>

            <Divider />
            <Typography.Title :level="4">Roadmap</Typography.Title>
            <Space :size="24" direction="vertical" style="width: 100%">
                <Timeline>
                    <Timeline.Item v-for="bucket in roadmap" :key="bucket.title">
                        <Typography.Text strong>{{ bucket.title }}</Typography.Text>
                        <List :data-source="bucket.items" :bordered="false">
                            <template #renderItem="{ item }">
                                <List.Item class="row">{{ item }}</List.Item>
                            </template>
                        </List>
                    </Timeline.Item>
                </Timeline>
            </Space>

            <Typography.Paragraph type="secondary" style="margin-top: 1rem">
                Demo-only auth; integrate a real identity provider for production use.
            </Typography.Paragraph>
        </Card>
    </div>
</template>

<style scoped>
.page {
    padding: 2rem 1.5rem;
}
.panel {
    max-width: 900px;
    margin: 0 auto;
}
.row {
    padding: 0.5rem 0;
}
</style>
