"use client"

import Link from "next/link"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import OtpInput from "@/components/ui/otp-input"
import { Mail } from "lucide-react"

export default function ForgotOtpPage() {
  const [otp, setOtp] = useState("")
  const [secondsLeft, setSecondsLeft] = useState(60)

  const canResend = secondsLeft <= 0

  useEffect(() => {
    if (secondsLeft <= 0) return
    const id = setInterval(() => setSecondsLeft((s) => s - 1), 1000)
    return () => clearInterval(id)
  }, [secondsLeft])

  const handleResend = () => {
    setSecondsLeft(60)
    setOtp("")
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-background/95 p-4">
      <div className="w-full max-w-2xl rounded-xl bg-card p-8 shadow-lg border border-border">
        <div className="flex flex-col items-center mb-8">
          <div className="bg-foreground/10 rounded-full p-4 mb-4">
            <Mail className="text-foreground size-6" />
          </div>
          <h1 className="text-2xl font-bold text-foreground text-center">Verify your email</h1>
        </div>
        <p className="text-sm text-muted-foreground text-center mb-8">We've sent a verification code to your email address. Enter it below to continue.</p>

        <div className="space-y-6">
          <div className="flex justify-center">
            <OtpInput value={otp} onChange={(v) => setOtp(v)} />
          </div>

          <div className="text-center">
            {canResend ? (
              <button
                onClick={(e) => {
                  e.preventDefault()
                  handleResend()
                }}
                className="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors"
              >
                Didn't receive the code? Resend
              </button>
            ) : (
              <p className="text-sm text-muted-foreground">Resend code available in <span className="font-semibold text-foreground">{Math.max(0, secondsLeft)}s</span></p>
            )}
          </div>

          <div className="flex gap-3">
            <Link href="/login" className="flex-1">
              <Button variant="outline" className="w-full h-12 rounded-full border-input text-foreground hover:bg-foreground/5">Back</Button>
            </Link>
            <Link href="/login/forgot/reset" className="flex-1">
              <Button className="w-full h-12 rounded-full bg-foreground text-background hover:bg-foreground/90">Verify</Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}
