<script setup lang="ts">
import { Head, Link, router } from '@inertiajs/vue3';
import {
    Briefcase,
    Building2,
    ChevronDown,
    ClipboardList,
    EllipsisVertical,
    Eye,
    FolderOpen,
    Send,
    UserRoundCog,
    Users,
} from 'lucide-vue-next';
import { computed, ref } from 'vue';
import ActivityFeed from '@/components/dashboard/ActivityFeed.vue';
import PriorityAlertsPanel from '@/components/dashboard/PriorityAlertsPanel.vue';
import StatCard from '@/components/dashboard/StatCard.vue';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from '@/components/ui/collapsible';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import AppLayout from '@/layouts/AppLayout.vue';
import { dashboard } from '@/routes';
import { index as usersIndex } from '@/routes/users';
import { index as workspacesIndex } from '@/routes/workspaces';
import type {
    BreadcrumbItem,
    DashboardDeclaration,
    DashboardProps,
    StatCardLink,
} from '@/types';

type Props = DashboardProps;

const props = defineProps<Props>();

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Dashboard',
        href: dashboard().url,
    },
];

const hasWorkspace = computed(() => !!props.workspaceName);
const showFeed = ref(false);
const nudgingIds = ref(new Set<number>());

const isWorkerEmpty = computed(
    () =>
        props.isWorker &&
        props.declarations.length === 0 &&
        props.alerts.length === 0 &&
        props.statCards.every((c) => c.count === 0),
);

type DeadlineProximity = 'safe' | 'approaching' | 'urgent' | 'overdue' | 'none';

