import { useEffect, useMemo, useRef, useState } from "react";
import { useAtomSet } from "@effect-atom/atom-react";
import { Option } from "effect";

import { useScope } from "@executor/react/api/scope-context";
import { HeadersList } from "@executor/react/plugins/headers-list";
import {
  matchPresetKey,
  type HeaderState,
} from "@executor/react/plugins/secret-header-auth";
import {
  SourceIdentityFields,
  useSourceIdentity,
} from "@executor/react/plugins/source-identity";
import { useSecretPickerSecrets } from "@executor/react/plugins/use-secret-picker-secrets";
import { Button } from "@executor/react/components/button";
import {
  CardStack,
  CardStackContent,
  CardStackEntry,
  CardStackEntryContent,
  CardStackEntryDescription,
  CardStackEntryField,
  CardStackEntryTitle,
} from "@executor/react/components/card-stack";
import { FieldLabel } from "@executor/react/components/field";
import { FloatActions } from "@executor/react/components/float-actions";
import { Input } from "@executor/react/components/input";
import { Label } from "@executor/react/components/label";
import { Textarea } from "@executor/react/components/textarea";
import { RadioGroup, RadioGroupItem } from "@executor/react/components/radio-group";
import { Skeleton } from "@executor/react/components/skeleton";
import { IOSSpinner, Spinner } from "@executor/react/components/spinner";
import { previewOpenApiSpec, addOpenApiSpec } from "./atoms";
import type { SpecPreview, HeaderPreset } from "../sdk/preview";
import type { HeaderValue } from "../sdk/types";

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------

function prefixForHeader(preset: HeaderPreset, headerName: string): string | undefined {
  const label = preset.label.toLowerCase();
  if (headerName.toLowerCase() === "authorization") {
    if (label.includes("bearer")) return "Bearer ";
    if (label.includes("basic")) return "Basic ";
  }
  return undefined;
}

function entriesFromSpecPreset(preset: HeaderPreset): HeaderState[] {
  return preset.secretHeaders.map((headerName) => {
    const prefix = prefixForHeader(preset, headerName);
    return {
      name: headerName,
      secretId: null,
      prefix,
      presetKey: matchPresetKey(headerName, prefix),
      fromPreset: true,
    };
  });
}

// ---------------------------------------------------------------------------
// Main component — single progressive form
// ---------------------------------------------------------------------------

