import type { IssueRow, 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 IssueListProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    issues: (IssueRow & { author_username: string; author_avatar_version: number | null })[];
    status: "open" | "closed" | "completed";
    counts: Record<string, number>;
    pagination: PaginationInfo;
}

export function IssueList({
    user,
    repo,
    issues,
    status,
    counts,
    pagination,
}: IssueListProps) {
    return (
        <Layout user={user} title={`Issues — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="issues" user={user} />
                <div class="list-header">
                    <div class="list-header-tabs">
                        <a
                            href={`/${repo.name}/issues?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}/issues?status=completed`}
                            class={`list-tab${status === "completed" ? " active" : ""}`}
                        >
                            Completed{" "}
                            {(counts.completed ?? 0) > 0 && (
                                <span class="tab-count">
                                    {counts.completed}
                                </span>
                            )}
                        </a>
                        <a
                            href={`/${repo.name}/issues?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}/issues/new`}
                            class="btn btn-primary btn-sm"
                        >
                            New issue
                        </a>
                    )}
                </div>
                {issues.length === 0 ? (
                    <div class="empty-state">
                        <p>No {status} issues.</p>
                    </div>
                ) : (
                    <ul class="issue-list">
                        {issues.map((issue) => (
                            <li class="issue-item">
                                <div class="issue-main">
                                    <span
                                        class={`issue-status-dot ${issue.status}`}
                                    />
                                    <a
                                        href={`/${repo.name}/issues/${issue.number}`}
                                        class="issue-title"
                                    >
                                        {issue.title}
                                    </a>
                                    <span class="issue-number">
                                        #{issue.number}
                                    </span>
                                </div>
                                <div class="issue-meta">
                                    <Avatar
                                        userId={issue.author_id}
                                        version={issue.author_avatar_version}
                                        size={20}
                                    />
                                    <span class="issue-author">
                                        opened by{" "}
                                        {displayName(issue.author_username)}
                                    </span>
                                    <time datetime={issue.created_at}>
                                        {new Date(
                                            issue.created_at,
                                        ).toLocaleDateString()}
                                    </time>
                                </div>
                            </li>
                        ))}
                    </ul>
                )}
                <Pagination {...pagination} />
            </div>
        </Layout>
    );
}