import { useState } from 'react';
import { Link } from 'react-router';
import { toast } from 'sonner';
import { useClient } from 'hooks/useClient';
import { useForm } from 'hooks/useForm';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/Card';

export function ForgotPassword() {
  const client = useClient('/api/auth');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [done, setDone] = useState(false);
  const { formRef, state, isValid } = useForm<ForgotPasswordFormState>({}, (s) => !!s.email);

  const handleSubmit = async (ev: React.FormEvent) => {
    ev.preventDefault();
    if (!isValid || isSubmitting) return;

    setIsSubmitting(true);
    try {
      await client.post('/forgot-password', { email: state.email!.trim() });
      setDone(true);
    } catch (ex) {
      const error = ex as { message?: string };
      toast.error(error.message || 'Something went wrong. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Card className="md:py-12 md:px-24 flex flex-col gap-6">
      {done ? (
        <div className="text-center">
          <h2 className="text-2xl font-bold text-duck-dark mb-2">Check your email</h2>
          <div className="text-sm text-duck-dark/60">
            <p>
              A password reset link has been sent to <strong>{state.email}</strong>.
            </p>
            <p>Click it to reset your password.</p>
          </div>
        </div>
      ) : (
        <>
          <div className="text-center">
            <div className="text-duck-dark text-2xl font-bold">Forgot Password</div>
            <div className="text-duck-dark/60">Enter your email to receive a reset link</div>
          </div>

          <form ref={formRef} onSubmit={handleSubmit} className="grid gap-4">
            <Label className="grid gap-2">
              <span className="text-duck-dark/70">Email</span>
              <Input
                className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
                type="email"
                name="email"
                placeholder="you@example.com"
                autoComplete="email"
              />
            </Label>

            <div className="pt-2">
              <Button
                type="submit"
                disabled={!isValid || isSubmitting}
                className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
              >
                {isSubmitting ? 'Sending...' : 'Send Reset Link'}
              </Button>
            </div>

            <div className="text-center text-sm text-duck-dark/60">
              <p>
                <Link to="/" className="text-duck-forest underline hover:text-duck-forest/80">
                  Back to login
                </Link>
              </p>
            </div>
          </form>
        </>
      )}
    </Card>
  );
}

type ForgotPasswordFormState = {
  email?: string;
};
