import React, { useState, useEffect } from 'react';
import { SessionCreationForm } from './components/SessionCreationForm';
import { SessionProgressMonitor } from './components/SessionProgressMonitor';
import type { HostedSessionConfig } from '../../../packages/domain/entities/HostedSessionConfig';

interface SessionProgress {
  sessionId: string;
  currentStep: number;
  state: string;
  completedSteps: number[];
  hasError: boolean;
  errorMessage: string | null;
}

export function App() {
  const [sessionId, setSessionId] = useState<string | null>(null);
  const [progress, setProgress] = useState<SessionProgress | null>(null);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    if (window.electronAPI) {
      window.electronAPI.onSessionProgress((newProgress: SessionProgress) => {
        setProgress(newProgress);
        if (newProgress.state === 'COMPLETED' || 
            newProgress.state === 'FAILED' || 
            newProgress.state === 'STOPPED_AT_STEP_18') {
          setIsRunning(false);
        }
      });
    }
  }, []);

  const handleStartAutomation = async (config: HostedSessionConfig) => {
    setIsRunning(true);
    const result = await window.electronAPI.startAutomation(config);
    
    if (result.success && result.sessionId) {
      setSessionId(result.sessionId);
    } else {
      setIsRunning(false);
      alert(`Failed to start automation: ${result.error}`);
    }
  };

  const handleStopAutomation = async () => {
    if (sessionId) {
      const result = await window.electronAPI.stopAutomation(sessionId);
      if (result.success) {
        setIsRunning(false);
        setProgress(prev => prev ? { ...prev, state: 'STOPPED', hasError: false, errorMessage: 'User stopped automation' } : null);
      } else {
        alert(`Failed to stop automation: ${result.error}`);
      }
    }
  };

  return (
    <div style={{
      display: 'flex',
      minHeight: '100vh',
      backgroundColor: '#1a1a1a'
    }}>
      <div style={{
        flex: 1,
        padding: '2rem',
        borderRight: '1px solid #333'
      }}>
        <h1 style={{ marginBottom: '2rem', color: '#fff' }}>
          GridPilot Companion
        </h1>
        <p style={{ marginBottom: '2rem', color: '#aaa' }}>
          Hosted Session Automation POC
        </p>
        <SessionCreationForm
          onSubmit={handleStartAutomation}
          disabled={isRunning}
        />
        {isRunning && (
          <button
            onClick={handleStopAutomation}
            style={{
              marginTop: '1rem',
              padding: '0.75rem 1.5rem',
              backgroundColor: '#dc3545',
              color: '#fff',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              fontSize: '1rem',
              fontWeight: 'bold'
            }}
          >
            Stop Automation
          </button>
        )}
      </div>
      <div style={{
        flex: 1,
        padding: '2rem',
        backgroundColor: '#0d0d0d'
      }}>
        <SessionProgressMonitor 
          sessionId={sessionId}
          progress={progress}
          isRunning={isRunning}
        />
      </div>
    </div>
  );
}