import React from 'react';
import { render, screen } from '@testing-library/react';
import { Route, Routes } from 'react-router-dom';
import AppRouter from './AppRouter';
import { getAppRouter, isNativePlatform } from './nativePlatform';

describe('AppRouter / getAppRouter (#24)', () => {
  const originalCapacitor = window.Capacitor;

  afterEach(() => {
    if (originalCapacitor === undefined) {
      delete window.Capacitor;
    } else {
      window.Capacitor = originalCapacitor;
    }
  });

  it('uses BrowserRouter on web', () => {
    delete window.Capacitor;
    expect(isNativePlatform()).toBe(false);
    const Router = getAppRouter();
    expect(Router.name).toBe('BrowserRouter');
  });

  it('uses HashRouter on native Capacitor', () => {
    window.Capacitor = { isNativePlatform: () => true };
    expect(isNativePlatform()).toBe(true);
    const Router = getAppRouter();
    expect(Router.name).toBe('HashRouter');
  });

  it('renders nested routes under HashRouter without blank screen', () => {
    window.Capacitor = { isNativePlatform: () => true };
    window.location.hash = '#/account/';

    render(
      <AppRouter>
        <Routes>
          <Route path="/account/" element={<div>Account Page</div>} />
          <Route path="/" element={<div>Home</div>} />
        </Routes>
      </AppRouter>,
    );

    expect(screen.getByText('Account Page')).toBeInTheDocument();
  });

  it('renders nested routes under BrowserRouter on web', () => {
    delete window.Capacitor;
    window.history.pushState({}, '', '/account/');

    render(
      <AppRouter>
        <Routes>
          <Route path="/account/" element={<div>Account Page</div>} />
          <Route path="/" element={<div>Home</div>} />
        </Routes>
      </AppRouter>,
    );

    expect(screen.getByText('Account Page')).toBeInTheDocument();
  });
});
