'use client';

import { useActionState, useState } from 'react';
import { changePasswordAction, confirmMfaSetupAction, disableMfaAction, regenerateRecoveryCodesAction, startMfaSetupAction } from '@/lib/auth/account-actions';
import { idle } from '@/lib/auth/state';
import { CodeInput, Field, FormMessage, PasswordField, SubmitButton, TextInput } from '@/components/account/form';

export function ChangePasswordForm() {
  const [state, action] = useActionState(changePasswordAction, idle);
  return (
    <form action={action} className="space-y-4" noValidate>
      <FormMessage state={state} />
      <Field label="Current password" name="current" error={state.fieldErrors?.current}>
        <TextInput name="current" type="password" autoComplete="current-password" required />
      </Field>
      <PasswordField name="password" label="New password" autoComplete="new-password" error={state.fieldErrors?.password} />
      <SubmitButton variant="secondary" pendingText="Updating…">
        Change password
      </SubmitButton>
      <p className="text-xs text-subtle">Changing your password signs out every other session.</p>
    </form>
  );
}

function RecoveryCodes({ codes }: { codes: string[] }) {
  const [copied, setCopied] = useState(false);
  return (
    <div className="rounded-md border border-alert/40 bg-alert-bg p-3">
      <p className="text-xs font-medium text-alert">Recovery codes — shown once. Store them somewhere safe.</p>
      <ul className="mono-num mt-2 grid grid-cols-2 gap-x-6 gap-y-1 text-sm">
        {codes.map((c) => (
          <li key={c}>{c}</li>
        ))}
      </ul>
      <div className="mt-3 flex gap-2">
        <button
          type="button"
          className="h-8 rounded-md border border-border bg-elevated px-2.5 text-xs font-medium"
          onClick={async () => {
            await navigator.clipboard.writeText(codes.join('\n'));
            setCopied(true);
          }}
        >
          {copied ? 'Copied' : 'Copy'}
        </button>
        <a className="h-8 rounded-md border border-border bg-elevated px-2.5 text-xs font-medium leading-8" href={`data:text/plain;charset=utf-8,${encodeURIComponent(`RareIndex recovery codes\n\n${codes.join('\n')}\n`)}`} download="rareindex-recovery-codes.txt">
          Download .txt
        </a>
      </div>
    </div>
  );
}

export function MfaSection({ enabled }: { enabled: boolean }) {
  const [start, startAction] = useActionState(startMfaSetupAction, idle);
  const [confirm, confirmAction] = useActionState(confirmMfaSetupAction, idle);
  const [disable, disableAction] = useActionState(disableMfaAction, idle);
  const [regen, regenAction] = useActionState(regenerateRecoveryCodesAction, idle);
  const [showDisable, setShowDisable] = useState(false);
  const [showRegen, setShowRegen] = useState(false);
  const codes = (confirm.data?.recoveryCodes as string[] | undefined) ?? (regen.data?.recoveryCodes as string[] | undefined);

  if (confirm.ok && codes) {
    return (
      <div className="space-y-3">
        <FormMessage state={confirm} />
        <RecoveryCodes codes={codes} />
      </div>
    );
  }

  if (!enabled) {
    if (start.ok && start.data) {
      return (
        <form action={confirmAction} className="space-y-4" noValidate>
          <FormMessage state={confirm} />
          <div className="flex flex-col gap-4 sm:flex-row">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={String(start.data.qr)} alt="Authenticator QR code" width={180} height={180} className="rounded-md border border-border bg-white p-1" />
            <div className="text-xs text-muted">
              <p>1. Open your authenticator (1Password, Google Authenticator, Authy, iCloud Keychain…).</p>
              <p className="mt-1">2. Scan the QR code, or enter this key manually:</p>
              <p className="mono-num mt-1 break-all rounded-sm bg-inset px-2 py-1 text-[11px] text-fg">{String(start.data.secret)}</p>
              <p className="mt-1">3. Enter the 6-digit code it shows.</p>
            </div>
          </div>
          <CodeInput name="code" autoSubmit={false} label="Code from the app" />
          <SubmitButton pendingText="Verifying…">Enable authenticator</SubmitButton>
        </form>
      );
    }
    return (
      <form action={startAction} className="space-y-3">
        <FormMessage state={start} />
        <p className="text-sm text-muted">Time-based codes from an authenticator app, plus 10 single-use recovery codes. E-mail codes remain available as a fallback.</p>
        <SubmitButton pendingText="Preparing…">Set up authenticator</SubmitButton>
      </form>
    );
  }

  return (
    <div className="space-y-4">
      <FormMessage state={regen} />
      {regen.ok && codes ? <RecoveryCodes codes={codes} /> : null}
      <div className="flex flex-wrap gap-2">
        <button type="button" className="h-8 rounded-md border border-border bg-elevated px-2.5 text-xs font-medium" onClick={() => setShowRegen((s) => !s)}>
          New recovery codes
        </button>
        <button type="button" className="h-8 rounded-md px-2.5 text-xs font-medium text-loss hover:bg-loss-bg" onClick={() => setShowDisable((s) => !s)}>
          Disable authenticator
        </button>
      </div>
      {showRegen ? (
        <form action={regenAction} className="space-y-3 rounded-md border border-border p-3" noValidate>
          <Field label="Confirm with your password" name="password">
            <TextInput name="password" type="password" autoComplete="current-password" required />
          </Field>
          <SubmitButton variant="secondary" pendingText="Generating…">
            Generate 10 new codes
          </SubmitButton>
        </form>
      ) : null}
      {showDisable ? (
        <form action={disableAction} className="space-y-3 rounded-md border border-loss/30 p-3" noValidate>
          <FormMessage state={disable} />
          <div className="grid gap-3 sm:grid-cols-2">
            <Field label="Password" name="password">
              <TextInput name="password" type="password" autoComplete="current-password" required />
            </Field>
            <Field label="Authenticator code" name="code">
              <TextInput name="code" inputMode="numeric" autoComplete="one-time-code" maxLength={6} required className="mono-num" />
            </Field>
          </div>
          <SubmitButton variant="danger" pendingText="Disabling…">
            Disable two-step authenticator
          </SubmitButton>
        </form>
      ) : null}
    </div>
  );
}