import { useCallback, useEffect, useRef, useState } from "react";
import { Archive, BarChart3, ChevronRight, LoaderCircle, RefreshCw } from "lucide-react";
import type { WorkbenchAccess } from "../api/request-context";
import { Button } from "@/shared/ui/button";
import { Disclosure } from "@/shared/ui/disclosure";
import { StatusBadge, type StatusTone } from "@/shared/ui/status";
import { fetchWorkbenchAnalysisRun } from "../api/workbench-runtime-client";
import {
  fetchWorkbenchAnalysisHistory,
  type WorkbenchAnalysisHistoryItem
} from "../api/workbench-analysis-history-client";
import type { AnalysisArtifact } from "../workspace/workspace-model";
import {
  WorkbenchEmptyState,
  WorkbenchNotice,
  WorkbenchSection
} from "./workbench-panel-ui";

const HISTORY_PAGE_SIZE = 10;

export function AnalysisHistorySection({
  getAccessToken,
  onOpenArtifact
}: {
  getAccessToken?: WorkbenchAccess;
  onOpenArtifact: (artifact: AnalysisArtifact) => void;
}) {
  const [items, setItems] = useState<WorkbenchAnalysisHistoryItem[]>([]);
  const [nextOffset, setNextOffset] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [openingRunId, setOpeningRunId] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const loadedRef = useRef(false);
  const listControllerRef = useRef<AbortController | null>(null);
  const artifactControllerRef = useRef<AbortController | null>(null);

  useEffect(() => () => {
    listControllerRef.current?.abort();
    artifactControllerRef.current?.abort();
  }, []);

  const load = useCallback(async (more = false) => {
    if (loading) return;
    const offset = more ? nextOffset : 0;
    if (more && offset === null) return;
    listControllerRef.current?.abort();
    const controller = new AbortController();
    listControllerRef.current = controller;
    setLoading(true);
    setError(null);
    try {
      const page = await fetchWorkbenchAnalysisHistory({
        limit: HISTORY_PAGE_SIZE,
        offset: offset ?? 0,
        getAccessToken,
        signal: controller.signal
      });
      if (controller.signal.aborted) return;
      setItems((current) => more
        ? [...current, ...page.items.filter(
            (item) => !current.some((existing) => existing.runId === item.runId)
          )]
        : page.items);
      setNextOffset(page.nextOffset);
      loadedRef.current = true;
    } catch (nextError) {
      if (!controller.signal.aborted) {
        setError(errorMessage(nextError));
      }
    } finally {
      if (!controller.signal.aborted) setLoading(false);
    }
  }, [getAccessToken, loading, nextOffset]);

  const openArtifact = async (item: WorkbenchAnalysisHistoryItem) => {
    if (openingRunId) return;
    artifactControllerRef.current?.abort();
    const controller = new AbortController();
    artifactControllerRef.current = controller;
    setOpeningRunId(item.runId);
    setError(null);
    try {
      const projection = await fetchWorkbenchAnalysisRun(
        item.runId,
        getAccessToken,
        controller.signal
      );
      if (!controller.signal.aborted) onOpenArtifact(projection.artifact);
    } catch (nextError) {
      if (!controller.signal.aborted) setError(errorMessage(nextError));
    } finally {
      if (!controller.signal.aborted) setOpeningRunId(null);
    }
  };

  return (
    <WorkbenchSection
      className="mb-3"
      title="项目分析成果"
      description="按需读取 BizDB 历史；打开成果不会重新执行分析。"
      icon={<Archive size={15} />}
      tone="info"
      meta={loadedRef.current ? (
        <span className="rounded-md bg-[var(--surface-control)] px-2 py-0.5 text-[11px] font-medium tabular-nums text-slate-600">
          已加载 {items.length} 项
        </span>
      ) : null}
    >
      <Disclosure
        label="浏览项目分析成果"
        onToggle={(event) => {
          if (event.currentTarget.open && !loadedRef.current && !loading) void load();
        }}
      >
        <div className="mt-1 border-t border-[var(--surface-divider)] pt-3">
          {error ? <WorkbenchNotice role="alert" tone="danger" className="mb-3">{error}</WorkbenchNotice> : null}
          {loading && !items.length ? (
            <div role="status" className="flex min-h-20 items-center justify-center gap-2 text-xs text-[var(--ink-muted)]">
              <LoaderCircle size={15} className="animate-spin" />正在读取分析成果历史
            </div>
          ) : null}
          {!loading && loadedRef.current && !items.length ? (
            <WorkbenchEmptyState
              icon={<BarChart3 size={15} />}
              title="暂无持久化分析成果"
              description="新的分析运行会在保存到当前项目 BizDB 后出现在这里。"
            />
          ) : null}
          {items.length ? (
            <ol className="space-y-2" aria-label="项目分析成果列表">
              {items.map((item) => (
                <li key={item.runId}>
                  <button
                    type="button"
                    aria-label={`打开分析成果：${item.name}`}
                    disabled={Boolean(openingRunId)}
                    onClick={() => void openArtifact(item)}
                    className="group flex min-h-[68px] w-full items-center gap-3 rounded-xl border border-[var(--surface-divider)] bg-[var(--surface-reading)] px-3 py-2.5 text-left shadow-xs transition-[border-color,background-color,scale] duration-150 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)] [@media(hover:hover)]:hover:border-[var(--surface-border)] [@media(hover:hover)]:hover:bg-[var(--action-soft)]/55 active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 disabled:cursor-wait disabled:opacity-60"
                  >
                    <span className="grid size-8 shrink-0 place-items-center rounded-lg bg-[var(--action-soft)] text-[var(--action-blue-hover)]">
                      {openingRunId === item.runId
                        ? <LoaderCircle size={15} className="animate-spin" />
                        : <BarChart3 size={15} />}
                    </span>
                    <span className="min-w-0 flex-1">
                      <span className="flex min-w-0 items-center gap-2">
                        <span className="truncate text-xs font-semibold text-slate-900">{item.name}</span>
                        <StatusBadge tone={statusTone(item.status)}>{item.statusLabel}</StatusBadge>
                      </span>
                      <span className="mt-1 block truncate text-[11px] leading-4 text-[var(--ink-muted)]">
                        {item.runTypeLabel} · {formatHistoryTime(item.createdAt)} · {item.createdBy}
                      </span>
                      <span className="mt-0.5 block text-[11px] leading-4 text-[var(--ink-muted)]">
                        {item.hasResults ? "已有持久化结果" : "仅有运行记录"}
                      </span>
                    </span>
                    <ChevronRight size={14} className="shrink-0 text-[var(--ink-muted)] transition-colors group-hover:text-[var(--action-blue-hover)]" />
                  </button>
                </li>
              ))}
            </ol>
          ) : null}
          <div className="mt-3 flex justify-end gap-2">
            {error && !items.length ? (
              <Button type="button" size="sm" variant="outline" disabled={loading} onClick={() => void load()}>
                <RefreshCw size={14} />重新读取
              </Button>
            ) : null}
            {nextOffset !== null ? (
              <Button type="button" size="sm" variant="ghost" disabled={loading || Boolean(openingRunId)} onClick={() => void load(true)}>
                {loading ? <LoaderCircle size={14} className="animate-spin" /> : null}
                加载更多成果
              </Button>
            ) : null}
          </div>
        </div>
      </Disclosure>
    </WorkbenchSection>
  );
}

function statusTone(status: string): StatusTone {
  if (["completed", "succeeded"].includes(status)) return "success";
  if (["failed", "error"].includes(status)) return "danger";
  if (["running"].includes(status)) return "info";
  if (["queued", "pending"].includes(status)) return "warning";
  return "neutral";
}

function formatHistoryTime(value: string) {
  return new Intl.DateTimeFormat("zh-CN", {
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    hour12: false
  }).format(new Date(value));
}

function errorMessage(error: unknown) {
  return error instanceof Error ? error.message : "分析成果历史请求失败";
}