import { render, screen, fireEvent, waitFor } from "@testing-library/react"
import CandidateRegisterPage from "./page"
import { registerCandidate } from "@/lib/auth"

// Mocks
jest.mock("next/navigation", () => ({
    useRouter: () => ({ push: jest.fn() }),
}))

jest.mock("@/lib/auth", () => ({
    registerCandidate: jest.fn(),
}))

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

jest.mock("framer-motion", () => ({
    motion: {
        div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
    },
}))

global.ResizeObserver = class {
    observe() { }
    unobserve() { }
    disconnect() { }
} as any
// Mock PhoneInput since it's a custom component
jest.mock("@/components/phone-input", () => ({
    PhoneInput: ({ onChangeValue }: any) => <input data-testid="phone-input" onChange={e => onChangeValue(e.target.value)} />
}))

describe("CandidateRegisterPage", () => {
    beforeEach(() => {
        jest.clearAllMocks()
    })

    it("renders step 1 fields", () => {
        render(<CandidateRegisterPage />)
        expect(screen.getByPlaceholderText(/register.candidate.placeholders.fullName/i)).toBeInTheDocument()
        expect(screen.getByPlaceholderText(/register.candidate.placeholders.email/i)).toBeInTheDocument()
    })

    it("validates step 1 and prevents next", async () => {
        render(<CandidateRegisterPage />)
        fireEvent.click(screen.getByRole("button", { name: /register.candidate.actions.next/i }))

        await waitFor(() => {
            expect(screen.getByText(/register.candidate.validation.fullName/i)).toBeInTheDocument()
        })
    })

    // Note: Testing multi-step forms in JSDOM can be complex with framer-motion and react-hook-form validation triggers.
    // We will verify the component renders and initial validation works.
})
