import type { PatchRow, RepositoryRow } from "../../db/index.ts";
import { displayName } from "../../lib/users.ts";
import type { SessionUser } from "../../middleware/session.ts";
import { Avatar } from "../Avatar.tsx";
import { Layout } from "../layout.tsx";
import { Pagination, type PaginationInfo } from "../Pagination.tsx";
import { RepoHeader } from "../repos/RepoHeader.tsx";
import { RepoNav } from "../repos/RepoNav.tsx";

interface PatchListProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    patches: (PatchRow & {
        author_username: string;
        author_avatar_version: number | null;
    })[];
    status: string;
    counts: Record<string, number>;
    pagination: PaginationInfo;
}

export function PatchList({
    user,
    repo,
    patches,
    status,
    counts,
    pagination,
}: PatchListProps) {
    return (
        <Layout user={user} title={`Patches — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="patches" user={user} />
                <div class="list-header">
                    <div class="list-header-tabs">
                        <a
                            href={`/${repo.name}/patches?status=open`}
                            class={`list-tab${status === "open" ? " active" : ""}`}
                        >
                            Open{" "}
                            {(counts.open ?? 0) > 0 && (
                                <span class="tab-count">{counts.open}</span>
                            )}
                        </a>
                        <a
                            href={`/${repo.name}/patches?status=merged`}
                            class={`list-tab${status === "merged" ? " active" : ""}`}
                        >
                            Merged{" "}
                            {(counts.merged ?? 0) > 0 && (
                                <span class="tab-count">{counts.merged}</span>
                            )}
                        </a>
                        <a
                            href={`/${repo.name}/patches?status=closed`}
                            class={`list-tab${status === "closed" ? " active" : ""}`}
                        >
                            Closed{" "}
                            {(counts.closed ?? 0) > 0 && (
                                <span class="tab-count">{counts.closed}</span>
                            )}
                        </a>
                    </div>
                    {user && (
                        <a
                            href={`/${repo.name}/patches/new`}
                            class="btn btn-primary btn-sm"
                        >
                            Upload patch
                        </a>
                    )}
                </div>
                {patches.length === 0 ? (
                    <div class="empty-state">
                        <p>No {status} patches.</p>
                    </div>
                ) : (
                    <ul class="issue-list">
                        {patches.map((patch) => (
                            <li class="issue-item">
                                <div class="issue-main">
                                    <span
                                        class={`patch-status-dot ${patch.status}`}
                                    />
                                    <a
                                        href={`/${repo.name}/patches/${patch.number}`}
                                        class="issue-title"
                                    >
                                        {patch.title}
                                    </a>
                                    <span class="issue-number">
                                        #{patch.number}
                                    </span>
                                </div>
                                <div class="issue-meta">
                                    <Avatar
                                        userId={patch.author_id}
                                        version={patch.author_avatar_version}
                                        size={20}
                                    />
                                    <span>
                                        by {displayName(patch.author_username)}
                                    </span>
                                    <time datetime={patch.created_at}>
                                        {new Date(
                                            patch.created_at,
                                        ).toLocaleDateString()}
                                    </time>
                                </div>
                            </li>
                        ))}
                    </ul>
                )}
                <Pagination {...pagination} />
            </div>
        </Layout>
    );
}