import type { RepositoryRow } from "../../db/index.ts";
import { formatDateTime } from "../../lib/formatDate.ts";
import type { SessionUser } from "../../middleware/session.ts";
import type { CiVariableDef } from "../../services/ci.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;
    /** Declared in [variables]. Null when the config could not be read. */
    ciVariables: Record<string, CiVariableDef> | 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>[[steps]]</code> entry is a step, executed
                    in file order, and needs a <code>name</code>. Other tables:{" "}
                    <code>[on]</code> (triggers), <code>[variables]</code>{" "}
                    (user-overridable inputs) and <code>[[copy]]</code> (files
                    taken from another image, like <code>COPY --from</code>).
                </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 safe>{name}</code>
                                    </dt>
                                    <dd safe>{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"
                            safe
                        >{`![pipeline](/${repo.name}/ci/badge.svg)`}</code>
                        <h4
                            class="ci-help-section-title"
                            style="margin-top: var(--space-4)"
                        >
                            Step options
                        </h4>
                        <dl class="ci-help-vars">
                            {[
                                ["run_sh", "shell command to run"],
                                ["run_if", "skip the step unless this exits 0"],
                                [
                                    "always",
                                    "run even after an earlier step failed",
                                ],
                                [
                                    "warn_on_fail",
                                    "step warns instead of failing; the run reports warning",
                                ],
                                [
                                    "clear",
                                    "re-extract a clean checkout before the step",
                                ],
                                ["timeout", "per-step timeout in seconds"],
                            ].map(([k, v]) => (
                                <>
                                    <dt>
                                        <code safe>{k}</code>
                                    </dt>
                                    <dd safe>{v}</dd>
                                </>
                            ))}
                        </dl>
                        <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 safe>{k}</code>
                                    </dt>
                                    <dd safe>{v}</dd>
                                </>
                            ))}
                        </dl>
                    </div>
                </div>
            </div>
        </details>
    );
}

/**
 * Manual trigger. With no declared variables it is a plain submit button.
 * With variables it opens a panel of inputs seeded with their defaults, so a
 * field left untouched sends the default back and counts as no override.
 */
function RunPipeline({
    repo,
    disabledReason,
    variables,
}: {
    repo: RepositoryRow;
    disabledReason: string | null;
    variables: Array<[string, CiVariableDef]>;
}) {
    const form = (
        <form method="POST" action={`/${repo.name}/ci/run`}>
            {variables.length > 0 && (
                <div class="ci-run-vars">
                    {variables.map(([name, def]) => (
                        <label class="form-group ci-run-var">
                            <code safe>{name}</code>
                            {!!def.description && (
                                <span class="ci-run-var-desc" safe>
                                    {def.description}
                                </span>
                            )}
                            <input
                                type="text"
                                name={`var_${name}`}
                                value={def.default ?? ""}
                                autocomplete="off"
                            />
                        </label>
                    ))}
                </div>
            )}
            <button
                type="submit"
                class="btn btn-primary btn-sm"
                disabled={disabledReason ? true : undefined}
                title={disabledReason ?? undefined}
            >
                Run pipeline
            </button>
        </form>
    );

    if (variables.length === 0) return <div class="inline-form">{form}</div>;

    return (
        <details class="confirm-details ci-run-details">
            <summary
                class="btn btn-primary btn-sm"
                title={disabledReason ?? undefined}
            >
                Run pipeline
            </summary>
            <div class="confirm-popup ci-run-popup">{form}</div>
        </details>
    );
}

export function CiHistory({
    user,
    repo,
    runs,
    pagination,
    manualTriggerDisabledReason,
    ciVariables,
}: CiHistoryProps) {
    const varEntries = Object.entries(ciVariables ?? {});
    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" /> : null}
            <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="list-header-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>
                            <RunPipeline
                                repo={repo}
                                disabledReason={manualTriggerDisabledReason}
                                variables={varEntries}
                            />
                        </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" safe>
                                                    {run.commit_sha.slice(0, 8)}
                                                </code>
                                            )}
                                            {!!run.commit_branch && (
                                                <span class="badge" safe>
                                                    {run.commit_branch}
                                                </span>
                                            )}
                                            {!!run.commit_tag && (
                                                <span class="badge" safe>
                                                    {run.commit_tag}
                                                </span>
                                            )}
                                            <span class="text-muted" safe>
                                                {run.trigger_source}
                                            </span>
                                            {!!run.triggered_by_username && (
                                                <span class="text-muted" safe>
                                                    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"
                                                        safe
                                                    >
                                                        {duration(
                                                            run.started_at,
                                                            run.finished_at,
                                                        )}
                                                    </span>
                                                )}
                                        </div>
                                    </div>
                                    <div class="release-item-date">
                                        <time datetime={run.created_at} safe>
                                            {formatDateTime(run.created_at)}
                                        </time>
                                    </div>
                                </div>
                            </li>
                        ))}
                    </ul>
                )}
                <Pagination {...pagination} />
                <CiHelp repo={repo} />
            </div>
        </Layout>
    );
}