"use client";

import { useCallback, useMemo, useRef, useState } from "react";
import { Schema } from "effect";
import {
  PluginRuntimeResponseSchema,
  type PluginRuntimeView,
} from "@local-studio/agent-runtime/plugin-runtime-contract";
import { ApiErrorResponseSchema } from "@local-studio/agent-runtime/api-contract";
import {
  Alert,
  Button,
  ModelButton,
  SearchInput,
  StatusPill,
  type UiTone,
  UiModal,
  UiModalBody,
  UiModalFooter,
  UiModalHeader,
} from "@/ui";
import { Eye, X } from "@/ui/icon-registry";
import { ResourceDrawer, ResourceDrawerSection, ResourceFact } from "@/ui/resource-drawer";
import { ResourceLogo } from "@/ui/resource-logo";
import { useMountSubscription } from "@/hooks/use-mount-subscription";
import { SettingsButton, SettingsGroup } from "@/features/settings/settings-ui";
import {
  DataRow,
  EndCell,
  HeadCell,
  IdentityCell,
  RowAction,
  StatusText,
  statusToneFor,
  TableFrame,
  TableNotice,
  TableSection,
  TableSkeleton,
  TextCell,
} from "@/features/recipes/recipes-content/catalog-table-shell";
import { GoogleAccountModal } from "./google-account-modal";

type PluginStatus = { label: string; tone: UiTone };

function responseError(body: unknown, fallback: string): string {
  try {
    return Schema.decodeUnknownSync(ApiErrorResponseSchema)(body).error;
  } catch {
    return fallback;
  }
}

async function pluginResponse(response: Response, fallback: string) {
  const body: unknown = await response.json().catch(() => null);
  if (!response.ok) throw new Error(responseError(body, fallback));
  return Schema.decodeUnknownSync(PluginRuntimeResponseSchema)(body);
}

function capabilitySummary(plugin: PluginRuntimeView): string {
  return [
    plugin.provides.skills ? "skills" : null,
    plugin.provides.mcpServers || plugin.account
      ? `${plugin.tools.serverCount} ${plugin.account ? "remote " : ""}MCP ${plugin.tools.serverCount === 1 ? "server" : "servers"}`
      : null,
    plugin.provides.apps ? "account app" : null,
    `v${plugin.version}`,
  ]
    .filter((value): value is string => Boolean(value))
    .join(" · ");
}

function pluginStatus(plugin: PluginRuntimeView): PluginStatus {
  if (plugin.account && !plugin.account.configured) return { label: "Setup", tone: "warning" };
  if (plugin.account && !plugin.account.connected) return { label: "Sign in", tone: "warning" };
  if (plugin.tools.state === "enabled") {
    return {
      label: `Observe · ${plugin.tools.allowedToolCount} ${plugin.tools.allowedToolCount === 1 ? "tool" : "tools"}`,
      tone: "good",
    };
  }
  if (plugin.tools.state === "available") return { label: "Available", tone: "info" };
  if (plugin.tools.state === "disabled") return { label: "Off", tone: "default" };
  if (plugin.tools.state === "invalid") return { label: "Unavailable", tone: "danger" };
  if (plugin.tools.state === "configuration_required" || plugin.provides.apps) {
    return { label: "Adapter needed", tone: "warning" };
  }
  return { label: "Skills", tone: "default" };
}

function activationAction(plugin: PluginRuntimeView): "account" | "connect" | "disconnect" | null {
  if (plugin.account && !plugin.account.connected) return "account";
  if (plugin.account) {
    return plugin.tools.state === "available" || plugin.tools.state === "disabled"
      ? "connect"
      : null;
  }
  if (plugin.tools.state === "enabled") return "disconnect";
  if (plugin.tools.state === "available" || plugin.tools.state === "disabled") return "connect";
  return null;
}

type PluginRowAction = ReturnType<typeof activationAction>;

function pluginActionLabel(plugin: PluginRuntimeView, action: PluginRowAction): string {
  if (action === "account") return plugin.account?.configured ? "Sign in" : "Set up";
  if (action === "connect") return "Connect";
  return "Disconnect";
}

