import { PanelFrame } from "./PanelFrame";
import type { PromptState } from "../state/types";

interface PromptPresetListItem {
  id: string;
  name: string;
  prompt_version: string;
  systemPrompt: string;
  developerPrompt: string;
  domainPrompt: string;
  schemaNotes?: string;
  fewShotExamples?: string;
}

interface PromptPanelProps {
  value: PromptState;
  onChange: (next: PromptState) => void;
  presets: PromptPresetListItem[];
  selectedPresetId: string;
  onSelectPreset: (id: string) => void;
  onLoadPreset: () => void;
  onSavePreset: () => void;
  onResetDefaults: () => void;
  onDiffPrevious: () => void;
  presetName: string;
  onPresetNameChange: (name: string) => void;
  diffSummary: string;
  embedded?: boolean;
}

export function PromptPanel({
  value,
  onChange,
  presets,
  selectedPresetId,
  onSelectPreset,
  onLoadPreset,
  onSavePreset,
  onResetDefaults,
  onDiffPrevious,
  presetName,
  onPresetNameChange,
  diffSummary,
  embedded = false
}: PromptPanelProps) {
  const content = (
    <>
      <div className="prompt-manager-grid">
        <label>
          Системный prompt
          <textarea
            value={value.systemPrompt}
            onChange={(event) => onChange({ ...value, systemPrompt: event.target.value })}
            rows={6}
          />
        </label>
        <label>
          Developer / Instruction prompt
          <textarea
            value={value.developerPrompt}
            onChange={(event) => onChange({ ...value, developerPrompt: event.target.value })}
            rows={6}
          />
        </label>
        <label>
          Domain prompt
          <textarea value={value.domainPrompt} onChange={(event) => onChange({ ...value, domainPrompt: event.target.value })} rows={6} />
        </label>
        <label>
          Schema notes
          <textarea value={value.schemaNotes} onChange={(event) => onChange({ ...value, schemaNotes: event.target.value })} rows={6} />
        </label>
        <label className="full-width">
          Few-shot examples
          <textarea
            value={value.fewShotExamples}
            onChange={(event) => onChange({ ...value, fewShotExamples: event.target.value })}
            rows={8}
          />
        </label>
      </div>
      <div className="button-row">
        <select value={selectedPresetId} onChange={(event) => onSelectPreset(event.target.value)}>
          <option value="">Выберите preset...</option>
          {presets.map((preset) => (
            <option value={preset.id} key={preset.id}>
              {preset.name}
            </option>
          ))}
        </select>
        <button type="button" onClick={() => onLoadPreset()}>
          Загрузить preset
        </button>
        <input value={presetName} onChange={(event) => onPresetNameChange(event.target.value)} placeholder="Имя для сохранения" />
        <button type="button" onClick={() => onSavePreset()}>
          Сохранить preset
        </button>
        <button type="button" onClick={() => onDiffPrevious()}>
          Diff с предыдущим
        </button>
        <button type="button" onClick={() => onResetDefaults()}>
          Сбросить к default
        </button>
      </div>
      {diffSummary ? <p className="diff-summary">{diffSummary}</p> : null}
    </>
  );

  if (embedded) {
    return (
      <section className="embedded-panel-section">
        <div className="embedded-panel-section-header">
          <div>
            <h4>Prompt Manager</h4>
            <p>Системный, developer и domain уровни управляются отдельно.</p>
          </div>
        </div>
        {content}
      </section>
    );
  }

  return (
    <PanelFrame title="Prompt Manager" subtitle="Системный, developer и domain уровни управляются отдельно.">
      {content}
    </PanelFrame>
  );
}