import type { IssueRow, LabelRow, RepositoryRow } from "../../db/index.ts";
import { formatDate } from "../../lib/formatDate.ts";
import { labelTextColor } from "../../lib/labelColor.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;
    repoLabels: LabelRow[];
    selectedLabelIds: number[];
    labelsByIssueId: Map<number, LabelRow[]>;
}

export function IssueList({
    user,
    repo,
    issues,
    status,
    counts,
    pagination,
    repoLabels,
    selectedLabelIds,
    labelsByIssueId,
}: IssueListProps) {
    const labelsParam =
        selectedLabelIds.length > 0
            ? `&labels=${selectedLabelIds.map(String).join(",")}`
            : "";
    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${labelsParam}`}
                            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${labelsParam}`}
                            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${labelsParam}`}
                            class={`list-tab${status === "closed" ? " active" : ""}`}
                        >
                            Closed{" "}
                            {(counts.closed ?? 0) > 0 && (
                                <span class="tab-count">{counts.closed}</span>
                            )}
                        </a>
                    </div>
                    <div class="list-header-actions">
                        {repoLabels.length > 0 && (
                            <details class="label-filter">
                                <summary class="btn btn-secondary btn-sm">
                                    Filter by label
                                    {selectedLabelIds.length > 0 && (
                                        <span class="tab-count">
                                            {selectedLabelIds.length}
                                        </span>
                                    )}
                                </summary>
                                <div class="label-filter-popup">
                                    <form
                                        method="GET"
                                        action={`/${repo.name}/issues`}
                                    >
                                        <input
                                            type="hidden"
                                            name="status"
                                            value={status}
                                        />
                                        <div class="label-filter-list">
                                            {repoLabels.map((label) => (
                                                <label class="label-filter-item">
                                                    <input
                                                        type="checkbox"
                                                        name="labels"
                                                        value={String(label.id)}
                                                        checked={
                                                            selectedLabelIds.includes(
                                                                label.id,
                                                            )
                                                                ? true
                                                                : undefined
                                                        }
                                                    />
                                                    <span
                                                        class="label-badge"
                                                        style={`background:${label.color};color:${labelTextColor(label.color)}`}
                                                        safe
                                                    >
                                                        {label.name}
                                                    </span>
                                                </label>
                                            ))}
                                        </div>
                                        <div class="label-filter-actions">
                                            <button
                                                type="submit"
                                                class="btn btn-primary btn-sm"
                                            >
                                                Apply
                                            </button>
                                            <a
                                                href={`/${repo.name}/issues?status=${status}`}
                                                class="btn btn-secondary btn-sm"
                                            >
                                                Clear
                                            </a>
                                        </div>
                                    </form>
                                </div>
                            </details>
                        )}
                        {!!user && (
                            <a
                                href={`/${repo.name}/issues/new`}
                                class="btn btn-primary btn-sm"
                            >
                                New issue
                            </a>
                        )}
                    </div>
                </div>
                {issues.length === 0 ? (
                    <div class="empty-state">
                        <p>No {status} issues.</p>
                    </div>
                ) : (
                    <ul class="issue-list">
                        {issues.map((issue) => {
                            const labels = labelsByIssueId.get(issue.id) ?? [];
                            const unsafeAuthor = displayName(
                                issue.author_username,
                            );
                            return (
                                <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"
                                            safe
                                        >
                                            {issue.title}
                                        </a>
                                        <span class="issue-number">
                                            #{issue.number}
                                        </span>
                                    </div>
                                    {labels.length > 0 && (
                                        <div class="issue-labels">
                                            {labels.map((label) => (
                                                <span
                                                    class="label-badge"
                                                    style={`background:${label.color};color:${labelTextColor(label.color)}`}
                                                    safe
                                                >
                                                    {label.name}
                                                </span>
                                            ))}
                                        </div>
                                    )}
                                    <div class="issue-meta">
                                        <Avatar
                                            userId={issue.author_id}
                                            version={
                                                issue.author_avatar_version
                                            }
                                            size={20}
                                        />
                                        <span class="issue-author" safe>
                                            opened by {unsafeAuthor}
                                        </span>
                                        <time datetime={issue.created_at} safe>
                                            {formatDate(issue.created_at)}
                                        </time>
                                    </div>
                                </li>
                            );
                        })}
                    </ul>
                )}
                <Pagination {...pagination} />
            </div>
        </Layout>
    );
}