import { useEffect, useState } from "react";
import { useNavigate } from "@tanstack/react-router";
import { Button } from "@executor-js/react/components/button";
import { CodeBlock } from "@executor-js/react/components/code-block";
import {
  buildMcpHttpEndpoint,
  buildMcpInstallCommand,
  type McpElicitationMode,
} from "@executor-js/react/components/mcp-install-card";
import { CopyButton } from "@executor-js/react/components/copy-button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@executor-js/react/components/collapsible";
import { NativeSelect, NativeSelectOption } from "@executor-js/react/components/native-select";

export const SetupMcpPage = () => {
  const navigate = useNavigate();
  const [origin, setOrigin] = useState<string | null>(null);
  const [advancedOpen, setAdvancedOpen] = useState(false);
  const [elicitationMode, setElicitationMode] = useState<McpElicitationMode>("model");

  useEffect(() => {
    setOrigin(window.location.origin);
  }, []);

  const endpoint = origin
    ? buildMcpHttpEndpoint({
        origin,
        desktop: null,
        elicitationMode,
      })
    : "";
  const command = origin
    ? buildMcpInstallCommand({
        mode: "http",
        isDev: false,
        origin,
        elicitationMode,
      })
    : "";

  return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-10">
      <div className="mx-auto flex w-full max-w-lg flex-col gap-6">
        <header className="flex flex-col gap-2">
          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
            Step 2 of 2
          </p>
          <h1 className="font-serif text-3xl">Connect your MCP client</h1>
          <p className="text-sm text-muted-foreground">
            Executor exposes your sources, secrets, and tools to any MCP-compatible agent. Copy the
            URL into your client, or run the install command.
          </p>
        </header>

        <section aria-label="MCP server URL" className="flex flex-col gap-2">
          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
            MCP server URL
          </p>
          <div className="flex items-center gap-2 rounded-md border border-border bg-card/60 px-3 py-2">
            <span className="min-w-0 flex-1 truncate font-mono text-sm text-foreground/90">
              {endpoint || "…"}
            </span>
            {endpoint && <CopyButton value={endpoint} />}
          </div>
          <p className="text-xs text-muted-foreground">Paste this into your MCP client config.</p>
        </section>

        <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
          <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground">
            Advanced
            <span
              aria-hidden="true"
              className={`text-[10px] transition-transform ${advancedOpen ? "rotate-180" : ""}`}
            >
              v
            </span>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div className="mt-3 flex flex-col gap-2 rounded-md border border-border bg-card/60 p-3 sm:flex-row sm:items-center sm:justify-between">
              <div className="min-w-0">
                <div className="text-xs font-medium text-foreground">Resume approvals</div>
                <div className="mt-0.5 text-xs leading-5 text-muted-foreground">
                  Select how tool approvals are handled for this MCP connection.
                </div>
              </div>
              <NativeSelect
                size="sm"
                value={elicitationMode}
                onChange={(event) => setElicitationMode(event.target.value as McpElicitationMode)}
                aria-label="Elicitation mode"
                className="min-w-44"
              >
                <NativeSelectOption value="browser">Browser approval</NativeSelectOption>
                <NativeSelectOption value="model">Model resume tool</NativeSelectOption>
                <NativeSelectOption value="native">Native elicitation</NativeSelectOption>
              </NativeSelect>
            </div>
          </CollapsibleContent>
        </Collapsible>

        <div className="relative flex items-center">
          <div className="h-px flex-1 bg-border" />
          <span className="px-3 text-xs uppercase tracking-wider text-muted-foreground">or</span>
          <div className="h-px flex-1 bg-border" />
        </div>

        <section aria-label="Install command" className="flex flex-col gap-2">
          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
            Install command
          </p>
          <CodeBlock code={command} lang="bash" />
          <p className="text-xs text-muted-foreground">Adds the server to a supported agent.</p>
        </section>

        <div className="flex items-center justify-between gap-3">
          {/* oxlint-disable-next-line react/forbid-elements */}
          <button
            type="button"
            onClick={() => void navigate({ to: "/" })}
            className="text-xs text-muted-foreground transition-colors hover:text-foreground"
          >
            Skip for now
          </button>
          <Button size="sm" onClick={() => void navigate({ to: "/" })}>
            Continue to app
          </Button>
        </div>
      </div>
    </div>
  );
};
