import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { requireSignedIn } from "~/lib/route-guards";
import { useState } from "react";
import { z } from "zod";
import { createRepo, transferableOwners } from "~/fns/repos";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { CheckboxField, SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { Heading } from "~/ui/Heading";

const VISIBILITY = [
  { value: "public", label: "Public — anyone can see and clone" },
  { value: "private", label: "Private — only you and collaborators" },
] as const;

const MODES = [
  { id: "empty", label: "Start fresh" },
  { id: "import", label: "Import from a URL" },
] as const;

const searchSchema = z.object({ import: z.string().optional(), name: z.string().optional() });

export const Route = createFileRoute("/new")({
  validateSearch: searchSchema,
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  loader: () => transferableOwners(),
  component: NewRepoPage,
});

function NewRepoPage() {
  const owners = Route.useLoaderData();
  const search = Route.useSearch();
  const navigate = useNavigate();
  const action = useAction(createRepo, { invalidate: false });
  const [mode, setMode] = useState<(typeof MODES)[number]["id"]>(search.import ? "import" : "empty");

  async function submit(event: React.SubmitEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const description = String(form.get("description") ?? "").trim();
    const result = await action.run({
      data: {
        owner: String(form.get("owner")),
        name: String(form.get("name") ?? ""),
        description: description || null,
        visibility: form.get("visibility") === "private" ? "private" : "public",
        initReadme: form.get("readme") === "on",
        importUrl: mode === "import" ? String(form.get("importUrl") ?? "") : null,
        importToken: mode === "import" ? String(form.get("importToken") ?? "").trim() || null : null,
      },
    });
    if (result) await navigate({ to: "/$owner/$repo", params: { owner: result.owner, repo: result.name } });
  }

  return (
    <PageContainer className="max-w-2xl">
      <Heading size="xl" className="mb-1">
        Create a repository
      </Heading>
      <p className="mb-6 text-sm text-kumo-subtle">Each repository is backed by its own Cloudflare Artifacts repo.</p>
      <Panel>
        <form onSubmit={submit} className="space-y-5 p-5">
          <ErrorBanner message={action.error} />
          <div role="radiogroup" aria-label="Source" className="flex gap-2">
            {MODES.map((item) => (
              <Button
                key={item.id}
                variant={mode === item.id ? "primary" : "secondary"}
                size="sm"
                aria-pressed={mode === item.id}
                onClick={() => setMode(item.id)}
              >
                {item.label}
              </Button>
            ))}
          </div>
          <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,2fr)] gap-3">
            <SelectField label="Owner" name="owner" options={owners.map((owner) => ({ value: owner, label: owner }))} />
            <TextField
              label="Repository name"
              name="name"
              required
              placeholder="my-project"
              defaultValue={search.name}
            />
          </div>
          <TextField label="Description" name="description" placeholder="Optional" />
          {mode === "import" && (
            <>
              <TextField
                label="Clone URL"
                name="importUrl"
                type="url"
                required
                placeholder="https://github.com/owner/repo.git"
                defaultValue={search.import}
                hint="HTTPS git remotes. Every branch and tag is copied."
              />
              <TextField
                label="Access token"
                name="importToken"
                type="password"
                autoComplete="off"
                placeholder="Optional, for private repositories"
                hint="A read-only token for the source (GitHub: fine-grained PAT with Contents: read; GitLab: read_repository). It is used once for the copy and never stored. Token imports are always created private."
              />
            </>
          )}
          <SelectField label="Visibility" name="visibility" options={VISIBILITY} />
          {mode === "empty" && (
            <CheckboxField label="Add a README" name="readme" defaultChecked hint="Creates an initial commit on main" />
          )}
          <Button type="submit" variant="primary" pending={action.pending}>
            {mode === "import" ? "Import repository" : "Create repository"}
          </Button>
        </form>
      </Panel>
    </PageContainer>
  );
}