import { MoodleGPTConfig } from '../hooks/useConfig';

interface Props {
  config: MoodleGPTConfig;
  onChange: (key: keyof MoodleGPTConfig, value: MoodleGPTConfig[keyof MoodleGPTConfig]) => void;
  visible: boolean;
}

export function AdvancedSettingsPanel({ config, onChange, visible }: Props) {
  if (!visible) return null;

  return (
    <div
      class="bg-panel-bg backdrop-blur-md border border-panel-border rounded-2xl p-4 shadow-[0_8px_32px_0_rgba(0,0,0,0.3)] flex flex-col gap-4"
      id="advanced-settings"
    >
      <div class="flex flex-col gap-2">
        <label htmlFor="code" class="text-sm font-medium text-text-secondary">
          Activation Code
        </label>
        <input
          id="code"
          type="text"
          placeholder="Secret key..."
          class="w-full px-3 py-2.5 bg-input-bg border border-input-border rounded-lg text-text-primary text-sm transition-all focus:outline-none focus:border-input-focus focus:ring-2 focus:ring-primary/20 box-border"
          value={config.code || ''}
          onInput={e => onChange('code', (e.target as HTMLInputElement).value)}
        />
      </div>
      <div class="flex flex-col gap-2">
        <label htmlFor="baseURL" class="text-sm font-medium text-text-secondary">
          Base URL
        </label>
        <input
          id="baseURL"
          type="text"
          placeholder="https://api.openai.com/v1"
          class="w-full px-3 py-2.5 bg-input-bg border border-input-border rounded-lg text-text-primary text-sm transition-all focus:outline-none focus:border-input-focus focus:ring-2 focus:ring-primary/20 box-border"
          value={config.baseURL || ''}
          onInput={e => onChange('baseURL', (e.target as HTMLInputElement).value)}
        />
      </div>
      <div class="flex flex-col gap-2">
        <label htmlFor="projectId" class="text-sm font-medium text-text-secondary">
          Project ID
        </label>
        <input
          id="projectId"
          type="text"
          placeholder="proj_..."
          class="w-full px-3 py-2.5 bg-input-bg border border-input-border rounded-lg text-text-primary text-sm transition-all focus:outline-none focus:border-input-focus focus:ring-2 focus:ring-primary/20 box-border"
          value={config.projectId || ''}
          onInput={e => onChange('projectId', (e.target as HTMLInputElement).value)}
        />
      </div>
      <div class="flex flex-col gap-2">
        <label htmlFor="maxTokens" class="text-sm font-medium text-text-secondary">
          Max Tokens
        </label>
        <input
          id="maxTokens"
          type="number"
          class="w-full px-3 py-2.5 bg-input-bg border border-input-border rounded-lg text-text-primary text-sm transition-all focus:outline-none focus:border-input-focus focus:ring-2 focus:ring-primary/20 box-border"
          value={config.maxTokens || ''}
          onInput={e => {
            const val = (e.target as HTMLInputElement).value;
            onChange('maxTokens', val ? parseInt(val) : undefined);
          }}
        />
      </div>
      <div class="flex flex-col gap-2">
        <label htmlFor="timeoutValue" class="text-sm font-medium text-text-secondary">
          Timeout (s)
        </label>
        <input
          id="timeoutValue"
          type="number"
          placeholder="20"
          class="w-full px-3 py-2.5 bg-input-bg border border-input-border rounded-lg text-text-primary text-sm transition-all focus:outline-none focus:border-input-focus focus:ring-2 focus:ring-primary/20 box-border"
          value={config.timeoutValue || ''}
          onInput={e => {
            const val = (e.target as HTMLInputElement).value;
            onChange('timeoutValue', val ? parseInt(val) : undefined);
          }}
        />
      </div>
    </div>
  );
}
