import { useMutation, useQuery } from "@octanejs/tanstack-query";
import { Button } from "octane-kumo/components/button";
import { Badge } from "octane-kumo/components/badge";
import { useCustomerQuerySession } from "../runtime/customer-query-provider";
import type { ConversationSession } from "../runtime/conversation-session";

export function CapabilityApprovals({
  session,
  connected,
}: {
  session: ConversationSession;
  connected: boolean;
}) {
  const cache = useCustomerQuerySession();
  const queryKey = cache.key("conversation", session.id, "approvals");
  const query = useQuery({
    queryKey,
    queryFn: ({ signal }) => session.listCapabilityApprovals(signal),
    enabled: !!cache.getSnapshot().scope && connected,
    staleTime: 0,
    gcTime: 0,
    refetchInterval: 2000,
  });
  const mutation = useMutation({
    mutationFn: (decision: {
      executionId: string;
      decision: "approve" | "deny";
    }) => session.decideCapabilityApproval(decision),
    onSettled: () => cache.client.invalidateQueries({ queryKey }),
  });
  const pending = query.data ?? [];
  if (!pending.length && !query.isError && !mutation.isError) return null;
  return (
    <section className="capability-approvals" aria-label="Action approvals">
      {query.isError && (
        <p role="alert">
          Could not load pending approvals. Reconnect or reload approvals to
          check their current status.
        </p>
      )}
      {mutation.isError && (
        <p role="alert">
          Could not confirm the decision. Reload approvals to check whether the
          action is still waiting.
        </p>
      )}
      {(query.isError || mutation.isError) && (
        <Button
          variant="secondary"
          disabled={!connected || query.isFetching || mutation.isPending}
          onClick={() => {
            mutation.reset();
            void query.refetch();
          }}
        >
          Reload approvals
        </Button>
      )}
      {pending.map((request) => (
        <article className="capability-approval" key={request.executionId}>
          <div className="capability-approval-heading">
            <h2>Approval required</h2>
            <Badge>Waiting for you</Badge>
          </div>
          <p>{request.summary}</p>
          <details open>
            <summary>Arguments to send</summary>
            <pre>{JSON.stringify(request.arguments, null, 2)}</pre>
          </details>
          <p className="muted">
            Approving permits this action once. Future actions follow your
            approval settings.
          </p>
          {!connected && (
            <p role="status">Reconnect to approve or deny this action.</p>
          )}
          <div className="capability-approval-actions">
            <Button
              variant="primary"
              disabled={!connected || mutation.isPending || query.isError}
              onClick={() =>
                mutation.mutate({
                  executionId: request.executionId,
                  decision: "approve",
                })
              }
            >
              Approve once
            </Button>
            <Button
              variant="secondary"
              disabled={!connected || mutation.isPending || query.isError}
              onClick={() =>
                mutation.mutate({
                  executionId: request.executionId,
                  decision: "deny",
                })
              }
            >
              Deny
            </Button>
          </div>
          {mutation.isPending &&
            mutation.variables?.executionId === request.executionId && (
              <p role="status">Applying your decision…</p>
            )}
        </article>
      ))}
    </section>
  );
}