import {JSX} from 'react';
import {useSearchParams} from 'react-router-dom';

export function TestView(): JSX.Element {
  const [searchParams] = useSearchParams();

  // Get all query parameters
  const allParams = Array.from(searchParams.entries());

  return (
    <div
      style={{
        padding: '2rem',
        maxWidth: '800px',
        margin: '0 auto'
      }}>
      <h1>Query Parameter Test Page</h1>

      <div
        style={{
          background: '#f8f9fa',
          padding: '1rem',
          borderRadius: '8px',
          marginBottom: '2rem',
          border: '1px solid #dee2e6'
        }}>
        <h3>Current URL Information</h3>
        <p>
          <strong>Full URL:</strong> {window.location.href}
        </p>
        <p>
          <strong>Path:</strong> {window.location.pathname}
        </p>
        <p>
          <strong>Search:</strong> {window.location.search || '(none)'}
        </p>
        <p>
          <strong>Hash:</strong> {window.location.hash || '(none)'}
        </p>
      </div>

      <div
        style={{
          background: '#e7f3ff',
          padding: '1rem',
          borderRadius: '8px',
          marginBottom: '2rem',
          border: '1px solid #007bff'
        }}>
        <h3>Query Parameters</h3>
        {allParams.length > 0 ? (
          <ul style={{margin: 0, paddingLeft: '1.5rem'}}>
            {allParams.map(([key, value]) => (
              <li key={key}>
                <strong>{key}:</strong> {value}
              </li>
            ))}
          </ul>
        ) : (
          <p>No query parameters found</p>
        )}
      </div>

      <div
        style={{
          background: '#fff3cd',
          padding: '1rem',
          borderRadius: '8px',
          border: '1px solid #ffc107'
        }}>
        <h3>Test Instructions</h3>
        <p>To test query parameter preservation:</p>
        <ol>
          <li>
            Navigate to this page with query parameters: <code>/test?param1=value1&param2=value2</code>
          </li>
          <li>
            If not authenticated, you should be redirected to: <code>/login?param1=value1&param2=value2</code>
          </li>
          <li>Check the console for debug information from AuthorizedOnly</li>
          <li>After login, you should be able to return to the original URL with parameters</li>
        </ol>

        <h4>Test URLs to try:</h4>
        <ul>
          <li>
            <code>/test?tab=dashboard&filter=active</code>
          </li>
          <li>
            <code>/test?user=123&view=detailed&sort=date</code>
          </li>
          <li>
            <code>/test?lang=en&theme=dark&debug=true</code>
          </li>
        </ul>
      </div>
    </div>
  );
}
