import { Suspense, useEffect, useMemo, useState } from "react";
import { useNavigate } from "@tanstack/react-router";
import { useAtomValue, useAtomSet, useAtomRefresh, Result } from "@effect-atom/atom-react";
import {
  sourceToolsAtom,
  sourcesAtom,
  sourceAtom,
  removeSource,
  refreshSource,
} from "../api/atoms";
import { sourceWriteKeys } from "../api/reactivity-keys";
import { ToolTree } from "../components/tool-tree";
import { ToolDetail, ToolDetailEmpty } from "../components/tool-detail";
import type { ToolSummary } from "../components/tool-tree";
import { useScope } from "../hooks/use-scope";
import type { SourcePlugin } from "../plugins/source-plugin";
import { Button } from "../components/button";
import { Badge } from "../components/badge";
import { Skeleton } from "../components/skeleton";

export function SourceDetailPage(props: {
  namespace: string;
  sourcePlugins?: readonly SourcePlugin[];
}) {
  const { namespace, sourcePlugins } = props;
  const scopeId = useScope();
  const source = useAtomValue(sourceAtom(namespace, scopeId));
  const tools = useAtomValue(sourceToolsAtom(namespace, scopeId));
  const refreshSources = useAtomRefresh(sourcesAtom(scopeId));
  const refreshTools = useAtomRefresh(sourceToolsAtom(namespace, scopeId));
  const doRemove = useAtomSet(removeSource, { mode: "promise" });
  const doRefresh = useAtomSet(refreshSource, { mode: "promise" });
  const navigate = useNavigate();

  // HMR: refresh source tools when the backend is hot-reloaded
  useEffect(() => {
    if (!import.meta.hot) return;
    const refresh = () => {
      refreshTools();
      refreshSources();
    };
    import.meta.hot.on("executor:backend-updated", refresh);
    return () => {
      import.meta.hot?.off("executor:backend-updated", refresh);
    };
  }, [refreshTools, refreshSources]);

  const [selectedToolId, setSelectedToolId] = useState<string | null>(null);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [refreshing, setRefreshing] = useState(false);
  const [editing, setEditing] = useState(false);

  const sourceData = Result.isSuccess(source) ? source.value : null;
  const canRefresh = sourceData ? (sourceData.canRefresh ?? true) : false;
  const canRemove = sourceData ? (sourceData.canRemove ?? true) : false;
  const canEdit = sourceData ? (sourceData.canEdit ?? false) : false;

  // Find the plugin edit component based on source kind
  const editPlugin = useMemo(() => {
    if (!sourceData || !sourcePlugins) return null;
    return sourcePlugins.find((p) => p.key === sourceData.kind) ?? null;
  }, [sourceData, sourcePlugins]);

  const sourceTools: ToolSummary[] = useMemo(() => {
    if (!Result.isSuccess(tools)) return [];
    return tools.value.map((t) => ({
      id: t.id,
      name: t.name,
      pluginKey: t.pluginId,
      description: t.description,
    }));
  }, [tools]);

  const selectedTool = useMemo(
    () => sourceTools.find((t) => t.id === selectedToolId) ?? null,
    [sourceTools, selectedToolId],
  );

  const handleDelete = async () => {
    setDeleting(true);
    try {
      await doRemove({
        path: { scopeId, sourceId: namespace },
        reactivityKeys: sourceWriteKeys,
      });
      void navigate({ to: "/" });
    } catch {
      setDeleting(false);
      setConfirmDelete(false);
    }
  };

  const handleRefresh = async () => {
    setRefreshing(true);
    try {
      await doRefresh({
        path: { scopeId, sourceId: namespace },
        reactivityKeys: sourceWriteKeys,
      });
    } finally {
      setRefreshing(false);
    }
  };

  const handleEditSave = () => {
    setEditing(false);
  };

  return (
    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
      {/* Header bar */}
      <div className="flex h-12 shrink-0 items-center justify-between border-b border-border bg-background/95 px-4 backdrop-blur-sm">
        <div className="flex min-w-0 items-center gap-3">
          <h2 className="truncate text-sm font-semibold text-foreground">
            {sourceData?.name ?? namespace}
          </h2>
          {sourceData?.runtime && (
            <Badge className="bg-muted text-muted-foreground">built-in</Badge>
          )}
          <Badge variant="secondary">{sourceData?.kind ?? "source"}</Badge>
          {Result.isSuccess(tools) && !editing && (
            <span className="hidden text-xs tabular-nums text-muted-foreground sm:block">
              {sourceTools.length} {sourceTools.length === 1 ? "tool" : "tools"}
            </span>
          )}
        </div>

        <div className="flex shrink-0 items-center gap-2">
          {editPlugin?.signIn && !editing && (
            <Suspense fallback={null}>
              <editPlugin.signIn sourceId={namespace} />
            </Suspense>
          )}

          {canEdit && editPlugin && !editing && (
            <Button variant="outline" size="sm" onClick={() => setEditing(true)}>
              Edit
            </Button>
          )}

          {editing && (
            <Button variant="outline" size="sm" onClick={() => setEditing(false)}>
              Back to tools
            </Button>
          )}

          {canRefresh && !editing && (
            <Button
              variant="outline"
              size="sm"
              onClick={() => void handleRefresh()}
              disabled={refreshing}
            >
              {refreshing ? "Refreshing..." : "Refresh"}
            </Button>
          )}

          {canRemove &&
            !editing &&
            (confirmDelete ? (
              <div className="flex items-center gap-2">
                <span className="text-xs font-medium text-destructive">Confirm?</span>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setConfirmDelete(false)}
                  disabled={deleting}
                >
                  Cancel
                </Button>
                <Button
                  variant="destructive"
                  size="sm"
                  onClick={() => void handleDelete()}
                  disabled={deleting}
                >
                  {deleting ? "Deleting..." : "Delete"}
                </Button>
              </div>
            ) : (
              <Button
                variant="outline"
                size="sm"
                onClick={() => setConfirmDelete(true)}
                className="border-destructive/30 text-destructive hover:bg-destructive/10"
              >
                Delete
              </Button>
            ))}
        </div>
      </div>

      {/* Edit view */}
      {editing && editPlugin ? (
        <div className="min-h-0 flex-1 overflow-y-auto">
          <div className="mx-auto max-w-2xl px-6 py-8">
            <Suspense fallback={<EditFormSkeleton />}>
              <editPlugin.edit sourceId={namespace} onSave={handleEditSave} />
            </Suspense>
          </div>
        </div>
      ) : (
        /* Content -- split pane */
        Result.match(tools, {
          onInitial: () => <SourceDetailSkeleton />,
          onFailure: () => <div className="p-6 text-sm text-destructive">Failed to load tools</div>,
          onSuccess: () => (
            <div className="flex min-h-0 flex-1 overflow-hidden">
              {/* Left: tool tree */}
              <div className="flex w-72 shrink-0 flex-col border-r border-border/60 lg:w-80 xl:w-[22rem]">
                <ToolTree
                  tools={sourceTools}
                  selectedToolId={selectedToolId}
                  onSelect={setSelectedToolId}
                />
              </div>

              {/* Right: tool detail */}
              <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
                {selectedTool ? (
                  <ToolDetail
                    toolId={selectedTool.id}
                    toolName={selectedTool.name}
                    toolDescription={selectedTool.description}
                    scopeId={scopeId}
                  />
                ) : (
                  <ToolDetailEmpty hasTools={sourceTools.length > 0} />
                )}
              </div>
            </div>
          ),
        })
      )}
    </div>
  );
}

