import type { RepositoryRow } from "../../db/index.ts";
import type { SessionUser } from "../../middleware/session.ts";
import type { CommitEntry } from "../../services/git.ts";
import { Layout } from "../layout.tsx";
import { RepoHeader } from "../repos/RepoHeader.tsx";
import { BranchSelector } from "./BranchSelector.tsx";
import { RepoNav } from "./RepoNav.tsx";

interface CommitLogProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    ref: string;
    commits: CommitEntry[];
    branches: string[];
    /** URL for the next (older) page, or null if this is the last page. */
    olderUrl: string | null;
    /** URL for the previous (newer) page, or null if this is the first page. */
    newerUrl: string | null;
}

export function CommitLog({
    user,
    repo,
    ref: logRef,
    commits,
    branches,
    olderUrl,
    newerUrl,
}: CommitLogProps) {
    return (
        <Layout user={user} title={`Commits — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="commits" user={user} />
                <div class="commits-header">
                    <h2 class="section-title">Commits</h2>
                    <BranchSelector
                        repoName={repo.name}
                        branches={branches}
                        currentRef={logRef}
                        view="commits"
                    />
                </div>
                {commits.length === 0 ? (
                    <p class="text-muted">No commits yet.</p>
                ) : (
                    <ul class="commit-list commit-log">
                        {commits.map((c) => (
                            <li class="commit-item">
                                <div class="commit-main">
                                    <a
                                        href={`/${repo.name}/commit/${c.hash}`}
                                        class="commit-subject"
                                    >
                                        {c.subject}
                                    </a>
                                </div>
                                <div class="commit-meta">
                                    <span class="commit-author">
                                        {c.author}
                                    </span>
                                    <a
                                        href={`/${repo.name}/commit/${c.hash}`}
                                        class="commit-hash mono"
                                    >
                                        {c.hash.slice(0, 7)}
                                    </a>
                                    <time class="commit-date" datetime={c.date}>
                                        {new Date(c.date).toLocaleString()}
                                    </time>
                                </div>
                            </li>
                        ))}
                    </ul>
                )}
                {(newerUrl || olderUrl) && (
                    <nav
                        class="commit-cursor-nav"
                        aria-label="Commit history navigation"
                    >
                        <div class="commit-cursor-prev">
                            {newerUrl && (
                                <a href={newerUrl} class="pagination-btn">
                                    ← Newer
                                </a>
                            )}
                        </div>
                        <div class="commit-cursor-next">
                            {olderUrl && (
                                <a href={olderUrl} class="pagination-btn">
                                    Older →
                                </a>
                            )}
                        </div>
                    </nav>
                )}
            </div>
        </Layout>
    );
}