"use client";import { useState } from "react";import {  KeyRound,  Mail,  Loader2,  ArrowLeft,  Check,  Send,} from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Input } from "@/components/ui/input";import { Label } from "@/components/ui/label";import { cn } from "@/lib/utils";export const title = "React Dialog Block Forgot Password";export default function DialogForgotPassword() {  const [open, setOpen] = useState(false);  const [email, setEmail] = useState("");  const [isLoading, setIsLoading] = useState(false);  const [isSent, setIsSent] = useState(false);  const isValidEmail = email.includes("@") && email.includes(".");  const handleSubmit = async (e: React.FormEvent) => {    e.preventDefault();    if (!isValidEmail) return;    setIsLoading(true);    await new Promise((resolve) => setTimeout(resolve, 1500));    setIsLoading(false);    setIsSent(true);  };  const handleResend = async () => {    setIsLoading(true);    await new Promise((resolve) => setTimeout(resolve, 1000));    setIsLoading(false);  };  const handleClose = () => {    setOpen(false);    setTimeout(() => {      setEmail("");      setIsSent(false);    }, 200);  };  const handleBackToLogin = () => {    handleClose();    // In real app: navigate to login or switch dialog  };  if (isSent) {    return (      <Dialog open={open} onOpenChange={setOpen}>        <div className="flex min-h-[350px] items-center justify-center">          <DialogTrigger asChild>            <Button variant="outline">              <KeyRound className="mr-2 h-4 w-4" />              Forgot Password            </Button>          </DialogTrigger>        </div>        <DialogContent className="sm:max-w-md">          <div className="flex flex-col items-center justify-center py-6 text-center">            <div className="flex h-12 w-12 items-center justify-center rounded-full border-2 border-primary">              <Check className="h-6 w-6 text-primary" />            </div>            <h3 className="mt-4 text-lg font-semibold">Check your email</h3>            <p className="mt-2 text-sm text-muted-foreground">              We've sent a password reset link to            </p>            <p className="mt-1 font-medium">{email}</p>            <div className="mt-6 w-full space-y-3">              <div className="rounded-lg border p-4 text-left">                <p className="text-sm text-muted-foreground">                  <span className="font-medium text-foreground">Didn't receive the email?</span>                  {" "}Check your spam folder, or{" "}                  <Button                    variant="link"                    className="h-auto p-0 text-sm"                    onClick={handleResend}                    disabled={isLoading}                  >                    {isLoading ? "Sending..." : "click here to resend"}                  </Button>                </p>              </div>              <p className="text-xs text-muted-foreground">                The link will expire in 15 minutes for security reasons.              </p>            </div>            <Button              variant="outline"              className="mt-6"              onClick={handleBackToLogin}            >              <ArrowLeft className="mr-2 h-4 w-4" />              Back to login            </Button>          </div>        </DialogContent>      </Dialog>    );  }  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <KeyRound className="mr-2 h-4 w-4" />            Forgot Password          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-md">        <DialogHeader className="text-center">          <div className="flex justify-center mb-2">            <div className="flex h-12 w-12 items-center justify-center rounded-full border">              <KeyRound className="h-6 w-6" />            </div>          </div>          <DialogTitle>Forgot your password?</DialogTitle>          <DialogDescription>            No worries, we'll send you reset instructions.          </DialogDescription>        </DialogHeader>        <form onSubmit={handleSubmit} className="space-y-4 py-4">          <div className="space-y-2">            <Label htmlFor="reset-email">Email address</Label>            <div className="relative">              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />              <Input                id="reset-email"                type="email"                placeholder="[email protected]"                value={email}                onChange={(e) => setEmail(e.target.value)}                className="pl-9"                disabled={isLoading}                autoFocus              />            </div>            <p className="text-xs text-muted-foreground">              Enter the email address associated with your account.            </p>          </div>          <Button            type="submit"            className="w-full"            disabled={!isValidEmail || isLoading}          >            {isLoading ? (              <>                <Loader2 className="mr-2 h-4 w-4 animate-spin" />                Sending link...              </>            ) : (              <>                <Send className="mr-2 h-4 w-4" />                Send reset link              </>            )}          </Button>        </form>        <div className="flex items-center justify-center pt-2 border-t">          <Button            variant="ghost"            size="sm"            onClick={handleBackToLogin}          >            <ArrowLeft className="mr-2 h-4 w-4" />            Back to login          </Button>        </div>      </DialogContent>    </Dialog>  );}