/**
 * Activity Log Component
 * Real-time log viewer for automation runs
 */
import React, { useState, useEffect } from 'react';
import { automationService } from '../../services/automationService';
import ComponentCard from '../common/ComponentCard';

interface ActivityLogProps {
  runId: string;
}

const ActivityLog: React.FC<ActivityLogProps> = ({ runId }) => {
  const [logs, setLogs] = useState<string>('');
  const [lines, setLines] = useState<number>(100);

  useEffect(() => {
    loadLogs();

    // Poll every 3 seconds
    const interval = setInterval(loadLogs, 3000);
    return () => clearInterval(interval);
  }, [runId, lines]);

  const loadLogs = async () => {
    try {
      const logText = await automationService.getLogs(runId, lines);
      setLogs(logText);
    } catch (error) {
      console.error('Failed to load logs', error);
    }
  };

  return (
    <ComponentCard
      title="Activity Log"
      desc="Real-time automation progress and events"
    >
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <label className="text-sm text-gray-600 dark:text-gray-400">Lines:</label>
          <select
            value={lines}
            onChange={(e) => setLines(parseInt(e.target.value))}
            className="border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
          >
            <option value={50}>50</option>
            <option value={100}>100</option>
            <option value={200}>200</option>
            <option value={500}>500</option>
          </select>
        </div>
      </div>
      <div className="bg-gray-900 dark:bg-gray-950 text-green-400 p-4 rounded-lg font-mono text-xs overflow-auto max-h-96 border border-gray-700">
        <pre className="whitespace-pre-wrap">{logs || 'No logs available'}</pre>
      </div>
    </ComponentCard>
  );
};

export default ActivityLog;