import { createFileRoute, Link } from "@tanstack/react-router";
import { useState, type FormEvent } from "react";
import { AuthLayout } from "@/components/auth-layout";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { forgotPasswordFn } from "@/lib/auth/auth.functions";

export const Route = createFileRoute("/forgot-password")({
  head: () => ({ meta: [{ title: "Forgot password — VotersAlert" }] }),
  component: Page,
});

function Page() {
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [devToken, setDevToken] = useState<string | null>(null);

  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    const email = String(form.get("email") ?? "").trim();
    if (!email) return;
    setLoading(true);
    try {
      const result = await forgotPasswordFn({ data: { email } });
      setSent(true);
      if (import.meta.env.DEV && "resetToken" in result && result.resetToken) {
        setDevToken(result.resetToken);
      }
      toast.success("Reset link sent if the account exists.");
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Could not send reset link.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <AuthLayout
      title="Reset your password"
      subtitle="We'll email you a secure link to set a new password."
      footer={
        <Link to="/login" className="text-primary font-medium hover:underline">
          Back to sign in
        </Link>
      }
    >
      {sent ? (
        <div className="rounded-lg border bg-success/5 border-success/30 p-4 text-sm">
          <p className="font-medium text-success">Check your inbox</p>
          <p className="mt-1 text-muted-foreground text-xs">
            If an account exists, a reset link has been sent. The link expires in 30 minutes.
          </p>
          {devToken && (
            <div className="mt-3 rounded-md bg-background border p-2 text-[11px] break-all">
              <div className="font-medium mb-1">Dev-only reset link</div>
              <Link
                to="/reset-password"
                search={{ token: devToken }}
                className="text-primary hover:underline"
              >
                /reset-password?token={devToken.slice(0, 8)}…
              </Link>
            </div>
          )}
        </div>
      ) : (
        <form onSubmit={onSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">Work email</Label>
            <Input
              id="email"
              name="email"
              type="email"
              required
              placeholder="you@organization.ng"
              autoComplete="email"
            />
          </div>
          <Button type="submit" className="w-full h-10" disabled={loading}>
            {loading ? "Sending…" : "Send reset link"}
          </Button>
        </form>
      )}
    </AuthLayout>
  );
}