import { useState } from "react";
import { beginTotpSetup, confirmTotpSetup, disableTwoFactor, newRecoveryCodes } from "~/fns/account-security";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Badge } from "~/ui/Badge";
import { Panel } from "~/ui/Panel";
import { RecoveryCodes } from "./RecoveryCodes";
import { ExternalLink } from "~/ui/TextLink";
import { QrCode } from "~/ui/QrCode";

type Props = { enabled: boolean; recoveryCodesLeft: number; hasPassword: boolean };

function field(form: HTMLFormElement, name: string): string {
  return String(new FormData(form).get(name) ?? "");
}

export function TwoFactorPanel({ enabled, recoveryCodesLeft, hasPassword }: Props) {
  const [setup, setSetup] = useState<{ secret: string; uri: string } | null>(null);
  const [codes, setCodes] = useState<string[] | null>(null);
  const begin = useAction(beginTotpSetup, { invalidate: false });
  const confirm = useAction(confirmTotpSetup);
  const disable = useAction(disableTwoFactor);
  const regenerate = useAction(newRecoveryCodes);
  const error = begin.error ?? confirm.error ?? disable.error ?? regenerate.error;
  const passwordField = hasPassword ? (
    <TextField label="Current password" name="password" type="password" autoComplete="current-password" required />
  ) : null;

  return (
    <Panel
      title={
        <span className="flex items-center gap-2">
          Authenticator app {enabled && <Badge tone="success">Enabled</Badge>}
        </span>
      }
    >
      <div className="space-y-4 p-4 text-sm">
        <ErrorBanner message={error} />
        {codes && <RecoveryCodes codes={codes} />}
        {enabled ? (
          <>
            <p className="text-kumo-subtle">
              Sign-ins ask for a code from your authenticator app. {recoveryCodesLeft} recovery codes left.
            </p>
            <form
              method="post"
              className="space-y-3"
              onSubmit={async (event) => {
                event.preventDefault();
                const submitter = event.nativeEvent.submitter;
                const action = submitter instanceof HTMLButtonElement ? submitter.value : null;
                const password = field(event.currentTarget, "password");
                if (action === "disable") {
                  if (await disable.run({ data: { password } })) setCodes(null);
                } else {
                  const result = await regenerate.run({ data: { password } });
                  if (result) setCodes(result.recoveryCodes);
                }
              }}
            >
              {passwordField}
              <div className="flex gap-2">
                <Button type="submit" value="regenerate" pending={regenerate.pending}>
                  Regenerate recovery codes
                </Button>
                <Button type="submit" value="disable" variant="danger" pending={disable.pending}>
                  Disable
                </Button>
              </div>
            </form>
          </>
        ) : setup ? (
          <form
            method="post"
            className="space-y-3"
            onSubmit={async (event) => {
              event.preventDefault();
              const result = await confirm.run({ data: { code: field(event.currentTarget, "code") } });
              if (result) {
                setCodes(result.recoveryCodes);
                setSetup(null);
              }
            }}
          >
            <p className="text-kumo-subtle">
              Scan this QR code with your authenticator app, then enter the 6-digit code.
            </p>
            <QrCode value={setup.uri} label="QR code for your authenticator app" className="size-48 rounded-md" />
            <details className="rounded-md border border-kumo-hairline">
              <summary className="cursor-pointer px-3 py-2 text-kumo-subtle select-none hover:text-kumo-strong">
                Advanced: can't scan the code?
              </summary>
              <div className="space-y-2 border-t border-kumo-hairline p-3">
                <p className="text-kumo-subtle">Enter this setup key manually, or open the link on your phone.</p>
                <code className="block rounded-md border border-kumo-hairline bg-kumo-base p-3 font-mono text-sm tracking-widest break-all text-white">
                  {setup.secret}
                </code>
                <ExternalLink href={setup.uri} className="block truncate text-xs">
                  {setup.uri}
                </ExternalLink>
              </div>
            </details>
            <TextField label="Code" name="code" inputMode="numeric" autoComplete="one-time-code" required />
            <Button type="submit" variant="primary" pending={confirm.pending}>
              Enable two-factor authentication
            </Button>
          </form>
        ) : (
          <form
            method="post"
            className="space-y-3"
            onSubmit={async (event) => {
              event.preventDefault();
              const result = await begin.run({ data: { password: field(event.currentTarget, "password") } });
              if (result) setSetup(result);
            }}
          >
            <p className="text-kumo-subtle">Require a time-based code from an authenticator app when you sign in.</p>
            {passwordField}
            <Button type="submit" variant="primary" pending={begin.pending}>
              Set up authenticator app
            </Button>
          </form>
        )}
      </div>
    </Panel>
  );
}