import React, { useState } from 'react';
import { CheckCircle2 } from 'lucide-react';

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

interface ForgotPasswordModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const ForgotPasswordModal: React.FC<ForgotPasswordModalProps> = ({
  isOpen,
  onClose
}) => {
  const [identifier, setIdentifier] = useState('');
  const [sent, setSent] = useState(false);

  const handleClose = () => {
    onClose();
    // Reset only after the dialog has finished animating out.
    setTimeout(() => {
      setSent(false);
      setIdentifier('');
    }, 200);
  };

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
      <DialogContent className="max-w-md">
        {sent ? (
          <div className="flex flex-col items-center gap-3 py-4 text-center">
            <CheckCircle2 className="size-9 text-primary" strokeWidth={1.8} />
            <DialogTitle className="text-[15px]">لینک بازیابی ارسال شد</DialogTitle>
            <DialogDescription className="max-w-xs">
              لینک تعیین رمز عبور جدید به شناسه شما ارسال شد.
            </DialogDescription>
            <Button onClick={handleClose} className="mt-2">
              بازگشت به ورود
            </Button>
          </div>
        ) : (
          <form
            onSubmit={(e) => {
              e.preventDefault();
              if (identifier.trim()) setSent(true);
            }}
          >
            <DialogHeader>
              <DialogTitle>بازیابی رمز عبور</DialogTitle>
              <DialogDescription>
                ایمیل دانشگاهی یا شماره تلفن همراه خود را وارد کنید.
              </DialogDescription>
            </DialogHeader>

            <div className="my-4 flex flex-col gap-1.5">
              <Label htmlFor="recovery">ایمیل یا شماره همراه</Label>
              <Input
                id="recovery"
                required
                value={identifier}
                onChange={(e) => setIdentifier(e.target.value)}
                placeholder="name@ui.ac.ir"
              />
            </div>

            <DialogFooter>
              <Button type="button" variant="outline" onClick={handleClose}>
                انصراف
              </Button>
              <Button type="submit">ارسال لینک</Button>
            </DialogFooter>
          </form>
        )}
      </DialogContent>
    </Dialog>
  );
};