oculog/server/frontend/src/components/ClientDownload.js

import React, { useState } from 'react';
import axios from 'axios';
import './ClientDownload.css';

const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:3001';

function ClientDownload({ onClose }) {
  const [serverId, setServerId] = useState('');
  const [serverUrl, setServerUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(false);
  
  // Get the base server URL for curl command (where the API is hosted)
  const getBaseUrl = () => {
    // Use serverUrl if provided, otherwise default to current origin but replace port 3000 with 3001
    if (serverUrl) {
      return serverUrl;
    }
    return window.location.origin.replace(':3000', ':3001');
  };
  
  // Generate curl command
  const getCurlCommand = () => {
    const baseUrl = getBaseUrl();
    // Include serverUrl query parameter if a custom serverUrl was provided
    const queryParam = serverUrl ? `?serverUrl=${encodeURIComponent(serverUrl)}` : '';
    return `curl -s ${baseUrl}/api/download-client/${serverId}${queryParam} | bash`;
  };
  
  const copyCurlCommand = () => {
    navigator.clipboard.writeText(getCurlCommand());
  };

  const handleDownload = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    setSuccess(false);

    try {
      const response = await axios.post(
        `${API_URL}/api/download-client`,
        {
          serverId: serverId || `server-${Date.now()}`,
          serverUrl: serverUrl || window.location.origin.replace(':3000', ':3001')
        },
        {
          responseType: 'blob'
        }
      );

      // Create download link
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', `oculog-client-install.sh`);
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);

      setSuccess(true);
      setTimeout(() => {
        setSuccess(false);
        if (onClose) onClose();
      }, 3000);
    } catch (err) {
      setError(err.response?.data?.error || 'Failed to generate client package');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="client-download">
      <h2>Download Client</h2>
      <p className="download-description">
        Generate a pre-configured client installer for your Ubuntu server. 
        The installer includes your server URL and API key automatically configured.
      </p>

      <form onSubmit={handleDownload} className="download-form">
        <div className="form-group">
          <label htmlFor="serverId">Server ID</label>
          <input
            type="text"
            id="serverId"
            value={serverId}
            onChange={(e) => setServerId(e.target.value)}
            placeholder="my-ubuntu-server"
            required
          />
          <small>Unique identifier for this server</small>
        </div>

        <div className="form-group">
          <label htmlFor="serverUrl">Server URL (optional)</label>
          <input
            type="text"
            id="serverUrl"
            value={serverUrl}
            onChange={(e) => setServerUrl(e.target.value)}
            placeholder="http://your-server-ip:3001"
          />
          <small>Leave empty to use current server</small>
        </div>

        {error && <div className="error-message">{error}</div>}
        {success && (
          <div className="success-message">
            Client installer downloaded! Run it on your Ubuntu server with: 
            <code>sudo bash oculog-client-install.sh</code>
          </div>
        )}

        <button type="submit" disabled={loading} className="download-button">
          {loading ? 'Generating...' : 'Download Client Installer'}
        </button>
      </form>

      {/* Curl Installation Instructions */}
      <div className="curl-instructions">
        <h3>Quick Install with curl</h3>
        <p className="curl-description">
          Copy and paste this command directly into your Ubuntu server terminal:
        </p>
        <div className="curl-command-container">
          <code className="curl-command">
            {serverId ? getCurlCommand() : 'curl -s SERVER_URL/api/download-client/SERVER_ID?serverUrl=SERVER_URL | bash'}
          </code>
          {serverId && (
            <button 
              type="button" 
              onClick={copyCurlCommand}
              className="copy-button"
              title="Copy to clipboard"
            >
              <i className="fas fa-copy"></i>
            </button>
          )}
        </div>
        <p className="curl-note">
          Fill in the Server ID field above to generate your custom curl command. The command will automatically use your Server URL if provided.
        </p>
      </div>

      <div className="installation-instructions">
        <h3>Manual Installation Instructions</h3>
        <ol>
          <li>Download the installer script above</li>
          <li>Transfer it to your Ubuntu server</li>
          <li>Make it executable: <code>chmod +x oculog-client-install.sh</code></li>
          <li>Run as root: <code>sudo ./oculog-client-install.sh</code></li>
          <li>The client will automatically start and begin sending metrics</li>
        </ol>
      </div>
    </div>
  );
}

export default ClientDownload;