import { useState } from "react";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import { useAuthStore } from "../stores/auth.ts";

export function ResetPasswordPage() {
  const [searchParams] = useSearchParams();
  const token = searchParams.get("token") || "";
  const navigate = useNavigate();

  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [success, setSuccess] = useState(false);
  const [localError, setLocalError] = useState<string | null>(null);
  const { resetPassword, isLoading, error, clearError } = useAuthStore();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    clearError();
    setLocalError(null);

    if (password.length < 8) {
      setLocalError("Password must be at least 8 characters.");
      return;
    }
    if (password !== confirmPassword) {
      setLocalError("Passwords do not match.");
      return;
    }

    try {
      await resetPassword(token, password);
      setSuccess(true);
    } catch {
      // error displayed from store
    }
  };

  if (!token) {
    return (
      <div className="h-full w-full flex items-center justify-center bg-gb-bg p-4">
        <div className="terminal-border bg-gb-bg-h p-6 w-full max-w-md">
          <pre className="text-gb-orange font-mono text-lg mb-6">
            {"┌─ DUMPSTER ─┐"}
          </pre>
          <h2 className="text-gb-red mb-4">[INVALID LINK]</h2>
          <p className="text-gb-fg text-sm mb-4">
            This password reset link is missing or invalid. Request a new one.
          </p>
          <Link
            to="/forgot-password"
            className="text-gb-blue hover:text-gb-aqua text-sm"
          >
            [REQUEST NEW LINK]
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="h-full w-full flex items-center justify-center bg-gb-bg p-4">
      <div className="terminal-border bg-gb-bg-h p-6 w-full max-w-md">
        <pre className="text-gb-orange font-mono text-lg mb-6">
          {"┌─ DUMPSTER ─┐"}
        </pre>
        <h2 className="text-gb-fg-s mb-4">[RESET PASSWORD]</h2>

        {success ? (
          <div className="space-y-4">
            <p className="text-gb-green text-sm">
              Password updated successfully.
            </p>
            <p className="text-gb-fg-f text-xs">
              All existing sessions have been logged out.
            </p>
            <button
              onClick={() => navigate("/login")}
              className="terminal-button w-full"
            >
              [GO TO LOGIN]
            </button>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-gb-fg-t mb-1">NEW PASSWORD:</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="terminal-input"
                required
                minLength={8}
                autoComplete="new-password"
                autoFocus
              />
            </div>
            <div>
              <label className="block text-gb-fg-t mb-1">
                CONFIRM PASSWORD:
              </label>
              <input
                type="password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                className="terminal-input"
                required
                minLength={8}
                autoComplete="new-password"
              />
            </div>
            {(localError || error) && (
              <p className="text-gb-red text-sm">
                ERR: {localError || error}
              </p>
            )}
            <button
              type="submit"
              className="terminal-button w-full"
              disabled={isLoading}
            >
              {isLoading ? "[UPDATING...]" : "[RESET PASSWORD]"}
            </button>
            <div className="text-center">
              <Link
                to="/login"
                className="text-gb-blue hover:text-gb-aqua text-sm"
              >
                [BACK TO LOGIN]
              </Link>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}