Clinical Scenario Architect

AI Synthesis Engine • OpenRouter

Target Dynamic & Situation Describe the conflict or trigger

</div>

<div class="space-y-3 pt-4">
        <span class="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
          <BarChart size={14} class="text-teal-600" />
          Emotional Resistance & Difficulty
        </span>
        <div class="grid grid-cols-3 gap-3">
          {#each ['Beginner', 'Intermediate', 'Advanced'] as diff (diff)}
            <button
              type="button"
              onclick={() => (selectedDifficulty = diff as Scenario['difficulty'])}
              class="p-3.5 text-center cursor-pointer transition-all border rounded-xl {selectedDifficulty ===
              diff
                ? 'bg-teal-50 border-teal-500 shadow-sm shadow-teal-500/10'
                : 'bg-white border-slate-200 hover:border-slate-300'}"
            >
              <p class="font-bold text-xs text-slate-800">{diff}</p>
              <p class="text-[10px] text-slate-400 mt-0.5">
                {diff === 'Beginner' ? 'High Support' : ''}
                {diff === 'Intermediate' ? 'Realistic Pushback' : ''}
                {diff === 'Advanced' ? 'Severe Friction' : ''}
              </p>
            </button>
          {/each}
        </div>
      </div>

<div class="space-y-3 pt-4">
        <div class="flex items-center justify-between">
          <span class="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
            <BrainCircuit size={14} class="text-teal-600" />
            Target Cognitive Distortions & Techniques
          </span>
          <span class="text-[10px] text-teal-600 font-bold">
            {selectedConcepts.length} Selected
          </span>
        </div>

<div class="flex flex-wrap gap-2 max-h-44 overflow-y-auto p-1 bg-slate-50 rounded-2xl border border-slate-100">
          {#each CBT_GLOSSARY as item (item.term)}
            {@const isSelected = selectedConcepts.includes(item.term)}
            <button
              type="button"
              onclick={() => toggleConcept(item.term)}
              class="cursor-pointer text-[11px] py-1.5 px-3 rounded-xl transition-all border inline-flex items-center gap-1.5 {isSelected
                ? 'bg-teal-600 hover:bg-teal-700 text-white font-bold shadow-sm border-teal-600'
                : 'bg-white text-slate-600 hover:border-teal-300 border-slate-200'}"
            >
              {item.term}
              {#if isSelected}
                <Check size={12} class="inline" />
              {/if}
            </button>
          {/each}
        </div>
      </div>

{#if error}
        <div class="mt-4 p-4 bg-rose-50 border border-rose-100 rounded-2xl flex items-center gap-3 text-rose-700 text-xs animate-in fade-in">
          <AlertCircle size={16} class="shrink-0 text-rose-500" />
          <span>{error}</span>
        </div>
      {/if}
    </ScrollArea>

<div class="p-6 bg-slate-50 border-t border-slate-200 flex justify-between items-center shrink-0">
      <Button
        variant="ghost"
        onclick={oncancel}
        disabled={isLoading}
        class="text-xs uppercase tracking-widest font-black text-slate-400 hover:text-slate-600"
      >
        Cancel
      </Button>

<Button
        onclick={handleGenerate}
        disabled={isLoading || (!prompt.trim() && selectedConcepts.length === 0)}
        class="bg-teal-600 hover:bg-teal-700 text-white px-8 h-11 rounded-2xl text-xs uppercase tracking-widest font-black shadow-lg shadow-teal-600/20 flex items-center gap-2"
      >
        {#if isLoading}
          <Loader2 size={16} class="animate-spin" />
          Synthesizing Scenario...
        {:else}
          <Sparkles size={16} />
          Generate Simulation
        {/if}
      </Button>
    </div>
  </div>
</div>