import type { RepositoryRow } from "../../db/index.ts";
import { formatDateTime } from "../../lib/formatDate.ts";
import type { SessionUser } from "../../middleware/session.ts";
import { Layout } from "../layout.tsx";
import { Pagination, type PaginationInfo } from "../Pagination.tsx";
import { RepoHeader } from "../repos/RepoHeader.tsx";
import { RepoNav } from "../repos/RepoNav.tsx";
import { CiStatusPill } from "./CiStatusPill.tsx";

interface RunSummary {
    id: number;
    repo_run_id: number | null;
    status: string;
    trigger_source: string;
    commit_sha: string | null;
    commit_branch: string | null;
    commit_tag: string | null;
    started_at: string | null;
    finished_at: string | null;
    created_at: string;
    triggered_by_username: string | null;
    artifact_count: number;
    queue_position: number | null;
}

interface CiHistoryProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    runs: RunSummary[];
    pagination: PaginationInfo;
    manualTriggerDisabledReason: string | null;
}

function queueTitle(position: number | null): string {
    if (position === null) return "Waiting in the build queue";
    if (position === 1) return "Waiting in the build queue — next up";
    return `Waiting in the build queue — ${position - 1} run${position - 1 === 1 ? "" : "s"} ahead`;
}

function duration(start: string | null, end: string | null): string {
    if (!start || !end) return "";
    const ms = new Date(end).getTime() - new Date(start).getTime();
    if (ms < 0) return "";
    const s = Math.floor(ms / 1000);
    if (s < 60) return `${s}s`;
    const m = Math.floor(s / 60);
    const rem = s % 60;
    return rem > 0 ? `${m}m ${rem}s` : `${m}m`;
}

const CI_VARIABLES = [
    ["CI", "always true"],
    ["CI_PIPELINE_ID", "numeric run ID"],
    ["CI_COMMIT_SHA", "full commit hash"],
    ["CI_COMMIT_SHORT_SHA", "first 8 chars"],
    ["CI_COMMIT_BRANCH", "branch name (empty for tags)"],
    ["CI_COMMIT_TAG", "tag name (empty for branches)"],
    ["CI_COMMIT_REF_NAME", "branch or tag name"],
    ["CI_TRIGGER_SOURCE", "push · tag · manual"],
    ["CI_REPO_NAME", "repository name"],
    ["CI_SERVER_URL", "HearthForge base URL"],
];

function CiHelp({ repo }: { repo: RepositoryRow }) {
    return (
        <details class="form-card ci-help">
            <summary class="ci-help-summary">
                <span>How to define a pipeline file</span>
                <a
                    href="/assets/hearthforge-ci-template.toml"
                    download=".hearthforge-ci.toml"
                    class="btn btn-sm btn-secondary ci-help-download"
                >
                    Download template
                </a>
            </summary>
            <div class="ci-help-body">
                <p class="ci-help-desc">
                    Add <code>.hearthforge-ci.toml</code> to your repository
                    root. Each <code>[section]</code> is a step executed in file
                    order. Reserved tables: <code>[on]</code> (triggers) and{" "}
                    <code>[variables]</code> (user-overridable inputs).
                </p>
                <div class="ci-help-sections">
                    <div class="ci-help-section">
                        <h4 class="ci-help-section-title">
                            Predefined variables
                        </h4>
                        <dl class="ci-help-vars">
                            {CI_VARIABLES.map(([name, desc]) => (
                                <>
                                    <dt>
                                        <code>{name}</code>
                                    </dt>
                                    <dd>{desc}</dd>
                                </>
                            ))}
                        </dl>
                    </div>
                    <div class="ci-help-section">
                        <h4 class="ci-help-section-title">Status badge</h4>
                        <p class="ci-help-badge-desc">Embed in your README:</p>
                        <code class="ci-help-badge-code">{`![pipeline](/${repo.name}/ci/badge.svg)`}</code>
                        <h4
                            class="ci-help-section-title"
                            style="margin-top: var(--space-4)"
                        >
                            Artifact types
                        </h4>
                        <dl class="ci-help-vars">
                            {[
                                ["publish_file", "copy file as-is"],
                                ["publish_tar", ".tar archive"],
                                ["publish_gzip", ".tar.gz archive"],
                                ["publish_zstd", ".tar.zst archive"],
                                ["publish_zip", ".zip archive"],
                            ].map(([k, v]) => (
                                <>
                                    <dt>
                                        <code>{k}</code>
                                    </dt>
                                    <dd>{v}</dd>
                                </>
                            ))}
                        </dl>
                    </div>
                </div>
            </div>
        </details>
    );
}

