<div class="ce-page">

  <div class="ce-header">
    <button class="btn-back" (click)="back()">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
      {{ 'characterEdit.backToCampaign' | translate }}
    </button>
    <div class="header-row">
      <h1>
        <lucide-icon [img]="User" [size]="22"></lucide-icon>
        {{ (characterId ? 'characterEdit.titleEdit' : 'characterEdit.titleNew') | translate }}
      </h1>
      @if (characterId) {
        <button
          type="button"
          class="btn-ai"
          (click)="toggleChat()"
          [class.active]="chatOpen"
          [title]="'characterEdit.aiAssistantTitle' | translate">
          <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
          {{ 'characterEdit.aiAssistant' | translate }}
        </button>
      }
    </div>
  </div>

  <div class="ce-form">

    <div class="field">
      <label for="character-name">{{ 'characterEdit.nameLabel' | translate }}</label>
      <input
        id="character-name"
        type="text"
        [(ngModel)]="name"
        name="name"
        [placeholder]="'characterEdit.namePlaceholder' | translate"
        />
      </div>

      <div class="field-row image-row">
        <div class="field portrait-field">
          <label>{{ 'characterEdit.portrait' | translate }}</label>
          <app-single-image-picker
            [imageId]="portraitImageId"
            aspectRatio="1 / 1"
            [hint]="'characterEdit.portraitHint' | translate"
            (imageIdChange)="portraitImageId = $event">
          </app-single-image-picker>
        </div>
        <div class="field header-field">
          <label>{{ 'characterEdit.header' | translate }}</label>
          <app-single-image-picker
            [imageId]="headerImageId"
            aspectRatio="3 / 1"
            [hint]="'characterEdit.headerHint' | translate"
            (imageIdChange)="headerImageId = $event">
          </app-single-image-picker>
        </div>
      </div>

      <div class="template-fields">
        <app-dynamic-fields-form
          [fields]="templateFields"
          [values]="values"
          [imageValues]="imageValues"
          [keyValueValues]="keyValueValues"
          (valuesChange)="values = $event"
          (imageValuesChange)="imageValues = $event"
          (keyValueValuesChange)="keyValueValues = $event">
        </app-dynamic-fields-form>
      </div>

      <div class="actions">
        <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
          <lucide-icon [img]="Save" [size]="16"></lucide-icon>
          {{ (characterId ? 'common.save' : 'common.create') | translate }}
        </button>
        <button type="button" class="btn-secondary" (click)="back()">{{ 'common.cancel' | translate }}</button>
        <span class="spacer"></span>
        @if (characterId) {
          <button
            type="button"
            class="btn-danger"
            (click)="deleteCharacter()">
            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
            {{ 'common.delete' | translate }}
          </button>
        }
      </div>

    </div>

  </div>

  @if (characterId && campaignId) {
    <app-ai-chat-drawer
      [campaignId]="campaignId"
      entityType="character"
      [entityId]="characterId"
      [isOpen]="chatOpen"
      [welcomeMessage]="'characterEdit.chatWelcome' | translate"
      [quickSuggestions]="chatQuickSuggestions"
      (close)="chatOpen = false">
    </app-ai-chat-drawer>
  }
