'use client'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useFormState } from 'react-dom'
import { AlertCircle } from 'lucide-react'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { cn } from '@/lib/utils'
import { signInUser } from './action'
import FieldError from '../field-error'
import OAuthButtons from '../oauth-buttons'
import ActionButton from '../action-button'
import { useEffect } from 'react'

interface Props {
  searchParams: { returnTo?: string; error?: string }
}

const SignIn = ({ searchParams }: Props) => {
  const router = useRouter()
  const [state, formAction] = useFormState(signInUser, {
    email: null,
    password: null,
    message: null,
  })

  useEffect(() => {
    const form = document.querySelector('form');
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Enter') {
        event.preventDefault();
      }
    };

    form?.addEventListener('keydown', handleKeyDown);

    // Clean up the event listener when the component unmounts
    return () => {
      form?.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return (
    <form action={formAction} className="space-y-6 max-w-sm">
      <h3 className="text-xl font-bold text-center">Welcome back</h3>

      {searchParams.error ? (
        <Alert
          variant="destructive"
          className="[&>svg]:-translate-y-1/2 [&>svg]:top-1/2"
        >
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>{searchParams.error}</AlertDescription>
        </Alert>
      ) : null}

      <OAuthButtons />

      <div className="relative">
        <div className="absolute inset-0 flex items-center">
          <span className="w-full border-t" />
        </div>
        <div className="relative flex justify-center text-xs uppercase">
          <span className="bg-background px-2 text-muted-foreground">
            Or continue with
          </span>
        </div>
      </div>

      <input type="hidden" name="returnTo" value={searchParams.returnTo} />
      <fieldset className="grid gap-2.5">
        <Label htmlFor="email">Email</Label>
        <div className="relative">
          <Input
            className={cn(
              'focus-visible:ring-0 focus-visible:ring-offset-0',
              (state?.email || state?.message) && 'border-red-500 pr-9'
            )}
            id="email"
            type="email"
            name="email"
            placeholder="m@example.com"
            required
          />
          {state?.email ? <FieldError error={state.email} /> : null}
        </div>
      </fieldset>

      <fieldset className="grid gap-2.5">
        <Label htmlFor="password">Password</Label>
        <div className="relative">
          <Input
            className={cn(
              'focus-visible:ring-0 focus-visible:ring-offset-0',
              (state?.password || state?.message) && 'border-red-500'
            )}
            id="password"
            type="password"
            name="password"
            required
          />
          {state?.password ? <FieldError error={state.password} /> : ''}
          {state?.message ? <FieldError error={state.message} /> : ''}
        </div>
      </fieldset>

      <ActionButton>Sign in</ActionButton>

      <p className="text-sm text-center">
        <span className="text-slate-600"> Don&apos;t have an account? </span>
        <Link
          className="hover:underline text-primary font-semibold"
          href="/signup"
          onClick={(e) => {
            e.preventDefault()
            router.replace(e.currentTarget.href)
          }}
        >
          Sign up
        </Link>
      </p>
    </form>
  )
}

export default SignIn