<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alfred Camera Backend</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
        }
        .header {
            background: #007bff;
            color: white;
            padding: 2rem;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 2rem;
        }
        .status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: bold;
        }
        .status.online { background: #28a745; color: white; }
        .status.offline { background: #dc3545; color: white; }
        .card {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .endpoint {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 1rem;
            margin: 0.5rem 0;
            font-family: 'Monaco', 'Courier New', monospace;
        }
        .method {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.75rem;
            font-weight: bold;
            margin-right: 8px;
        }
        .method.get { background: #28a745; color: white; }
        .method.post { background: #007bff; color: white; }
        .method.put { background: #ffc107; color: #212529; }
        .method.delete { background: #dc3545; color: white; }
        pre {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 4px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🎥 Alfred Camera Backend</h1>
        <p>Real-time video streaming API for iOS Alfred Camera app</p>
        <p>Status: 
            <span class="status online">Online</span> | Devices: 7        </p>
    </div>

    <div class="card">
        <h2>📱 Device Management</h2>
        <p>Register and discover camera/viewer devices on the network.</p>
        
        <div class="endpoint">
            <span class="method post">POST</span> /api/devices/register
            <br><small>Register a new device (camera or viewer)</small>
        </div>
        
        <div class="endpoint">
            <span class="method get">GET</span> /api/devices/discover
            <br><small>Discover available devices</small>
        </div>
    </div>

    <div class="card">
        <h2>📺 Streaming Management</h2>
        <p>Control video streaming sessions between devices.</p>
        
        <div class="endpoint">
            <span class="method post">POST</span> /api/streaming/start
            <br><small>Start a new streaming session</small>
        </div>
        
        <div class="endpoint">
            <span class="method post">POST</span> /api/streaming/stop
            <br><small>Stop an active streaming session</small>
        </div>
    </div>

    <div class="card">
        <h2>🔌 WebSocket Connection</h2>
        <p>Real-time communication for video frames and control commands.</p>
        
        <div class="endpoint">
            <span class="method get">WS</span> ws://yourprestigehomes.com:8080?session_id=SESSION_ID
            <br><small>WebSocket endpoint for real-time communication</small>
        </div>
    </div>

    <div class="card">
        <h2>📋 API Usage Examples</h2>
        
        <h3>Device Registration</h3>
        <pre><code>POST /api/devices/register
Content-Type: application/json

{
  "device_id": "camera_001",
  "name": "iPhone Camera",
  "device_type": "camera",
  "ip_address": "192.168.1.100",
  "port": 8080,
  "capabilities": {
    "video_formats": ["h264", "mjpeg"],
    "resolutions": ["1280x720", "1920x1080"]
  },
  "metadata": {
    "ios_version": "17.0",
    "device_model": "iPhone 15 Pro"
  }
}</code></pre>

        <h3>Start Streaming</h3>
        <pre><code>POST /api/streaming/start
Content-Type: application/json

{
  "camera_device_id": "camera_001",
  "viewer_device_id": "viewer_001",
  "video_quality": "high",
  "frame_rate": 30,
  "resolution": "1280x720"
}</code></pre>

        <h3>WebSocket Message (Video Frame)</h3>
        <pre><code>{
  "type": "video_frame",
  "session_id": "session_abc123",
  "device_id": "camera_001",
  "frame_data": "base64_encoded_jpeg_data",
  "timestamp": "2024-01-01T12:00:00Z",
  "frame_number": 1,
  "resolution": "1280x720"
}</code></pre>
    </div>

    <div class="card">
        <h2>📊 Current Status</h2>
        <p><strong>Active Streaming Sessions:</strong> 0</p><p><strong>Device Statistics:</strong></p><ul><li>camera devices (online): 1</li><li>camera devices (offline): 1</li><li>viewer devices (online): 1</li><li>viewer devices (offline): 4</li></ul>    </div>

    <div class="card">
        <h2>🛠️ Installation Notes</h2>
        <ol>
            <li>Upload all files to your GoDaddy hosting public_html directory</li>
            <li>Create a MySQL database in cPanel</li>
            <li>Update database credentials in <code>config/database.php</code></li>
            <li>Import the database schema from <code>database/setup.sql</code></li>
            <li>Update domain settings in the configuration</li>
            <li>Test the API endpoints using the examples above</li>
        </ol>
        
        <p><strong>Note:</strong> The WebSocket server requires command-line access to run. For shared hosting, you may need to use alternative real-time solutions or polling.</p>
    </div>

    <div style="text-align: center; color: #6c757d; margin-top: 2rem;">
        <p>Alfred Camera Backend v1.0 | Built for iOS Alfred Camera App</p>
    </div>
</body>
</html>