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

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="accent">Enabled</Badge>}
        </span>
      }
    >
      <div className="space-y-4 p-4 text-sm">
        <ErrorBanner message={error} />
        {codes && <RecoveryCodes codes={codes} />}
        {enabled ? (
          <>
            <p className="text-gray-400">
              Sign-ins ask for a code from your authenticator app. {recoveryCodesLeft} recovery codes left.
            </p>
            <form
              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
            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-gray-400">
              Add this key to your authenticator app (or open the link on your phone), then enter the 6-digit code.
            </p>
            <code className="block rounded-md border border-gray-800 bg-gray-900 p-3 font-mono text-sm tracking-widest break-all text-white">
              {setup.secret}
            </code>
            <a href={setup.uri} className="block truncate text-xs text-accent-400 hover:underline">
              {setup.uri}
            </a>
            <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
            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-gray-400">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>
  );
}