import { fireEvent, screen, waitFor } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { renderWithProviders } from "../utils/testHelpers";
import { ResetPasswordPage } from "./reset-password";

describe("ResetPasswordPage", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders without crashing", () => {
    const { container } = renderWithProviders(<ResetPasswordPage />);
    expect(container).toBeInTheDocument();
  });

  it("renders form with email input", () => {
    renderWithProviders(<ResetPasswordPage />);

    expect(screen.getByText(/forgot your password/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
    expect(screen.getByRole("button", { name: /send reset link/i })).toBeInTheDocument();
  });

  it("displays help text", () => {
    renderWithProviders(<ResetPasswordPage />);

    expect(screen.getByText(/enter your email address/i)).toBeInTheDocument();
  });

  it("shows link back to login", () => {
    renderWithProviders(<ResetPasswordPage />);

    const loginLink = screen.getByText(/back to login/i);
    expect(loginLink).toBeInTheDocument();
  });

  it("updates email input on change", () => {
    renderWithProviders(<ResetPasswordPage />);

    const emailInput = screen.getByLabelText(/email/i) as HTMLInputElement;
    fireEvent.change(emailInput, { target: { value: "test@example.com" } });

    expect(emailInput.value).toBe("test@example.com");
  });

  it.skip("submits form and shows success message", async () => {
    renderWithProviders(<ResetPasswordPage />);

    const emailInput = screen.getByLabelText(/email/i);
    const submitButton = screen.getByRole("button", { name: /send reset link/i });

    fireEvent.change(emailInput, { target: { value: "test@example.com" } });
    fireEvent.click(submitButton);

    await waitFor(() => {
      expect(screen.getByText(/email sent/i)).toBeInTheDocument();
    });
  });

  it.skip("displays email in success message", async () => {
    renderWithProviders(<ResetPasswordPage />);

    const emailInput = screen.getByLabelText(/email/i);
    const submitButton = screen.getByRole("button", { name: /send reset link/i });

    fireEvent.change(emailInput, { target: { value: "test@example.com" } });
    fireEvent.click(submitButton);

    await waitFor(() => {
      expect(screen.getByText(/test@example.com/i)).toBeInTheDocument();
    });
  });

  it.skip("shows return to login button in success state", async () => {
    renderWithProviders(<ResetPasswordPage />);

    const emailInput = screen.getByLabelText(/email/i);
    const submitButton = screen.getByRole("button", { name: /send reset link/i });

    fireEvent.change(emailInput, { target: { value: "test@example.com" } });
    fireEvent.click(submitButton);

    await waitFor(() => {
      expect(screen.getByRole("button", { name: /back to login/i })).toBeInTheDocument();
    });
  });

  it("requires email field to be filled", () => {
    renderWithProviders(<ResetPasswordPage />);

    const emailInput = screen.getByLabelText(/email/i);
    expect(emailInput).toHaveAttribute("required");
  });

  it("requires valid email format", () => {
    renderWithProviders(<ResetPasswordPage />);

    const emailInput = screen.getByLabelText(/email/i);
    expect(emailInput).toHaveAttribute("type", "email");
  });
});
