import React from 'react';
import {
  projectAiModelPresets,
  type ProjectAiProviderId,
} from '@learnitive/project-ai';
import { Input, Label } from '@learnitive/ui-components';

const CUSTOM_MODEL_VALUE = '__learnitive_custom_model__';

export function AiProviderModelSelect({
  provider,
  model,
  onModelChange,
  idPrefix,
  disabled = false,
}: {
  provider: ProjectAiProviderId;
  model: string;
  onModelChange: (model: string) => void;
  idPrefix: string;
  disabled?: boolean;
}) {
  const presets = projectAiModelPresets(provider);
  const selectedPreset = presets.find((preset) => preset.id === model);
  const selection = selectedPreset ? selectedPreset.id : CUSTOM_MODEL_VALUE;

  if (presets.length === 0) {
    return (
      <div className="space-y-1">
        <Label htmlFor={`${idPrefix}-custom-model`}>Model</Label>
        <Input
          id={`${idPrefix}-custom-model`}
          value={model}
          disabled={disabled}
          placeholder="Enter the model ID exposed by this endpoint"
          onChange={(event) => onModelChange(event.currentTarget.value)}
        />
      </div>
    );
  }

  return (
    <div className="space-y-1">
      <Label htmlFor={`${idPrefix}-model`}>Model</Label>
      <select
        id={`${idPrefix}-model`}
        className="h-9 w-full rounded-md border bg-background px-2"
        value={selection}
        disabled={disabled}
        onChange={(event) => {
          const value = event.currentTarget.value;
          if (value !== CUSTOM_MODEL_VALUE) onModelChange(value);
        }}
      >
        {presets.map((preset) => <option key={preset.id} value={preset.id}>{preset.label}</option>)}
        <option value={CUSTOM_MODEL_VALUE}>Custom model…</option>
      </select>
      {selection === CUSTOM_MODEL_VALUE && (
        <Input
          id={`${idPrefix}-custom-model`}
          value={model}
          disabled={disabled}
          placeholder="Enter a provider model ID"
          onChange={(event) => onModelChange(event.currentTarget.value)}
        />
      )}
      <p className="text-[11px] leading-4 text-muted-foreground">
        {selectedPreset?.description ?? 'Custom model ID. Learnitive sends requests only to the provider you configured.'}
      </p>
    </div>
  );
}