import { useEffect, useMemo, useState } from "react";
import catalogJson from "./rtcp-program-manifest.json";
import { DraggableDialog } from "./DraggableDialog";

export type RtcpProgram = {
  id: string;
  group: string;
  label: string;
  path: string;
  coordinates: string[];
  role: "main" | "support" | "reference";
  features: string[];
  note: string;
};

type Catalog = {
  schema: string;
  total: number;
  groups: Array<{ id: string; label: string; count: number }>;
  programs: RtcpProgram[];
};

export const RTCP_PROGRAM_CATALOG = catalogJson as Catalog;

const roleLabel = (role: RtcpProgram["role"]) => role === "main" ? "主程序" : role === "support" ? "支持/子程序" : "参考程序";
const assetUrl = (path: string) => `${import.meta.env.BASE_URL}${path}`;
const machineLabel = (coordinates: string) => coordinates === "XYZAC" ? "AC（XYZAC）" : coordinates === "XYZBC" ? "BC（XYZBC）" : coordinates;

export function RtcpProgramLibrary({ coordinates, disabled, disabledReason, onLoad }: {
  coordinates: string;
  disabled: boolean;
  disabledReason: string;
  onLoad: (program: RtcpProgram, source: string) => Promise<void>;
}) {
  const defaultProgram = RTCP_PROGRAM_CATALOG.programs.find((program) => program.role === "main" && program.coordinates.includes(coordinates)) ?? RTCP_PROGRAM_CATALOG.programs[0];
  const [open, setOpen] = useState(false);
  const [scope, setScope] = useState<"machine" | "all">("machine");
  const [selectedId, setSelectedId] = useState(defaultProgram.id);
  const [source, setSource] = useState("");
  const [sourcePath, setSourcePath] = useState("");
  const [message, setMessage] = useState("");
  const [pending, setPending] = useState(false);
  const selected = RTCP_PROGRAM_CATALOG.programs.find((program) => program.id === selectedId) ?? defaultProgram;
  const compatible = selected.role === "main" && selected.coordinates.includes(coordinates);
  const machinePrograms = useMemo(() => RTCP_PROGRAM_CATALOG.programs.filter((program) => program.coordinates.includes(coordinates)), [coordinates]);
  const visiblePrograms = scope === "machine" ? machinePrograms : RTCP_PROGRAM_CATALOG.programs;
  const grouped = RTCP_PROGRAM_CATALOG.groups.map((group) => ({ ...group, programs: visiblePrograms.filter((program) => program.group === group.id) })).filter((group) => group.programs.length > 0);
  useEffect(() => {
    setScope("machine"); setSelectedId(defaultProgram.id); setSource(""); setSourcePath(""); setMessage("");
  }, [coordinates, defaultProgram.id]);

  const readSource = async () => {
    if (sourcePath === selected.path && source) return source;
    const response = await fetch(assetUrl(selected.path));
    if (!response.ok) throw new Error(`程序资源读取失败: HTTP ${response.status}`);
    const text = (await response.text()).replace(/\r\n/g, "\n").replace(/\r/g, "\n");
    if (!text.trim()) throw new Error("程序资源为空");
    setSource(text);
    setSourcePath(selected.path);
    return text;
  };
  const run = async (action: "source" | "load") => {
    setPending(true); setMessage(action === "source" ? "正在读取 LinuxCNC 源程序…" : "正在交给 LinuxCNC WASM 解析…");
    try {
      const text = await readSource();
      if (action === "load") { await onLoad(selected, text); setMessage("程序已加载到 LinuxCNC WASM 控制器"); }
      else setMessage(`已读取 ${text.split("\n").length} 行`);
    } catch (error) { setMessage(error instanceof Error ? error.message : String(error)); }
    finally { setPending(false); }
  };
  const compatibility = compatible
    ? `${coordinates} 当前机型可加载；运动由 LinuxCNC WASM 解释器与运动学执行。`
    : selected.role !== "main"
      ? `${roleLabel(selected.role)}用于 remap、O-call 或算法查阅，不作为独立主程序加载。`
      : `需要 ${selected.coordinates.join("/")} 运动学；当前机型为 ${coordinates}。`;

  return <section className="rtcp-program-library" aria-label={`${machineLabel(coordinates)} RTCP 程序库`} data-rtcp-machine-family={coordinates === "XYZAC" ? "AC" : coordinates === "XYZBC" ? "BC" : coordinates}>
    <button type="button" data-axis-control="workspace-rtcp-programs" aria-haspopup="dialog" onClick={() => setOpen(true)}>{machineLabel(coordinates)} RTCP 程序 ({machinePrograms.length})</button>
    <DraggableDialog open={open} title={`${machineLabel(coordinates)} LinuxCNC RTCP 程序库`} className="rtcp-program-dialog" onClose={() => setOpen(false)}>
      <header className="rtcp-program-summary"><strong>{machineLabel(coordinates)} 程序</strong><span>当前分类：{machinePrograms.length} 个</span><span>可直接加载：{machinePrograms.filter((program) => program.role === "main").length}</span><span>完整源程序：{RTCP_PROGRAM_CATALOG.total} 个</span></header>
      <label className="rtcp-program-scope">显示范围<select data-axis-control="rtcp-program-scope" value={scope} onChange={(event) => { const next = event.target.value as "machine" | "all"; setScope(next); if (next === "machine" && !selected.coordinates.includes(coordinates)) setSelectedId(defaultProgram.id); setSource(""); setSourcePath(""); setMessage(""); }}><option value="machine">当前 {machineLabel(coordinates)} 机床</option><option value="all">全部 32 个源程序</option></select></label>
      <label className="rtcp-program-select">程序<select data-axis-control="rtcp-program-select" value={selected.id} onChange={(event) => { setSelectedId(event.target.value); setSource(""); setSourcePath(""); setMessage(""); }}>
        {grouped.map((group) => <optgroup key={group.id} label={`${group.label} (${group.programs.length})`}>{group.programs.map((program) => <option key={program.id} value={program.id}>{program.label} · {roleLabel(program.role)}</option>)}</optgroup>)}
      </select></label>
      <dl className="rtcp-program-meta"><div><dt>类型</dt><dd>{roleLabel(selected.role)}</dd></div><div><dt>机型</dt><dd>{selected.coordinates.join(" / ")}</dd></div><div><dt>特点</dt><dd>{selected.features.join(" · ")}</dd></div><div><dt>源路径</dt><dd><code>{selected.path}</code></dd></div></dl>
      <p>{selected.note}</p><p className={compatible ? "rtcp-compatible" : "rtcp-incompatible"}>{compatibility}</p>
      <div className="rtcp-program-actions">
        <button type="button" data-axis-control="rtcp-program-source" disabled={pending} onClick={() => void run("source")}>查看源程序</button>
        <button type="button" data-axis-control="rtcp-program-load" disabled={pending || disabled || !compatible} title={disabled ? disabledReason : !compatible ? compatibility : undefined} onClick={() => void run("load")}>加载到控制器</button>
        <a data-axis-control="rtcp-program-download" href={assetUrl(selected.path)} download={selected.path.split("/").at(-1)}>下载 .ngc</a>
      </div>
      <output role="status">{message}</output>
      {source && sourcePath === selected.path && <textarea className="rtcp-program-source" readOnly value={source} aria-label={`${selected.label} 源程序`} spellCheck={false} />}
    </DraggableDialog>
  </section>;
}