"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import {
  api,
  type Pipeline,
  type RunDetail,
} from "@/components/api";
import { LogViewer } from "@/components/log-viewer";
import { StatusBadge } from "@/components/status-badge";
import { fmtTime, fmtDuration } from "@/components/format";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export default function RunDetailPage() {
  const params = useParams<{ id: string }>();
  const id = Number(params.id);

  const [run, setRun] = useState<RunDetail | null>(null);
  const [pipelineName, setPipelineName] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(() => {
    api<RunDetail>(`/api/runs/${id}`)
      .then((r) => {
        setRun(r);
        api<Pipeline>(`/api/pipelines/${r.pipeline_id}`)
          .then((p) => setPipelineName(p.name))
          .catch(() => setPipelineName(null));
      })
      .catch((e) => setError(e instanceof Error ? e.message : "加载失败"))
      .finally(() => setLoading(false));
  }, [id]);

  useEffect(load, [load]);

  if (loading) return <div className="text-sm text-muted-foreground">加载中…</div>;
  if (error || !run)
    return (
      <div className="text-sm text-red-500">
        {error ? `加载失败：${error}` : "运行记录不存在"}
      </div>
    );

  const isActive = run.status === "running" || run.status === "queued";

  return (
    <div className="flex flex-col gap-6">
      <h1 className="flex items-center gap-3 text-xl font-semibold">
        运行 #{run.id}
        <StatusBadge status={run.status} />
      </h1>

      <Card>
        <CardHeader>
          <CardTitle>详情</CardTitle>
        </CardHeader>
        <CardContent>
          <dl className="grid grid-cols-2 gap-x-8 gap-y-2 text-sm sm:grid-cols-3">
            <div>
              <dt className="text-muted-foreground">流水线</dt>
              <dd>
                <Link
                  href={`/pipelines/${run.pipeline_id}`}
                  className="font-medium hover:underline"
                >
                  {pipelineName ?? `#${run.pipeline_id}`}
                </Link>
              </dd>
            </div>
            <div>
              <dt className="text-muted-foreground">开始时间</dt>
              <dd>{fmtTime(run.started_at)}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">结束时间</dt>
              <dd>{fmtTime(run.finished_at)}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">耗时</dt>
              <dd>{fmtDuration(run.started_at, run.finished_at)}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">进程 PID</dt>
              <dd className="font-mono">{run.pid ?? "-"}</dd>
            </div>
          </dl>
          {run.error ? (
            <div className="mt-4">
              <div className="mb-1 text-sm text-muted-foreground">错误信息</div>
              <pre className="whitespace-pre-wrap break-all rounded-md border border-red-500/40 bg-red-500/10 p-3 font-mono text-xs text-red-600 dark:text-red-400">
                {run.error}
              </pre>
            </div>
          ) : null}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>日志{isActive ? "（实时）" : ""}</CardTitle>
        </CardHeader>
        <CardContent>
          {isActive ? (
            <LogViewer
              runId={run.id}
              live
              className="h-[32rem]"
              emptyText="等待日志输出…"
              onDone={load}
            />
          ) : (
            <LogViewer log={run.log ?? ""} className="h-[32rem]" />
          )}
        </CardContent>
      </Card>
    </div>
  );
}