import { render, screen, fireEvent } from "@testing-library/react";
import ForgotPasswordPage from "./page";

// Mock translation
jest.mock("@/lib/i18n", () => ({
    useTranslation: () => ({
        t: (key: string) => key,
    }),
}));

// Mock simple UI components to avoid dependency issues if not configured
jest.mock("@/components/ui/button", () => ({
    Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
}));
jest.mock("@/components/ui/card", () => ({
    Card: ({ children }: any) => <div>{children}</div>,
    CardContent: ({ children }: any) => <div>{children}</div>,
}));
jest.mock("@/components/ui/input", () => ({
    Input: (props: any) => <input {...props} />,
}));
jest.mock("@/components/ui/label", () => ({
    Label: ({ children, htmlFor }: any) => <label htmlFor={htmlFor}>{children}</label>,
}));
jest.mock("@/components/ui/alert", () => ({
    Alert: ({ children }: any) => <div role="alert">{children}</div>,
    AlertDescription: ({ children }: any) => <div>{children}</div>,
}));

describe("ForgotPasswordPage", () => {
    it("renders the form correctly", () => {
        render(<ForgotPasswordPage />);

        expect(screen.getByText("auth.forgot.title")).toBeInTheDocument();
        expect(screen.getByText("auth.forgot.subtitle")).toBeInTheDocument();
        expect(screen.getByLabelText("auth.forgot.fields.email")).toBeInTheDocument();
        expect(screen.getByText("auth.forgot.submit")).toBeInTheDocument();
    });

    it("shows success message after submission", () => {
        render(<ForgotPasswordPage />);

        const emailInput = screen.getByLabelText("auth.forgot.fields.email");
        fireEvent.change(emailInput, { target: { value: "test@example.com" } });

        const submitBtn = screen.getByText("auth.forgot.submit");
        fireEvent.click(submitBtn);

        expect(screen.getByText("auth.forgot.success")).toBeInTheDocument();
    });
});
