"use client";

import * as React from "react";
import Link from "next/link";
import { Loader2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useRequestPasswordResetPublicMutation } from "@/api/rtk";
import {
  ensureClientPublicIpForLogin,
  getStoredClientPublicIp,
} from "@/lib/client-public-ip";

export default function ForgotPasswordPage() {
  const [email, setEmail] = React.useState("");
  const [submitting, setSubmitting] = React.useState(false);
  const [requestReset] = useRequestPasswordResetPublicMutation();

  React.useEffect(() => {
    void ensureClientPublicIpForLogin();
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    try {
      await ensureClientPublicIpForLogin();
      const clientPublicIp = getStoredClientPublicIp();
      const res = await requestReset({
        email: email.trim(),
        ...(clientPublicIp ? { clientPublicIp } : {}),
      }).unwrap();
      toast.success(res.message);
      setEmail("");
    } catch {
      toast.error("Could not submit your request. Try again later.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Card className="w-full max-w-[400px] bg-white/95 backdrop-blur-md border border-white/60 shadow-[0px_2px_20px_rgba(0,0,0,0.06),0_8px_32px_rgba(108,99,255,0.08)] rounded-2xl">
      <CardHeader className="space-y-4 pt-8">
        <div className="flex justify-center">
          <div className="w-12 h-12 rounded-xl bg-accent flex items-center justify-center text-xl font-extrabold text-white shadow-lg">
            J
          </div>
        </div>
        <div className="text-center space-y-1">
          <CardTitle className="text-2xl font-bold font-['Lexend'] tracking-tight text-[#101828]">
            Password help
          </CardTitle>
          <CardDescription className="text-[#575a62] text-xs uppercase tracking-widest font-semibold">
            Administrator reset
          </CardDescription>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <p className="text-sm text-[#575a62] leading-relaxed">
          Enter the email on your account. If it exists, we notify
          administrators to set a new password for you. You do not need to be
          signed in.
        </p>
        <form onSubmit={(e) => void handleSubmit(e)} className="space-y-4">
          <div className="space-y-2">
            <Label
              htmlFor="fp-email"
              className="text-[#575a62] text-xs font-semibold uppercase tracking-wider"
            >
              Email address
            </Label>
            <Input
              id="fp-email"
              type="email"
              autoComplete="email"
              placeholder="name@company.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              className="bg-white/80 border-[#E4E6EF] focus-visible:ring-accent/50 text-[#101828] placeholder:text-[#6B7280] text-sm h-11"
            />
          </div>
          <Button
            type="submit"
            variant="default"
            size="authSubmit"
            disabled={submitting || !email.trim()}
          >
            {submitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Sending…
              </>
            ) : (
              "Submit request"
            )}
          </Button>
        </form>
        <p className="text-center text-sm">
          <Link
            href="/login"
            className="text-accent font-medium hover:underline"
          >
            Back to sign in
          </Link>
        </p>
      </CardContent>
    </Card>
  );
}