import { Suspense, useState, useCallback, useMemo } from "react";
import { Link, useNavigate } from "@tanstack/react-router";
import { Result, useAtomSet } from "@effect-atom/atom-react";
import { detectSource } from "../api/atoms";
import { useSourcesWithPending } from "../api/optimistic";
import { useScope } from "../hooks/use-scope";
import type { SourcePlugin, SourcePreset } from "../plugins/source-plugin";
import { McpInstallCard } from "../components/mcp-install-card";
import { Button } from "../components/button";
import { Badge } from "../components/badge";
import { Input } from "../components/input";
import {
  CardStack,
  CardStackHeader,
  CardStackContent,
  CardStackEntry,
  CardStackEntryField,
  CardStackEntryMedia,
  CardStackEntryContent,
  CardStackEntryTitle,
  CardStackEntryDescription,
  CardStackEntryActions,
} from "../components/card-stack";
import { SourceFavicon } from "../components/source-favicon";
import { Skeleton } from "../components/skeleton";

const KIND_TO_PLUGIN_KEY: Record<string, string> = {
  openapi: "openapi",
  mcp: "mcp",
  graphql: "graphql",
  googleDiscovery: "googleDiscovery",
};

// ---------------------------------------------------------------------------
// Page
// ---------------------------------------------------------------------------