function PluginRowActions({
  plugin,
  action,
  busy,
  onConnect,
  onDisconnect,
  onAccount,
}: {
  plugin: PluginRuntimeView;
  action: PluginRowAction;
  busy: boolean;
  onConnect: () => void;
  onDisconnect: () => void;
  onAccount: () => void;
}) {
  const actionLabel = action ? pluginActionLabel(plugin, action) : "";
  const handleAction =
    action === "account" ? onAccount : action === "connect" ? onConnect : onDisconnect;
  return (
    <>
      {plugin.account?.connected ? (
        <RowAction onClick={onAccount} disabled={busy} title={`Manage ${plugin.displayName}`}>
          Manage
        </RowAction>
      ) : null}
      {action ? (
        <RowAction
          onClick={handleAction}
          disabled={busy}
          tone={action === "disconnect" ? "danger" : "accent"}
          title={`${actionLabel} ${plugin.displayName}`}
        >
          {busy ? "Working" : actionLabel}
        </RowAction>
      ) : null}
    </>
  );
}

const PLUGIN_COLUMNS = ["Plugin", "Capabilities", "State"] as const;
const PLUGIN_MIN_WIDTH = "min-w-[40rem]";

function PluginRow({
  plugin,
  busy,
  onOpen,
  onConnect,
  onDisconnect,
  onAccount,
}: {
  plugin: PluginRuntimeView;
  busy: boolean;
  onOpen: () => void;
  onConnect: () => void;
  onDisconnect: () => void;
  onAccount: () => void;
}) {
  const status = pluginStatus(plugin);
  const action = activationAction(plugin);
  return (
    <DataRow onOpen={onOpen} ariaLabel={`Open ${plugin.displayName}`}>
      <IdentityCell
        leading={
          <ResourceLogo
            identity={plugin.id}
            label={plugin.displayName}
            company={plugin.source}
            brandColor={plugin.brandColor}
          />
        }
        label={plugin.displayName}
        description={plugin.account?.email || plugin.description || plugin.category}
      />
      <TextCell sub={plugin.tools.reason || undefined}>
        {`${plugin.source} · ${capabilitySummary(plugin)}`}
      </TextCell>
      <EndCell>
        <div className="flex items-center justify-end gap-2">
          <StatusText tone={statusToneFor(status.tone)}>{status.label}</StatusText>
          {action || plugin.account?.connected ? (
            <PluginRowActions
              plugin={plugin}
              action={action}
              busy={busy}
              onConnect={onConnect}
              onDisconnect={onDisconnect}
              onAccount={onAccount}
            />
          ) : null}
        </div>
      </EndCell>
    </DataRow>
  );
}

function PluginDrawer({
  plugin,
  busy,
  onClose,
  onConnect,
  onDisconnect,
  onAccount,
}: {
  plugin: PluginRuntimeView;
  busy: boolean;
  onClose: () => void;
  onConnect: () => void;
  onDisconnect: () => void;
  onAccount: () => void;
}) {
  const status = pluginStatus(plugin);
  const action = activationAction(plugin);
  const capabilities = [
    ...plugin.capabilities,
    plugin.provides.skills ? "Skills" : null,
    plugin.provides.mcpServers ? "MCP tools" : null,
    plugin.provides.apps ? "App integration" : null,
  ].filter((value): value is string => Boolean(value));
  return (
    <ResourceDrawer
      title={plugin.displayName}
      icon={
        <ResourceLogo
          identity={plugin.id}
          label={plugin.displayName}
          company={plugin.source}
          brandColor={plugin.brandColor}
        />
      }
      badge={<StatusPill tone={status.tone}>{status.label}</StatusPill>}
      status={`${plugin.source} · ${plugin.category} · v${plugin.version}`}
      footer={
        action || plugin.account?.connected ? (
          <PluginRowActions
            plugin={plugin}
            action={action}
            busy={busy}
            onConnect={onConnect}
            onDisconnect={onDisconnect}
            onAccount={onAccount}
          />
        ) : null
      }
      onClose={onClose}
    >
      <p className="mb-6 text-[length:var(--fs-base)] leading-relaxed text-(--ui-muted)">
        {plugin.description || "No plugin description was provided."}
      </p>
      <ResourceDrawerSection title="Identity">
        <ResourceFact label="Company or source" value={plugin.source} />
        <ResourceFact label="Category" value={plugin.category} />
        <ResourceFact label="Plugin ID" value={plugin.id} mono />
        <ResourceFact label="Version" value={plugin.version} mono />
      </ResourceDrawerSection>
      <ResourceDrawerSection title="Capabilities">
        <ResourceFact label="Provides" value={capabilities.join(" · ") || "Skill bundle"} />
        <ResourceFact label="Tool servers" value={String(plugin.tools.serverCount)} mono />
        <ResourceFact label="Allowed tools" value={String(plugin.tools.allowedToolCount)} mono />
        <ResourceFact label="Mode" value={plugin.tools.mode ?? "not connected"} mono />
      </ResourceDrawerSection>
      {plugin.account ? (
        <ResourceDrawerSection title="Account">
          <ResourceFact label="Provider" value={plugin.account.provider} />
          <ResourceFact
            label="Connection"
            value={plugin.account.connected ? "Connected" : "Not connected"}
          />
          {plugin.account.email ? (
            <ResourceFact label="Account" value={plugin.account.email} />
          ) : null}
        </ResourceDrawerSection>
      ) : null}
    </ResourceDrawer>
  );
}

