import { type ScheduleNode } from "../../services/api";
import { BookText, FileCode2 } from "lucide-react";
import { shortHash } from "./utils";
import { PYTHON_VERSION_OPTIONS, type NodeForm } from "./state/types";

export function NodeInspector({
  node,
  form,
  busy,
  onChange,
  onSave,
  onDelete,
}: {
  node: ScheduleNode;
  form: NodeForm;
  busy: boolean;
  onChange: (form: NodeForm) => void;
  onSave: () => void;
  onDelete: () => void;
}) {
  return (
    <div className="flex min-h-full flex-col">
      <section className="flex flex-row items-center gap-[10px] border-b border-line p-[14px]">
        <span
          className={`grid h-[31px] w-[31px] flex-none place-items-center rounded-[6px] ${
            node.version.script_type === "notebook"
              ? "bg-[#fff0ee] text-[#e05e53]"
              : "bg-[#eaf3ff] text-[#326fc1]"
          }`}
        >
          {node.version.script_type === "notebook" ? (
            <BookText size={17} />
          ) : (
            <FileCode2 size={17} />
          )}
        </span>
        <div className="flex min-w-0 flex-col gap-[3px]">
          <small className="text-[9px] text-[#96a2af]">节点配置</small>
          <strong className="truncate font-mono text-[11px] text-[#30465d]">
            {node.node_key}
          </strong>
        </div>
      </section>
      <section className="flex flex-col gap-[10px] border-b border-line p-[14px]">
        <h3 className="mb-[2px] text-[13px] text-[#273b50]">稳定版本</h3>
        <div className="flex flex-col gap-[5px] rounded-[6px] border border-[#dae6f2] bg-[#f6faff] p-[9px]">
          <strong className="text-[11px] text-[#35516e]">{node.version.script_name}</strong>
          <span className="w-fit rounded-[8px] bg-[#e3f0fd] px-1.5 py-[2px] text-[9px] font-bold text-[#176ec5]">
            {node.version.version_label}
          </span>
          <small className="truncate font-mono text-[8px] text-[#8190a0]">
            versions_id: {node.versions_id}
          </small>
          <small className="truncate font-mono text-[8px] text-[#8190a0]">
            SHA-256: {shortHash(node.version.content_hash)}
          </small>
        </div>
      </section>
      <section className="flex flex-col gap-[10px] border-b border-line p-[14px]">
        <h3 className="mb-[2px] text-[13px] text-[#273b50]">节点信息</h3>
        <label className="flex flex-col gap-[5px]">
          <span className="text-[10px] font-semibold text-ink-caption">节点名称</span>
          <input
            className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
            value={form.nodeName}
            onChange={(event) => onChange({
              ...form,
              nodeName: event.target.value,
            })}
          />
        </label>
        <div className="grid grid-cols-2 gap-2">
          <label className="flex flex-col gap-[5px]">
            <span className="text-[10px] font-semibold text-ink-caption">超时（秒）</span>
            <input
              type="number"
              min="1"
              className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
              value={form.timeoutSeconds}
              onChange={(event) => onChange({
                ...form,
                timeoutSeconds: event.target.value,
              })}
            />
          </label>
          <label className="flex flex-col gap-[5px]">
            <span className="text-[10px] font-semibold text-ink-caption">重试次数</span>
            <input
              type="number"
              min="0"
              max="10"
              className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
              value={form.retryCount}
              onChange={(event) => onChange({
                ...form,
                retryCount: event.target.value,
              })}
            />
          </label>
        </div>
        <div className="grid grid-cols-2 gap-2">
          <label className="flex flex-col gap-[5px]">
            <span className="text-[10px] font-semibold text-ink-caption">重试间隔（秒）</span>
            <input
              type="number"
              min="0"
              className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
              value={form.retryIntervalSec}
              onChange={(event) => onChange({
                ...form,
                retryIntervalSec: event.target.value,
              })}
            />
          </label>
          <label className="flex flex-col gap-[5px]">
            <span className="text-[10px] font-semibold text-ink-caption">Python 版本</span>
            <select
              className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
              value={form.pythonVersion}
              onChange={(event) => onChange({
                ...form,
                pythonVersion: event.target.value as NodeForm["pythonVersion"],
              })}
            >
              {PYTHON_VERSION_OPTIONS.map((option) => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
            </select>
          </label>
        </div>
      </section>
      <section className="flex flex-col gap-[10px] border-b border-line p-[14px]">
        <h3 className="mb-[2px] text-[13px] text-[#273b50]">运行参数</h3>
        <label className="flex flex-col gap-[5px]">
          <span className="text-[10px] font-semibold text-ink-caption">arguments_json</span>
          <textarea
            className="w-full resize-y rounded-[5px] border border-line p-[7px_8px] font-mono text-[10px] leading-[1.5] !bg-[#f8fafc] !text-[#37516a] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
            rows={5}
            spellCheck={false}
            value={form.argumentsJson}
            onChange={(event) => onChange({
              ...form,
              argumentsJson: event.target.value,
            })}
          />
        </label>
        <label className="flex flex-col gap-[5px]">
          <span className="text-[10px] font-semibold text-ink-caption">env_refs_json</span>
          <textarea
            className="w-full resize-y rounded-[5px] border border-line p-[7px_8px] font-mono text-[10px] leading-[1.5] !bg-[#f8fafc] !text-[#37516a] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
            rows={4}
            spellCheck={false}
            value={form.envRefsJson}
            onChange={(event) => onChange({
              ...form,
              envRefsJson: event.target.value,
            })}
          />
        </label>
      </section>
      <div className="mt-auto grid grid-cols-[1fr_90px] gap-[7px] p-[14px]">
        <button
          className="flex min-h-[34px] cursor-pointer items-center justify-center rounded-[6px] border border-brand bg-brand text-[11px] text-white [font-weight:650] disabled:cursor-not-allowed disabled:opacity-[0.55]"
          type="button"
          disabled={busy}
          onClick={onSave}
        >
          保存节点
        </button>
        <button
          className="flex min-h-[34px] cursor-pointer items-center justify-center rounded-[6px] border border-[#efc6c6] bg-[#fff7f7] text-[11px] text-[#bd4f4f] [font-weight:650] disabled:cursor-not-allowed disabled:opacity-[0.55]"
          type="button"
          disabled={busy}
          onClick={onDelete}
        >
          删除节点
        </button>
      </div>
    </div>
  );
}