/**
 * @file ArtifactAddPanels.tsx
 * @description The Artifacts page's Add dialogs for a skill, a plugin and an
 * uploaded file (server/lib/artifacts.js):
 * - `SkillAddPanel` — three ways to make a skill: **Upload** (one Markdown
 *   file that becomes SKILL.md, several files, a whole folder — picked or
 *   dropped — or a .zip/.skill; an upload holding several skills makes one
 *   artifact each), **Write** (name, description, instructions) and
 *   **Existing** (a folder in the user's ~/.claude/skills or a workspace's
 *   .claude/skills). The user names the skill; the name is previewed as the
 *   folder and `/command` it installs as (`skillSlug`, the server's rule).
 * - `PluginAddPanel` — paste a marketplace link (a git https link, a forge
 *   web link, `owner/repo` or a marketplace.json link), read its plugin list
 *   and tick the ones to add; or type `name@marketplace` by hand, which is
 *   also where a link the server cannot read (ssh, a private repo) ends up.
 * - `FileUploadPanel` — one file from the user's computer (≤ 25 MB).
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useEffect, useMemo, useRef, useState, type DragEvent } from "react";
import { useTranslation } from "react-i18next";
import { FileText, FolderOpen, Package, Sparkles, Upload, X } from "lucide-react";
import { api, type MarketplaceInfo } from "../../lib/api";
import type { Lane } from "../../lib/types";
import { toast } from "../../lib/toast";

const field = "w-full rounded border border-border bg-surface-1 px-2 py-1 text-sm text-fg-primary";
const label = "block text-[11px] font-medium text-fg-secondary";
const hint = "text-[11px] text-fg-muted";

/** The server's skill folder rule (server/lib/artifacts.js `skillSlug`). */
export function skillSlug(text: string): string {
  return text
    .normalize("NFD")
    .replace(/[̀-ͯ]/g, "")
    .replace(/đ/g, "d")
    .replace(/Đ/g, "D")
    .replace(/[^A-Za-z0-9._-]+/g, "-")
    .replace(/^[-._]+|-+$/g, "")
    .slice(0, 100);
}

