/* eslint-disable @typescript-eslint/no-explicit-any */
import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import SupportShow from '../Show';

// ── Mocks ─────────────────────────────────────────────────────────────────────

const mockPost = vi.fn();
const mockPatch = vi.fn();

vi.mock('@inertiajs/react', () => ({
    Head: ({ title }: { title: string }) => <title>{title}</title>,
    Link: ({ href, children, ...rest }: any) => (
        <a href={href} {...rest}>
            {children}
        </a>
    ),
    router: {
        get: vi.fn(),
        post: vi.fn(),
        put: vi.fn(),
        patch: vi.fn(),
        delete: vi.fn(),
        visit: vi.fn(),
    },
    usePage: vi.fn(() => ({
        props: {
            auth: { adminRole: 'super_admin', adminPermissions: [] },
            flash: {},
            errors: {},
        },
    })),
    useForm: vi.fn((defaults: any) => ({
        data: { ...defaults },
        setData: vi.fn(),
        post: mockPost,
        put: vi.fn(),
        patch: mockPatch,
        delete: vi.fn(),
        processing: false,
        errors: {},
        reset: vi.fn(),
        transform: vi.fn().mockReturnThis(),
    })),
}));

vi.mock('@/Layouts/AdminLayout', () => ({
    default: ({ children, title }: any) => (
        <div data-testid="admin-layout" data-title={title}>
            {children}
        </div>
    ),
}));

vi.mock('@tanstack/react-query', () => ({
    useQuery: vi.fn(() => ({
        data: undefined,
        isLoading: false,
        isFetching: false,
        isError: false,
        refetch: vi.fn(),
    })),
    useQueryClient: vi.fn(() => ({
        invalidateQueries: vi.fn(),
        setQueryData: vi.fn(),
    })),
    keepPreviousData: undefined,
}));

vi.mock('@/lib/api', () => ({
    api: {
        get: vi.fn(),
        post: vi.fn(),
        put: vi.fn(),
        patch: vi.fn(),
        delete: vi.fn(),
    },
}));

vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));

// ── Fixtures ──────────────────────────────────────────────────────────────────

const TICKET = {
    id: 'aa000001-0000-0000-0000-000000000001',
    title: 'Cannot access billing page',
    category: 'billing',
    priority: 'urgent',
    status: 'open',
    author_name: 'Jane Doe',
    author_email: 'jane@example.com',
    tenant_id: 'bb000001-0000-0000-0000-000000000001',
    tenant_name: 'Acme Corp',
    created_at: '2025-06-01T10:00:00Z',
    updated_at: '2025-06-02T08:00:00Z',
};

const REPLIES = [
    {
        id: 'cc000001-0000-0000-0000-000000000001',
        body: 'We are looking into this.',
        is_internal: false,
        is_admin: true,
        author_name: 'Admin User',
        created_at: '2025-06-01T11:00:00Z',
    },
    {
        id: 'cc000002-0000-0000-0000-000000000002',
        body: 'This is an internal note.',
        is_internal: true,
        is_admin: true,
        author_name: 'Admin User',
        created_at: '2025-06-01T12:00:00Z',
    },
];

// ── Tests ─────────────────────────────────────────────────────────────────────

describe('Admin/Support/Show', () => {
    it('renders inside AdminLayout without crashing', () => {
        render(<SupportShow ticket={TICKET} replies={[]} />);
        expect(screen.getByTestId('admin-layout')).toBeInTheDocument();
    });

    it('displays the ticket title as a heading', () => {
        render(<SupportShow ticket={TICKET} replies={[]} />);
        expect(
            screen.getByRole('heading', { name: 'Cannot access billing page' }),
        ).toBeInTheDocument();
    });

    it('shows ticket ID in the subtitle', () => {
        render(<SupportShow ticket={TICKET} replies={[]} />);
        expect(screen.getAllByText(/Ticket #aa000001/i).length).toBeGreaterThan(
            0,
        );
    });

    it('shows "No replies yet" message when replies array is empty', () => {
        render(<SupportShow ticket={TICKET} replies={[]} />);
        expect(screen.getByText(/no replies yet/i)).toBeInTheDocument();
    });

    it('renders reply bubbles when replies are provided', () => {
        render(<SupportShow ticket={TICKET} replies={REPLIES} />);
        expect(
            screen.getByText('We are looking into this.'),
        ).toBeInTheDocument();
        expect(
            screen.getByText('This is an internal note.'),
        ).toBeInTheDocument();
    });

    it('marks internal replies with "Internal note" label', () => {
        render(<SupportShow ticket={TICKET} replies={REPLIES} />);
        expect(screen.getByText('Internal note')).toBeInTheDocument();
    });

    it('shows the reply form for open tickets', () => {
        render(<SupportShow ticket={TICKET} replies={[]} />);
        expect(
            screen.getByRole('heading', { name: /reply/i }),
        ).toBeInTheDocument();
        expect(
            screen.getByPlaceholderText(/write a reply to the customer/i),
        ).toBeInTheDocument();
    });

    it('hides the reply form when ticket is closed', () => {
        const closedTicket = { ...TICKET, status: 'closed' };
        render(<SupportShow ticket={closedTicket} replies={[]} />);
        expect(
            screen.queryByPlaceholderText(/write a reply to the customer/i),
        ).not.toBeInTheDocument();
    });

    it('shows the tenant name in the sidebar', () => {
        render(<SupportShow ticket={TICKET} replies={[]} />);
        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
    });

    it('shows the author name and email in the sidebar', () => {
        render(<SupportShow ticket={TICKET} replies={[]} />);
        expect(screen.getByText('Jane Doe')).toBeInTheDocument();
        expect(screen.getByText('jane@example.com')).toBeInTheDocument();
    });

    it('shows the correct reply count in the sidebar stats', () => {
        render(<SupportShow ticket={TICKET} replies={REPLIES} />);
        // The sidebar shows replies.length as a large number
        expect(screen.getByText('2')).toBeInTheDocument();
    });

    it('renders a "Make internal" toggle button in the reply form', () => {
        render(<SupportShow ticket={TICKET} replies={[]} />);
        expect(
            screen.getByRole('button', { name: /make internal/i }),
        ).toBeInTheDocument();
    });

    it('renders a back link to /admin/support', () => {
        render(<SupportShow ticket={TICKET} replies={[]} />);
        const backLink = screen.getByRole('link', { name: '' }); // ArrowLeft icon link
        expect(backLink).toHaveAttribute('href', '/admin/support');
    });
});