import { type ScheduleArtifact } from "../../services/api";
import Icon from "../../components/common/Icon";
import { shortHash } from "./utils";

export function ArtifactList({
  artifacts,
  keyword,
  onDrop,
  onDoubleClick,
  onContextMenu,
  onKeywordChange,
}: {
  artifacts: ScheduleArtifact[];
  keyword: string;
  onDrop: (artifact: ScheduleArtifact, x: number, y: number) => void;
  onDoubleClick: (artifact: ScheduleArtifact) => void;
  onContextMenu: (event: React.MouseEvent, artifact: ScheduleArtifact) => void;
  onKeywordChange: (keyword: string) => void;
}) {
  const filtered = keyword.trim()
    ? artifacts.filter((item) => (
        item.script_name.toLowerCase().includes(keyword.trim().toLowerCase())
        || item.version_label.toLowerCase().includes(keyword.trim().toLowerCase())
      ))
    : artifacts;

  return (
    <section className="schedule-panel schedule-artifacts-panel">
      <div className="schedule-panel__title">
        <div><strong>稳定版本脚本</strong><span>{artifacts.length}</span></div>
      </div>
      <label className="schedule-search">
        <Icon name="search" size={15} />
        <input
          value={keyword}
          placeholder="搜索稳定版本"
          onChange={(event) => onKeywordChange(event.target.value)}
        />
      </label>
      <p className="artifact-tip">拖动卡片到画布，节点将保存 versions_id</p>
      <div className="artifact-list">
        {filtered.length ? filtered.map((artifact) => (
          <div
            className="artifact-card"
            draggable
            key={artifact.versions_id}
            onDragStart={(event) => {
              event.dataTransfer.effectAllowed = "copy";
              event.dataTransfer.setData(
                "application/x-model-platform-version",
                artifact.versions_id,
              );
              event.dataTransfer.setData("text/plain", artifact.versions_id);
            }}
            onContextMenu={(event) => onContextMenu(event, artifact)}
            onDoubleClick={() => onDoubleClick(artifact)}
          >
            <span className={`artifact-card__icon artifact-card__icon--${artifact.script_type}`}>
              <Icon
                name={artifact.script_type === "notebook" ? "notebook" : "python"}
                size={17}
              />
            </span>
            <span>
              <strong>{artifact.script_name}</strong>
              <small>
                {artifact.version_label} · {shortHash(artifact.content_hash)}
              </small>
            </span>
          </div>
        )) : (
          <p className="schedule-empty">
            暂无稳定版本，请先在"构建脚本"中发布
          </p>
        )}
      </div>
    </section>
  );
}