@if (replyToStatusId) {
  <app-reply-context-panel [statusId]="replyToStatusId"></app-reply-context-panel>
}

<div style="display: flex; gap: 16px; align-items: flex-start">
  <!-- Left rail: tree nav (1/4 width) -->
  <div class="card" style="width: 220px; flex-shrink: 0; padding: 12px">
    <div
      style="
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #888;
        margin-bottom: 8px;
      "
    >
      Posts ({{ nodes.length }})
    </div>

    @for (node of orderedNodes; track node.client_id; let i = $index) {
      <div
        role="button"
        tabindex="0"
        (click)="selectNode(node.client_id)"
        (keydown.enter)="selectNode(node.client_id)"
        [style.margin-left.px]="nodeDepth(node) * 6"
        [style.background]="node.client_id === selectedId ? '#f0f0ff' : 'transparent'"
        style="
          padding: 4px 6px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 0.78rem;
          border: 1px solid transparent;
          margin-bottom: 3px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
        [style.border-color]="node.client_id === selectedId ? '#6366f1' : 'transparent'"
      >
        <span
          style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px"
        >
          {{ nodeLabel(node, i) }}
        </span>
        <span
          [style.color]="mastodonLength(node.body) > 480 ? '#dc2626' : '#aaa'"
          style="font-size: 0.7rem; flex-shrink: 0; margin-left: 4px"
        >
          {{ mastodonLength(node.body) }}
        </span>
      </div>
    }

    <div style="margin-top: 8px; display: flex; flex-direction: column; gap: 6px">
      <button
        (click)="addSelfReply()"
        [disabled]="!selected"
        style="font-size: 0.8rem; padding: 4px 8px; width: 100%"
      >
        + Self-reply
      </button>

      @if (nodes.length > 1 && selected) {
        <button
          (click)="deleteNode(selected.client_id)"
          style="
            font-size: 0.8rem;
            padding: 4px 8px;
            width: 100%;
            background: none;
            border: 1px solid #fca5a5;
            color: #dc2626;
          "
        >
          Remove post
        </button>
      }
    </div>
  </div>

  <!-- Right side: composer + panels below -->
  <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px">
    <!-- Composer card -->
    <div class="card">
      <div
        class="row"
        style="justify-content: space-between; align-items: center; margin-bottom: 8px"
      >
        <h2 class="post-title" style="margin: 0; font-size: 1.1rem">
          {{ replyToStatusId ? 'Write Reply' : 'Write New Post' }}
        </h2>
        <div class="row" style="gap: 8px; align-items: center">
          @if (saving) {
            <span style="font-size: 0.8em; color: #888">Saving…</span>
          }
          @if (dirty && !saving) {
            <span style="font-size: 0.8em; color: #f90">Unsaved</span>
          }
          <button
            (click)="showPreview = !showPreview"
            style="
              font-size: 0.75rem;
              padding: 2px 8px;
              background: none;
              border: 1px solid #ccc;
              color: #374151;
            "
          >
            {{ showPreview ? 'Hide preview' : 'Show preview' }}
          </button>
        </div>
      </div>

      @if (selected) {
        <!-- Per-node toolbar -->
        <div class="row" style="gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center">
          <select
            [ngModel]="selected.visibility"
            (ngModelChange)="onVisibilityChange($event)"
            style="font-size: 0.8em"
          >
            @for (v of visibilityOptions; track v) {
              <option [value]="v">{{ v }}</option>
            }
          </select>

          <input
            type="text"
            [ngModel]="selected.spoiler_text ?? ''"
            (ngModelChange)="onSpoilerChange($event)"
            placeholder="CW / spoiler text"
            style="font-size: 0.8em; flex: 1; min-width: 120px"
          />

          @if (selected.mode === 'single') {
            <button
              (click)="convertToStorm()"
              [disabled]="!canSplit"
              style="font-size: 0.8rem; padding: 3px 10px; white-space: nowrap"
              title="Split this post into a thread using sentence boundaries"
            >
              ⚡ Convert to storm
            </button>
            <label
              style="
                font-size: 0.78rem;
                display: flex;
                align-items: center;
                gap: 4px;
                white-space: nowrap;
              "
            >
              <input type="checkbox" [(ngModel)]="addCounter" /> Add (n/N)
            </label>
          }
        </div>

        <!-- Editor -->
        <app-plain-textarea-editor
          [value]="selected.body"
          (valueChange)="onBodyChange($event)"
          [language]="language"
        ></app-plain-textarea-editor>

        <div
          class="row"
          style="margin-top: 6px; justify-content: space-between; align-items: center"
        >
          <div class="row" style="gap: 12px; align-items: center">
            <small [style.color]="mastodonLength(selected.body) > 480 ? '#dc2626' : '#888'">
              {{ mastodonLength(selected.body) }}/500 chars
            </small>
            <small class="muted" style="font-size: 0.75rem">mode: {{ selected.mode }}</small>
          </div>
          <div class="row" style="gap: 8px; align-items: center">
            <label
              style="
                font-size: 0.78rem;
                display: flex;
                align-items: center;
                gap: 4px;
                white-space: nowrap;
                color: #374151;
              "
            >
              <input type="checkbox" [(ngModel)]="ltEnabled" /> Grammar hints
            </label>
            @if (ltEnabled) {
              <button
                (click)="checkGrammar()"
                [disabled]="grammarChecking || !selected.body.trim()"
                style="
                  font-size: 0.8rem;
                  padding: 3px 10px;
                  background: none;
                  border: 1px solid #ccc;
                  color: #374151;
                  white-space: nowrap;
                "
              >
                {{ grammarChecking ? 'Checking…' : 'Check grammar' }}
              </button>
            }
          </div>
        </div>
      }

      @if (publishError) {
        <div style="color: #dc2626; font-size: 0.85em; margin-top: 8px">{{ publishError }}</div>
      }

      <!-- Footer actions -->
      <div
        class="row"
        style="
          margin-top: 12px;
          justify-content: space-between;
          align-items: center;
          border-top: 1px solid #eee;
          padding-top: 12px;
        "
      >
        <div class="row" style="gap: 8px; align-items: center">
          @if (identities.length > 1) {
            <select [(ngModel)]="selectedIdentityId" style="font-size: 0.85em">
              @for (id of identities; track id) {
                <option [value]="id.id">{{ id.acct }}</option>
              }
            </select>
          }

          <small class="muted" style="font-size: 0.75rem">
            {{ nodes.length }} post{{ nodes.length !== 1 ? 's' : '' }}
          </small>
        </div>

        <div class="row" style="gap: 8px">
          @if (draft) {
            <button
              (click)="discardDraft()"
              style="background: none; border: 1px solid #ccc; color: #374151; font-size: 0.85rem"
            >
              Discard
            </button>
          }

          <button
            (click)="saveDraft()"
            [disabled]="!dirty || saving"
            style="background: none; border: 1px solid #ccc; color: #374151; font-size: 0.85rem"
          >
            Save draft
          </button>

          <button (click)="publish()" [disabled]="!hasContent || publishing">
            {{
              publishing
                ? 'Publishing…'
                : replyToStatusId
                  ? 'Reply'
                  : nodes.length > 1
                    ? 'Publish thread'
                    : 'Publish'
            }}
          </button>
        </div>
      </div>
    </div>

    <!-- Grammar error banner -->
    @if (grammarError) {
      <div
        style="
          color: #92400e;
          background: #fef3c7;
          border: 1px solid #f59e0b;
          border-radius: 6px;
          padding: 10px 14px;
          font-size: 0.85rem;
        "
      >
        {{ grammarError }}
      </div>
    }

    <!-- Grammar hints panel -->
    @if (ltEnabled && (grammarMatches.length > 0 || grammarChecking)) {
      <div class="card" style="padding: 12px">
        <app-grammar-hints
          [matches]="grammarMatches"
          [text]="selected?.body ?? ''"
          (applyReplacement)="applyReplacement($event)"
        ></app-grammar-hints>
      </div>
    }

    <!-- Live preview pane -->
    @if (showPreview) {
      <div class="card" style="padding: 12px">
        <div
          style="
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            color: #888;
            margin-bottom: 10px;
          "
        >
          Preview ({{ orderedNodes.length }} post{{ orderedNodes.length !== 1 ? 's' : '' }})
        </div>
        <app-live-preview-pane
          [nodes]="orderedNodes"
          [selectedId]="selectedId"
        ></app-live-preview-pane>
      </div>
    }
  </div>
</div>