import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { requireSignedIn } from "~/lib/route-guards";
import { deleteOrganization } from "~/fns/account";
import { useAction } from "~/hooks/use-action";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { CheckboxField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/orgs/$org/settings")({
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  component: OrgSettingsPage,
});

function OrgSettingsPage() {
  const { org } = Route.useParams();
  const navigate = useNavigate();
  const remove = useAction(deleteOrganization, { invalidate: false });
  return (
    <PageContainer className="max-w-3xl space-y-4">
      <Heading>{org} settings</Heading>
      <Panel tone="danger" title="Danger zone">
        <form
          className="space-y-3 p-5"
          onSubmit={async (event) => {
            event.preventDefault();
            const form = new FormData(event.currentTarget);
            const result = await remove.run({
              data: {
                org,
                confirm: String(form.get("confirm") ?? ""),
                deleteRepos: form.get("deleteRepos") === "on",
              },
            });
            if (result) await navigate({ to: "/" });
          }}
        >
          <ErrorBanner message={remove.error} />
          <p className="text-sm text-kumo-subtle">
            Deleting removes the organization, its members, runners, integrations and sites. The name {org} is retired
            and can never be registered again. This cannot be undone.
          </p>
          <CheckboxField
            name="deleteRepos"
            label="Also delete every repository this organization owns"
            hint="Without this, deletion is refused while the organization still owns repositories."
          />
          <TextField label={`Type ${org} to confirm`} name="confirm" required autoComplete="off" />
          <Button type="submit" variant="danger" pending={remove.pending}>
            Delete this organization
          </Button>
        </form>
      </Panel>
    </PageContainer>
  );
}