"use client"

import type React         from "react"
import      { useState }  from "react"
import      Link          from "next/link"
import      { Button }    from "@/components/ui/button"
import      { Input }     from "@/components/ui/input"
import      { Label }     from "@/components/ui/label"
import      { toast }     from "sonner"
import      { ArrowLeft } from "lucide-react"
import      { AuthCard }  from "@/components/auth-card"

export default function Page() {
  const [email, setEmail] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [emailSent, setEmailSent] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

    setTimeout(() => {
      setEmailSent(true)
      toast("Reset link sent. Check your email for password reset instructions")
      setIsLoading(false)
    }, 1000)
  }

  return (
    <AuthCard
      title="Forgot password?"
      description={emailSent ? "We've sent you a password reset link" : "Enter your email to reset your password"}
      footer={
        <Link href="/login" className="text-sm text-primary hover:underline font-medium flex items-center gap-1">
          <ArrowLeft className="h-4 w-4" />
          Back to login
        </Link>
      }
    >

      {!emailSent ? (
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="trader@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <Button type="submit" className="w-full cursor-pointer" disabled={isLoading}>
            {isLoading ? "Sending..." : "Send reset link"}
          </Button>
        </form>
      ) : (
        <div className="text-center space-y-4">
          <p className="text-sm text-muted-foreground">
            We&apos;ve sent a password reset link to <strong>{email}</strong>
          </p>
          <Button variant="outline" onClick={() => setEmailSent(false)}>
            Try another email
          </Button>
        </div>
      )}
      
    </AuthCard>
  )
}