<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Card, Typography, Divider, List, Button, Space } from 'ant-design-vue'
import { PlayCircleOutlined, GithubOutlined, CodeOutlined } from '@ant-design/icons-vue'

const router = useRouter()

const REPO = 'https://git.cs.bham.ac.uk/projects-2025-26/vxn217'

const composeLinks = [
    {
        label: 'Development compose',
        path: 'compose/dev/docker-compose.yml',
        desc: 'Local development stack with hot-reload and dev tooling. (Recommended for inspectors)',
    },
    {
        label: 'Production compose',
        path: 'compose/prod/docker-compose.yml',
        desc: 'Production stack with Traefik reverse proxy and optimised builds.',
    },
    {
        label: 'Production inference compose',
        path: 'compose/prod/docker-compose.inference.yml',
        desc: 'Separate GPU inference service for the production environment.',
    },
]

const steps = [
    'Register or login.',
    'Complete onboarding and training to simulate a role journey.',
    'Managers review onboarding completion and feedback.',
]

const features = [
    {
        title: 'Modular Content',
        desc: 'Compose learning journeys from small, reusable modules. Mix videos and interactive checks.',
        img: '/screenshots/feature-modular-content.png',
    },
    {
        title: 'Agent Workflows',
        desc: 'Automate guidance and triggers with configurable agents to move users through onboarding steps.',
        img: '/screenshots/feature-agent-workflows.png',
    },
    {
        title: 'Reporting & Insights',
        desc: 'Lightweight reports showing completion and engagement metrics.',
        img: '/screenshots/feature-reporting.png',
    },
]
</script>

<template>
    <div class="page">
        <Card class="panel" :bordered="false">
            <Typography.Title :level="2">About Dynavera</Typography.Title>
            <Typography.Paragraph type="secondary">
                Dynavera is a lightweight platform for onboarding, training, and assessing employees
                with modular content and agent-driven workflows. It is designed for teams that want
                tangible learning experiences quickly without complex LMS setup.
            </Typography.Paragraph>
            <div class="video-wrapper">
                <video controls class="launch-video">
                    <source src="/launch-reel.mp4" type="video/mp4" />
                </video>
            </div>
            <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>
            <Space style="margin-top: 1rem">
                <Button type="primary" @click="router.push('/getting-started')">
                    <PlayCircleOutlined />
                    Get started
                </Button>
                <Button @click="router.push('/register')">Register now</Button>
            </Space>
            <Divider />
            <Typography.Title :level="4">Self-host</Typography.Title>
            <Typography.Paragraph type="secondary">
                Dynavera runs entirely on your own infrastructure. Clone the repository and use one
                of the Docker Compose stacks below to get up and running.
            </Typography.Paragraph>
            <div class="compose-list">
                <div v-for="c in composeLinks" :key="c.path" class="compose-row">
                    <div class="compose-info">
                        <Typography.Text strong>{{ c.label }}</Typography.Text>
                        <Typography.Text type="secondary" class="compose-desc">{{ c.desc }}</Typography.Text>
                    </div>
                    <a :href="`${REPO}/-/blob/main/${c.path}`" target="_blank" rel="noopener">
                        <Button size="small">
                            <CodeOutlined />
                            View file
                        </Button>
                    </a>
                </div>
            </div>
            <Space style="margin-top: 1rem">
                <a :href="REPO" target="_blank" rel="noopener">
                    <Button type="primary">
                        <GithubOutlined />
                        View repository
                    </Button>
                </a>
                <a :href="`${REPO}/-/blob/main/compose/prod/docker-compose.yml`" target="_blank" rel="noopener">
                    <Button>Self host</Button>
                </a>
            </Space>
            <Divider />
            <Typography.Title :level="4">Features</Typography.Title>
            <div class="features">
                <div v-for="f in features" :key="f.title" class="feature-card">
                    <img :src="f.img" :alt="f.title" class="feature-hero" />
                    <div class="feature-body">
                        <Typography.Text strong>{{ f.title }}</Typography.Text>
                        <Typography.Paragraph type="secondary">{{ f.desc }}</Typography.Paragraph>
                    </div>
                </div>
            </div>
            <Divider />
            <Typography.Title :level="4">More about Dynavera</Typography.Title>
            <Typography.Paragraph>
                Dynavera is built to be extensible. Plug your content sources, connect an LMS, or
                integrate third-party learning tools. The platform focuses on flexibility and ease
                of use, so teams can get started quickly and adapt as their needs evolve. Whether
                you are a small startup or a growing enterprise, Dynavera aims to simplify the
                process of onboarding and training with modern, agent-driven approaches.
            </Typography.Paragraph>
        </Card>
    </div>
</template>

<style scoped>
.page {
    max-width: 1100px;
}
.panel {
    max-width: 1100px;
    margin: 0 auto;
}
.row {
    padding: 0.5rem 0;
}
.compose-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}
.compose-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #f8fafc;
    border: 1px solid #dbe3ec;
    border-radius: 6px;
    padding: 0.65rem 1rem;
}
.compose-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.compose-desc {
    font-size: 0.85rem;
}
.video-wrapper {
    margin: 1rem 0 0.5rem;
    border-radius: 8px;
    overflow: hidden;
}
.launch-video {
    width: 100%;
    display: block;
    border-radius: 8px;
}
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.feature-card {
    background: #ffffff;
    border: 1px solid #dbe3ec;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.feature-hero {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.feature-body {
    padding: 0.75rem 1rem;
}
.feature-body :deep(.ant-typography-secondary) {
    color: #4b5563 !important;
}
</style>
