import { createFileRoute } from "@tanstack/react-router";
import { deleteIssueType, listIssueTypes, saveIssueType } from "~/fns/milestones";
import { listDiscussions } from "~/fns/discussions";
import { deleteDiscussionCategory, saveDiscussionCategory } from "~/fns/discussion-admin";
import { useAction } from "~/hooks/use-action";
import { EmptyState } from "~/ui/EmptyState";
import { LabelChip } from "~/ui/LabelChip";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { CheckboxField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";

const DEFAULT_COLOR = "f6821f";

export const Route = createFileRoute("/$owner/$repo/settings/planning")({
  loader: async ({ params }) => {
    const ref = { owner: params.owner, repo: params.repo };
    const [types, discussions] = await Promise.all([
      listIssueTypes({ data: ref }),
      listDiscussions({ data: { ...ref, page: 1 } }),
    ]);
    return { types, categories: discussions.categories };
  },
  component: PlanningSettings,
});

function IssueTypes() {
  const { types } = Route.useLoaderData();
  const params = Route.useParams();
  const save = useAction(saveIssueType);
  const remove = useAction(deleteIssueType);
  return (
    <Panel title="Issue types">
      <form
        className="grid gap-3 border-b border-kumo-hairline p-4 md:grid-cols-[1fr_2fr_100px_auto] md:items-end"
        onSubmit={async (event) => {
          event.preventDefault();
          const element = event.currentTarget;
          const form = new FormData(element);
          const description = String(form.get("description") ?? "").trim();
          const ok = await save.run({
            data: {
              ...params,
              id: null,
              name: String(form.get("name") ?? ""),
              color: String(form.get("color") ?? DEFAULT_COLOR).replace("#", ""),
              description: description || null,
            },
          });
          if (ok) element.reset();
        }}
      >
        <TextField label="Name" name="name" required placeholder="Bug, Feature, Task…" />
        <TextField label="Description" name="description" />
        <TextField label="Color" name="color" type="color" defaultValue={`#${DEFAULT_COLOR}`} className="p-1" />
        <Button type="submit" variant="primary" pending={save.pending}>
          Add type
        </Button>
        <div className="md:col-span-4">
          <ErrorBanner message={save.error ?? remove.error} />
        </div>
      </form>
      {types.length === 0 ? (
        <EmptyState title="No issue types" icon="label" />
      ) : (
        <ul className="divide-y divide-kumo-hairline">
          {types.map((type) => (
            <li key={type.id} className="flex items-center gap-4 px-4 py-2.5">
              <LabelChip name={type.name} color={type.color} />
              <span className="flex-1 text-sm text-kumo-subtle">{type.description}</span>
              <Button
                size="sm"
                variant="danger"
                onClick={() =>
                  window.confirm(`Delete issue type ${type.name}?`) && remove.run({ data: { ...params, id: type.id } })
                }
              >
                Delete
              </Button>
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}

function Categories() {
  const { categories } = Route.useLoaderData();
  const params = Route.useParams();
  const save = useAction(saveDiscussionCategory);
  const remove = useAction(deleteDiscussionCategory);
  return (
    <Panel title="Discussion categories">
      <form
        className="grid gap-3 border-b border-kumo-hairline p-4 md:grid-cols-[80px_1fr_2fr_auto] md:items-end"
        onSubmit={async (event) => {
          event.preventDefault();
          const element = event.currentTarget;
          const form = new FormData(element);
          const ok = await save.run({
            data: {
              ...params,
              id: null,
              emoji: String(form.get("emoji") ?? ""),
              name: String(form.get("name") ?? ""),
              description: String(form.get("description") ?? ""),
              answerable: form.get("answerable") === "on",
            },
          });
          if (ok) element.reset();
        }}
      >
        <TextField label="Emoji" name="emoji" maxLength={8} />
        <TextField label="Name" name="name" required />
        <TextField label="Description" name="description" />
        <Button type="submit" variant="primary" pending={save.pending}>
          Add category
        </Button>
        <div className="md:col-span-4">
          <CheckboxField label="Accept answers (Q&A format)" name="answerable" />
          <ErrorBanner message={save.error ?? remove.error} />
        </div>
      </form>
      <ul className="divide-y divide-kumo-hairline">
        {categories.map((category) => (
          <li key={category.id} className="flex items-center gap-4 px-4 py-2.5 text-sm">
            <span aria-hidden>{category.emoji}</span>
            <span className="font-medium text-kumo-strong">{category.name}</span>
            <span className="flex-1 text-kumo-subtle">{category.description}</span>
            {category.answerable && <span className="text-xs text-kumo-success">answers</span>}
            <Button
              size="sm"
              variant="danger"
              onClick={() =>
                window.confirm(`Delete category ${category.name}?`) &&
                remove.run({ data: { ...params, id: category.id } })
              }
            >
              Delete
            </Button>
          </li>
        ))}
      </ul>
    </Panel>
  );
}

function PlanningSettings() {
  return (
    <>
      <IssueTypes />
      <Categories />
    </>
  );
}