import { escapeHtml } from "@kitajs/html";
import type { RepositoryRow } from "../../db/index.ts";
import { formatDateTime } from "../../lib/formatDate.ts";
import type { SessionUser } from "../../middleware/session.ts";
import type { RenderedDiffFile } from "../../services/diffHighlight.ts";
import type { CommitMeta } from "../../services/git.ts";
import { DiffView } from "../DiffView.tsx";
import { Layout } from "../layout.tsx";
import { RepoHeader } from "../repos/RepoHeader.tsx";
import { RepoNav } from "./RepoNav.tsx";

interface CommitDetailProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    sha: string;
    meta: CommitMeta;
    files: RenderedDiffFile[];
    tooLarge?: number;
}

export function CommitDetail({
    user,
    repo,
    sha,
    meta,
    files,
    tooLarge,
}: CommitDetailProps) {
    return (
        <Layout user={user} title={`${sha.slice(0, 7)} — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="commits" user={user} />

                {/* Back link */}
                <div class="commit-page-top">
                    <a
                        href={`/${repo.name}/commits/${repo.default_branch}`}
                        class="btn btn-sm"
                    >
                        ← Back to log
                    </a>
                    <a
                        href={`/${repo.name}/tree/${sha}`}
                        class="btn btn-secondary btn-sm"
                        title={`Browse tree at ${sha.slice(0, 7)}`}
                        safe
                    >
                        @ {sha.slice(0, 7)}
                    </a>
                </div>

                {/* Commit metadata card */}
                <div class="commit-card">
                    <h2
                        class={`commit-card-subject${meta.subject ? "" : " commit-card-subject-empty"}`}
                        safe
                    >
                        {meta.subject || "No commit message"}
                    </h2>
                    {!!meta.body && (
                        <pre class="commit-card-body" safe>
                            {meta.body}
                        </pre>
                    )}
                    <div class="commit-card-meta">
                        <div class="commit-card-meta-row">
                            <span class="commit-meta-label">Author</span>
                            <span class="commit-meta-value">
                                {escapeHtml(`${meta.author} <${meta.email}>`)}
                            </span>
                        </div>
                        <div class="commit-card-meta-row">
                            <span class="commit-meta-label">Date</span>
                            <time
                                class="commit-meta-value"
                                datetime={meta.date}
                                safe
                            >
                                {formatDateTime(meta.date)}
                            </time>
                        </div>
                        {(meta.committer !== meta.author ||
                            meta.committerEmail !== meta.email) && (
                            <>
                                <div class="commit-card-meta-row">
                                    <span class="commit-meta-label">
                                        Committer
                                    </span>
                                    <span class="commit-meta-value">
                                        {escapeHtml(
                                            `${meta.committer} <${meta.committerEmail}>`,
                                        )}
                                    </span>
                                </div>
                                <div class="commit-card-meta-row">
                                    <span class="commit-meta-label">
                                        Commit date
                                    </span>
                                    <time
                                        class="commit-meta-value"
                                        datetime={meta.committerDate}
                                        safe
                                    >
                                        {formatDateTime(meta.committerDate)}
                                    </time>
                                </div>
                            </>
                        )}
                        <div class="commit-card-meta-row">
                            <span class="commit-meta-label">Commit</span>
                            <code class="commit-meta-value commit-sha-full mono" safe>
                                {meta.hash}
                            </code>
                        </div>
                        {meta.parents.length > 0 && (
                            <div class="commit-card-meta-row">
                                <span class="commit-meta-label">
                                    Parent{meta.parents.length > 1 ? "s" : ""}
                                </span>
                                <span class="commit-meta-value">
                                    {meta.parents.map((p) => (
                                        <a
                                            href={`/${repo.name}/commit/${p}`}
                                            class="commit-hash mono"
                                            safe
                                        >
                                            {p.slice(0, 7)}
                                        </a>
                                    ))}
                                </span>
                            </div>
                        )}
                        {meta.sigStatus !== "none" && (
                            <div class="commit-card-meta-row">
                                <span class="commit-meta-label">Signature</span>
                                <span class="commit-meta-value">
                                    {meta.sigStatus === "good" ? (
                                        <span class="sig-badge verified">
                                            verified
                                        </span>
                                    ) : (
                                        <span class="sig-badge unverified">
                                            unverified
                                        </span>
                                    )}
                                </span>
                            </div>
                        )}
                    </div>
                </div>

                {tooLarge !== undefined ? (
                    <div class="file-download-notice">
                        <p safe>
                            Diff is too large to render inline (
                            {(tooLarge / 1024 / 1024).toFixed(1)} MB). Browse
                            individual files at the tree below.
                        </p>
                    </div>
                ) : (
                    <DiffView files={files} repo={repo} sha={sha} />
                )}
            </div>
        </Layout>
    );
}