export function SourcesPage(props: { sourcePlugins: readonly SourcePlugin[] }) {
  const { sourcePlugins } = props;
  const [url, setUrl] = useState("");
  const [detecting, setDetecting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const scopeId = useScope();
  const sources = useSourcesWithPending(scopeId);
  const doDetect = useAtomSet(detectSource, { mode: "promise" });
  const navigate = useNavigate();

  const handleDetect = useCallback(async () => {
    const trimmed = url.trim();
    if (!trimmed) return;
    setDetecting(true);
    setError(null);
    try {
      const results = await doDetect({
        path: { scopeId },
        payload: { url: trimmed },
      });
      if (results.length === 0) {
        setError("Could not detect a source type from this URL. Try adding manually.");
        setDetecting(false);
        return;
      }
      const pluginKey = KIND_TO_PLUGIN_KEY[results[0].kind];
      if (pluginKey) {
        void navigate({
          to: "/sources/add/$pluginKey",
          params: { pluginKey },
          search: { url: trimmed, namespace: results[0].namespace },
        });
      } else {
        setError(`Detected source type "${results[0].kind}" but no plugin is available for it.`);
      }
    } catch {
      setError("Detection failed. Try adding a source manually.");
    } finally {
      setDetecting(false);
    }
  }, [url, doDetect, navigate, scopeId]);

  return (
    <div className="min-h-0 flex-1 overflow-y-auto">
      <div className="mx-auto max-w-4xl px-6 py-10 lg:px-10 lg:py-14">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-end justify-between">
            <div>
              <h1 className="font-display text-3xl tracking-tight text-foreground lg:text-4xl">
                Sources
              </h1>
              <p className="mt-1.5 text-[14px] text-muted-foreground">
                Tool providers available in this workspace.
              </p>
            </div>
          </div>

          {/* URL detection input */}
          <div className="mt-5">
            <CardStack>
              <CardStackContent>
                <CardStackEntryField
                  label="Paste URL"
                  description="auto-detect source type"
                  hint={error ?? undefined}
                >
                  <div className="flex gap-2">
                    <Input
                      type="url"
                      value={url}
                      onChange={(e) => {
                        setUrl((e.target as HTMLInputElement).value);
                        setError(null);
                      }}
                      onKeyDown={(e) => {
                        if (e.key === "Enter") handleDetect();
                      }}
                      placeholder="https://..."
                      disabled={detecting}
                      className="flex-1"
                    />
                    <Button onClick={handleDetect} disabled={detecting || !url.trim()}>
                      {detecting ? "Detecting..." : "Detect"}
                    </Button>
                  </div>
                  <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                    Or add manually:{" "}
                    {sourcePlugins.map((p) => (
                      <Link
                        key={p.key}
                        to="/sources/add/$pluginKey"
                        params={{ pluginKey: p.key }}
                        className="rounded-md border border-border px-2 py-1 text-xs font-medium transition-colors hover:bg-muted"
                      >
                        {p.label}
                      </Link>
                    ))}
                  </div>
                </CardStackEntryField>
              </CardStackContent>
            </CardStack>
          </div>
        </div>

        <div className="mb-8">
          <McpInstallCard />
        </div>

        {Result.match(sources, {
          onInitial: () => <SourcesGridSkeleton />,
          onFailure: () => <p className="text-sm text-destructive">Failed to load sources</p>,
          onSuccess: ({ value }) => {
            const connectedSources = value.filter((source) => !source.runtime);

            return value.length === 0 ? (
              <div className="mb-8 flex flex-col items-center justify-center rounded-2xl border border-dashed border-border py-20">
                <div className="flex size-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground mb-4">
                  <svg viewBox="0 0 24 24" fill="none" className="size-5">
                    <path
                      d="M12 6v12M6 12h12"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                    />
                  </svg>
                </div>
                <p className="text-[14px] font-medium text-foreground/70 mb-1">No sources yet</p>
                <p className="text-[13px] text-muted-foreground/60 mb-5">
                  Add a source to get started.
                </p>
              </div>
            ) : (
              <div className="mb-8 space-y-8">
                {connectedSources.length > 0 && (
                  <section className="space-y-3">
                    <SourceGrid
                      sources={connectedSources}
                      sourcePlugins={sourcePlugins}
                    />
                  </section>
                )}
              </div>
            );
          },
        })}

        <div className="mb-8 border-t border-border/50" />

        <PresetGrid plugins={sourcePlugins} />
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Preset grid
// ---------------------------------------------------------------------------

type PresetEntry = {
  preset: SourcePreset;
  pluginKey: string;
  pluginLabel: string;
};

function PresetGrid(props: { plugins: readonly SourcePlugin[] }) {
  const allPresets = useMemo(() => {
    const entries: PresetEntry[] = [];
    for (const plugin of props.plugins) {
      for (const preset of plugin.presets ?? []) {
        entries.push({
          preset,
          pluginKey: plugin.key,
          pluginLabel: plugin.label,
        });
      }
    }
    return entries;
  }, [props.plugins]);

  if (allPresets.length === 0) return null;

  return (
    <section className="mb-8 space-y-3">
      <CardStack searchable>
        <CardStackHeader>Popular sources</CardStackHeader>
        <CardStackContent>
          {allPresets.map(({ preset, pluginKey, pluginLabel }) => {
            const search: Record<string, string> = { preset: preset.id };
            if (preset.url) search.url = preset.url;
            return (
              <CardStackEntry
                key={`${pluginKey}-${preset.id}`}
                asChild
                searchText={`${preset.name} ${preset.summary ?? ""} ${pluginLabel}`}
              >
                <Link to="/sources/add/$pluginKey" params={{ pluginKey }} search={search}>
                  <CardStackEntryMedia>
                    {preset.icon ? (
                      <img
                        src={preset.icon}
                        alt=""
                        className="size-5 object-contain"
                        loading="lazy"
                      />
                    ) : (
                      <svg viewBox="0 0 16 16" className="size-3.5" fill="none">
                        <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.2" />
                      </svg>
                    )}
                  </CardStackEntryMedia>
                  <CardStackEntryContent>
                    <CardStackEntryTitle>{preset.name}</CardStackEntryTitle>
                    <CardStackEntryDescription>{preset.summary}</CardStackEntryDescription>
                  </CardStackEntryContent>
                  <CardStackEntryActions>
                    <Badge variant="secondary">{pluginLabel}</Badge>
                  </CardStackEntryActions>
                </Link>
              </CardStackEntry>
            );
          })}
        </CardStackContent>
      </CardStack>
    </section>
  );
}

// ---------------------------------------------------------------------------
// Source grid
// ---------------------------------------------------------------------------

function SourceGrid(props: {
  sources: readonly {
    id: string;
    name: string;
    kind: string;
    url?: string;
    runtime?: boolean;
  }[];
  sourcePlugins: readonly SourcePlugin[];
}) {
  const pluginByKind = useMemo(() => {
    const out = new Map<string, SourcePlugin>();
    for (const p of props.sourcePlugins) out.set(p.key, p);
    return out;
  }, [props.sourcePlugins]);

  return (
    <CardStack searchable>
      <CardStackHeader>Connected</CardStackHeader>
      <CardStackContent>
        {props.sources.map((s) => {
          const pluginKey = KIND_TO_PLUGIN_KEY[s.kind] ?? s.kind;
          const plugin = pluginByKind.get(pluginKey);
          const SummaryComponent = plugin?.summary;
          return (
            <CardStackEntry key={s.id} asChild searchText={`${s.name} ${s.id} ${s.kind}`}>
              <Link to="/sources/$namespace" params={{ namespace: s.id }}>
                <CardStackEntryMedia>
                  <SourceFavicon url={s.url} size={32} />
                </CardStackEntryMedia>
                <CardStackEntryContent>
                  <CardStackEntryTitle>{s.name}</CardStackEntryTitle>
                  <CardStackEntryDescription>{s.id}</CardStackEntryDescription>
                </CardStackEntryContent>
                <CardStackEntryActions>
                  {SummaryComponent && (
                    <Suspense fallback={null}>
                      <SummaryComponent sourceId={s.id} />
                    </Suspense>
                  )}
                  {s.runtime && <Badge className="bg-muted text-muted-foreground">built-in</Badge>}
                  <Badge variant="secondary">{s.kind}</Badge>
                </CardStackEntryActions>
              </Link>
            </CardStackEntry>
          );
        })}
      </CardStackContent>
    </CardStack>
  );
}

// ---------------------------------------------------------------------------
// Loading skeleton
// ---------------------------------------------------------------------------

function SourcesGridSkeleton() {
  return (
    <CardStack>
      <CardStackContent>
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="flex items-center gap-3 px-4 py-3">
            <Skeleton className="size-8 shrink-0 rounded-md" />
            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
              <Skeleton className="h-4" style={{ width: `${40 + ((i * 11) % 30)}%` }} />
              <Skeleton className="h-3" style={{ width: `${25 + ((i * 7) % 20)}%` }} />
            </div>
            <Skeleton className="h-5 w-16 rounded-full" />
          </div>
        ))}
      </CardStackContent>
    </CardStack>
  );
}