import { fireEvent, render, screen } from '@testing-library/react';
import { vi } from 'vitest';

import { router } from '@inertiajs/react';

import type { MicroSurveyPrompt } from '@/types';

import MicroSurveyModal from './MicroSurveyModal';

const mockSurvey: MicroSurveyPrompt = {
    trigger: 'positive_roi_viewed',
    question: 'How useful is the ROI tracking feature for your workflow?',
    ratings: [
        { value: 'very_useful', label: 'Very useful' },
        { value: 'somewhat_useful', label: 'Somewhat useful' },
        { value: 'not_useful', label: 'Not useful' },
    ],
};

describe('MicroSurveyModal', () => {
    it('renders nothing when micro_survey_pending is false', () => {
        const { container } = render(<MicroSurveyModal micro_survey_pending={false} />);
        expect(container).toBeEmptyDOMElement();
    });

    it('renders the survey question when data is provided', () => {
        render(<MicroSurveyModal micro_survey_pending={mockSurvey} />);
        expect(screen.getByText('How useful is the ROI tracking feature for your workflow?')).toBeInTheDocument();
    });

    it('renders all rating buttons', () => {
        render(<MicroSurveyModal micro_survey_pending={mockSurvey} />);
        expect(screen.getByText('Very useful')).toBeInTheDocument();
        expect(screen.getByText('Somewhat useful')).toBeInTheDocument();
        expect(screen.getByText('Not useful')).toBeInTheDocument();
    });

    it('Submit button is disabled until a rating is selected', () => {
        render(<MicroSurveyModal micro_survey_pending={mockSurvey} />);
        const submitButton = screen.getByRole('button', { name: /submit/i });
        expect(submitButton).toBeDisabled();
    });

    it('Submit button is enabled after selecting a rating', () => {
        render(<MicroSurveyModal micro_survey_pending={mockSurvey} />);
        fireEvent.click(screen.getByText('Very useful'));
        const submitButton = screen.getByRole('button', { name: /submit/i });
        expect(submitButton).not.toBeDisabled();
    });

    it('shows comment textarea after rating is selected', () => {
        render(<MicroSurveyModal micro_survey_pending={mockSurvey} />);
        expect(screen.queryByLabelText(/any additional thoughts/i)).not.toBeInTheDocument();
        fireEvent.click(screen.getByText('Very useful'));
        expect(screen.getByLabelText(/any additional thoughts/i)).toBeInTheDocument();
    });

    it('calls router.post with correct payload on submit', () => {
        const postSpy = vi.mocked(router.post);
        postSpy.mockClear();

        render(<MicroSurveyModal micro_survey_pending={mockSurvey} />);
        fireEvent.click(screen.getByText('Somewhat useful'));

        const textarea = screen.getByLabelText(/any additional thoughts/i);
        fireEvent.change(textarea, { target: { value: 'Great feature!' } });

        fireEvent.click(screen.getByRole('button', { name: /submit/i }));

        expect(postSpy).toHaveBeenCalledWith(
            '/micro-survey',
            { trigger: 'positive_roi_viewed', rating: 'somewhat_useful', comment: 'Great feature!' },
            expect.objectContaining({ onFinish: expect.any(Function) }),
        );
    });

    it('calls router.post with null comment when comment is empty', () => {
        const postSpy = vi.mocked(router.post);
        postSpy.mockClear();

        render(<MicroSurveyModal micro_survey_pending={mockSurvey} />);
        fireEvent.click(screen.getByText('Not useful'));
        fireEvent.click(screen.getByRole('button', { name: /submit/i }));

        expect(postSpy).toHaveBeenCalledWith(
            '/micro-survey',
            { trigger: 'positive_roi_viewed', rating: 'not_useful', comment: null },
            expect.objectContaining({ onFinish: expect.any(Function) }),
        );
    });

    it('closes modal without submitting when Remind me later is clicked', () => {
        const postSpy = vi.mocked(router.post);
        postSpy.mockClear();

        render(<MicroSurveyModal micro_survey_pending={mockSurvey} />);
        fireEvent.click(screen.getByRole('button', { name: /remind me later/i }));

        expect(postSpy).not.toHaveBeenCalled();
        // After dismiss the dialog should no longer be visible
        expect(screen.queryByText('Quick feedback')).not.toBeInTheDocument();
    });
});