import { useState, type FormEvent } from "react";
import { ApiError } from "../../api/client.ts";
import { useUpdateProject } from "../../api/queries.ts";
import { useQueryClient } from "@tanstack/react-query";
import { useTrackModuleBatch } from "../../shell/activity/activity.ts";
import { Button, Field, Panel, TextInput } from "../../ui/index.ts";
import { wikiQk } from "./api/queries.ts";

// проект без корня вики: ввод кода или ссылки, «Привязать» — PATCH /projects/{метка}; 422 — текст у поля
export function RootForm({ project }: { project: string }) {
  const [value, setValue] = useState("");
  const qc = useQueryClient();
  const update = useUpdateProject();
  const track = useTrackModuleBatch();
  const err = update.error;
  const text = err ? (err instanceof ApiError ? err.detail ?? err.message : err.message) : null;
  const submit = (e: FormEvent) => {
    e.preventDefault();
    if (!value.trim()) return;
    update.mutate({ label: project, fields: { wiki_root: value.trim() } }, {
      onSuccess: (r) => {
        void qc.invalidateQueries({ queryKey: wikiQk.project(project) });
        for (const b of r.batches ?? []) if (b.module === "wiki") track("wiki", b.id);   // пакет привязки — модулю wiki
      },
    });
  };
  return (
    <Panel padding="lg" className="wiki-root">
      <form className="ui-form" onSubmit={submit}>
        <h2 className="wiki-root__title">У проекта нет вики</h2>
        <p className="wiki-root__text">Укажите корневую страницу вики проекта в Eva: хаб скопирует её дерево.</p>
        <Field label="Корень вики (DOC-… или ссылка)" hint="например DOC-001234" error={text}>
          <TextInput value={value} onChange={(e) => setValue(e.target.value)} autoComplete="off" />
        </Field>
        <div className="ui-actions">
          <Button variant="primary" type="submit" loading={update.isPending} disabled={!value.trim()}>Привязать</Button>
        </div>
      </form>
    </Panel>
  );
}