'use client';

import { useAuthActions } from '@convex-dev/auth/react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

export default function SignIn() {
  const { signIn } = useAuthActions();
  const [flow, setFlow] = useState<'signIn' | 'signUp'>('signIn');
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();
  return (
    <div className='flex flex-col gap-8 w-96 mx-auto h-screen justify-center items-center'>
      <p>Log in to see the numbers</p>
      <form
        className='flex flex-col gap-2'
        onSubmit={(e) => {
          e.preventDefault();
          const formData = new FormData(e.target as HTMLFormElement);
          formData.set('flow', flow);
          void signIn('password', formData)
            .catch((error) => {
              setError(error.message);
            })
            .then(() => {
              router.push('/');
            });
        }}
      >
        <input
          className='bg-background text-foreground rounded-md p-2 border-2 border-slate-200 dark:border-slate-800'
          type='email'
          name='email'
          placeholder='Email'
        />
        <input
          className='bg-background text-foreground rounded-md p-2 border-2 border-slate-200 dark:border-slate-800'
          type='password'
          name='password'
          placeholder='Password'
        />
        <button
          className='bg-foreground text-background rounded-md'
          type='submit'
        >
          {flow === 'signIn' ? 'Sign in' : 'Sign up'}
        </button>
        <div className='flex flex-row gap-2'>
          <span>
            {flow === 'signIn'
              ? "Don't have an account?"
              : 'Already have an account?'}
          </span>
          <span
            className='text-foreground underline hover:no-underline cursor-pointer'
            onClick={() => setFlow(flow === 'signIn' ? 'signUp' : 'signIn')}
          >
            {flow === 'signIn' ? 'Sign up instead' : 'Sign in instead'}
          </span>
        </div>
        {error && (
          <div className='bg-red-500/20 border-2 border-red-500/50 rounded-md p-2'>
            <p className='text-foreground font-mono text-xs'>
              Error signing in: {error}
            </p>
          </div>
        )}
      </form>
    </div>
  );
}