import { escapeHtml } from "@kitajs/html";
import type { RepositoryRow } from "../../db/index.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[];
}

function formatDate(iso: string): string {
    try {
        return new Date(iso).toLocaleString(undefined, {
            dateStyle: "medium",
            timeStyle: "short",
        });
    } catch {
        return iso;
    }
}

export function CommitDetail({
    user,
    repo,
    sha,
    meta,
    files,
}: 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-ghost 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)}`}
                    >
                        @ {sha.slice(0, 7)}
                    </a>
                </div>

                {/* Commit metadata card */}
                <div class="commit-card">
                    <h2 class="commit-card-subject">{meta.subject}</h2>
                    {meta.body && (
                        <pre class="commit-card-body">{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}
                            >
                                {formatDate(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}
                                    >
                                        {formatDate(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">
                                {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"
                                        >
                                            {p.slice(0, 7)}
                                        </a>
                                    ))}
                                </span>
                            </div>
                        )}
                    </div>
                </div>

                <DiffView files={files} repo={repo} sha={sha} />
            </div>
        </Layout>
    );
}