App.tsx

import { StrictMode, useState, useCallback, useEffect } from "react";
import { createRoot } from "react-dom/client";
import {
  Box,
  Text,
  TextInput,
  Button,
  Flash,
  Spinner,
  FormControl,
  ActionMenu,
  ActionList,
  Checkbox,
  ButtonGroup,
} from "@primer/react";
import {
  GitPullRequestIcon,
  CheckCircleIcon,
  TriangleDownIcon,
} from "@primer/octicons-react";
import { AppProvider } from "../../components/AppProvider";
import { useMcpApp } from "../../hooks/useMcpApp";
import { MarkdownEditor } from "../../components/MarkdownEditor";

interface PRResult {
  ID?: string;
  number?: number;
  title?: string;
  url?: string;
  html_url?: string;
  URL?: string;
}

function SuccessView({
  pr,
  owner,
  repo,
  submittedTitle,
}: {
  pr: PRResult;
  owner: string;
  repo: string;
  submittedTitle: string;
}) {
  const prUrl = pr.html_url || pr.url || pr.URL || "#";

  return (
    <Box
      borderWidth={1}
      borderStyle="solid"
      borderColor="border.default"
      borderRadius={2}
      bg="canvas.subtle"
      p={3}
    >
      <Box
        display="flex"
        alignItems="center"
        mb={3}
        pb={3}
        borderBottomWidth={1}
        borderBottomStyle="solid"
        borderBottomColor="border.default"
      >
        <Box sx={{ color: "success.fg", flexShrink: 0, mr: 2 }}>
          <CheckCircleIcon size={16} />
        </Box>
        <Text sx={{ fontWeight: "semibold" }}>
          Pull request created successfully
        </Text>
      </Box>

      <Box
        display="flex"
        alignItems="flex-start"
        gap={2}
        p={3}
        bg="canvas.subtle"
        borderRadius={2}
        borderWidth={1}
        borderStyle="solid"
        borderColor="border.default"
      >
        <Box sx={{ color: "open.fg", flexShrink: 0, mt: "2px", mr: 1 }}>
          <GitPullRequestIcon size={16} />
        </Box>
        <Box sx={{ minWidth: 0 }}>
          <a
            href={prUrl}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              fontWeight: 600,
              fontSize: "14px",
              display: "block",
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
              color: "var(--fgColor-accent, var(--color-accent-fg))",
              textDecoration: "none",
            }}
          >
            {pr.title || submittedTitle}
            {pr.number && (
              <Text sx={{ color: "fg.muted", fontWeight: "normal", ml: 1 }}>
                #{pr.number}
              </Text>
            )}
          </a>
          <Text sx={{ color: "fg.muted", fontSize: 0 }}>
            {owner}/{repo}
          </Text>
        </Box>
      </Box>
    </Box>
  );
}

