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

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

import AiQuotaBadge from '@/Components/AiQuotaBadge';

const mockedUsePage = vi.mocked(usePage);

function mockPageProps(aiStatus: Record<string, unknown> | null) {
  mockedUsePage.mockReturnValue({
    props: { ai_status: aiStatus },
  } as unknown as ReturnType<typeof usePage>);
}

describe('AiQuotaBadge', () => {
  it('renders nothing when ai_status is null', () => {
    mockPageProps(null);
    const { container } = render(<AiQuotaBadge />);
    expect(container).toBeEmptyDOMElement();
  });

  it('renders nothing for byok mode users', () => {
    mockPageProps({ mode: 'byok', bundled_remaining: null, bundled_limit: null });
    const { container } = render(<AiQuotaBadge />);
    expect(container).toBeEmptyDOMElement();
  });

  it('renders nothing when limit is 0', () => {
    mockPageProps({ mode: 'bundled', bundled_remaining: 0, bundled_limit: 0 });
    const { container } = render(<AiQuotaBadge />);
    expect(container).toBeEmptyDOMElement();
  });

  it('shows X/Y drafts remaining for bundled users with quota', () => {
    mockPageProps({ mode: 'bundled', bundled_remaining: 7, bundled_limit: 10 });
    render(<AiQuotaBadge />);
    expect(screen.getByText('7/10')).toBeInTheDocument();
    expect(screen.getByText('drafts remaining')).toBeInTheDocument();
  });

  it('renders progress bar with correct fill percentage', () => {
    mockPageProps({ mode: 'bundled', bundled_remaining: 5, bundled_limit: 10 });
    render(<AiQuotaBadge />);
    const bar = screen.getByRole('progressbar');
    expect(bar).toHaveAttribute('aria-valuenow', '5');
    expect(bar).toHaveAttribute('aria-valuemax', '10');
    expect(bar).toHaveAttribute('aria-valuemin', '0');
  });

  it('shows red styling when remaining is 1 (almost gone)', () => {
    mockPageProps({ mode: 'bundled', bundled_remaining: 1, bundled_limit: 10 });
    render(<AiQuotaBadge />);
    expect(screen.getByText('Almost gone')).toBeInTheDocument();
  });

  it('shows upgrade link when remaining is 2 or fewer', () => {
    mockPageProps({ mode: 'bundled', bundled_remaining: 2, bundled_limit: 10 });
    render(<AiQuotaBadge />);
    expect(screen.getByRole('link', { name: /upgrade/i })).toBeInTheDocument();
  });

  it('does not show upgrade link when remaining is 4 or more', () => {
    mockPageProps({ mode: 'bundled', bundled_remaining: 4, bundled_limit: 10 });
    render(<AiQuotaBadge />);
    expect(screen.queryByRole('link', { name: /upgrade/i })).not.toBeInTheDocument();
  });

  it('shows "Plenty left" status label when remaining is 4+', () => {
    mockPageProps({ mode: 'bundled', bundled_remaining: 8, bundled_limit: 10 });
    render(<AiQuotaBadge />);
    expect(screen.getByText('Plenty left')).toBeInTheDocument();
  });

  it('shows "Running low" status label when remaining is 2-3', () => {
    mockPageProps({ mode: 'bundled', bundled_remaining: 3, bundled_limit: 10 });
    render(<AiQuotaBadge />);
    expect(screen.getByText('Running low')).toBeInTheDocument();
  });
});