import { Link, useNavigate } from "@tanstack/react-router";
import { lazy, Suspense, useState } from "react";
import { commitFile } from "~/fns/git-write";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { CheckboxField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";
import { buttonClass } from "~/ui/Button";

const CodeEditor = lazy(() => import("./CodeEditor").then((module) => ({ default: module.CodeEditor })));

type Props = {
  owner: string;
  repo: string;
  branch: string;
  headSha: string | null;
  initialPath: string;
  previousPath: string | null;
  initialContent: string;
  allowDelete: boolean;
};

export function FileEditor({
  owner,
  repo,
  branch,
  headSha,
  initialPath,
  previousPath,
  initialContent,
  allowDelete,
}: Props) {
  const navigate = useNavigate();
  const [path, setPath] = useState(initialPath);
  const [content, setContent] = useState(initialContent);
  const [newBranch, setNewBranch] = useState(false);
  const save = useAction(commitFile, { invalidate: false });
  const verb = previousPath ? "Update" : "Create";

  async function commit(element: HTMLFormElement, deleting: boolean) {
    const form = new FormData(element);
    const message = String(form.get("message") ?? "").trim() || `${deleting ? "Delete" : verb} ${path}`;
    const branchName = String(form.get("branchName") ?? "").trim();
    const result = await save.run({
      data: {
        owner,
        repo,
        branch,
        path: deleting && previousPath ? previousPath : path,
        previousPath: deleting ? null : previousPath,
        content: deleting ? null : content,
        message,
        expectedHeadSha: headSha,
        newBranch: newBranch && branchName ? branchName : null,
      },
    });
    if (!result) return;
    if (newBranch && branchName) {
      await navigate({
        to: "/$owner/$repo/compare/$",
        params: { owner, repo, _splat: `${branch}...${result.branch}` },
      });
    } else if (deleting) {
      await navigate({ to: "/$owner/$repo/tree/$", params: { owner, repo, _splat: result.branch } });
    } else {
      await navigate({ to: "/$owner/$repo/blob/$", params: { owner, repo, _splat: `${result.branch}/${path}` } });
    }
  }

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        commit(event.currentTarget, false);
      }}
      className="space-y-4"
    >
      <ErrorBanner message={save.error} />
      <TextField
        label="File path"
        value={path}
        onChange={(event) => setPath(event.target.value)}
        required
        className="font-mono"
      />
      <Panel
        title={<span className="font-mono text-xs">{path || "new file"}</span>}
        actions={
          <Link
            to="/$owner/$repo/edit/$"
            params={{ owner, repo, _splat: branch }}
            search={{ path: previousPath ?? path }}
            className={buttonClass("ghost", "sm")}
          >
            Open in Full Editor
          </Link>
        }
      >
        <Suspense
          fallback={
            <textarea
              aria-label="File contents"
              value={content}
              onChange={(event) => setContent(event.target.value)}
              spellCheck={false}
              rows={28}
              className="block w-full resize-y bg-kumo-canvas p-4 font-mono text-sm leading-5 text-kumo-strong focus:outline-none"
            />
          }
        >
          <CodeEditor id="file-content" value={content} onChange={setContent} filename={path} />
        </Suspense>
      </Panel>
      <Panel title="Commit changes">
        <div className="space-y-3 p-4">
          <TextField label="Commit message" name="message" placeholder={`${verb} ${path}`} />
          <CheckboxField
            label="Create a new branch for this commit and start a pull request"
            checked={newBranch}
            onChange={(event) => setNewBranch(event.target.checked)}
          />
          {newBranch && (
            <TextField
              label="New branch name"
              name="branchName"
              required
              defaultValue={`patch-${Date.now().toString(36)}`}
            />
          )}
          <div className="flex gap-2">
            <Button type="submit" variant="primary" pending={save.pending}>
              Commit changes
            </Button>
            {allowDelete && previousPath && (
              <Button
                variant="danger"
                pending={save.pending}
                onClick={(event) => {
                  const form = event.currentTarget.form;
                  if (form && window.confirm(`Delete ${previousPath}?`)) commit(form, true);
                }}
              >
                Delete file
              </Button>
            )}
          </div>
        </div>
      </Panel>
    </form>
  );
}