/**
 * Redirect Intelligence v2 - Frontend Entry Point
 */

import React from 'react';
import ReactDOM from 'react-dom/client';

// Placeholder component for Phase 1
function App() {
  return (
    <div style={{ 
      padding: '2rem', 
      fontFamily: 'system-ui, sans-serif',
      maxWidth: '800px',
      margin: '0 auto'
    }}>
      <h1>🚀 Redirect Intelligence v2</h1>
      <p>
        <strong>Phase 1: PostgreSQL + Prisma + Authentication</strong> is in progress.
      </p>
      
      <div style={{ 
        background: '#f0f8ff', 
        padding: '1rem', 
        borderRadius: '8px', 
        marginTop: '2rem' 
      }}>
        <h3>✅ What's Working</h3>
        <ul>
          <li>Docker Compose infrastructure</li>
          <li>TypeScript API server</li>
          <li>Backward compatible legacy endpoints</li>
          <li>Database schema with Prisma</li>
          <li>Authentication system (JWT + Argon2)</li>
        </ul>
      </div>

      <div style={{ 
        background: '#fff8dc', 
        padding: '1rem', 
        borderRadius: '8px', 
        marginTop: '1rem' 
      }}>
        <h3>🚧 Coming Next</h3>
        <ul>
          <li>Chakra UI frontend (Phase 4)</li>
          <li>Enhanced redirect analysis (Phase 2-3)</li>
          <li>Bulk processing (Phase 6)</li>
          <li>Monitoring & alerts (Phase 10)</li>
        </ul>
      </div>

      <div style={{ marginTop: '2rem' }}>
        <h3>🔗 API Endpoints</h3>
        <p>Test the API directly:</p>
        <ul>
          <li><a href="/api/docs">/api/docs</a> - API Documentation</li>
          <li><a href="/health">/health</a> - Health Check</li>
          <li><code>POST /api/v1/auth/register</code> - User Registration</li>
          <li><code>POST /api/v1/auth/login</code> - User Login</li>
          <li><code>GET /api/v1/auth/me</code> - User Profile</li>
        </ul>
      </div>

      <div style={{ 
        marginTop: '2rem', 
        padding: '1rem', 
        background: '#f5f5f5', 
        borderRadius: '8px' 
      }}>
        <h4>🧪 Test the Legacy Endpoints (100% Compatible)</h4>
        <pre style={{ background: '#000', color: '#0f0', padding: '1rem', overflow: 'auto' }}>
{`curl -X POST ${window.location.origin}/api/v1/track \\
  -H "Content-Type: application/json" \\
  -d '{"url": "github.com", "method": "GET"}'`}
        </pre>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
