import { useMemo, useState } from "react";
import { useAtomValue } from "@effect/atom-react";
import { Effect, Exit } from "effect";
import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";

import { connectionsAllAtom } from "@executor-js/react/api/atoms";
import { Alert, AlertDescription, AlertTitle } from "@executor-js/react/components/alert";
import { Button } from "@executor-js/react/components/button";
import {
  CardStack,
  CardStackContent,
  CardStackEntryField,
} from "@executor-js/react/components/card-stack";
import { FloatActions } from "@executor-js/react/components/float-actions";
import { Input } from "@executor-js/react/components/input";
import { NativeSelect, NativeSelectOption } from "@executor-js/react/components/native-select";
import { toast } from "@executor-js/react/components/sonner";
import { FormErrorAlert } from "@executor-js/react/lib/integration-add";

import {
  consoleIntegrationHref,
  formatSyncErrors,
  githubConnections,
  syncCustomToolSourceEffect,
  syncStatusLabel,
  validateGitHubRepo,
} from "./custom-tools-client";

export default function AddCustomToolsSource(props: {
  readonly onComplete: (slug?: string) => void;
  readonly onCancel: () => void;
}) {
  const connectionsResult = useAtomValue(connectionsAllAtom);
  const connections = useMemo(
    () =>
      AsyncResult.isSuccess(connectionsResult) ? githubConnections(connectionsResult.value) : [],
    [connectionsResult],
  );
  const [repo, setRepo] = useState("");
  const [ref, setRef] = useState("");
  const [connection, setConnection] = useState("");
  const [repoError, setRepoError] = useState<string | null>(null);
  const [syncing, setSyncing] = useState(false);
  const [syncError, setSyncError] = useState<string | null>(null);

  const selectedConnection = connection || connections[0]?.address || "";
  const loadingConnections = !AsyncResult.isSuccess(connectionsResult);
  const canSubmit =
    repo.trim().length > 0 && selectedConnection.length > 0 && !syncing && !loadingConnections;

  const submit = async () => {
    const validation = validateGitHubRepo(repo);
    setRepoError(validation);
    setSyncError(null);
    if (validation || !selectedConnection) return;

    setSyncing(true);
    const exit = await Effect.runPromiseExit(
      syncCustomToolSourceEffect({
        repo,
        ref,
        connection: selectedConnection,
      }),
    );
    if (Exit.isFailure(exit)) {
      setSyncError("Failed to sync custom tools.");
      setSyncing(false);
      return;
    }
    const result = exit.value;
    if (result.status === "failed") {
      setSyncError(formatSyncErrors(result).join("\n") || "Sync failed.");
      setSyncing(false);
      return;
    }
    toast.success(syncStatusLabel(result));
    props.onComplete("apps");
  };

  return (
    <div className="flex flex-1 flex-col gap-6">
      <div>
        <h1 className="text-xl font-semibold text-foreground">Add custom tools</h1>
        <p className="mt-1 text-[13px] text-muted-foreground">
          Sync a GitHub repository that defines tools with executor:app.
        </p>
      </div>

      <CardStack>
        <CardStackContent className="border-t-0">
          <CardStackEntryField label="GitHub repo" description="- Owner and repository name.">
            <div className="space-y-1.5">
              <Input
                value={repo}
                onChange={(event) => {
                  setRepo((event.target as HTMLInputElement).value);
                  setRepoError(null);
                  setSyncError(null);
                }}
                onBlur={() => setRepoError(validateGitHubRepo(repo))}
                placeholder="owner/name"
                className="font-mono text-sm"
                aria-invalid={repoError ? true : undefined}
              />
              {repoError && <p className="text-xs text-destructive">{repoError}</p>}
            </div>
          </CardStackEntryField>

          <CardStackEntryField label="Ref" description="- Branch, tag, or commit SHA.">
            <Input
              value={ref}
              onChange={(event) => setRef((event.target as HTMLInputElement).value)}
              placeholder="default branch"
              className="font-mono text-sm"
            />
          </CardStackEntryField>

          <CardStackEntryField
            label="GitHub connection"
            description="- Used to fetch the repo and later resync it."
          >
            {connections.length > 0 ? (
              <NativeSelect
                value={selectedConnection}
                onChange={(event) => setConnection((event.target as HTMLSelectElement).value)}
                className="w-full font-mono text-sm"
                disabled={syncing}
              >
                {connections.map((candidate) => (
                  <NativeSelectOption key={candidate.address} value={candidate.address}>
                    {candidate.address}
                  </NativeSelectOption>
                ))}
              </NativeSelect>
            ) : (
              <Alert>
                <AlertTitle>No GitHub connections</AlertTitle>
                <AlertDescription>
                  <span>
                    Connect GitHub first, then return here to sync a custom-tools repo.{" "}
                    <a
                      className="font-medium text-foreground underline"
                      href={consoleIntegrationHref("/integrations/github")}
                    >
                      Open GitHub
                    </a>
                  </span>
                </AlertDescription>
              </Alert>
            )}
          </CardStackEntryField>
        </CardStackContent>
      </CardStack>

      {syncError && <FormErrorAlert message={syncError} />}

      <FloatActions>
        <Button type="button" variant="ghost" onClick={() => props.onCancel()} disabled={syncing}>
          Cancel
        </Button>
        <Button type="button" onClick={() => void submit()} disabled={!canSubmit} loading={syncing}>
          Sync repo
        </Button>
      </FloatActions>
    </div>
  );
}