'use client';



import * as ActionIcons from '@/components/Icons';



import { useActionState, useRef, useState } from 'react';

import { login, type LoginState } from '../actions';

import { AlertIcon, ArrowRightIcon, EyeIcon, KeyIcon, LockIcon, MailIcon, Spinner, UserIcon } from '@/components/Icons';



export function LoginForm() {

  const [state, action, pending] = useActionState<LoginState, FormData>(login, {});

  const [show, setShow] = useState(false);

  const email = useRef<HTMLInputElement>(null);

  const password = useRef<HTMLInputElement>(null);



  return (

    <>

      <form action={action} className="space-y-4">

        {state.challengeToken ? (

          <>

            <input type="hidden" name="challengeToken" value={state.challengeToken} />

            <div className="flex items-start gap-3 rounded-lg bg-ledger-soft p-3 text-sm text-ledger">

              <KeyIcon className="mt-0.5 h-4 w-4" />

              Enter the six-digit code from your authenticator app — or one of your recovery codes if you’ve lost it.

            </div>

            <label className="block">

              <span className="field-label"><ActionIcons.ShieldCheckIcon />Authentication code</span>

              <input name="code" maxLength={20} autoFocus required autoComplete="one-time-code" placeholder="000000" className="field num text-center text-lg tracking-[0.3em]" />

            </label>

          </>

        ) : (

          <>

            <label className="block">

              <span className="field-label"><ActionIcons.MailIcon />Email</span>

              <span className="relative block">

                <MailIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted" />

                <input ref={email} name="email" type="email" required autoFocus autoComplete="username" placeholder="you@firm.com" className="field pl-9" />

              </span>

            </label>

            <label className="block">

              <span className="field-label"><ActionIcons.KeyIcon />Password</span>

              <span className="relative block">

                <LockIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted" />

                <input ref={password} name="password" type={show ? 'text' : 'password'} required autoComplete="current-password" className="field px-9" />

                <button

                  type="button"

                  onClick={() => setShow((s) => !s)}

                  aria-label={show ? 'Hide password' : 'Show password'}

                  aria-pressed={show}

                  className={`absolute right-1.5 top-1/2 grid h-7 w-7 -translate-y-1/2 place-items-center rounded-md transition-colors hover:bg-sunken ${show ? 'text-ledger' : 'text-muted'}`}

                >

                  {show ? <ActionIcons.EyeOffIcon className="h-4 w-4" /> : <EyeIcon className="h-4 w-4" />}

                </button>

              </span>

            </label>

          </>

        )}

        {state.error && (

          <p role="alert" className="flex items-start gap-2 rounded-lg border border-danger/30 bg-danger-soft px-3 py-2.5 text-sm text-danger">

            <AlertIcon className="mt-0.5 h-4 w-4" />

            {state.error}

          </p>

        )}

        <button disabled={pending} className="btn btn-primary w-full !min-h-11">

          {pending ? (

            <>

              <Spinner /> {state.challengeToken ? 'Verifying…' : 'Signing in…'}

            </>

          ) : (

            <>

              {state.challengeToken ? 'Verify code' : 'Sign in'} <ArrowRightIcon className="h-4 w-4" />

            </>

          )}

        </button>

      </form>



    </>

  );

}