"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { IconCheck, IconPlugConnected } from "@tabler/icons-react";
import { cn } from "../lib/utils";
import { transitions } from "../lib/motion";
import { useConnection } from "../hooks/use-connection";
import { Button } from "./button";
import { Spinner } from "./spinner";

/**
 * A button that asks once more before a destructive action, in place:
 * the first press arms it ("Delete?"), the second confirms. It disarms
 * after a few seconds or on blur.
 */
export function ConfirmButton({
  children,
  confirmLabel,
  onConfirm,
  variant = "destructive",
  size = "default",
  disarmAfterMs = 4000,
  className,
}: {
  children: React.ReactNode;
  confirmLabel?: React.ReactNode;
  onConfirm: () => Promise<unknown> | unknown;
  variant?: "destructive" | "default" | "outline";
  size?: "default" | "sm";
  disarmAfterMs?: number;
  className?: string;
}) {
  const [armed, setArmed] = React.useState(false);
  const [pending, setPending] = React.useState(false);
  React.useEffect(() => {
    if (!armed) return;
    const timer = setTimeout(() => setArmed(false), disarmAfterMs);
    return () => clearTimeout(timer);
  }, [armed, disarmAfterMs]);
  return (
    <Button
      variant={armed ? "destructive" : variant}
      size={size}
      disabled={pending}
      onBlur={() => setArmed(false)}
      onClick={() => {
        if (!armed) {
          setArmed(true);
          return;
        }
        setPending(true);
        void Promise.resolve(onConfirm()).finally(() => {
          setPending(false);
          setArmed(false);
        });
      }}
      className={cn("overflow-hidden", className)}
    >
      <AnimatePresence mode="popLayout" initial={false}>
        <motion.span
          key={pending ? "pending" : armed ? "armed" : "idle"}
          initial={{ opacity: 0, y: 8, filter: "blur(2px)" }}
          animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
          exit={{ opacity: 0, y: -8, filter: "blur(2px)" }}
          transition={transitions.quick}
          className="inline-flex items-center gap-1.5"
        >
          {pending ? <Spinner size="sm" /> : null}
          {armed || pending ? (confirmLabel ?? "Are you sure?") : children}
        </motion.span>
      </AnimatePresence>
    </Button>
  );
}

/** Connect (or show) an account on another service, by connection key. */
export function ConnectButton({
  connectionKey,
  label,
  className,
}: {
  connectionKey: string;
  /** Defaults to "Connect <name>". */
  label?: string;
  className?: string;
}) {
  const connection = useConnection(connectionKey);
  const name = connection.status?.name ?? connectionKey;
  if (connection.isLoading) {
    return (
      <Button variant="outline" disabled className={className}>
        <Spinner size="sm" />
        {name}
      </Button>
    );
  }
  if (connection.status?.connected) {
    return (
      <span className={cn("inline-flex h-9 items-center gap-2 rounded-4xl border border-positive/30 bg-positive/[0.07] px-3 text-sm text-positive-fg", className)}>
        <IconCheck className="size-4" />
        {connection.status.account?.label ? `Connected as ${connection.status.account.label}` : `${name} connected`}
      </span>
    );
  }
  return (
    <Button variant="outline" disabled={connection.isConnecting} onClick={() => void connection.connect()} className={className}>
      {connection.isConnecting ? <Spinner size="sm" /> : <IconPlugConnected className="size-4" />}
      {label ?? `Connect ${name}`}
    </Button>
  );
}