import React, { useState } from 'react';
import type { HostedSessionConfig } from '../../../../packages/automation/domain/types/HostedSessionConfig';

interface SessionCreationFormProps {
  onSubmit: (config: HostedSessionConfig) => void;
  disabled: boolean;
}

export function SessionCreationForm({ onSubmit, disabled }: SessionCreationFormProps) {
  const [config, setConfig] = useState<HostedSessionConfig>({
    sessionName: 'POC Test Session',
    serverName: 'POC Server',
    password: 'test123',
    adminPassword: 'admin123',
    maxDrivers: 40,
    trackId: 'watkins-glen',
    carIds: ['porsche-911-gt3-r'],
    weatherType: 'dynamic',
    timeOfDay: 'afternoon',
    sessionDuration: 60,
    practiceLength: 15,
    qualifyingLength: 10,
    warmupLength: 5,
    raceLength: 30,
    startType: 'standing',
    restarts: 'single-file',
    damageModel: 'realistic',
    trackState: 'auto'
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit(config);
  };

  const inputStyle: React.CSSProperties = {
    width: '100%',
    padding: '0.5rem',
    backgroundColor: '#2a2a2a',
    border: '1px solid #444',
    borderRadius: '4px',
    color: '#e0e0e0',
    fontSize: '14px'
  };

  const labelStyle: React.CSSProperties = {
    display: 'block',
    marginBottom: '0.5rem',
    color: '#aaa',
    fontSize: '14px'
  };

  const fieldStyle: React.CSSProperties = {
    marginBottom: '1rem'
  };

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: '500px' }}>
      <h2 style={{ marginBottom: '1.5rem', color: '#fff' }}>Session Configuration</h2>
      
      <div style={fieldStyle}>
        <label style={labelStyle}>Session Name</label>
        <input
          type="text"
          value={config.sessionName}
          onChange={(e) => setConfig({ ...config, sessionName: e.target.value })}
          style={inputStyle}
          disabled={disabled}
          required
        />
      </div>

      <div style={fieldStyle}>
        <label style={labelStyle}>Server Name</label>
        <input
          type="text"
          value={config.serverName}
          onChange={(e) => setConfig({ ...config, serverName: e.target.value })}
          style={inputStyle}
          disabled={disabled}
          required
        />
      </div>

      <div style={fieldStyle}>
        <label style={labelStyle}>Max Drivers</label>
        <input
          type="number"
          value={config.maxDrivers}
          onChange={(e) => setConfig({ ...config, maxDrivers: parseInt(e.target.value) })}
          style={inputStyle}
          disabled={disabled}
          min="1"
          max="60"
          required
        />
      </div>

      <div style={fieldStyle}>
        <label style={labelStyle}>Track</label>
        <input
          type="text"
          value={config.trackId}
          onChange={(e) => setConfig({ ...config, trackId: e.target.value })}
          style={inputStyle}
          disabled={disabled}
          required
        />
      </div>

      <div style={fieldStyle}>
        <label style={labelStyle}>Weather Type</label>
        <select
          value={config.weatherType}
          onChange={(e) =>
            setConfig(prev =>
              ({
                ...prev,
                weatherType: e.target.value as HostedSessionConfig['weatherType'],
              } as HostedSessionConfig)
            )
          }
          style={inputStyle}
          disabled={disabled}
        >
          <option value="static">Static</option>
          <option value="dynamic">Dynamic</option>
        </select>
      </div>

      <div style={fieldStyle}>
        <label style={labelStyle}>Time of Day</label>
        <select
          value={config.timeOfDay}
          onChange={(e) =>
            setConfig(prev =>
              ({
                ...prev,
                timeOfDay: e.target.value as HostedSessionConfig['timeOfDay'],
              } as HostedSessionConfig)
            )
          }
          style={inputStyle}
          disabled={disabled}
        >
          <option value="morning">Morning</option>
          <option value="afternoon">Afternoon</option>
          <option value="evening">Evening</option>
          <option value="night">Night</option>
        </select>
      </div>

      <div style={fieldStyle}>
        <label style={labelStyle}>Race Length (minutes)</label>
        <input
          type="number"
          value={config.raceLength}
          onChange={(e) => setConfig({ ...config, raceLength: parseInt(e.target.value) })}
          style={inputStyle}
          disabled={disabled}
          min="1"
          required
        />
      </div>

      <button
        type="submit"
        disabled={disabled}
        style={{
          width: '100%',
          padding: '0.75rem',
          backgroundColor: disabled ? '#444' : '#0066cc',
          color: '#fff',
          border: 'none',
          borderRadius: '4px',
          fontSize: '16px',
          fontWeight: 'bold',
          cursor: disabled ? 'not-allowed' : 'pointer',
          marginTop: '1rem'
        }}
      >
        {disabled ? 'Automation Running...' : 'Start Automation'}
      </button>

      <p style={{ marginTop: '1rem', fontSize: '12px', color: '#888', lineHeight: '1.5' }}>
        Note: This POC will execute steps 1-18 and stop at step 18 (Track Conditions) for safety.
        The actual session creation will not be completed.
      </p>
    </form>
  );
}