import { useEffect, useMemo, useState } from "react";
import { Effect, Exit } from "effect";

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 { Checkbox } from "@executor-js/react/components/checkbox";
import { Label } from "@executor-js/react/components/label";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@executor-js/react/components/dialog";
import { FormErrorAlert, useSlugAlreadyExists } from "@executor-js/react/lib/integration-add";

import {
  createCustomToolSourceEffect,
  formatSyncErrors,
  listCustomToolDirectoriesEffect,
  parseGitSourceUrl,
  slugifyCustomToolsAppName,
  suggestCustomToolsAppName,
  syncCustomToolSourceEffect,
  validateCustomToolsAppSlug,
  validateGitSourceUrl,
  type CustomToolsDirectoryListing,
  type AppSourceKind,
} from "./custom-tools-client";
import { directoryBrowserRows, directorySourceVerdict } from "./source-panel-model";

export default function AddCustomToolsSource(props: {
  readonly onComplete: (slug?: string) => void;
  readonly onCancel: () => void;
  readonly initialUrl?: string;
  readonly initialNamespace?: string;
  readonly sourceKinds?: readonly AppSourceKind[];
}) {
  const sourceKinds = props.sourceKinds ?? ["git"];
  const allowLocalDirectory = sourceKinds.includes("local-directory");
  const initialKind =
    props.initialUrl && props.initialUrl.startsWith("/") && allowLocalDirectory
      ? "local-directory"
      : "git";
  const [kind, setKind] = useState<AppSourceKind>(initialKind);
  const [url, setUrl] = useState(props.initialUrl ?? "");
  const [path, setPath] = useState(
    initialKind === "local-directory" ? (props.initialUrl ?? "") : "",
  );
  const [ref, setRef] = useState("");
  const [name, setName] = useState(
    props.initialNamespace ? slugifyCustomToolsAppName(props.initialNamespace) : "",
  );
  const [nameTouched, setNameTouched] = useState(props.initialNamespace !== undefined);
  const [token, setToken] = useState("");
  const [fieldError, setFieldError] = useState<string | null>(null);
  const [nameError, setNameError] = useState<string | null>(null);
  const [syncing, setSyncing] = useState(false);
  const [syncError, setSyncError] = useState<string | null>(null);
  const [browseOpen, setBrowseOpen] = useState(false);
  const [pathListing, setPathListing] = useState<CustomToolsDirectoryListing | null>(null);

  const sourceValue = kind === "git" ? url : path;
  const effectiveName = useMemo(
    () => (nameTouched ? name : slugifyCustomToolsAppName(suggestCustomToolsAppName(sourceValue))),
    [name, nameTouched, sourceValue],
  );
  const slug = effectiveName;
  const slugAlreadyExists = useSlugAlreadyExists(slug);

  useEffect(() => {
    if (kind !== "local-directory" || !path.trim().startsWith("/")) {
      setPathListing(null);
      return;
    }
    let active = true;
    const timeout = window.setTimeout(() => {
      void Effect.runPromiseExit(listCustomToolDirectoriesEffect({ path: path.trim() })).then(
        (exit) => {
          if (!active) return;
          setPathListing(Exit.isSuccess(exit) ? exit.value : null);
        },
      );
    }, 300);
    return () => {
      active = false;
      window.clearTimeout(timeout);
    };
  }, [kind, path]);

  const submit = async () => {
    const nextFieldError =
      kind === "git"
        ? validateGitSourceUrl(url)
        : path.trim().startsWith("/")
          ? null
          : "Enter an absolute directory path.";
    const nextNameError = validateCustomToolsAppSlug(slug);
    setFieldError(nextFieldError);
    setNameError(nextNameError);
    setSyncError(null);
    if (nextFieldError || nextNameError) return;
    if (slugAlreadyExists) {
      setSyncError(`An integration named "${slug}" already exists. Choose another source name.`);
      return;
    }

    setSyncing(true);
    const parsedGitUrl = kind === "git" ? parseGitSourceUrl(url) : null;
    const createExit = await Effect.runPromiseExit(
      createCustomToolSourceEffect(
        kind === "git"
          ? {
              kind: "git",
              slug,
              app: slug,
              url: parsedGitUrl?.ok ? parsedGitUrl.url : url.trim(),
              ...(ref.trim() ? { ref: ref.trim() } : {}),
              ...(token.trim() ? { token: token.trim() } : {}),
            }
          : { kind: "local-directory", slug, app: slug, path: path.trim() },
      ),
    );
    if (Exit.isFailure(createExit)) {
      setSyncError("Failed to create custom tools source.");
      setSyncing(false);
      return;
    }
    const syncExit = await Effect.runPromiseExit(
      syncCustomToolSourceEffect(createExit.value.source.slug),
    );
    if (Exit.isFailure(syncExit)) {
      setSyncError("Failed to sync custom tools source.");
      setSyncing(false);
      return;
    }
    const result = syncExit.value;
    if (result.status === "failed") {
      setSyncError(formatSyncErrors(result).join("\n") || "Sync failed.");
      setSyncing(false);
      return;
    }
    setSyncing(false);
    props.onComplete(createExit.value.source.app);
  };

  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 tools from a Git repository, then publish them to the Apps catalog.
        </p>
      </div>

      <CardStack>
        <CardStackContent className="border-t-0">
          {allowLocalDirectory && (
            <CardStackEntryField
              label="Source type"
              description="- Git is portable. Local directories are local-only."
            >
              <div className="flex gap-2">
                <Button
                  type="button"
                  variant={kind === "git" ? "default" : "outline"}
                  onClick={() => setKind("git")}
                  disabled={syncing}
                >
                  Git repository
                </Button>
                <Button
                  type="button"
                  variant={kind === "local-directory" ? "default" : "outline"}
                  onClick={() => setKind("local-directory")}
                  disabled={syncing}
                >
                  Directory path
                </Button>
              </div>
            </CardStackEntryField>
          )}

          {kind === "git" ? (
            <>
              <CardStackEntryField label="Git repository" description="- Any https Git remote.">
                <div className="space-y-1.5">
                  <Input
                    value={url}
                    onChange={(event) => {
                      setUrl((event.target as HTMLInputElement).value);
                      setFieldError(null);
                      setSyncError(null);
                    }}
                    onBlur={() => setFieldError(validateGitSourceUrl(url))}
                    placeholder="https://github.com/acme/tools.git"
                    className="font-mono text-sm"
                    aria-invalid={fieldError ? true : undefined}
                  />
                  {fieldError && <p className="text-xs text-destructive">{fieldError}</p>}
                </div>
              </CardStackEntryField>
              <CardStackEntryField
                label="Ref (optional)"
                description="- Branch, tag, or commit SHA."
              >
                <Input
                  value={ref}
                  onChange={(event) => setRef((event.target as HTMLInputElement).value)}
                  placeholder="main"
                  className="font-mono text-sm"
                  disabled={syncing}
                />
              </CardStackEntryField>
              <CardStackEntryField
                label="Token (optional)"
                description="- For private repositories. Never shown after saving."
              >
                <Input
                  value={token}
                  type="password"
                  onChange={(event) => setToken((event.target as HTMLInputElement).value)}
                  autoComplete="off"
                  className="font-mono text-sm"
                  disabled={syncing}
                />
              </CardStackEntryField>
            </>
          ) : (
            <CardStackEntryField
              label="Directory path"
              description="- Absolute path on this machine."
            >
              <div className="space-y-1.5">
                <div className="flex gap-2">
                  <Input
                    value={path}
                    onChange={(event) => {
                      setPath((event.target as HTMLInputElement).value);
                      setFieldError(null);
                      setSyncError(null);
                    }}
                    onBlur={() => {
                      if (!path.trim().startsWith("/")) return;
                      void Effect.runPromiseExit(
                        listCustomToolDirectoriesEffect({ path: path.trim() }),
                      ).then((exit) => {
                        setPathListing(Exit.isSuccess(exit) ? exit.value : null);
                      });
                    }}
                    placeholder="/Users/me/tools"
                    className="font-mono text-sm"
                    aria-invalid={fieldError ? true : undefined}
                  />
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => setBrowseOpen(true)}
                    disabled={syncing}
                  >
                    Browse
                  </Button>
                </div>
                {pathListing && <DirectorySourceStatus listing={pathListing} />}
                {fieldError && <p className="text-xs text-destructive">{fieldError}</p>}
              </div>
            </CardStackEntryField>
          )}

          <CardStackEntryField
            label="Source name"
            description="- Lowercase letters, numbers, and hyphens."
          >
            <div className="space-y-1.5">
              <Input
                value={effectiveName}
                onChange={(event) => {
                  setNameTouched(true);
                  setName(slugifyCustomToolsAppName((event.target as HTMLInputElement).value));
                  setNameError(null);
                  setSyncError(null);
                }}
                placeholder="custom-tools"
                className="text-sm"
                aria-invalid={nameError ? true : undefined}
              />
              {nameError && <p className="text-xs text-destructive">{nameError}</p>}
              {slugAlreadyExists && !syncing && !nameError && (
                <p className="text-xs text-destructive">
                  An integration named &quot;{slug}&quot; already exists.
                </p>
              )}
            </div>
          </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={syncing} loading={syncing}>
          Sync source
        </Button>
      </FloatActions>
      {browseOpen && (
        <DirectoryBrowserModal
          initialPath={path.trim() || undefined}
          onClose={() => setBrowseOpen(false)}
          onSelect={(selectedPath) => {
            setPath(selectedPath);
            setFieldError(null);
            setSyncError(null);
            setBrowseOpen(false);
          }}
        />
      )}
    </div>
  );
}