export function CiHistory({
    user,
    repo,
    runs,
    pagination,
    manualTriggerDisabledReason,
}: CiHistoryProps) {
    const isRunning = runs.some(
        (r) =>
            r.status === "pending" ||
            r.status === "running" ||
            r.status === "queued",
    );
    return (
        <Layout user={user} title={`Pipelines — ${repo.name}`}>
            {
                (isRunning ? (
                    <meta http-equiv="refresh" content="4" />
                ) : (
                    ""
                )) as unknown as JSX.Element
            }
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="ci" user={user} />
                <div class="list-header">
                    <h2 class="list-heading">Pipelines</h2>
                    {user?.isAdmin && (
                        <div class="ci-history-actions">
                            <form
                                method="POST"
                                action={`/${repo.name}/ci/purge-cache`}
                                class="inline-form"
                            >
                                <button
                                    type="submit"
                                    class="btn btn-secondary btn-sm"
                                    title="Delete all Docker cache volumes for this repository"
                                >
                                    Purge caches
                                </button>
                            </form>
                            <form
                                method="POST"
                                action={`/${repo.name}/ci/run`}
                                class="inline-form"
                            >
                                <button
                                    type="submit"
                                    class="btn btn-primary btn-sm"
                                    disabled={
                                        manualTriggerDisabledReason
                                            ? true
                                            : undefined
                                    }
                                    title={
                                        manualTriggerDisabledReason ?? undefined
                                    }
                                >
                                    Run pipeline
                                </button>
                            </form>
                        </div>
                    )}
                </div>
                {runs.length === 0 ? (
                    <div class="empty-state">
                        <p>No pipeline runs yet.</p>
                        <p class="text-muted">
                            Push a <code>.hearthforge-ci.toml</code> to your
                            repository to get started.
                        </p>
                    </div>
                ) : (
                    <ul class="issue-list">
                        {runs.map((run) => (
                            <li class="issue-item">
                                <div class="release-item-header">
                                    <div class="release-item-main">
                                        <a
                                            href={`/${repo.name}/ci/${run.id}`}
                                            class="release-item-title"
                                        >
                                            <CiStatusPill
                                                status={run.status}
                                                title={
                                                    run.status === "queued"
                                                        ? queueTitle(
                                                              run.queue_position,
                                                          )
                                                        : undefined
                                                }
                                            />
                                            <span class="ci-run-id">
                                                #{run.repo_run_id ?? run.id}
                                            </span>
                                        </a>
                                        <div class="release-item-meta">
                                            {run.commit_sha && (
                                                <code class="ci-sha">
                                                    {run.commit_sha.slice(0, 8)}
                                                </code>
                                            )}
                                            {run.commit_branch && (
                                                <span class="badge">
                                                    {run.commit_branch}
                                                </span>
                                            )}
                                            {run.commit_tag && (
                                                <span class="badge">
                                                    {run.commit_tag}
                                                </span>
                                            )}
                                            <span class="text-muted">
                                                {run.trigger_source}
                                            </span>
                                            {run.triggered_by_username && (
                                                <span class="text-muted">
                                                    by{" "}
                                                    {run.triggered_by_username}
                                                </span>
                                            )}
                                            {run.artifact_count > 0 && (
                                                <span>
                                                    {run.artifact_count}{" "}
                                                    artifact
                                                    {run.artifact_count !== 1
                                                        ? "s"
                                                        : ""}
                                                </span>
                                            )}
                                            {run.started_at &&
                                                run.finished_at && (
                                                    <span class="text-muted">
                                                        {duration(
                                                            run.started_at,
                                                            run.finished_at,
                                                        )}
                                                    </span>
                                                )}
                                        </div>
                                    </div>
                                    <div class="release-item-date">
                                        <time datetime={run.created_at}>
                                            {formatDateTime(run.created_at)}
                                        </time>
                                    </div>
                                </div>
                            </li>
                        ))}
                    </ul>
                )}
                <Pagination {...pagination} />
                <CiHelp repo={repo} />
            </div>
        </Layout>
    );
}