<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import {
    User,
    FolderOpen,
    Building2,
    Calendar,
    AlertCircle,
} from 'lucide-vue-next';
import { computed } from 'vue';
import Heading from '@/components/Heading.vue';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import AppLayout from '@/layouts/AppLayout.vue';

type WorkspaceUser = {
    id: number;
    name: string;
    email: string;
    role: string;
};

type Workspace = {
    id: number;
    name: string;
    slug: string;
    users: WorkspaceUser[];
};

type Stats = {
    clients: number;
    declarations: number;
    declarations_by_status: Record<string, number>;
    declarations_this_month: number;
    declarations_needing_attention: number;
};

type Props = {
    workspace: Workspace;
    stats: Stats;
    indexUrl: string;
    editUrl: string;
};

const props = defineProps<Props>();

function roleLabel(role: string): string {
    return role.charAt(0).toUpperCase() + role.slice(1);
}

const inProgressCount = computed(
    () =>
        (props.stats.declarations_by_status?.processing ?? 0) +
        (props.stats.declarations_by_status?.additional_documents_requested ??
            0) +
        (props.stats.declarations_by_status?.documents_received ?? 0),
);

const validatedCount = computed(
    () => props.stats.declarations_by_status?.validated ?? 0,
);
</script>

<template>
    <AppLayout
        :breadcrumbs="[
            { title: 'Workspaces', href: props.indexUrl },
            { title: props.workspace.name },
        ]"
    >
        <Head :title="props.workspace.name" />

        <div class="flex flex-col space-y-6 p-4">
            <div class="flex items-center justify-between">
                <Heading
                    :title="props.workspace.name"
                    :description="`Workspace ${props.workspace.slug}`"
                />
                <Button variant="outline" as-child>
                    <Link :href="props.editUrl">Edit workspace</Link>
                </Button>
            </div>

            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-6">
                <Card>
                    <CardHeader
                        class="flex flex-row items-center justify-between space-y-0 pb-2"
                    >
                        <CardTitle class="text-sm font-medium">
                            Clients
                        </CardTitle>
                        <Building2 class="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div class="text-2xl font-bold">
                            {{ props.stats.clients }}
                        </div>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader
                        class="flex flex-row items-center justify-between space-y-0 pb-2"
                    >
                        <CardTitle class="text-sm font-medium">
                            Déclarations
                        </CardTitle>
                        <FolderOpen class="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div class="text-2xl font-bold">
                            {{ props.stats.declarations }}
                        </div>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader
                        class="flex flex-row items-center justify-between space-y-0 pb-2"
                    >
                        <CardTitle class="text-sm font-medium">
                            En cours
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div class="text-2xl font-bold">
                            {{ inProgressCount }}
                        </div>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader
                        class="flex flex-row items-center justify-between space-y-0 pb-2"
                    >
                        <CardTitle class="text-sm font-medium">
                            Validés
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div class="text-2xl font-bold">
                            {{ validatedCount }}
                        </div>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader
                        class="flex flex-row items-center justify-between space-y-0 pb-2"
                    >
                        <CardTitle class="text-sm font-medium">
                            Ce mois
                        </CardTitle>
                        <Calendar class="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div class="text-2xl font-bold">
                            {{ props.stats.declarations_this_month }}
                        </div>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader
                        class="flex flex-row items-center justify-between space-y-0 pb-2"
                    >
                        <CardTitle class="text-sm font-medium">
                            À traiter
                        </CardTitle>
                        <AlertCircle class="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div class="text-2xl font-bold">
                            {{ props.stats.declarations_needing_attention }}
                        </div>
                    </CardContent>
                </Card>
            </div>

            <div
                class="overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
            >
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead
                            class="border-b border-sidebar-border/70 bg-muted/50"
                        >
                            <tr>
                                <th
                                    class="h-10 px-4 text-left align-middle font-medium"
                                >
                                    User
                                </th>
                                <th
                                    class="h-10 px-4 text-left align-middle font-medium"
                                >
                                    Role
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                v-for="user in props.workspace.users"
                                :key="user.id"
                                class="border-b border-sidebar-border/50 last:border-0"
                            >
                                <td class="px-4 py-3">
                                    <div class="flex flex-col">
                                        <span class="font-medium">{{
                                            user.name
                                        }}</span>
                                        <span
                                            class="text-xs text-muted-foreground"
                                            >{{ user.email }}</span
                                        >
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <Badge variant="secondary">
                                        {{ roleLabel(user.role) }}
                                    </Badge>
                                </td>
                            </tr>
                            <tr v-if="!props.workspace.users.length">
                                <td
                                    colspan="2"
                                    class="px-4 py-8 text-center text-muted-foreground"
                                >
                                    <div
                                        class="flex flex-col items-center gap-2"
                                    >
                                        <User class="h-10 w-10" />
                                        <p>No users in this workspace.</p>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </AppLayout>
</template>
