@if (loading()) {
  <div class="flex flex-col h-[calc(100vh-3.5rem)]">
    <div class="flex items-center gap-3 px-4 py-2 border-b border-surface shrink-0 bg-emphasis">
      <p-skeleton width="5rem" height="0.875rem"/>
      <span class="text-surface-300">|</span>
      <p-skeleton width="8rem" height="1.125rem"/>
      <p-skeleton shape="circle" size="0.5rem"/>
      <p-skeleton width="4rem" height="1.375rem" borderRadius="0.25rem"/>
    </div>
    <div class="flex gap-2 px-4 py-3 border-b border-surface">
      @for (tab of tabs; track tab) {
        <p-skeleton width="5rem" height="1rem"/>
      }
    </div>
    @if (activeTab() === 'History') {
      <div class="p-6">
        <p-panel>
          <ng-template #header><p-skeleton width="10rem" height="1rem"/></ng-template>
          <div class="flex items-center justify-between mb-4">
            <p-skeleton width="6rem" height="2rem" borderRadius="0.375rem"/>
          </div>
          <div class="flex flex-col gap-0">
            <div class="flex gap-3 px-3 py-2.5 border-b border-surface">
              <p-skeleton width="12rem" height="1rem"/>
              @for (_ of [1,2,3]; track $index) { <p-skeleton width="8rem" height="1rem"/> }
              <p-skeleton width="3rem" height="1rem"/>
            </div>
            @for (_ of [1,2,3,4,5]; track $index) {
              <div class="flex gap-3 px-3 py-2.5 border-b border-surface">
                <p-skeleton width="12rem" height="2rem"/>
                @for (_ of [1,2,3]; track $index) { <p-skeleton width="8rem" height="2rem"/> }
                <p-skeleton width="3rem" height="2rem"/>
              </div>
            }
          </div>
        </p-panel>
      </div>
    } @else if (activeTab() === 'Settings') {
      <div class="p-6"><p-skeleton width="100%" height="8rem"/></div>
    } @else {
      <div class="p-6 space-y-5">
        <p-panel header="General">
          <div class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-4">
            @for (_ of [1,2,3,4]; track $index) {
              <div><p-skeleton width="40%" height="0.75rem" styleClass="mb-2"/><p-skeleton width="100%" height="2.25rem" borderRadius="0.375rem"/></div>
            }
          </div>
        </p-panel>
        <p-panel header="Metadata">
          <div class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-4">
            @for (_ of [1,2,3]; track $index) {
              <div><p-skeleton width="40%" height="0.75rem" styleClass="mb-2"/><p-skeleton width="100%" height="2.25rem" borderRadius="0.375rem"/></div>
            }
          </div>
        </p-panel>
      </div>
    }
  </div>
} @else {
  @let comp = composite();
  @if (comp) {
  <div class="flex flex-col h-[calc(100vh-3.5rem)]">
    <!-- Header Bar -->
    <div class="flex items-center gap-3 px-4 py-2 border-b border-surface shrink-0 bg-emphasis">
      <a routerLink="/settings/composites" class="text-sm text-primary hover:underline">&larr; Composites</a>
      <span class="text-surface-300">|</span>
      <h1 class="text-lg font-bold truncate">{{ comp.display_name }}</h1>
      <span class="text-sm text-surface-500 font-mono">({{ comp.name }})</span>
      <span class="w-2 h-2 rounded-full shrink-0" [class]="comp.is_active ? 'bg-positive' : 'bg-edge'"></span>
      @if (compositeType(); as cType) {
        <p-tag [value]="cType.display_name || cType.name" severity="secondary"/>
      }
      <div class="ml-auto flex items-center gap-2">
        @if (!editing()) {
          <p-button label="Edit" severity="secondary" [text]="true" size="small" (onClick)="startEdit()"/>
        }
      </div>
    </div>

    <!-- Tab Bar -->
    <p-tabs [value]="activeTab()" (valueChange)="onTabChange($any($event))">
      <p-tablist>
        @for (tab of tabs; track tab) {
          <p-tab [value]="tab">{{ tab }}</p-tab>
        }
      </p-tablist>
    </p-tabs>

    <!-- Content -->
    <div class="flex-1 overflow-y-auto">

      <!-- ==================== DETAILS TAB ==================== -->
      @if (activeTab() === 'Details') {
        <div class="p-6 space-y-5">

          @if (editing()) {
            <div class="p-3 rounded-lg bg-emphasis border border-surface inline-flex items-center gap-3">
              <label class="text-xs text-surface-500 whitespace-nowrap">As-of Timestamp</label>
              <p-datepicker [(ngModel)]="editTimestamp" [showTime]="true" dateFormat="yy-mm-dd" hourFormat="24" [style]="{'width': '16rem'}"/>
            </div>
          }

          <app-field-panel header="General" [fields]="generalFields()" [editing]="editing()" [editValues]="generalEditValues()" (editChange)="onGeneralEditChange($event)"/>

          @if (metadataLoading()) {
            <p-panel header="Metadata">
              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-6 gap-y-4">
                @for (_ of [1,2,3]; track $index) {
                  <div>
                    <p-skeleton width="40%" height="0.75rem" styleClass="mb-2"/>
                    <p-skeleton width="100%" height="2.25rem" borderRadius="0.375rem"/>
                  </div>
                }
              </div>
            </p-panel>
          } @else if (metadataFields().length > 0) {
            <app-field-panel header="Metadata" [fields]="metadataFields()" [editing]="editing()" [editValues]="metadataEditValues()" (editChange)="onMetadataEditChange($event)"/>
          }

          @if (editing()) {
            <div class="flex gap-2">
              <p-button label="Save" severity="primary" (onClick)="submitEdit()"/>
              <p-button label="Cancel" severity="secondary" [text]="true" (onClick)="cancelEdit()"/>
            </div>
          }

            <!-- Members -->
            <p-panel>
              <ng-template #header>
                <div class="flex items-center justify-between w-full">
                  <span class="p-panel-title">Members</span>
                  <p-button (onClick)="openMemberForm()" severity="primary" [outlined]="true" size="small" label="+ Add Member"/>
                </div>
              </ng-template>

              @if (showMemberForm()) {
                <div class="mb-4 p-4 rounded-lg bg-emphasis border border-surface">
                  <h4 class="font-semibold text-sm mb-3">Add Member</h4>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label class="block text-xs text-surface-500 mb-1">Instrument</label>
                      <app-search-select [searchFn]="instrumentSearchFn" [value]="newInstrumentId" placeholder="Search instruments..." (valueChange)="newInstrumentId = $event ?? ''"/>
                    </div>
                  </div>
                  <div class="flex gap-2 mt-4">
                    <p-button (onClick)="submitMember()" severity="success" [outlined]="true" size="small" label="Add"/>
                    <p-button (onClick)="cancelMemberForm()" severity="secondary" [outlined]="true" size="small" label="Cancel"/>
                  </div>
                </div>
              }

              <ng-template #removeMemberTpl let-row>
                <button (click)="onRemoveMemberClick($event, row)"
                        class="text-negative hover:opacity-80 text-xs font-medium cursor-pointer bg-transparent border-0">
                  Remove
                </button>
              </ng-template>

              <app-data-table
                [columns]="memberColumns()"
                [value]="comp.members"
                [showPaginator]="false"
                emptyMessage="No members in this composite."/>
            </p-panel>

        </div>

      <!-- ==================== HISTORY TAB ==================== -->
      } @else if (activeTab() === 'History') {
        <div class="p-6 space-y-5">
          <p-panel header="Composite Metadata History">
            <app-metadata-history-table
              [fields]="historyGrid()?.fields ?? []"
              [snapshots]="historyGrid()?.snapshots ?? []"
              [loading]="historyLoading()"
              [referenceOptions]="historyRefOptions()"
              (save)="onHistorySave($event)"/>
          </p-panel>
        </div>

      <!-- ==================== SETTINGS TAB ==================== -->
      } @else if (activeTab() === 'Settings') {
        <div class="p-6">
          <div class="max-w-3xl">
            <app-danger-zone
              title="Delete this composite"
              description="Once deleted, all associated members and metadata will be permanently removed."
              actionLabel="Delete composite"
              (confirmed)="openDelete()"
            />
          </div>
        </div>
      }

    </div>
  </div>

  <app-safe-delete-dialog
    [(visible)]="showDeleteDialog"
    [entityLabel]="'Composite'"
    [entityName]="comp.display_name || comp.name"
    [usage]="deleteUsage()"
    [deleting]="deleting()"
    (confirm)="confirmDelete()"
  />
  }
}