"use client";

import { useActionState, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { resetPassword } from "../actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Loader2, Eye, EyeOff } from "lucide-react";
import { toast } from "sonner";

export function SetPasswordForm({
  defaultEmail,
  token,
}: {
  defaultEmail: string;
  token: string;
}) {
  const router = useRouter();
  const initialState = { error: undefined, ok: undefined };
  const [state, action, isPending] = useActionState(resetPassword, initialState);
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  useEffect(() => {
    if (state?.error) {
      toast.error(state.error);
    } else if (state?.ok) {
      toast.success("Password reset successfully!");
      router.push("/dashboard");
    }
  }, [state, router]);

  return (
    <form action={action} className="space-y-6">
      <input type="hidden" name="token" value={token} />

      <div className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input
            id="email"
            name="email"
            type="email"
            defaultValue={defaultEmail}
            readOnly
            disabled
            className="bg-muted/50 cursor-not-allowed"
          />
          <input type="hidden" name="email" value={defaultEmail} />
        </div>

        <div className="space-y-2">
          <Label htmlFor="password">New Password</Label>
          <div className="relative">
            <Input
              id="password"
              name="password"
              type={showPassword ? "text" : "password"}
              required
              autoComplete="new-password"
              className="bg-background/50 focus:bg-background pr-10"
            />
            <button
              type="button"
              onClick={() => setShowPassword(!showPassword)}
              className="absolute right-0 top-1/2 flex -translate-y-1/2 items-center justify-center p-2 text-muted-foreground hover:text-foreground focus:outline-none focus:ring-0"
              aria-label={showPassword ? "Hide password" : "Show password"}
            >
              {showPassword ? (
                <EyeOff className="size-5" />
              ) : (
                <Eye className="size-5" />
              )}
            </button>
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor="confirmPassword">Confirm Password</Label>
          <div className="relative">
            <Input
              id="confirmPassword"
              name="confirmPassword"
              type={showConfirmPassword ? "text" : "password"}
              required
              autoComplete="new-password"
              className="bg-background/50 focus:bg-background pr-10"
            />
            <button
              type="button"
              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
              className="absolute right-0 top-1/2 flex -translate-y-1/2 items-center justify-center p-2 text-muted-foreground hover:text-foreground focus:outline-none focus:ring-0"
              aria-label={showConfirmPassword ? "Hide confirm password" : "Show confirm password"}
            >
              {showConfirmPassword ? (
                <EyeOff className="size-5" />
              ) : (
                <Eye className="size-5" />
              )}
            </button>
          </div>
        </div>
      </div>

      <Button
        type="submit"
        className="w-full text-base"
        disabled={isPending}
      >
        {isPending ? <Loader2 className="size-4 animate-spin" /> : "Reset Password"}
      </Button>
    </form>
  );
}