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

import { Button } from "@executor-js/react/components/button";
import { FloatActions } from "@executor-js/react/components/float-actions";
import { integrationsOptimisticAtom } from "@executor-js/react/api/atoms";
import { integrationWriteKeys } from "@executor-js/react/api/reactivity-keys";
import { addIntegrationErrorMessage } from "@executor-js/react/lib/integration-add";

import { addMcpServer, codexPluginsAtom } from "./atoms";

// ---------------------------------------------------------------------------
// Focused add screen for one Codex plugin, reached from its catalog preset
// (e.g. searching "imessage" in the connect dialog). The preset is only a
// pointer; everything shown here — icon, availability, spawn recipe — comes
// from the server-side scanner reading the user's local Codex install. One
// primary action: Add. No transport toggle, no manual command form.
// ---------------------------------------------------------------------------

export default function CodexPluginAdd(props: {
  readonly presetId: string;
  readonly onComplete: (slug?: string) => void;
  readonly onCancel: () => void;
}) {
  const pluginsResult = useAtomValue(codexPluginsAtom);
  const integrationsResult = useAtomValue(integrationsOptimisticAtom);
  const doAddServer = useAtomSet(addMcpServer, { mode: "promiseExit" });

  const [adding, setAdding] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const plugin = AsyncResult.isSuccess(pluginsResult)
    ? pluginsResult.value.plugins.find((entry) => entry.id === props.presetId)
    : undefined;

  const added =
    plugin !== undefined &&
    AsyncResult.isSuccess(integrationsResult) &&
    integrationsResult.value.some((integration) => String(integration.slug) === plugin.slug);

  const handleAdd = async () => {
    if (plugin === undefined) return;
    setAdding(true);
    setError(null);
    const exit = await doAddServer({
      payload: {
        transport: "stdio" as const,
        name: plugin.name,
        slug: plugin.slug,
        description: plugin.summary,
        command: plugin.command,
        args: [...plugin.args],
        ...(plugin.cwd !== undefined ? { cwd: plugin.cwd } : {}),
        ...(plugin.env !== undefined ? { env: { ...plugin.env } } : {}),
        ...(plugin.appServer !== undefined ? { appServer: { ...plugin.appServer } } : {}),
      },
      reactivityKeys: integrationWriteKeys,
    });
    if (Exit.isFailure(exit)) {
      setError(addIntegrationErrorMessage(exit, plugin.slug, "Failed to add plugin"));
      setAdding(false);
      return;
    }
    props.onComplete(exit.value.slug);
  };

  if (!AsyncResult.isSuccess(pluginsResult)) {
    return (
      <div className="flex flex-1 flex-col gap-6">
        <p className="text-[13px] text-muted-foreground">Checking this machine for Codex…</p>
      </div>
    );
  }

  if (plugin === undefined) {
    return (
      <div className="flex flex-1 flex-col gap-6">
        <p className="text-[13px] text-muted-foreground">
          This Codex plugin was not found on this machine.
        </p>
        <FloatActions>
          <Button type="button" variant="ghost" onClick={() => props.onCancel()}>
            Back
          </Button>
        </FloatActions>
      </div>
    );
  }

  return (
    <div className="flex flex-1 flex-col gap-6">
      {/* Mirrors the plugin's own page in Codex: its icon, display name,
          tagline, and long description, all read from the local install. */}
      <div className="flex flex-col gap-4">
        {/* The plugin's own icon comes from the local Codex install; without
            one the card still identifies its provider rather than showing a
            gap, which matters most on the machines that have no install. */}
        <img
          src={plugin.icon ?? plugin.fallbackIcon ?? "https://integrations.sh/logo/openai.com"}
          alt=""
          className="size-16 rounded-2xl"
        />
        <div className="min-w-0">
          <div className="flex items-baseline gap-2">
            <h1 className="text-xl font-semibold text-foreground">
              {plugin.displayName ?? plugin.name}
            </h1>
            <span className="font-mono text-[11px] uppercase tracking-wider text-muted-foreground">
              Codex plugin
            </span>
          </div>
          <p className="mt-1 text-[13px] text-muted-foreground">
            {plugin.tagline ?? plugin.summary}
          </p>
        </div>
        {plugin.description !== undefined && (
          <p className="max-w-prose text-[13px] leading-relaxed text-muted-foreground">
            {plugin.description}
          </p>
        )}
      </div>

      <div className="flex flex-col gap-1 rounded-lg border border-border px-3 py-2.5">
        <div className="flex items-baseline justify-between gap-3">
          <span className="font-mono text-[11px] uppercase tracking-wider text-muted-foreground">
            Status
          </span>
          <span className="font-mono text-[11px] text-muted-foreground">
            {added ? "Added" : plugin.available ? "Ready" : "Not installed on this Mac"}
          </span>
        </div>
        {!plugin.available && plugin.setupHint !== undefined && (
          // The hint arrives as numbered lines; render them as the list they
          // are, so the reader sees an ordered path rather than a paragraph.
          <ol className="mt-1 flex list-none flex-col gap-1.5">
            {plugin.setupHint.split("\n").map((step) => (
              <li key={step} className="text-[12px] leading-relaxed text-muted-foreground">
                {step}
              </li>
            ))}
          </ol>
        )}
        {plugin.available && !added && (
          <p className="text-[12px] text-muted-foreground">
            Runs the plugin from your Codex install. Nothing is downloaded.
          </p>
        )}
      </div>

      {error !== null && <p className="text-[12px] text-destructive">{error}</p>}

      <FloatActions>
        <Button type="button" variant="ghost" onClick={() => props.onCancel()} disabled={adding}>
          Cancel
        </Button>
        {added ? (
          <Button type="button" onClick={() => props.onComplete(plugin.slug)}>
            View integration
          </Button>
        ) : plugin.available ? (
          <Button type="button" onClick={() => void handleAdd()} loading={adding}>
            Add integration
          </Button>
        ) : (
          <Button asChild>
            <a
              href={plugin.setupUrl ?? "https://openai.com/codex"}
              target="_blank"
              rel="noreferrer"
            >
              Install Codex
            </a>
          </Button>
        )}
      </FloatActions>
    </div>
  );
}