---
import { resolveOrgOwners } from "@/lib/repo-owner";
import { getDatabase, schema } from "@/db";
import BaseLayout from "@/layouts/BaseLayout.astro";
import { desc, eq, inArray } from "drizzle-orm";
import StackCard from "@/components/dashboard/StackCard.astro";
import { Layers, ArrowLeft } from "lucide-react";

const user = Astro.locals.user;
if (!user) {
    return Astro.redirect("/login");
}

const db = getDatabase();

// Fetch user's stacks
const userPrs = await db.query.pullRequests.findMany({
    where: eq(schema.pullRequests.authorId, user.id),
    columns: { id: true },
});

let stacks: any[] = [];
const prIds = (await resolveOrgOwners(userPrs)).map((pr: any) => pr.id);

if (prIds.length > 0) {
    const stackEntries = await db.query.prStackEntries.findMany({
        where: inArray(schema.prStackEntries.pullRequestId, prIds),
        columns: { stackId: true },
    });

    const uniqueStackIds = [...new Set(stackEntries.map((e) => e.stackId))];

    if (uniqueStackIds.length > 0) {
        const dbStacks = await db.query.prStacks.findMany({
            where: inArray(schema.prStacks.id, uniqueStackIds),
            orderBy: [desc(schema.prStacks.updatedAt)],
            with: {
                repository: {
                    with: {
                        owner: true,
                    },
                },
                entries: {
                    orderBy: (entries, { asc }) => [asc(entries.stackOrder)],
                    with: {
                        pullRequest: true,
                    },
                },
            },
        });

        stacks = dbStacks.map((stack) => ({
            id: stack.id,
            name: stack.name || `Stack-${stack.id.substring(0, 6)}`,
            baseBranch: stack.baseBranch,
            status: stack.status,
            repoName: stack.repository.name,
            repoOwner: stack.repository.owner.username,
            updatedAt: stack.updatedAt.toISOString(),
            prs: stack.entries.map((entry) => ({
                id: entry.pullRequest.id,
                number: entry.pullRequest.number,
                title: entry.pullRequest.title,
                status: entry.pullRequest.state,
                url: `/${stack.repository.owner.username}/${stack.repository.name}/pulls/${entry.pullRequest.number}`,
                position: entry.stackOrder,
                isMerged: entry.pullRequest.state === "merged",
                isClosed: entry.pullRequest.state === "closed",
            })),
        }));
    }
}
---

<BaseLayout title="Your Stacks · OpenCodeHub">
    <div class="container max-w-[1280px] mx-auto py-8 px-4 sm:px-6">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-border mb-6">
            <div>
                <h1 class="text-2xl font-bold text-foreground tracking-tight flex items-center gap-2.5">
                    <Layers className="h-6 w-6 text-foreground" />
                    <span>Your Stacks</span>
                    <span class="rounded-full bg-secondary px-2.5 py-0.5 text-xs font-semibold text-muted-foreground border border-border/60">
                        {stacks.length}
                    </span>
                </h1>
                <p class="text-sm text-muted-foreground mt-1">
                    Manage and visualize your stacked pull requests
                </p>
            </div>
            <a
                href="/dashboard"
                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-border bg-card text-xs font-medium text-foreground hover:bg-accent transition-colors shadow-sm self-start sm:self-auto"
            >
                <ArrowLeft className="h-3.5 w-3.5" />
                <span>Dashboard</span>
            </a>
        </div>

        {
            stacks.length > 0 ? (
                <div class="grid gap-6 md:grid-cols-2">
                    {stacks.map((stack) => (
                        <StackCard stack={stack} />
                    ))}
                </div>
            ) : (
                <div class="text-center py-16 px-4 rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm shadow-sm">
                    <div class="w-12 h-12 rounded-full bg-secondary/80 border border-border flex items-center justify-center mx-auto mb-3 text-muted-foreground">
                        <Layers className="h-6 w-6" />
                    </div>
                    <h3 class="text-base font-semibold text-foreground mb-1">
                        No active stacks
                    </h3>
                    <p class="text-sm text-muted-foreground max-w-sm mx-auto mb-4">
                        Create stacked pull requests with the OpenCodeHub CLI to manage dependent changes cleanly.
                    </p>
                    <code class="px-2 py-1 bg-secondary rounded text-xs font-mono text-foreground">
                        och stack create &lt;branch&gt;
                    </code>
                </div>
            )
        }
    </div>
</BaseLayout>