"use client"

import { useRouter } from "next/navigation"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { validateEmail } from "@/lib/validations"

export default function ForgotEmailPage() {
  const router = useRouter()
  const [email, setEmail] = useState("")
  const [emailError, setEmailError] = useState<string>("")

  const onEmailChange = (value: string) => {
    setEmail(value)
    const res = validateEmail(value)
    setEmailError(res.valid ? "" : (res.error?.issues?.[0]?.message ?? 'Invalid email'))
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-background/95 px-4 py-8">
      <div className="w-full max-w-2xl rounded-xl bg-card p-8 pl-10 shadow-lg border border-border">
        <div className="mb-8 text-center">
          <h1 className="text-2xl font-bold text-foreground">Reset your password</h1>
          <p className="mt-2 text-sm text-muted-foreground">Enter the email address associated with your account and we'll send you a one-time code to verify your identity.</p>
        </div>

        <div className="space-y-6">
          <div>
            <label htmlFor="email" className="block text-sm font-semibold text-foreground mb-2">Email address</label>
            <Input
              id="email"
              type="email"
              value={email}
              onChange={(e) => onEmailChange((e.target as HTMLInputElement).value)}
              className="h-11 rounded-lg"
              placeholder="you@example.com"
              aria-invalid={emailError !== ""}
            />
            {emailError !== "" && <p className="text-sm text-error mt-2 font-medium">{emailError}</p>}
          </div>

          <div className="flex gap-3">
            <Button
              variant="outline"
              onClick={() => router.push('/login')}
              className="flex-1 h-12 rounded-full border-input text-foreground hover:bg-foreground/5"
            >
              Back
            </Button>
            <Button
              className="flex-1 h-12 text-base font-medium rounded-full bg-foreground text-background hover:bg-foreground/90"
              disabled={emailError !== ""}
              onClick={() => {
                if (email.length === 0) {
                  setEmailError('Email is required')
                  return
                }
                if (emailError === "") router.push('/login/forgot/otp')
              }}
            >
              Send verification code
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