/** `field:` of a Markdown file's frontmatter, or "". */
export function frontmatterField(text: string, name: string): string {
  const fm = /^?---\r?\n([\s\S]*?)\r?\n---/.exec(text);
  if (!fm) return "";
  const m = new RegExp(`^${name}:\\s*(.*)$`, "m").exec(fm[1] ?? "");
  return (m?.[1] ?? "").trim().replace(/^(["'])(.*)\1$/, "$2");
}

type Picked = { file: File; path: string };

/** A small file's text ("" on failure), only to prefill the name/description. */
function readText(file: File): Promise<string> {
  if (file.size > 1024 * 1024) return Promise.resolve("");
  return new Promise((ok) => {
    const r = new FileReader();
    r.onload = () => ok(typeof r.result === "string" ? r.result : "");
    r.onerror = () => ok("");
    r.readAsText(file);
  });
}

const JUNK = /(^|\/)(__MACOSX|\.DS_Store|Thumbs\.db|desktop\.ini|\.git|node_modules)(\/|$)/;
const isSkillMd = (p: string) => /(^|\/)skill\.md$/i.test(p);
const isArchive = (p: string) => /\.(zip|skill)$/i.test(p);
const isText = (p: string) => /\.(md|markdown|txt)$/i.test(p);

/** Every file under what was dropped, folders walked (webkitGetAsEntry). */
async function droppedFiles(e: DragEvent): Promise<Picked[]> {
  const items = Array.from(e.dataTransfer.items || []);
  const entries = items
    .map((i) => (i.webkitGetAsEntry ? i.webkitGetAsEntry() : null))
    .filter((x): x is FileSystemEntry => !!x);
  if (!entries.length) {
    return Array.from(e.dataTransfer.files).map((file) => ({ file, path: file.name }));
  }
  const out: Picked[] = [];
  const walk = async (entry: FileSystemEntry, prefix: string): Promise<void> => {
    if (entry.isFile) {
      const file = await new Promise<File>((ok, fail) =>
        (entry as FileSystemFileEntry).file(ok, fail)
      );
      out.push({ file, path: prefix + entry.name });
      return;
    }
    const reader = (entry as FileSystemDirectoryEntry).createReader();
    // readEntries answers in batches until an empty one.
    for (;;) {
      const batch = await new Promise<FileSystemEntry[]>((ok, fail) =>
        reader.readEntries(ok, fail)
      );
      if (!batch.length) break;
      for (const child of batch) await walk(child, `${prefix}${entry.name}/`);
    }
  };
  for (const entry of entries) await walk(entry, "");
  return out;
}

/** What an upload will make, guessed the way the server decides it. */
function describeUpload(files: Picked[]): {
  kind: "none" | "single-md" | "archive" | "one" | "many" | "no-skill-md";
  count: number;
  folder: string;
} {
  const real = files.filter((f) => !JUNK.test(f.path));
  if (!real.length) return { kind: "none", count: 0, folder: "" };
  if (real.length === 1 && isArchive(real[0]!.path))
    return { kind: "archive", count: 0, folder: "" };
  const roots = [
    ...new Set(
      real.filter((f) => isSkillMd(f.path)).map((f) => f.path.split("/").slice(0, -1).join("/"))
    ),
  ].sort((a, b) => a.length - b.length);
  const under = (dir: string, p: string) => dir === "" || p === dir || p.startsWith(`${dir}/`);
  const top = roots.filter((r, i) => !roots.slice(0, i).some((o) => under(o, r)));
  if (!top.length) {
    return real.length === 1 && isText(real[0]!.path)
      ? { kind: "single-md", count: 1, folder: "" }
      : { kind: "no-skill-md", count: 0, folder: "" };
  }
  if (top.length === 1) return { kind: "one", count: 1, folder: top[0]!.split("/").pop() ?? "" };
  return { kind: "many", count: top.length, folder: "" };
}

function Tabs<T extends string>({
  value,
  options,
  onChange,
}: {
  value: T;
  options: { id: T; label: string }[];
  onChange: (v: T) => void;
}) {
  return (
    <div role="tablist" className="flex rounded border border-border bg-surface-2 p-0.5">
      {options.map((o) => (
        <button
          key={o.id}
          type="button"
          role="tab"
          aria-selected={value === o.id}
          onClick={() => onChange(o.id)}
          className={`flex-1 rounded px-2 py-1 text-xs ${
            value === o.id
              ? "bg-accent-solid text-white"
              : "text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
          }`}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}

/** The name field with the folder/command it becomes. */
function SkillNameField({
  value,
  onChange,
  disabled,
  required,
}: {
  value: string;
  onChange: (v: string) => void;
  disabled?: boolean;
  required?: boolean;
}) {
  const { t } = useTranslation("artifacts");
  const slug = skillSlug(value);
  return (
    <div className="space-y-0.5">
      <label className={label}>
        {t("skill.name")}
        {required ? " *" : ""}
        <input
          className={`${field} mt-0.5`}
          value={value}
          disabled={disabled}
          placeholder="release-notes"
          onChange={(e) => onChange(e.target.value)}
        />
      </label>
      {value.trim() && (
        <p className={hint} data-testid="skill-slug">
          {slug ? t("skill.slugHint", { slug }) : t("skill.slugBad")}
        </p>
      )}
    </div>
  );
}

// ── Skill ─────────────────────────────────────────────────────────────────

export function SkillAddPanel({
  lanes,
  onAdded,
  onClose,
}: {
  lanes: Lane[];
  onAdded: () => void;
  onClose: () => void;
}) {
  const { t } = useTranslation("artifacts");
  const [mode, setMode] = useState<"upload" | "write" | "existing">("upload");
  const [busy, setBusy] = useState(false);
  const [name, setName] = useState("");
  const [nameTouched, setNameTouched] = useState(false);
  const [description, setDescription] = useState("");
  const [descTouched, setDescTouched] = useState(false);
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [files, setFiles] = useState<Picked[]>([]);
  const [dragging, setDragging] = useState(false);
  const [laneId, setLaneId] = useState<number | null>(null);
  const [skills, setSkills] = useState<{ name: string; from: "user" | "workspace" }[] | null>(null);
  const fileInput = useRef<HTMLInputElement>(null);
  const folderInput = useRef<HTMLInputElement>(null);

  // `webkitdirectory` is not in React's typings.
  useEffect(() => {
    folderInput.current?.setAttribute("webkitdirectory", "");
  }, [mode]);

  useEffect(() => {
    if (mode !== "existing") return;
    api.artifacts
      .skills(laneId ?? undefined)
      .then((r) => setSkills(r.items))
      .catch(() => setSkills([]));
  }, [mode, laneId]);

  const shape = useMemo(() => describeUpload(files), [files]);

  // Fill the name and description from what was picked, unless typed.
  useEffect(() => {
    if (!files.length) return;
    const md =
      files.find((f) => isSkillMd(f.path) && !JUNK.test(f.path)) ??
      (shape.kind === "single-md" ? files.find((f) => !JUNK.test(f.path)) : undefined);
    const stem = (p: string) => (p.split("/").pop() ?? "").replace(/\.[^.]+$/, "");
    let live = true;
    void (async () => {
      const text = md ? await readText(md.file) : "";
      if (!live) return;
      const fmName = frontmatterField(text, "name");
      const fmDesc = frontmatterField(text, "description");
      if (!nameTouched) {
        const guess =
          shape.kind === "single-md"
            ? fmName || stem(md?.path ?? "")
            : shape.kind === "one"
              ? fmName || shape.folder
              : shape.kind === "archive"
                ? stem(files[0]!.path)
                : "";
        setName(guess);
      }
      if (!descTouched && fmDesc) setDescription(fmDesc);
    })();
    return () => {
      live = false;
    };
    // Refill only when the pick changes, never on a typed name.
  }, [files, shape]);

  const pick = (list: FileList | null) => {
    if (!list?.length) return;
    setFiles(
      Array.from(list).map((file) => ({
        file,
        path: (file as File & { webkitRelativePath?: string }).webkitRelativePath || file.name,
      }))
    );
  };

  const run = async (fn: () => Promise<number>) => {
    setBusy(true);
    try {
      const n = await fn();
      toast.success(n > 1 ? t("skill.addedMany", { count: n }) : t("added"));
      onAdded();
      onClose();
    } catch (err) {
      toast.error(err);
    } finally {
      setBusy(false);
    }
  };

  const many = shape.kind === "many";
  const total = files.reduce((n, f) => n + f.file.size, 0);
  const meta = (
    <>
      <label className={label}>
        {t("skill.description")}
        <textarea
          className={`${field} mt-0.5`}
          rows={2}
          value={description}
          disabled={many}
          placeholder={t("skill.descriptionHint")}
          onChange={(e) => {
            setDescTouched(true);
            setDescription(e.target.value);
          }}
        />
      </label>
      <label className={label}>
        {t("form.title")}
        <input
          className={`${field} mt-0.5`}
          value={title}
          disabled={many}
          onChange={(e) => setTitle(e.target.value)}
        />
      </label>
    </>
  );

  return (
    <div className="space-y-3">
      <Tabs
        value={mode}
        onChange={setMode}
        options={[
          { id: "upload", label: t("skill.tab.upload") },
          { id: "write", label: t("skill.tab.write") },
          { id: "existing", label: t("skill.tab.existing") },
        ]}
      />

      {mode === "upload" && (
        <form
          className="space-y-2"
          onSubmit={(e) => {
            e.preventDefault();
            void run(async () => {
              const r = await api.artifacts.uploadSkills(files, {
                name: many ? undefined : name.trim(),
                description: many ? undefined : description.trim(),
                title: many ? undefined : title.trim(),
              });
              return r.items.length;
            });
          }}
        >
          <div
            data-testid="skill-drop"
            onDragOver={(e) => {
              e.preventDefault();
              setDragging(true);
            }}
            onDragLeave={() => setDragging(false)}
            onDrop={(e) => {
              e.preventDefault();
              setDragging(false);
              void droppedFiles(e).then((list) => list.length && setFiles(list));
            }}
            className={`rounded-lg border border-dashed p-4 text-center ${
              dragging ? "border-accent bg-accent/10" : "border-border"
            }`}
          >
            <Upload className="mx-auto mb-1 h-5 w-5 text-fg-muted" />
            <p className="text-xs text-fg-secondary">{t("skill.dropHint")}</p>
            <div className="mt-2 flex flex-wrap justify-center gap-2">
              <button
                type="button"
                className="btn-ghost text-xs"
                onClick={() => fileInput.current?.click()}
              >
                <FileText className="h-3.5 w-3.5" /> {t("skill.pickFiles")}
              </button>
              <button
                type="button"
                className="btn-ghost text-xs"
                onClick={() => folderInput.current?.click()}
              >
                <FolderOpen className="h-3.5 w-3.5" /> {t("skill.pickFolder")}
              </button>
            </div>
            <input
              ref={fileInput}
              type="file"
              multiple
              hidden
              data-testid="skill-files"
              onChange={(e) => {
                pick(e.target.files);
                e.target.value = "";
              }}
            />
            <input
              ref={folderInput}
              type="file"
              multiple
              hidden
              data-testid="skill-folder"
              onChange={(e) => {
                pick(e.target.files);
                e.target.value = "";
              }}
            />
          </div>

          {files.length > 0 && (
            <div className="rounded border border-border bg-surface-2 p-2">
              <div className="mb-1 flex items-center gap-2">
                <p className="flex-1 text-xs text-fg-primary" data-testid="skill-shape">
                  {t(`skill.shape.${shape.kind}`, { count: shape.count })}
                </p>
                <span className={hint}>
                  {t("files", { count: files.length })} · {Math.ceil(total / 1024)} KB
                </span>
                <button
                  type="button"
                  aria-label={t("skill.clear")}
                  className="text-fg-muted hover:text-fg-primary"
                  onClick={() => {
                    setFiles([]);
                    setNameTouched(false);
                    setDescTouched(false);
                  }}
                >
                  <X className="h-3.5 w-3.5" />
                </button>
              </div>
              <ul className="max-h-28 overflow-auto font-mono text-[11px] text-fg-secondary">
                {files.slice(0, 200).map((f) => (
                  <li
                    key={f.path}
                    className={`truncate ${JUNK.test(f.path) ? "line-through opacity-50" : ""}`}
                  >
                    {f.path}
                  </li>
                ))}
              </ul>
            </div>
          )}

          {many ? (
            <p className={hint}>{t("skill.manyHint")}</p>
          ) : (
            <SkillNameField
              value={name}
              onChange={(v) => {
                setNameTouched(true);
                setName(v);
              }}
              required={shape.kind === "single-md"}
            />
          )}
          {meta}
          <div className="flex justify-end">
            <button
              type="submit"
              className="btn-primary text-sm"
              disabled={
                busy ||
                !files.length ||
                shape.kind === "no-skill-md" ||
                (shape.kind === "single-md" && !skillSlug(name))
              }
            >
              {busy ? t("skill.uploading") : t("form.save")}
            </button>
          </div>
        </form>
      )}

      {mode === "write" && (
        <form
          className="space-y-2"
          onSubmit={(e) => {
            e.preventDefault();
            void run(async () => {
              await api.artifacts.writeSkill({
                name: name.trim(),
                description: description.trim(),
                content,
                title: title.trim() || undefined,
              });
              return 1;
            });
          }}
        >
          <SkillNameField value={name} onChange={setName} required />
          <label className={label}>
            {t("skill.description")} *
            <textarea
              className={`${field} mt-0.5`}
              rows={2}
              value={description}
              placeholder={t("skill.descriptionHint")}
              onChange={(e) => setDescription(e.target.value)}
            />
          </label>
          <label className={label}>
            {t("skill.content")} *
            <textarea
              className={`${field} mt-0.5 font-mono text-xs`}
              rows={10}
              value={content}
              placeholder={t("skill.contentHint")}
              onChange={(e) => setContent(e.target.value)}
            />
          </label>
          <label className={label}>
            {t("form.title")}
            <input
              className={`${field} mt-0.5`}
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </label>
          <div className="flex justify-end">
            <button
              type="submit"
              className="btn-primary text-sm"
              disabled={
                busy ||
                !skillSlug(name) ||
                !content.trim() ||
                (!description.trim() && !frontmatterField(content, "description"))
              }
            >
              {t("form.save")}
            </button>
          </div>
        </form>
      )}

      {mode === "existing" && (
        <div className="space-y-2">
          <select
            className={field}
            aria-label={t("form.workspace")}
            value={laneId ?? ""}
            onChange={(e) => setLaneId(e.target.value ? Number(e.target.value) : null)}
          >
            <option value="">{t("form.pickWorkspace")}</option>
            {lanes.map((l) => (
              <option key={l.id} value={l.id}>
                {l.title || l.cwd}
              </option>
            ))}
          </select>
          {skills && skills.length === 0 && <p className={hint}>{t("form.noSkills")}</p>}
          {skills && skills.length > 0 && (
            <ul className="max-h-72 space-y-0.5 overflow-auto">
              {skills.map((s) => (
                <li key={`${s.from}:${s.name}`} className="flex items-center gap-2 text-xs">
                  <Sparkles className="h-3 w-3 shrink-0 text-fg-muted" />
                  <span className="min-w-0 flex-1 truncate text-fg-secondary">{s.name}</span>
                  <span className="text-fg-muted">
                    {t(s.from === "user" ? "form.fromUser" : "form.fromWorkspace")}
                  </span>
                  <button
                    type="button"
                    className="btn-ghost text-xs"
                    disabled={busy}
                    onClick={() =>
                      void run(async () => {
                        await api.artifacts.addSkill({
                          name: s.name,
                          ...(s.from === "workspace" && laneId ? { laneId } : {}),
                          title: title || undefined,
                          description: description || undefined,
                        });
                        return 1;
                      })
                    }
                  >
                    {t("form.save")}
                  </button>
                </li>
              ))}
            </ul>
          )}
          <input
            className={field}
            placeholder={t("form.title")}
            aria-label={t("form.title")}
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
          <textarea
            className={field}
            rows={2}
            placeholder={t("form.description")}
            aria-label={t("form.description")}
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
        </div>
      )}
    </div>
  );
}

// ── Plugin ────────────────────────────────────────────────────────────────

const MANUAL_CODES = new Set(["ENEEDLOGIN", "ESSHMARKET", "ENOTMARKET", "EMARKETFETCH"]);

export function PluginAddPanel({ onAdded, onClose }: { onAdded: () => void; onClose: () => void }) {
  const { t } = useTranslation("artifacts");
  const [link, setLink] = useState("");
  const [busy, setBusy] = useState(false);
  const [info, setInfo] = useState<MarketplaceInfo | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [picked, setPicked] = useState<Set<string>>(new Set());
  const [have, setHave] = useState<Set<string>>(new Set());
  const [manual, setManual] = useState(false);
  const [key, setKey] = useState("");
  const [market, setMarket] = useState("");
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");

  useEffect(() => {
    api.artifacts
      .list({ scope: "mine", kind: "plugin" })
      .then((r) => setHave(new Set(r.items.map((i) => i.source ?? ""))))
      .catch(() => setHave(new Set()));
  }, []);

  const read = async () => {
    setBusy(true);
    setError(null);
    setInfo(null);
    try {
      const r = await api.artifacts.inspectMarket(link.trim());
      setInfo(r);
      setPicked(
        new Set(
          r.plugins
            .filter((p) => !have.has(p.key))
            .slice(0, 1)
            .map((p) => p.key)
        )
      );
      setMarket(r.market);
    } catch (err) {
      const e = err as Error & { code?: string };
      setError(e.message);
      if (MANUAL_CODES.has(e.code ?? "")) {
        setManual(true);
        setMarket(link.trim());
      }
    } finally {
      setBusy(false);
    }
  };

  const addPicked = async () => {
    if (!info) return;
    setBusy(true);
    let n = 0;
    try {
      for (const p of info.plugins.filter((x) => picked.has(x.key))) {
        await api.artifacts.addPlugin({
          key: p.key,
          market: info.market,
          title: p.name,
          description: p.description,
        });
        n++;
      }
      toast.success(t("plugin.addedMany", { count: n }));
      onAdded();
      onClose();
    } catch (err) {
      toast.error(err);
      if (n) onAdded();
    } finally {
      setBusy(false);
    }
  };

  const toggle = (k: string) =>
    setPicked((s) => {
      const next = new Set(s);
      if (next.has(k)) next.delete(k);
      else next.add(k);
      return next;
    });

  return (
    <div className="space-y-3">
      <form
        className="space-y-1"
        onSubmit={(e) => {
          e.preventDefault();
          if (link.trim()) void read();
        }}
      >
        <label className={label}>
          {t("plugin.link")}
          <div className="mt-0.5 flex gap-2">
            <input
              className={field}
              value={link}
              autoFocus
              placeholder="https://git.example.com/org/claude-skills.git"
              onChange={(e) => setLink(e.target.value)}
            />
            <button
              type="submit"
              className="btn-primary shrink-0 text-sm"
              disabled={busy || !link.trim()}
            >
              {busy && !info ? t("plugin.reading") : t("plugin.read")}
            </button>
          </div>
        </label>
        <p className={hint}>{t("plugin.linkHint")}</p>
      </form>

      {error && (
        <p
          role="alert"
          className="rounded border border-status-danger/40 px-2 py-1 text-xs text-status-danger"
        >
          {error}
        </p>
      )}

      {info && (
        <div className="space-y-2" data-testid="market-plugins">
          <div>
            <p className="text-sm font-medium text-fg-primary">
              <Package className="mr-1 inline h-4 w-4 text-fg-muted" />
              {info.name}
            </p>
            {info.description && <p className={hint}>{info.description}</p>}
          </div>
          {info.plugins.length === 0 ? (
            <p className={hint}>{t("plugin.none")}</p>
          ) : (
            <>
              <label className="flex items-center gap-2 text-xs text-fg-secondary">
                <input
                  type="checkbox"
                  checked={picked.size === info.plugins.length}
                  onChange={(e) =>
                    setPicked(new Set(e.target.checked ? info.plugins.map((p) => p.key) : []))
                  }
                />
                {t("plugin.all")}
              </label>
              <ul className="max-h-64 space-y-1 overflow-auto">
                {info.plugins.map((p) => (
                  <li key={p.key}>
                    <label className="flex cursor-pointer items-start gap-2 rounded px-1 py-1 hover:bg-surface-2">
                      <input
                        type="checkbox"
                        className="mt-0.5"
                        checked={picked.has(p.key)}
                        onChange={() => toggle(p.key)}
                      />
                      <span className="min-w-0 flex-1">
                        <span className="text-xs font-medium text-fg-primary">{p.name}</span>
                        <span className="ml-1.5 font-mono text-[10px] text-fg-muted">{p.key}</span>
                        {p.version && (
                          <span className="ml-1.5 text-[10px] text-fg-muted">v{p.version}</span>
                        )}
                        {have.has(p.key) && (
                          <span className="ml-1.5 rounded bg-surface-3 px-1 text-[10px] text-fg-secondary">
                            {t("plugin.have")}
                          </span>
                        )}
                        {p.description && (
                          <span className="block text-[11px] text-fg-muted">{p.description}</span>
                        )}
                      </span>
                    </label>
                  </li>
                ))}
              </ul>
              <div className="flex justify-end">
                <button
                  type="button"
                  className="btn-primary text-sm"
                  disabled={busy || picked.size === 0}
                  onClick={() => void addPicked()}
                >
                  {t("plugin.addPicked", { count: picked.size })}
                </button>
              </div>
            </>
          )}
        </div>
      )}

      <div className="border-t border-border-light pt-2">
        <button
          type="button"
          className="text-xs text-accent hover:underline"
          aria-expanded={manual}
          onClick={() => setManual((v) => !v)}
        >
          {t("plugin.manual")}
        </button>
        {manual && (
          <form
            className="mt-2 space-y-2"
            onSubmit={async (e) => {
              e.preventDefault();
              setBusy(true);
              try {
                await api.artifacts.addPlugin({
                  key: key.trim(),
                  market: market.trim(),
                  title,
                  description,
                });
                toast.success(t("added"));
                onAdded();
                onClose();
              } catch (err) {
                toast.error(err);
              } finally {
                setBusy(false);
              }
            }}
          >
            <input
              className={field}
              placeholder="my-plugin@my-marketplace"
              aria-label={t("form.pluginKey")}
              value={key}
              onChange={(e) => setKey(e.target.value)}
            />
            <input
              className={field}
              placeholder="owner/repo · https://… · git@host:org/repo.git"
              aria-label={t("form.market")}
              value={market}
              onChange={(e) => setMarket(e.target.value)}
            />
            <input
              className={field}
              placeholder={t("form.title")}
              aria-label={t("form.title")}
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
            <textarea
              className={field}
              rows={2}
              placeholder={t("form.description")}
              aria-label={t("form.description")}
              value={description}
              onChange={(e) => setDescription(e.target.value)}
            />
            <div className="flex justify-end">
              <button
                type="submit"
                className="btn-primary text-sm"
                disabled={busy || !key.trim() || !market.trim()}
              >
                {t("form.save")}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

// ── File upload ───────────────────────────────────────────────────────────

export function FileUploadPanel({ onAdded }: { onAdded: () => void }) {
  const { t } = useTranslation("artifacts");
  const [file, setFile] = useState<File | null>(null);
  const [title, setTitle] = useState("");
  const [busy, setBusy] = useState(false);
  const tooBig = !!file && file.size > 25 * 1024 * 1024;
  return (
    <form
      className="space-y-2"
      onSubmit={async (e) => {
        e.preventDefault();
        if (!file) return;
        setBusy(true);
        try {
          await api.artifacts.uploadFile(file, { title: title.trim() || undefined });
          toast.success(t("added"));
          setFile(null);
          setTitle("");
          onAdded();
        } catch (err) {
          toast.error(err);
        } finally {
          setBusy(false);
        }
      }}
    >
      <label className={label}>
        {t("file.fromComputer")}
        <input
          type="file"
          data-testid="file-upload"
          className="mt-0.5 block w-full text-xs text-fg-secondary"
          onChange={(e) => setFile(e.target.files?.[0] ?? null)}
        />
      </label>
      {tooBig && <p className="text-xs text-status-danger">{t("file.tooBig")}</p>}
      <div className="flex gap-2">
        <input
          className={field}
          placeholder={t("form.title")}
          aria-label={t("form.title")}
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <button
          type="submit"
          className="btn-primary shrink-0 text-sm"
          disabled={busy || !file || tooBig}
        >
          <Upload className="h-3.5 w-3.5" /> {t("file.upload")}
        </button>
      </div>
    </form>
  );
}