import { useState } from "react";
import { adminModerate } from "~/fns/admin";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { Callout, ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";
import { cn } from "~/utils/cn";

const INPUT = "rounded-md border border-kumo-line bg-kumo-base px-2 py-1 text-kumo-strong";

/** Hide or restore one repository, issue or comment by its URL. */
export function ModerateByUrl() {
  const [url, setUrl] = useState("");
  const [reason, setReason] = useState("");
  const [done, setDone] = useState<string | null>(null);
  const moderate = useAction(adminModerate);
  const submit = async (hidden: boolean) => {
    if (!url.trim()) return;
    if (hidden && !window.confirm(`Hide or take down ${url.trim()}?`)) return;
    const result = await moderate.run({ data: { url: url.trim(), hidden, reason: reason.trim() || null } });
    if (result) {
      setDone(`${hidden ? "Hid" : "Restored"} ${result.target.kind} ${result.target.id}`);
      setUrl("");
      setReason("");
    }
  };
  return (
    <Panel title="Moderate by URL">
      <div className="space-y-3 p-4 text-sm">
        <ErrorBanner message={moderate.error} />
        {done && (
          <Callout tone="success" as="output">
            {done}
          </Callout>
        )}
        <form
          className="flex flex-wrap items-center gap-2"
          onSubmit={(event) => {
            event.preventDefault();
            void submit(true);
          }}
        >
          <input
            aria-label="URL"
            className={cn(INPUT, "min-w-80 flex-1")}
            placeholder="repository, issue or comment URL"
            value={url}
            onChange={(event) => setUrl(event.target.value)}
          />
          <input
            aria-label="Reason"
            className={INPUT}
            placeholder="reason"
            value={reason}
            onChange={(event) => setReason(event.target.value)}
          />
          <Button size="sm" variant="danger" type="submit" pending={moderate.pending}>
            Hide / take down
          </Button>
          <Button size="sm" pending={moderate.pending} onClick={() => void submit(false)}>
            Restore
          </Button>
        </form>
      </div>
    </Panel>
  );
}