import { useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { createPull } from "~/fns/pulls";
import { useAction } from "~/hooks/use-action";
import { usePullSuggestion } from "~/hooks/use-pull-suggestion";
import { MarkdownEditor } from "~/components/MarkdownEditor";
import { Button } from "~/ui/Button";
import { CheckboxField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import type { AiAccess } from "~/server/pull-describe/service";

type Props = {
  owner: string;
  repo: string;
  base: string;
  /** Head as the server expects it: a bare branch or `owner:branch` for a fork. */
  head: string;
  defaultTitle: string;
  template: string;
  ai: AiAccess | null;
};

function SparkleIcon() {
  return (
    <svg aria-hidden viewBox="0 0 16 16" className="size-3.5" fill="currentColor">
      <title>Sparkle</title>
      <path d="M8 1l1.6 4.4L14 7l-4.4 1.6L8 13l-1.6-4.4L2 7l4.4-1.6L8 1zM13 11l.7 1.8 1.8.7-1.8.7L13 16l-.7-1.8-1.8-.7 1.8-.7L13 11zM3 0l.5 1.5L5 2l-1.5.5L3 4l-.5-1.5L1 2l1.5-.5L3 0z" />
    </svg>
  );
}

function usageHint(ai: AiAccess): string {
  if (!ai.usage) return "Uses one AI call with your own key";
  const limit = ai.usage.limit === null ? "" : ` of ${ai.usage.limit}`;
  return `Uses one AI call (${ai.usage.used}${limit} used this month)`;
}

export function CreatePullForm({ owner, repo, base, head, defaultTitle, template, ai }: Props) {
  const navigate = useNavigate();
  const create = useAction(createPull, { invalidate: false });
  const [title, setTitle] = useState(defaultTitle);
  const [body, setBody] = useState(template);
  const suggestion = usePullSuggestion({
    owner,
    repo,
    base,
    head,
    current: { title, body },
    defaults: { title: defaultTitle, body: template },
    onFill: (fields) => {
      setTitle(fields.title);
      setBody(fields.body);
    },
  });
  const suggestAccess = ai?.allowed ? ai : null;

  return (
    <form
      className="space-y-3 p-4"
      onSubmit={async (event) => {
        event.preventDefault();
        const form = new FormData(event.currentTarget);
        const result = await create.run({
          data: { owner, repo, base, head, title, body, draft: form.get("draft") === "on" },
        });
        if (result)
          await navigate({ to: "/$owner/$repo/pull/$number", params: { owner, repo, number: String(result.number) } });
      }}
    >
      <ErrorBanner message={create.error ?? suggestion.error} />
      <div className="flex items-end gap-2">
        <div className="min-w-0 flex-1">
          <TextField
            label="Title"
            name="title"
            required
            value={title}
            onChange={(event) => setTitle(event.target.value)}
          />
        </div>
        {suggestAccess && (
          <Button
            variant="ghost"
            size="md"
            pending={suggestion.pending}
            onClick={suggestion.suggest}
            title={usageHint(suggestAccess)}
            aria-label="Suggest title and description"
          >
            <SparkleIcon />
            Suggest title & description
          </Button>
        )}
      </div>
      <MarkdownEditor
        value={body}
        onChange={setBody}
        owner={owner}
        repo={repo}
        label="Description"
        placeholder="Describe your changes"
      />
      <CheckboxField label="Create as draft" name="draft" />
      <Button type="submit" variant="primary" pending={create.pending}>
        Create pull request
      </Button>
    </form>
  );
}