function DirectoryBrowserModal(props: {
  readonly initialPath?: string;
  readonly onSelect: (path: string) => void;
  readonly onClose: () => void;
}) {
  const [currentPath, setCurrentPath] = useState(props.initialPath);
  const [includeHidden, setIncludeHidden] = useState(false);
  const [listing, setListing] = useState<CustomToolsDirectoryListing | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let active = true;
    setLoading(true);
    setError(null);
    void Effect.runPromiseExit(
      listCustomToolDirectoriesEffect({ path: currentPath, includeHidden }),
    ).then((exit) => {
      if (!active) return;
      setLoading(false);
      if (Exit.isFailure(exit)) {
        setError("Unable to read this directory.");
        return;
      }
      setListing(exit.value);
      setCurrentPath(exit.value.path);
    });
    return () => {
      active = false;
    };
  }, [currentPath, includeHidden]);

  const rows = listing ? directoryBrowserRows(listing) : [];
  const selectedPath = listing?.path ?? currentPath ?? "";
  const canSelect = Boolean(selectedPath) && !loading && !error;
  const hasToolFiles = (listing?.source.toolFiles.length ?? 0) > 0;

  return (
    <Dialog open onOpenChange={(open) => (open ? undefined : props.onClose())}>
      <DialogContent className="sm:max-w-[620px]">
        <DialogHeader className="border-b border-border/60 pb-4">
          <DialogTitle className="text-base">Choose directory</DialogTitle>
          <DialogDescription className="font-mono text-xs break-all">
            {selectedPath || "Home"}
          </DialogDescription>
          {listing && <DirectorySourceStatus listing={listing} />}
        </DialogHeader>
        <div className="space-y-3">
          <Label className="flex items-center gap-2 text-sm text-muted-foreground">
            <Checkbox
              checked={includeHidden}
              onCheckedChange={(checked) => setIncludeHidden(checked === true)}
            />
            Show hidden directories
          </Label>
          <div className="max-h-[340px] overflow-auto rounded-md border border-border">
            {loading ? (
              <div className="px-3 py-8 text-center text-sm text-muted-foreground">Loading...</div>
            ) : error ? (
              <div className="px-3 py-8 text-center text-sm text-destructive">{error}</div>
            ) : rows.length === 0 ? (
              <div className="px-3 py-8 text-center text-sm text-muted-foreground">
                No subdirectories
              </div>
            ) : (
              <div role="listbox" aria-label="Directories" className="divide-y divide-border">
                {rows.map((row) => (
                  <Button
                    key={`${row.kind}:${row.path}`}
                    type="button"
                    variant="ghost"
                    className="h-auto w-full justify-between gap-3 rounded-none px-3 py-2 text-left text-sm font-normal hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
                    onClick={() => setCurrentPath(row.path)}
                  >
                    <span className="min-w-0 truncate font-mono">
                      {row.kind === "parent" ? ".." : row.name}
                    </span>
                    <span className="flex shrink-0 items-center gap-2">
                      {row.kind === "dir" && row.hasTools && (
                        <span className="rounded-sm border border-border bg-secondary px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
                          tools
                        </span>
                      )}
                      {row.kind === "dir" && row.isSymlink && (
                        <span className="font-mono text-[11px] text-muted-foreground">symlink</span>
                      )}
                    </span>
                  </Button>
                ))}
              </div>
            )}
          </div>
        </div>
        <DialogFooter className="border-t border-border/60 pt-4">
          <Button type="button" variant="ghost" onClick={props.onClose}>
            Cancel
          </Button>
          <Button type="button" onClick={() => props.onSelect(selectedPath)} disabled={!canSelect}>
            {hasToolFiles ? "Select" : "Select anyway"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

function DirectorySourceStatus(props: { readonly listing: CustomToolsDirectoryListing }) {
  const verdict = directorySourceVerdict(props.listing);
  if (verdict.type === "valid") {
    return (
      <p className="mt-2 text-xs text-foreground">
        {verdict.message}:{" "}
        {verdict.visibleTools.map((tool, index) => (
          <span key={tool}>
            {index > 0 ? ", " : ""}
            <span className="font-mono">{tool}</span>
          </span>
        ))}
        {verdict.moreCount > 0 && (
          <>
            {", "}
            <span className="font-mono">+{verdict.moreCount} more</span>
          </>
        )}
      </p>
    );
  }
  return <p className="mt-2 text-xs text-muted-foreground">{verdict.message}</p>;
}