function deadlineProximity(dueDate: string | null): DeadlineProximity {
    if (!dueDate) return 'none';
    const now = new Date();
    const deadline = new Date(dueDate);
    const diffDays = Math.ceil(
        (deadline.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
    );
    if (diffDays < 0) return 'overdue';
    if (diffDays <= 5) return 'urgent';
    if (diffDays <= 7) return 'approaching';
    return 'safe';
}

function deadlineClass(dueDate: string | null): string {
    const proximity = deadlineProximity(dueDate);
    const map: Record<DeadlineProximity, string> = {
        safe: 'text-green-600',
        approaching: 'text-amber-600',
        urgent: 'text-red-600',
        overdue: 'text-red-600 animate-pulse',
        none: 'text-muted-foreground',
    };
    return map[proximity];
}

function statusBadgeVariant(
    status: string,
): 'default' | 'secondary' | 'destructive' | 'outline' {
    const map: Record<
        string,
        'default' | 'secondary' | 'destructive' | 'outline'
    > = {
        created: 'secondary',
        en_cours: 'default',
        en_attente_client: 'outline',
        termine: 'secondary',
        mise_en_demeure: 'destructive',
        ferme: 'secondary',
    };
    return map[status] ?? 'secondary';
}

function navigateToDeclaration(declaration: DashboardDeclaration): void {
    router.get(declaration.showUrl);
}
</script>

<template>
    <Head title="Dashboard" />

    <AppLayout :breadcrumbs="breadcrumbs">
        <div
            class="flex h-full flex-1 flex-col gap-6 overflow-x-auto rounded-xl p-4"
        >
            <!-- Quick links when no workspace (admin view) -->
            <div
                v-if="!hasWorkspace"
                class="grid auto-rows-min gap-4 md:grid-cols-3"
            >
                <Link
                    :href="usersIndex().url"
                    class="relative flex aspect-video flex-col items-center justify-center gap-2 overflow-hidden rounded-xl border border-sidebar-border/70 transition-colors hover:bg-muted/50 dark:border-sidebar-border"
                >
                    <Users class="h-8 w-8" />
                    <span class="font-medium">Users</span>
                    <span class="text-xs text-muted-foreground"
                        >Manage users</span
                    >
                </Link>
                <Link
                    :href="workspacesIndex().url"
                    class="relative flex aspect-video flex-col items-center justify-center gap-2 overflow-hidden rounded-xl border border-sidebar-border/70 transition-colors hover:bg-muted/50 dark:border-sidebar-border"
                >
                    <Building2 class="h-8 w-8" />
                    <span class="font-medium">Workspaces</span>
                    <span class="text-xs text-muted-foreground"
                        >Cabinets comptables</span
                    >
                </Link>
                <Link
                    v-if="clientsUrl"
                    :href="clientsUrl"
                    class="relative flex aspect-video flex-col items-center justify-center gap-2 overflow-hidden rounded-xl border border-sidebar-border/70 transition-colors hover:bg-muted/50 dark:border-sidebar-border"
                >
                    <Briefcase class="h-8 w-8" />
                    <span class="font-medium">Clients</span>
                    <span class="text-xs text-muted-foreground"
                        >Manage clients</span
                    >
                </Link>
            </div>

            <!-- Workspace dashboard -->
            <template v-if="hasWorkspace">
                <!-- Worker empty state -->
                <Card v-if="isWorkerEmpty">
                    <CardContent
                        class="flex flex-col items-center justify-center py-16"
                    >
                        <ClipboardList
                            class="mb-3 h-12 w-12 text-muted-foreground"
                        />
                        <p class="text-lg font-medium">
                            Aucune déclaration assignée
                        </p>
                        <p class="text-sm text-muted-foreground">
                            Contactez votre responsable
                        </p>
                    </CardContent>
                </Card>

                <template v-if="!isWorkerEmpty">
                    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                        <!-- Main content (2/3 on desktop) -->
                        <div class="space-y-6 lg:col-span-2">
                            <!-- Worker subtitle -->
                            <p
                                v-if="isWorker"
                                class="text-sm text-muted-foreground"
                            >
                                Mes déclarations
                            </p>

                            <!-- KPI StatCards -->
                            <div
                                class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4"
                            >
                                <StatCard
                                    v-for="card in statCards"
                                    :key="card.label"
                                    :label="card.label"
                                    :count="card.count"
                                    :status="
                                        card.status as StatCardLink['status']
                                    "
                                    :href="card.href"
                                />
                            </div>

                            <!-- Priority Alerts Panel -->
                            <PriorityAlertsPanel
                                :alerts="alerts"
                                :view-all-url="viewAllAlertsUrl"
                            />

                            <!-- Urgent Declarations Table -->
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <h2 class="text-lg font-semibold">
                                        Déclarations urgentes
                                    </h2>
                                    <Button
                                        v-if="declarationsUrl"
                                        variant="outline"
                                        as-child
                                    >
                                        <Link :href="declarationsUrl">
                                            Toutes les déclarations
                                        </Link>
                                    </Button>
                                </div>

                                <Card
                                    v-if="declarations.length > 0"
                                    class="overflow-hidden"
                                >
                                    <div class="overflow-x-auto">
                                        <Table>
                                            <TableHeader>
                                                <TableRow>
                                                    <TableHead
                                                        >Client</TableHead
                                                    >
                                                    <TableHead>Type</TableHead>
                                                    <TableHead
                                                        >Date limite</TableHead
                                                    >
                                                    <TableHead v-if="!isWorker"
                                                        >Assigné à</TableHead
                                                    >
                                                    <TableHead
                                                        >Statut</TableHead
                                                    >
                                                    <TableHead class="w-10" />
                                                </TableRow>
                                            </TableHeader>
                                            <TableBody>
                                                <TableRow
                                                    v-for="declaration in declarations"
                                                    :key="declaration.id"
                                                    class="cursor-pointer"
                                                    @click="
                                                        navigateToDeclaration(
                                                            declaration,
                                                        )
                                                    "
                                                >
                                                    <TableCell
                                                        class="font-medium"
                                                    >
                                                        {{
                                                            declaration.clientName
                                                        }}
                                                    </TableCell>
                                                    <TableCell>
                                                        {{
                                                            declaration.typeLabel
                                                        }}
                                                    </TableCell>
                                                    <TableCell>
                                                        <span
                                                            :class="
                                                                deadlineClass(
                                                                    declaration.dueDate,
                                                                )
                                                            "
                                                        >
                                                            {{
                                                                declaration.dueDate ??
                                                                '—'
                                                            }}
                                                        </span>
                                                    </TableCell>
                                                    <TableCell v-if="!isWorker">
                                                        {{
                                                            declaration.assigneeName ??
                                                            '—'
                                                        }}
                                                    </TableCell>
                                                    <TableCell>
                                                        <Badge
                                                            :variant="
                                                                statusBadgeVariant(
                                                                    declaration.status,
                                                                )
                                                            "
                                                        >
                                                            {{
                                                                declaration.statusLabel
                                                            }}
                                                        </Badge>
                                                    </TableCell>
                                                    <TableCell>
                                                        <DropdownMenu>
                                                            <DropdownMenuTrigger
                                                                as-child
                                                                @click.stop
                                                            >
                                                                <Button
                                                                    variant="ghost"
                                                                    size="icon"
                                                                    class="h-8 w-8"
                                                                >
                                                                    <EllipsisVertical
                                                                        class="h-4 w-4"
                                                                    />
                                                                </Button>
                                                            </DropdownMenuTrigger>
                                                            <DropdownMenuContent
                                                                align="end"
                                                            >
                                                                <DropdownMenuItem
                                                                    @click.stop="
                                                                        navigateToDeclaration(
                                                                            declaration,
                                                                        )
                                                                    "
                                                                >
                                                                    <Eye
                                                                        class="mr-2 h-4 w-4"
                                                                    />
                                                                    Voir
                                                                </DropdownMenuItem>
                                                                <DropdownMenuItem
                                                                    v-if="canNudge"
                                                                    :disabled="nudgingIds.has(declaration.id)"
                                                                    @click.stop="
                                                                        if (!nudgingIds.has(declaration.id)) {
                                                                            nudgingIds.add(declaration.id);
                                                                            router.post(
                                                                                declaration.nudgeUrl,
                                                                                {},
                                                                                {
                                                                                    preserveScroll: true,
                                                                                    onFinish: () => nudgingIds.delete(declaration.id),
                                                                                },
                                                                            );
                                                                        }
                                                                    "
                                                                >
                                                                    <Send
                                                                        class="mr-2 h-4 w-4"
                                                                    />
                                                                    Relancer
                                                                </DropdownMenuItem>
                                                                <DropdownMenuItem
                                                                    disabled
                                                                >
                                                                    <UserRoundCog
                                                                        class="mr-2 h-4 w-4"
                                                                    />
                                                                    Réassigner
                                                                </DropdownMenuItem>
                                                            </DropdownMenuContent>
                                                        </DropdownMenu>
                                                    </TableCell>
                                                </TableRow>
                                            </TableBody>
                                        </Table>
                                    </div>
                                </Card>

                                <Card v-else>
                                    <CardContent
                                        class="flex flex-col items-center justify-center py-12"
                                    >
                                        <FolderOpen
                                            class="mb-3 h-12 w-12 text-muted-foreground"
                                        />
                                        <p class="text-muted-foreground">
                                            Aucune déclaration urgente pour le
                                            moment.
                                        </p>
                                    </CardContent>
                                </Card>
                            </div>

                            <!-- Mobile (<768px): Collapsible activity feed -->
                            <div class="md:hidden">
                                <Collapsible v-model:open="showFeed">
                                    <CollapsibleTrigger
                                        class="flex w-full items-center justify-between rounded-lg border px-4 py-3 text-sm font-medium transition-colors hover:bg-muted/50"
                                    >
                                        <span
                                            >Activité récente ({{
                                                activities.length
                                            }})</span
                                        >
                                        <ChevronDown
                                            :class="[
                                                'h-4 w-4 transition-transform',
                                                showFeed ? 'rotate-180' : '',
                                            ]"
                                        />
                                    </CollapsibleTrigger>
                                    <CollapsibleContent>
                                        <div class="pt-3">
                                            <ActivityFeed
                                                :activities="activities"
                                            />
                                        </div>
                                    </CollapsibleContent>
                                </Collapsible>
                            </div>

                            <!-- Tablet (768-1023px): Inline activity feed below table -->
                            <div class="hidden md:block lg:hidden">
                                <ActivityFeed :activities="activities" />
                            </div>
                        </div>

                        <!-- Desktop: Activity feed sidebar (1/3) -->
                        <div class="hidden lg:col-span-1 lg:block">
                            <ActivityFeed :activities="activities" />
                        </div>
                    </div>
                </template>
            </template>
        </div>
    </AppLayout>
</template>
