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

export const Route = createFileRoute("/orgs/new")({
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  component: NewOrgPage,
});

function NewOrgPage() {
  const navigate = useNavigate();
  const action = useAction(createOrganization);

  async function submit(event: React.SubmitEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const displayName = String(form.get("displayName") ?? "").trim();
    const result = await action.run({
      data: { name: String(form.get("name") ?? ""), displayName: displayName || null },
    });
    if (result) await navigate({ to: "/$owner", params: { owner: result.name } });
  }

  return (
    <PageContainer className="max-w-xl">
      <Heading size="xl" className="mb-6">
        New organization
      </Heading>
      <Panel>
        <form onSubmit={submit} className="space-y-4 p-5">
          <ErrorBanner message={action.error} />
          <TextField label="Organization name" name="name" required hint="Used in repository URLs" />
          <TextField label="Display name" name="displayName" />
          <Button type="submit" variant="primary" pending={action.pending}>
            Create organization
          </Button>
        </form>
      </Panel>
    </PageContainer>
  );
}