function SourceDetailSkeleton() {
  return (
    <div className="flex min-h-0 flex-1 overflow-hidden">
      {/* Left: tool tree skeleton */}
      <div className="flex w-72 shrink-0 flex-col gap-1 border-r border-border/60 p-3 lg:w-80 xl:w-[22rem]">
        <Skeleton className="mb-2 h-8 w-full rounded-md" />
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="flex items-center gap-2 rounded-md px-2 py-1.5">
            <Skeleton className="size-4 shrink-0 rounded" />
            <Skeleton
              className="h-3.5"
              style={{ width: `${55 + ((i * 13) % 35)}%` }}
            />
          </div>
        ))}
      </div>

      {/* Right: tool detail skeleton */}
      <div className="flex min-w-0 flex-1 flex-col gap-6 overflow-hidden p-6">
        <div className="flex flex-col gap-2">
          <Skeleton className="h-5 w-48" />
          <Skeleton className="h-4 w-80" />
          <Skeleton className="h-4 w-64" />
        </div>
        <div className="flex flex-col gap-3">
          <Skeleton className="h-4 w-24" />
          <Skeleton className="h-20 w-full rounded-md" />
          <Skeleton className="h-4 w-24" />
          <Skeleton className="h-20 w-full rounded-md" />
        </div>
        <Skeleton className="h-9 w-32 rounded-md" />
      </div>
    </div>
  );
}

function EditFormSkeleton() {
  return (
    <div className="flex flex-col gap-5 p-6">
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-20" />
        <Skeleton className="h-9 w-full rounded-md" />
      </div>
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-24" />
        <Skeleton className="h-9 w-full rounded-md" />
      </div>
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-28" />
        <Skeleton className="h-24 w-full rounded-md" />
      </div>
      <div className="flex justify-end gap-2 pt-2">
        <Skeleton className="h-9 w-20 rounded-md" />
        <Skeleton className="h-9 w-24 rounded-md" />
      </div>
    </div>
  );
}