import { Select, Input, Toggle } from '@cameleer/design-system';
import type { MonitoringFormState } from '../hooks/useDeploymentPageState';
import styles from '../AppDeploymentPage.module.css';

interface Props {
  value: MonitoringFormState;
  onChange: (next: MonitoringFormState) => void;
  disabled?: boolean;
}

const LOG_LEVELS = ['TRACE', 'DEBUG', 'INFO', 'WARN', 'ERROR'].map((l) => ({ value: l, label: l }));

export function MonitoringTab({ value, onChange, disabled }: Props) {
  const update = <K extends keyof MonitoringFormState>(key: K, v: MonitoringFormState[K]) =>
    onChange({ ...value, [key]: v });

  return (
    <div className={styles.configGrid}>
      <span className={styles.configLabel}>Engine Level</span>
      <Select
        disabled={disabled}
        value={value.engineLevel}
        onChange={(e) => update('engineLevel', e.target.value)}
        options={[
          { value: 'NONE', label: 'NONE' },
          { value: 'MINIMAL', label: 'MINIMAL' },
          { value: 'REGULAR', label: 'REGULAR' },
          { value: 'COMPLETE', label: 'COMPLETE' },
        ]}
      />

      <span className={styles.configLabel}>Payload Capture</span>
      <Select
        disabled={disabled}
        value={value.payloadCaptureMode}
        onChange={(e) => update('payloadCaptureMode', e.target.value)}
        options={[
          { value: 'NONE', label: 'NONE' },
          { value: 'INPUT', label: 'INPUT' },
          { value: 'OUTPUT', label: 'OUTPUT' },
          { value: 'BOTH', label: 'BOTH' },
        ]}
      />

      <span className={styles.configLabel}>Max Payload Size</span>
      <div className={styles.configInline}>
        <Input
          disabled={disabled}
          value={value.payloadSize}
          onChange={(e) => update('payloadSize', e.target.value)}
          className={styles.inputMd}
          placeholder="e.g. 4"
        />
        <Select
          disabled={disabled}
          value={value.payloadUnit}
          onChange={(e) => update('payloadUnit', e.target.value)}
          options={[
            { value: 'B', label: 'bytes' },
            { value: 'KB', label: 'KB' },
            { value: 'MB', label: 'MB' },
          ]}
        />
      </div>

      <span className={styles.configLabel}>App Log Level</span>
      <Select
        disabled={disabled}
        value={value.applicationLogLevel}
        onChange={(e) => update('applicationLogLevel', e.target.value)}
        options={LOG_LEVELS}
      />

      <span className={styles.configLabel}>Agent Log Level</span>
      <Select
        disabled={disabled}
        value={value.agentLogLevel}
        onChange={(e) => update('agentLogLevel', e.target.value)}
        options={LOG_LEVELS}
      />

      <span className={styles.configLabel}>Metrics</span>
      <div className={styles.configInline}>
        <Toggle
          checked={value.metricsEnabled}
          onChange={() => !disabled && update('metricsEnabled', !value.metricsEnabled)}
          disabled={disabled}
        />
        <span className={value.metricsEnabled ? styles.toggleEnabled : styles.toggleDisabled}>
          {value.metricsEnabled ? 'Enabled' : 'Disabled'}
        </span>
        <span className={styles.cellMeta} style={{ marginLeft: 8 }}>Interval</span>
        <Input
          disabled={disabled}
          value={value.metricsInterval}
          onChange={(e) => update('metricsInterval', e.target.value)}
          className={styles.inputXs}
          placeholder="60"
        />
        <span className={styles.cellMeta}>s</span>
      </div>

      <span className={styles.configLabel}>Sampling Rate</span>
      <Input
        disabled={disabled}
        value={value.samplingRate}
        onChange={(e) => update('samplingRate', e.target.value)}
        className={styles.inputLg}
        placeholder="1.0"
      />

      <span className={styles.configLabel}>Compress Success</span>
      <div className={styles.configInline}>
        <Toggle
          checked={value.compressSuccess}
          onChange={() => !disabled && update('compressSuccess', !value.compressSuccess)}
          disabled={disabled}
        />
        <span className={value.compressSuccess ? styles.toggleEnabled : styles.toggleDisabled}>
          {value.compressSuccess ? 'Enabled' : 'Disabled'}
        </span>
      </div>

      <span className={styles.configLabel}>Replay</span>
      <div className={styles.configInline}>
        <Toggle
          checked={value.replayEnabled}
          onChange={() => !disabled && update('replayEnabled', !value.replayEnabled)}
          disabled={disabled}
        />
        <span className={value.replayEnabled ? styles.toggleEnabled : styles.toggleDisabled}>
          {value.replayEnabled ? 'Enabled' : 'Disabled'}
        </span>
      </div>

      <span className={styles.configLabel}>Route Control</span>
      <div className={styles.configInline}>
        <Toggle
          checked={value.routeControlEnabled}
          onChange={() => !disabled && update('routeControlEnabled', !value.routeControlEnabled)}
          disabled={disabled}
        />
        <span className={value.routeControlEnabled ? styles.toggleEnabled : styles.toggleDisabled}>
          {value.routeControlEnabled ? 'Enabled' : 'Disabled'}
        </span>
      </div>
    </div>
  );
}