export default function AddOpenApiSource(props: {
  onComplete: () => void;
  onCancel: () => void;
  initialUrl?: string;
  initialNamespace?: string;
}) {
  // Spec input
  const [specUrl, setSpecUrl] = useState(props.initialUrl ?? "");
  const [analyzing, setAnalyzing] = useState(false);
  const [analyzeError, setAnalyzeError] = useState<string | null>(null);

  // After analysis
  const [preview, setPreview] = useState<SpecPreview | null>(null);
  const [baseUrl, setBaseUrl] = useState("");
  const identity = useSourceIdentity({
    fallbackName: preview ? Option.getOrElse(preview.title, () => "") : "",
    fallbackNamespace: props.initialNamespace,
  });

  // Auth
  // `selectedStrategy` is an index into `preview.headerPresets`, or -1 for
  // "None", or -2 for "Custom" (user-managed headers, no spec preset).
  const [selectedStrategy, setSelectedStrategy] = useState<number>(-1);
  const [customHeaders, setCustomHeaders] = useState<HeaderState[]>([]);

  // Submit
  const [adding, setAdding] = useState(false);
  const [addError, setAddError] = useState<string | null>(null);

  const scopeId = useScope();
  const doPreview = useAtomSet(previewOpenApiSpec, { mode: "promise" });
  const doAdd = useAtomSet(addOpenApiSpec, { mode: "promise" });
  const secretList = useSecretPickerSecrets();

  // Keep the latest handleAnalyze in a ref so the debounced effect doesn't
  // need it as a dependency (it closes over fresh state).
  const handleAnalyzeRef = useRef<() => void>(() => {});

  // Auto-analyze whenever the spec input changes, with a short debounce so
  // typing/pasting doesn't fire a request on every keystroke.
  useEffect(() => {
    const trimmed = specUrl.trim();
    if (!trimmed) return;
    if (preview) return;
    const handle = setTimeout(() => {
      handleAnalyzeRef.current();
    }, 400);
    return () => clearTimeout(handle);
  }, [specUrl, preview]);

  // ---- Derived state ----

  const servers = (preview?.servers ?? []) as Array<{ url?: string }>;

  // Derive a favicon URL from the spec URL (if the user entered one — raw
  // JSON/YAML content will fail URL parsing and yield null). Uses Google's
  // favicon service so we don't depend on the domain serving /favicon.ico.
  const faviconUrl = useMemo(() => {
    try {
      const trimmed = specUrl.trim();
      if (!trimmed) return null;
      const u = new URL(trimmed);
      if (u.protocol !== "http:" && u.protocol !== "https:") return null;
      return `https://www.google.com/s2/favicons?domain=${u.hostname}&sz=64`;
    } catch {
      return null;
    }
  }, [specUrl]);

  const [faviconFailed, setFaviconFailed] = useState(false);
  useEffect(() => {
    setFaviconFailed(false);
  }, [faviconUrl]);

  const allHeaders: Record<string, HeaderValue> = {};
  for (const ch of customHeaders) {
    if (ch.name.trim() && ch.secretId) {
      allHeaders[ch.name.trim()] = {
        secretId: ch.secretId,
        ...(ch.prefix ? { prefix: ch.prefix } : {}),
      };
    }
  }
  const hasHeaders = Object.keys(allHeaders).length > 0;

  const customHeadersValid = customHeaders.every((ch) => ch.name.trim() && ch.secretId);

  const canAdd =
    preview !== null &&
    baseUrl.trim().length > 0 &&
    (customHeaders.length === 0 || customHeadersValid);

  // ---- Handlers ----

  const handleAnalyze = async () => {
    setAnalyzing(true);
    setAnalyzeError(null);
    setAddError(null);
    try {
      const result = await doPreview({
        path: { scopeId },
        payload: { spec: specUrl },
      });
      setPreview(result);

      const firstUrl = (result.servers as Array<{ url?: string }>)?.[0]?.url;
      if (firstUrl) setBaseUrl(firstUrl);

      const firstPreset = result.headerPresets[0];
      if (firstPreset) {
        setSelectedStrategy(0);
        setCustomHeaders(entriesFromSpecPreset(firstPreset));
      } else {
        setSelectedStrategy(-1);
        setCustomHeaders([]);
      }
    } catch (e) {
      setAnalyzeError(e instanceof Error ? e.message : "Failed to parse spec");
    } finally {
      setAnalyzing(false);
    }
  };

  handleAnalyzeRef.current = handleAnalyze;

  const selectStrategy = (index: number) => {
    setSelectedStrategy(index);
    if (index === -1) {
      setCustomHeaders([]);
      return;
    }
    if (index === -2) {
      // Drop preset-derived headers, keep user headers (seed one if empty).
      const userHeaders = customHeaders.filter((h) => !h.fromPreset);
      setCustomHeaders(userHeaders.length > 0 ? userHeaders : []);
      return;
    }
    const preset = preview?.headerPresets[index];
    if (!preset) return;
    const userHeaders = customHeaders.filter((h) => !h.fromPreset);
    setCustomHeaders([...entriesFromSpecPreset(preset), ...userHeaders]);
  };

  const handleHeadersChange = (next: HeaderState[]) => {
    setCustomHeaders(next);
    // If user drops all preset-derived headers and adds their own, mark as
    // Custom so the strategy picker reflects it.
    if (selectedStrategy >= 0 && next.every((h) => !h.fromPreset)) {
      setSelectedStrategy(next.length === 0 ? -1 : -2);
    }
  };

  const handleAdd = async () => {
    setAdding(true);
    setAddError(null);
    try {
      await doAdd({
        path: { scopeId },
        payload: {
          spec: specUrl,
          name: identity.name.trim() || undefined,
          namespace: identity.namespace.trim() || undefined,
          baseUrl: baseUrl.trim() || undefined,
          ...(hasHeaders ? { headers: allHeaders } : {}),
        },
      });
      props.onComplete();
    } catch (e) {
      setAddError(e instanceof Error ? e.message : "Failed to add source");
      setAdding(false);
    }
  };

  // ---- Render ----

  return (
    <div className="flex flex-1 flex-col gap-6">
      <h1 className="text-xl font-semibold text-foreground">Add OpenAPI Source</h1>

      {/* ── Spec input ── */}
      <CardStack>
        <CardStackContent className="border-t-0">
          <CardStackEntryField
            label="OpenAPI Spec"
            hint={!preview ? "Paste a URL or raw JSON/YAML content." : undefined}
          >
            <div className="relative">
              <Textarea
                value={specUrl}
                onChange={(e) => {
                  setSpecUrl((e.target as HTMLTextAreaElement).value);
                  if (preview) {
                    setPreview(null);
                    setBaseUrl("");
                    setCustomHeaders([]);
                    setSelectedStrategy(-1);
                  }
                }}
                placeholder="https://api.example.com/openapi.json"
                rows={3}
                maxRows={10}
                className="font-mono text-sm"
              />
              {analyzing && (
                <div className="pointer-events-none absolute right-2 top-2">
                  <IOSSpinner className="size-4" />
                </div>
              )}
            </div>
          </CardStackEntryField>
        </CardStackContent>
      </CardStack>

      {/* ── Title card (shown below spec input after analysis) ── */}
      {preview ? (
        <CardStack>
          <CardStackContent className="border-t-0">
            <CardStackEntry>
              {faviconUrl && !faviconFailed && (
                <img
                  src={faviconUrl}
                  alt=""
                  className="size-4 shrink-0 object-contain"
                  onError={() => setFaviconFailed(true)}
                />
              )}
              <CardStackEntryContent>
                <CardStackEntryTitle>
                  {Option.getOrElse(preview.title, () => "API")}
                </CardStackEntryTitle>
                <CardStackEntryDescription>
                  {Option.getOrElse(preview.version, () => "")}
                  {Option.isSome(preview.version) && " · "}
                  {preview.operationCount} operation
                  {preview.operationCount !== 1 ? "s" : ""}
                  {preview.tags.length > 0 &&
                    ` · ${preview.tags.length} tag${preview.tags.length !== 1 ? "s" : ""}`}
                </CardStackEntryDescription>
              </CardStackEntryContent>
            </CardStackEntry>
          </CardStackContent>
        </CardStack>
      ) : analyzing ? (
        <CardStack>
          <CardStackContent className="border-t-0">
            <CardStackEntry>
              <Skeleton className="size-4 shrink-0 rounded" />
              <CardStackEntryContent>
                <Skeleton className="h-4 w-40" />
                <Skeleton className="mt-1 h-3 w-56" />
              </CardStackEntryContent>
            </CardStackEntry>
          </CardStackContent>
        </CardStack>
      ) : null}

      {analyzeError && (
        <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
          <p className="text-[12px] text-destructive">{analyzeError}</p>
        </div>
      )}

      {/* ── Everything below appears after analysis ── */}
      {preview && (
        <>
          <SourceIdentityFields identity={identity} />

          {/* Base URL */}
          <CardStack>
            <CardStackContent className="border-t-0">
              <CardStackEntryField label="Base URL">
                {servers.length > 1 ? (
                  <div className="space-y-2">
                    <RadioGroup value={baseUrl} onValueChange={setBaseUrl} className="gap-1.5">
                      {servers.map((s, i) => {
                        const url = s.url ?? "";
                        return (
                          <Label
                            key={i}
                            className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 cursor-pointer transition-colors ${
                              baseUrl === url
                                ? "border-primary/50 bg-primary/[0.03]"
                                : "border-border hover:bg-accent/50"
                            }`}
                          >
                            <RadioGroupItem value={url} />
                            <span className="font-mono text-xs text-foreground truncate">
                              {url}
                            </span>
                          </Label>
                        );
                      })}
                    </RadioGroup>
                    <Input
                      value={baseUrl}
                      onChange={(e) => setBaseUrl((e.target as HTMLInputElement).value)}
                      placeholder="Or enter a custom URL…"
                      className="font-mono text-sm"
                    />
                  </div>
                ) : (
                  <Input
                    value={baseUrl}
                    onChange={(e) => setBaseUrl((e.target as HTMLInputElement).value)}
                    placeholder="https://api.example.com"
                    className="font-mono text-sm"
                  />
                )}

                {!baseUrl.trim() && (
                  <p className="text-[11px] text-amber-600 dark:text-amber-400">
                    A base URL is required to make requests.
                  </p>
                )}
              </CardStackEntryField>
            </CardStackContent>
          </CardStack>

          <section className="space-y-2.5">
            <FieldLabel>Authentication</FieldLabel>
            {preview.headerPresets.length > 0 && (
              <RadioGroup
                value={String(selectedStrategy)}
                onValueChange={(value) => selectStrategy(Number(value))}
                className="gap-1.5"
              >
                {preview.headerPresets.map((preset, i) => (
                  <Label
                    key={i}
                    className={`flex items-start gap-2.5 rounded-lg border px-3 py-2 cursor-pointer transition-colors ${
                      selectedStrategy === i
                        ? "border-primary/50 bg-primary/[0.03]"
                        : "border-border hover:bg-accent/50"
                    }`}
                  >
                    <RadioGroupItem value={String(i)} className="mt-0.5" />
                    <div className="min-w-0 flex-1">
                      <div className="text-xs font-medium text-foreground">{preset.label}</div>
                      {preset.secretHeaders.length > 0 && (
                        <div className="mt-0.5 font-mono text-[10px] text-muted-foreground">
                          {preset.secretHeaders.join(" · ")}
                        </div>
                      )}
                    </div>
                  </Label>
                ))}
                <Label
                  className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 cursor-pointer transition-colors ${
                    selectedStrategy === -2
                      ? "border-primary/50 bg-primary/[0.03]"
                      : "border-border hover:bg-accent/50"
                  }`}
                >
                  <RadioGroupItem value="-2" />
                  <span className="text-xs font-medium text-foreground">Custom</span>
                </Label>
                <Label
                  className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 cursor-pointer transition-colors ${
                    selectedStrategy === -1
                      ? "border-primary/50 bg-primary/[0.03]"
                      : "border-border hover:bg-accent/50"
                  }`}
                >
                  <RadioGroupItem value="-1" />
                  <span className="text-xs font-medium text-foreground">None</span>
                </Label>
              </RadioGroup>
            )}
            {(preview.headerPresets.length === 0 || selectedStrategy !== -1) && (
              <HeadersList
                headers={customHeaders}
                onHeadersChange={handleHeadersChange}
                existingSecrets={secretList}
              />
            )}
          </section>

          {/* Add error */}
          {addError && (
            <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
              <p className="text-[12px] text-destructive">{addError}</p>
            </div>
          )}
        </>
      )}

      <FloatActions>
        <Button variant="ghost" onClick={props.onCancel} disabled={adding}>
          Cancel
        </Button>
        {preview && (
          <Button onClick={handleAdd} disabled={!canAdd || adding}>
            {adding && <Spinner className="size-3.5" />}
            {adding ? "Adding…" : "Add source"}
          </Button>
        )}
      </FloatActions>
    </div>
  );
}