import { useState } from "react";
import { addProjectField, addProjectItem, deleteProjectField } from "~/fns/projects";
import { useAction } from "~/hooks/use-action";
import type { ProjectData } from "./ItemTitle";
import { Button } from "~/ui/Button";
import { InlineSelect, inputClass } from "~/ui/Field";
import { cn } from "~/utils/cn";

const KINDS = [
  { value: "text", label: "Text" },
  { value: "number", label: "Number" },
  { value: "date", label: "Date" },
  { value: "single_select", label: "Single select" },
] as const;

type Kind = (typeof KINDS)[number]["value"];

function isKind(value: string): value is Kind {
  return KINDS.some((kind) => kind.value === value);
}

function FieldEditor({ data }: { data: ProjectData }) {
  const add = useAction(addProjectField);
  const remove = useAction(deleteProjectField);
  const [kind, setKind] = useState<Kind>("text");
  const ref = { owner: data.project.owner, number: data.project.number };
  return (
    <div className="space-y-3 rounded-md border border-kumo-hairline p-3">
      <ul className="flex flex-wrap gap-2">
        {data.fields.map((field) => (
          <li
            key={field.id}
            className="flex items-center gap-1 rounded-full border border-kumo-line px-2 py-0.5 text-xs"
          >
            {field.name} <span className="text-kumo-inactive">{field.kind.replace("_", " ")}</span>
            <button
              type="button"
              aria-label={`Delete field ${field.name}`}
              className="text-kumo-inactive hover:text-kumo-danger"
              onClick={() =>
                window.confirm(`Delete field ${field.name} and its values?`) &&
                remove.run({ data: { ...ref, fieldId: field.id } })
              }
            >
              ×
            </button>
          </li>
        ))}
      </ul>
      <form
        className="flex flex-wrap gap-2"
        onSubmit={async (event) => {
          event.preventDefault();
          const element = event.currentTarget;
          const form = new FormData(element);
          const options = String(form.get("options") ?? "")
            .split(",")
            .map((option) => option.trim())
            .filter(Boolean);
          if (await add.run({ data: { ...ref, name: String(form.get("name") ?? ""), kind, options } })) element.reset();
        }}
      >
        <input
          name="name"
          required
          aria-label="Field name"
          placeholder="Field name"
          className={cn(inputClass, "h-8 w-40")}
        />
        <InlineSelect
          label="Field type"
          value={kind}
          onValueChange={(value) => isKind(value) && setKind(value)}
          className="w-36"
          options={KINDS}
        />
        {kind === "single_select" && (
          <input
            name="options"
            aria-label="Options"
            placeholder="Options, comma separated"
            className={cn(inputClass, "h-8 w-64")}
          />
        )}
        <Button size="sm" type="submit" pending={add.pending}>
          Add field
        </Button>
      </form>
      {(add.error ?? remove.error) && <p className="text-xs text-kumo-danger">{add.error ?? remove.error}</p>}
    </div>
  );
}

/** Add items (an `owner/repo#123` reference or a draft note) and manage custom fields. */
export function ProjectToolbar({ data }: { data: ProjectData }) {
  const [reference, setReference] = useState("");
  const [fieldsOpen, setFieldsOpen] = useState(false);
  const add = useAction(addProjectItem);
  return (
    <div className="space-y-2">
      <form
        className="flex gap-2"
        onSubmit={async (event) => {
          event.preventDefault();
          const ok = await add.run({
            data: { owner: data.project.owner, number: data.project.number, reference },
          });
          if (ok) setReference("");
        }}
      >
        <input
          aria-label="Add item"
          value={reference}
          onChange={(event) => setReference(event.target.value)}
          placeholder="owner/repo#123 or a draft note"
          className={cn(inputClass, "h-8 flex-1")}
        />
        <Button size="sm" type="submit" variant="primary" pending={add.pending} disabled={!reference.trim()}>
          Add item
        </Button>
        <Button size="sm" variant="ghost" onClick={() => setFieldsOpen((value) => !value)} aria-expanded={fieldsOpen}>
          Fields
        </Button>
      </form>
      {add.error && <p className="text-xs text-kumo-danger">{add.error}</p>}
      {fieldsOpen && <FieldEditor data={data} />}
    </div>
  );
}