<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Card, Typography, List, Tag, Button, Spin, message } from 'ant-design-vue'
import { apiClient, API } from '../router/api'
import type { ProgressOverviewItem } from '../types/onboarding'

const router = useRouter()
const loading = ref(false)
const rows = ref<ProgressOverviewItem[]>([])

const loadProgress = async () => {
    loading.value = true
    try {
        const overviewRes = await apiClient.get<ProgressOverviewItem[]>(
            API.onboarding.sessions.progressOverview(),
        )
        rows.value = Array.isArray(overviewRes.data) ? overviewRes.data : []
    } catch {
        message.error('Failed to load progress overview')
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    loadProgress()
})
</script>

<template>
    <div class="page">
        <Typography.Title :level="2">Onboarding Progress</Typography.Title>
        <Typography.Paragraph type="secondary">
            Review each role's onboarding status and monitor feedback.
        </Typography.Paragraph>

        <Card class="panel" :bordered="false">
            <Spin :spinning="loading" tip="Loading progress...">
                <List :data-source="rows" item-layout="vertical">
                    <template #renderItem="{ item }">
                        <List.Item>
                            <List.Item.Meta
                                :title="`${item.role.name} · ${item.user.name}`"
                                :description="item.flow.title"
                            />
                            <div class="row-meta">
                                <Tag
                                    :color="
                                        item.latest_status === 'completed'
                                            ? 'green'
                                            : item.latest_status === 'active'
                                              ? 'blue'
                                              : 'default'
                                    "
                                >
                                    {{ item.latest_status }}
                                </Tag>
                                <Tag color="gold">{{ item.progress }}%</Tag>
                                <Tag :color="item.flow.is_active ? 'cyan' : 'default'">
                                    {{ item.flow.is_active ? 'active flow' : 'inactive flow' }}
                                </Tag>
                                <Button
                                    type="primary"
                                    @click="
                                        router.push({
                                            path: `/progress/${item.role.uuid}`,
                                            query: {
                                                user_uuid: item.user.uuid,
                                                flow_uuid: item.flow.uuid,
                                            },
                                        })
                                    "
                                >
                                    View Details
                                </Button>
                            </div>
                        </List.Item>
                    </template>
                </List>
            </Spin>
        </Card>
    </div>
</template>

<style scoped>
.page {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.panel {
    background: #ffffff;
    border: 1px solid #dbe3ec;
}
.row-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
</style>
