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

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

interface CiRunDetailProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    run: RunDetail;
    steps: CiStepRow[];
    artifacts: CiArtifactRow[];
    autoRefresh: boolean;
    queuePosition: number | 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`;
}

function formatBytes(bytes: number): string {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

export function CiRunDetail({
    user,
    repo,
    run,
    steps,
    artifacts,
    autoRefresh,
    queuePosition,
}: CiRunDetailProps) {
    const isActive =
        run.status === "pending" ||
        run.status === "running" ||
        run.status === "queued";
    const isQueued = run.status === "queued";
    const queueText = queueTitle(queuePosition);
    const displayId = run.repo_run_id ?? run.id;

    let variableOverrides: Record<string, string> = {};
    if (run.variable_overrides) {
        try {
            variableOverrides = JSON.parse(run.variable_overrides);
        } catch {
            // corrupted DB value — treat as empty
        }
    }
    const hasOverrides = Object.keys(variableOverrides).length > 0;

    return (
        <Layout user={user} title={`Pipeline #${displayId} — ${repo.name}`}>
            {isActive && autoRefresh ? (
                <meta http-equiv="refresh" content="3" />
            ) : null}
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="ci" user={user} />

                <div class="release-detail-header">
                    <div>
                        <h2 class="release-detail-title">
                            <CiStatusPill
                                status={run.status}
                                title={isQueued ? queueText : undefined}
                            />{" "}
                            Pipeline #{displayId}
                        </h2>
                        <div class="release-item-meta">
                            {!!run.commit_sha && (
                                <code class="ci-sha" safe>
                                    {run.commit_sha.slice(0, 8)}
                                </code>
                            )}
                            {!!run.commit_branch && (
                                <a
                                    href={`/${repo.name}/tree/${run.commit_branch}`}
                                    class="badge"
                                    safe
                                >
                                    {run.commit_branch}
                                </a>
                            )}
                            {!!run.commit_tag && (
                                <a
                                    href={`/${repo.name}/tree/${run.commit_tag}`}
                                    class="badge"
                                    safe
                                >
                                    {run.commit_tag}
                                </a>
                            )}
                            <span class="text-muted" safe>
                                triggered by {run.trigger_source}
                                {!!run.triggered_by_username &&
                                    ` (${run.triggered_by_username})`}
                            </span>
                            {!!run.started_at && !!run.finished_at && (
                                <span class="text-muted" safe>
                                    {duration(run.started_at, run.finished_at)}
                                </span>
                            )}
                            <time datetime={run.created_at} class="text-muted" safe>
                                {formatDateTime(run.created_at)}
                            </time>
                        </div>
                    </div>
                    <div class="ci-run-actions">
                        {isActive && (
                            <a
                                href={autoRefresh ? "?refresh=off" : "?"}
                                class="btn btn-secondary btn-sm"
                            >
                                {autoRefresh
                                    ? "Pause refresh"
                                    : "Resume refresh"}
                            </a>
                        )}
                        {user?.isAdmin &&
                            (isActive ? (
                                <form
                                    method="POST"
                                    action={`/${repo.name}/ci/${run.id}/cancel`}
                                    class="inline-form"
                                >
                                    <button
                                        type="submit"
                                        class="btn btn-danger btn-sm"
                                    >
                                        Cancel
                                    </button>
                                </form>
                            ) : (
                                <form
                                    method="POST"
                                    action={`/${repo.name}/ci/${run.id}/retry`}
                                    class="inline-form"
                                >
                                    <button
                                        type="submit"
                                        class="btn btn-secondary btn-sm"
                                        title="Re-run with the same commit, trigger source, and variable overrides"
                                    >
                                        Retry
                                    </button>
                                </form>
                            ))}
                    </div>
                </div>

                {hasOverrides && (
                    <div class="form-card ci-overrides">
                        <h3 class="section-title">Variable overrides</h3>
                        <dl class="ci-vars-list">
                            {Object.entries(variableOverrides).map(([k, v]) => (
                                <>
                                    <dt>
                                        <code safe>{k}</code>
                                    </dt>
                                    <dd safe>{v}</dd>
                                </>
                            ))}
                        </dl>
                    </div>
                )}

                <div class="ci-steps">
                    <h3 class="section-title">Steps</h3>
                    {steps.length === 0 ? (
                        <div class="ci-step-pending">
                            <span class="text-muted">
                                {isQueued ? queueText : "Waiting to start…"}
                            </span>
                        </div>
                    ) : (
                        steps.map((step) => (
                            <details
                                class={`ci-step ci-step-${step.status}`}
                                open={
                                    step.status === "running" ? true : undefined
                                }
                            >
                                <summary class="ci-step-summary">
                                    <CiStatusPill status={step.status} />
                                    <span class="ci-step-name" safe>
                                        {step.name}
                                    </span>
                                    {!!step.started_at && !!step.finished_at && (
                                        <span class="ci-step-duration text-muted" safe>
                                            {duration(
                                                step.started_at,
                                                step.finished_at,
                                            )}
                                        </span>
                                    )}
                                </summary>
                                {step.log ? (
                                    <pre class="ci-step-log" safe>
                                        {step.log}
                                    </pre>
                                ) : step.status === "running" ? (
                                    <div class="ci-step-running-indicator text-muted">
                                        Running…
                                    </div>
                                ) : null}
                            </details>
                        ))
                    )}
                </div>

                {artifacts.length > 0 && (
                    <div class="form-card ci-artifacts">
                        <h3 class="section-title">Artifacts</h3>
                        <ul class="ci-artifact-list">
                            {artifacts.map((artifact) => (
                                <li class="ci-artifact-item">
                                    <a
                                        href={`/${repo.name}/ci/${run.id}/artifacts/${artifact.id}`}
                                        class="ci-artifact-name"
                                        safe
                                    >
                                        {artifact.filename}
                                    </a>
                                    <span class="ci-artifact-size text-muted" safe>
                                        {formatBytes(artifact.size)}
                                    </span>
                                </li>
                            ))}
                        </ul>
                    </div>
                )}
            </div>
        </Layout>
    );
}