function CreatePRApp() {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [labels, setLabels] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [successPR, setSuccessPR] = useState<PRResult | null>(null);

  const [isDraft, setIsDraft] = useState(false);
  const [maintainerCanModify, setMaintainerCanModify] = useState(true);

  const { app, error: appError, toolInput, callTool } = useMcpApp({
    appName: "github-mcp-server-create-pull-request",
  });

  const owner = (toolInput?.owner as string) || "";
  const repo = (toolInput?.repo as string) || "";
  const head = (toolInput?.head as string) || "";
  const base = (toolInput?.base as string) || "";
  const [submittedTitle, setSubmittedTitle] = useState("");

  // Pre-fill from toolInput
  useEffect(() => {
    if (toolInput?.title) setTitle(toolInput.title as string);
    if (toolInput?.body) setBody(toolInput.body as string);
    if (toolInput?.labels) {
      const labelsArr = toolInput.labels as string[];
      setLabels(labelsArr.join(", "));
    }
    if (toolInput?.draft) setIsDraft(toolInput.draft as boolean);
    if (toolInput?.maintainer_can_modify !== undefined) {
      setMaintainerCanModify(toolInput.maintainer_can_modify as boolean);
    }
  }, [toolInput]);

  const handleSubmit = useCallback(async () => {
    if (!title.trim()) { setError("Title is required"); return; }
    if (!owner || !repo) { setError("Repository information not available"); return; }

    setIsSubmitting(true);
    setError(null);
    setSubmittedTitle(title);

    const labelsArray = labels.split(",").map(l => l.trim()).filter(l => l !== "");

    try {
      const result = await callTool("create_pull_request", {
        owner, repo,
        title: title.trim(),
        body: body.trim(),
        head,
        base,
        draft: isDraft,
        maintainer_can_modify: maintainerCanModify,
        labels: labelsArray,
        _ui_submitted: true
      });

      if (result.isError) {
        const errorText = result.content?.find((c) => c.type === "text");
        const errorMessage = errorText && errorText.type === "text" ? errorText.text : "Failed to create pull request";
        setError(errorMessage);
      } else {
        const textContent = result.content?.find((c) => c.type === "text");
        if (textContent && textContent.type === "text" && textContent.text) {
          const prData = JSON.parse(textContent.text);
          setSuccessPR(prData);
        }
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : "An error occurred");
    } finally {
      setIsSubmitting(false);
    }
  }, [title, body, labels, owner, repo, head, base, isDraft, maintainerCanModify, callTool]);

  if (successPR) {
    return (
      <AppProvider>
        <SuccessView pr={successPR} owner={owner} repo={repo} submittedTitle={submittedTitle} />
      </AppProvider>
    );
  }

  if (!app && !appError) {
    return (
      <AppProvider>
        <Box display="flex" alignItems="center" justifyContent="center" p={4}>
          <Spinner size="medium" />
        </Box>
      </AppProvider>
    );
  }

  if (appError) {
    return (
      <AppProvider>
        <Flash variant="danger">{appError.message}</Flash>
      </AppProvider>
    );
  }

  return (
    <AppProvider>
      <Box
        borderWidth={1}
        borderStyle="solid"
        borderColor="border.default"
        borderRadius={2}
        bg="canvas.subtle"
        p={3}
      >
        {/* Header */}
        <Box
          display="flex"
          alignItems="center"
          gap={2}
          mb={3}
          pb={2}
          borderBottomWidth={1}
          borderBottomStyle="solid"
          borderBottomColor="border.default"
        >
          <Box sx={{ color: "fg.default", flexShrink: 0, display: "flex", mr: 1 }}>
            <GitPullRequestIcon size={16} />
          </Box>
          <Text sx={{ fontWeight: "semibold", whiteSpace: "nowrap" }}>New pull request</Text>
          <Text sx={{ color: "fg.muted", fontSize: 0, ml: 1 }}>
            {owner}/{repo}
          </Text>
          {head && base && (
            <Text sx={{ color: "fg.muted", fontSize: 0 }}>
              {base} ← {head}
            </Text>
          )}
        </Box>

        {/* Error banner */}
        {error && <Flash variant="danger" sx={{ mb: 3 }}>{error}</Flash>}

        {/* Title */}
        <FormControl sx={{ mb: 3 }}>
          <FormControl.Label sx={{ fontWeight: "semibold" }}>Title</FormControl.Label>
          <TextInput
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Title"
            block
            contrast
          />
        </FormControl>

        {/* Labels */}
        <FormControl sx={{ mb: 3 }}>
          <FormControl.Label sx={{ fontWeight: "semibold" }}>Labels</FormControl.Label>
          <TextInput
            value={labels}
            onChange={(e) => setLabels(e.target.value)}
            placeholder="bug, enhancement, help wanted (comma separated)"
            block
            contrast
          />
        </FormControl>

        {/* Description */}
        <Box sx={{ mb: 3 }}>
          <Text as="label" sx={{ fontWeight: "semibold", fontSize: 1, display: "block", mb: 2 }}>
            Description
          </Text>
          <MarkdownEditor value={body} onChange={setBody} placeholder="Add a description..." />
        </Box>

        {/* Options and Submit */}
        <Box display="flex" justifyContent="space-between" alignItems="flex-end" flexWrap="wrap" gap={3}>
          <Box as="label" display="flex" alignItems="center" sx={{ cursor: "pointer", gap: 2 }}>
            <Checkbox checked={maintainerCanModify} onChange={(e) => setMaintainerCanModify(e.target.checked)} />
            <Text sx={{ fontSize: 1, color: "fg.muted" }}>Allow maintainer edits</Text>
          </Box>

          <ButtonGroup>
            <Button
              variant="primary"
              onClick={handleSubmit}
              disabled={isSubmitting || !owner || !repo}
            >
              {isSubmitting ? (
                <><Spinner size="small" sx={{ mr: 1 }} />Creating...</>
              ) : isDraft ? (
                "Draft pull request"
              ) : (
                "Create pull request"
              )}
            </Button>
            <ActionMenu>
              <ActionMenu.Anchor>
                <Button
                  variant="primary"
                  disabled={isSubmitting || !owner || !repo}
                  sx={{ px: 2 }}
                  aria-label="Select pull request type"
                >
                  <TriangleDownIcon />
                </Button>
              </ActionMenu.Anchor>
              <ActionMenu.Overlay width="medium">
                <ActionList selectionVariant="single">
                  <ActionList.Item selected={!isDraft} onSelect={() => setIsDraft(false)}>
                    <ActionList.LeadingVisual>
                      <GitPullRequestIcon />
                    </ActionList.LeadingVisual>
                    Create pull request
                    <ActionList.Description variant="block">
                      Open a pull request that is ready for review
                    </ActionList.Description>
                  </ActionList.Item>
                  <ActionList.Item selected={isDraft} onSelect={() => setIsDraft(true)}>
                    <ActionList.LeadingVisual>
                      <GitPullRequestIcon />
                    </ActionList.LeadingVisual>
                    Create draft pull request
                    <ActionList.Description variant="block">
                      Cannot be merged until marked ready for review
                    </ActionList.Description>
                  </ActionList.Item>
                </ActionList>
              </ActionMenu.Overlay>
            </ActionMenu>
          </ButtonGroup>
        </Box>
      </Box>
    </AppProvider>
  );
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <CreatePRApp />
  </StrictMode>
);