export function PluginsSection() {
  const [plugins, setPlugins] = useState<readonly PluginRuntimeView[]>([]);
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState("");
  const [query, setQuery] = useState("");
  const [busyId, setBusyId] = useState<string | null>(null);
  const [pending, setPending] = useState<PluginRuntimeView | null>(null);
  const [selectedPlugin, setSelectedPlugin] = useState<PluginRuntimeView | null>(null);
  const [accountPlugin, setAccountPlugin] = useState<PluginRuntimeView | null>(null);
  const requestGeneration = useRef(0);

  const loadPlugins = useCallback(() => {
    const generation = ++requestGeneration.current;
    return fetch("/api/agent/plugins", { cache: "no-store" })
      .then(async (response) => {
        const payload = await pluginResponse(response, "Plugin discovery failed");
        if (generation !== requestGeneration.current) return;
        setPlugins(payload.plugins);
        setError("");
      })
      .catch((loadError: unknown) => {
        if (generation !== requestGeneration.current) return;
        setError(loadError instanceof Error ? loadError.message : "Plugin discovery failed");
      })
      .finally(() => {
        if (generation === requestGeneration.current) setLoaded(true);
      });
  }, []);

  useMountSubscription(() => {
    void loadPlugins();
  }, [loadPlugins]);

  const handleAccountChanged = useCallback(() => {
    void loadPlugins();
  }, [loadPlugins]);

  const visiblePlugins = useMemo(() => {
    const normalized = query.trim().toLowerCase();
    if (!normalized) return plugins;
    return plugins.filter((plugin) =>
      `${plugin.displayName} ${plugin.description} ${plugin.category} ${capabilitySummary(plugin)}`
        .toLowerCase()
        .includes(normalized),
    );
  }, [plugins, query]);

  const setEnabled = async (plugin: PluginRuntimeView, enabled: boolean) => {
    const generation = ++requestGeneration.current;
    setBusyId(plugin.id);
    setError("");
    try {
      const response = await fetch(`/api/agent/plugins/${encodeURIComponent(plugin.id)}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ enabled }),
      });
      const payload = await pluginResponse(response, "Plugin activation failed");
      if (generation !== requestGeneration.current) return;
      setPlugins(payload.plugins);
      setPending(null);
    } catch (activationError) {
      if (generation !== requestGeneration.current) return;
      setError(
        activationError instanceof Error ? activationError.message : "Plugin activation failed",
      );
    } finally {
      setBusyId((current) => (current === plugin.id ? null : current));
    }
  };

  return (
    <>
      {error ? (
        <div className="mb-4">
          <Alert variant="error">{error}</Alert>
        </div>
      ) : null}
      <TableSection
        title="Plugins"
        description="Capability bundles from Local Studio and Codex, with their company, tools, accounts, and skills."
        actions={
          <div className="flex items-center gap-2">
            <SearchInput
              value={query}
              onChange={setQuery}
              placeholder="Search plugins"
              className="w-56"
            />
            <StatusText tone={error ? "warn" : loaded ? "ok" : "dim"}>
              {loaded ? `${visiblePlugins.length} of ${plugins.length}` : "discovering"}
            </StatusText>
          </div>
        }
      >
        {!loaded ? (
          <TableSkeleton columns={PLUGIN_COLUMNS} rows={3} minWidthClass={PLUGIN_MIN_WIDTH} />
        ) : visiblePlugins.length === 0 ? (
          <TableNotice
            title={plugins.length ? `No plugin matches “${query}”` : "No plugins found"}
            body="Plugins are discovered from the manifests Local Studio and Codex install on this machine. Install one, or clear the search."
          />
        ) : (
          <TableFrame minWidthClass={PLUGIN_MIN_WIDTH}>
            <thead>
              <tr>
                {PLUGIN_COLUMNS.map((column, index) => (
                  <HeadCell key={column} numeric={index === PLUGIN_COLUMNS.length - 1}>
                    {column}
                  </HeadCell>
                ))}
              </tr>
            </thead>
            <tbody>
              {visiblePlugins.map((plugin) => (
                <PluginRow
                  key={plugin.id}
                  plugin={plugin}
                  busy={busyId === plugin.id}
                  onOpen={() => setSelectedPlugin(plugin)}
                  onConnect={() => {
                    setSelectedPlugin(null);
                    setPending(plugin);
                  }}
                  onDisconnect={() => {
                    setSelectedPlugin(null);
                    void setEnabled(plugin, false);
                  }}
                  onAccount={() => {
                    setSelectedPlugin(null);
                    setAccountPlugin(plugin);
                  }}
                />
              ))}
            </tbody>
          </TableFrame>
        )}
      </TableSection>
      {selectedPlugin ? (
        <PluginDrawer
          plugin={selectedPlugin}
          busy={busyId === selectedPlugin.id}
          onClose={() => setSelectedPlugin(null)}
          onConnect={() => {
            setSelectedPlugin(null);
            setPending(selectedPlugin);
          }}
          onDisconnect={() => {
            setSelectedPlugin(null);
            void setEnabled(selectedPlugin, false);
          }}
          onAccount={() => {
            setSelectedPlugin(null);
            setAccountPlugin(selectedPlugin);
          }}
        />
      ) : null}
      <UiModal
        isOpen={pending !== null}
        onClose={() => !busyId && setPending(null)}
        maxWidth="max-w-md"
      >
        <UiModalHeader
          title={`Connect ${pending?.displayName ?? "plugin"}?`}
          icon={
            <span className="flex h-8 w-8 items-center justify-center rounded-lg border border-(--ui-info)/30 bg-(--ui-info)/10">
              <Eye className="h-4 w-4 text-(--ui-info)" />
            </span>
          }
          onClose={() => !busyId && setPending(null)}
          closeIcon={<X className="h-4 w-4" />}
        />
        <UiModalBody className="space-y-4">
          <Alert variant="info">
            Observe mode starts this plugin locally and exposes only tools it declares read-only.
            Desktop actions stay blocked until Local Studio has an action-time approval prompt.
          </Alert>
          <p className="text-[length:var(--fs-base)] leading-relaxed text-(--ui-muted)">
            The bundle remains in its installed location. Disconnecting stops exposing its tools to
            Workbench sessions.
          </p>
        </UiModalBody>
        <UiModalFooter>
          <Button variant="ghost" onClick={() => setPending(null)} disabled={Boolean(busyId)}>
            Cancel
          </Button>
          <Button
            onClick={() => pending && void setEnabled(pending, true)}
            disabled={!pending || Boolean(busyId)}
            loading={Boolean(busyId)}
          >
            Connect in observe mode
          </Button>
        </UiModalFooter>
      </UiModal>
      {accountPlugin?.account?.provider === "google" ? (
        <GoogleAccountModal
          accountId={accountPlugin.account.id}
          displayName={accountPlugin.displayName}
          onClose={() => setAccountPlugin(null)}
          onChanged={handleAccountChanged}
        />
      ) : null}
    </>
  );
}