@let type = instrumentType();
@if (!type) {
  <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="8rem" height="0.875rem"/>
      <span class="text-surface-300">|</span>
      <p-skeleton width="10rem" height="1.125rem"/>
    </div>
    <div class="flex gap-2 px-4 py-3 border-b border-surface">
      @for (_ of [1,2,3]; track $index) {
        <p-skeleton width="5rem" height="1rem"/>
      }
    </div>
    <div class="p-6 space-y-5">
      <p-panel header="General">
        <div class="flex flex-col gap-3">
          @for (_ of [1,2,3]; track $index) {
            <div class="flex items-center gap-4">
              <p-skeleton width="20%" height="1rem"/>
              <p-skeleton width="15%" height="1rem"/>
              <p-skeleton width="10%" height="1rem"/>
              <p-skeleton width="8%" height="1rem"/>
              <div class="flex-1"></div>
              <p-skeleton width="10%" height="1rem"/>
            </div>
          }
        </div>
      </p-panel>
    </div>
  </div>
} @else {
  <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/instrument-types" class="text-sm text-primary hover:underline">&larr; Instrument Types</a>
      <span class="text-surface-300">|</span>
      <h1 class="text-lg font-bold truncate">{{ type.display_name }}</h1>
      @if (type.parent_type_id) {
        <span class="text-surface-300">|</span>
        <a [routerLink]="['/settings/instrument-types', type.parent_type_id]" class="text-xs text-primary hover:underline">Parent: {{ inheritedFields()[0]?.source_type_name || 'View Parent' }}</a>
      }
      @if (type.description) {
        <span class="text-sm text-surface-500 hidden lg:inline truncate max-w-xs">{{ type.description }}</span>
      }
      <div class="ml-auto flex items-center gap-2">
        @if (activeTab() === 'Details' && !editing()) {
          <p-button label="Edit" severity="secondary" [text]="true" size="small" (onClick)="startEdit()"/>
        }
      </div>
    </div>

    <!-- Tab Bar -->
    <p-tabs [value]="activeTab()" (valueChange)="onTabChange($event + '')">
      <p-tablist>
        <p-tab value="Details">Details</p-tab>
        <p-tab value="Fields">Fields</p-tab>
        <p-tab value="Settings">Settings</p-tab>
      </p-tablist>
    </p-tabs>

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

      @if (activeTab() === 'Details') {
        <div class="p-6 space-y-5">
          <app-field-panel
            header="General"
            [fields]="generalFields()"
            [editing]="editing()"
            [editValues]="generalEditValues()"
            (editChange)="onGeneralEditChange($event)"/>
          @if (editing()) {
            <div class="flex gap-2">
              <p-button (onClick)="saveEdit()" severity="success" [outlined]="true" size="small" label="Save" [loading]="saving()"/>
              <p-button (onClick)="cancelEdit()" severity="secondary" [outlined]="true" size="small" label="Cancel"/>
            </div>
          }
        </div>

      } @else if (activeTab() === 'Fields') {
        <div class="p-6 space-y-5">

          <p-panel>
            <ng-template #header>
              <div class="flex items-center justify-between w-full">
                <div>
                  <span class="p-panel-title">Metadata Fields</span>
                  <p class="text-xs text-surface-400 mt-1 font-normal">Fields for this instrument type, including inherited from parent types.</p>
                </div>
                <p-button (onClick)="openAddField()" severity="primary" [outlined]="true" size="small" label="+ Add Field"/>
              </div>
            </ng-template>

            @if (showAddField()) {
              <div class="mb-4 p-4 rounded-lg bg-emphasis border border-surface">
                <h4 class="font-semibold text-sm mb-3">Add Metadata Field</h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
                  <div>
                    <label class="block text-xs text-surface-500 mb-1">Metadata Type *</label>
                    <p-select [(ngModel)]="newFieldMetadataId" [options]="availableMetadataTypes()" optionLabel="display_name" optionValue="id" placeholder="Select metadata type"/>
                  </div>
                  <div class="flex items-center gap-2">
                    <p-checkbox [(ngModel)]="newFieldRequired" [binary]="true" inputId="fieldRequired"/>
                    <label for="fieldRequired" class="text-sm text-surface-500">Required</label>
                  </div>
                  <div>
                    <button (click)="openCreateMetadata()" class="text-xs text-primary hover:underline">or create new metadata type...</button>
                  </div>
                </div>

                @if (showCreateMetadata()) {
                  <div class="mt-4 p-4 rounded-lg bg-surface border border-surface">
                    <h4 class="font-medium text-sm mb-3">New Metadata Type</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                      <div>
                        <label class="block text-xs text-surface-500 mb-1">Name *</label>
                        <input type="text" pInputText [(ngModel)]="newMetaName" placeholder="e.g. tick_size" class="w-full"/>
                      </div>
                      <div>
                        <label class="block text-xs text-surface-500 mb-1">Display Name *</label>
                        <input type="text" pInputText [(ngModel)]="newMetaDisplayName" placeholder="e.g. Tick Size" class="w-full"/>
                      </div>
                      <div>
                        <label class="block text-xs text-surface-500 mb-1">Value Type *</label>
                        <p-select [(ngModel)]="newMetaValueType" [options]="['string', 'integer', 'float', 'boolean', 'date', 'time', 'datetime']" placeholder="Select value type"/>
                      </div>
                      <div>
                        <label class="block text-xs text-surface-500 mb-1">Description</label>
                        <input type="text" pInputText [(ngModel)]="newMetaDescription" placeholder="Optional" class="w-full"/>
                      </div>
                    </div>
                    <div class="flex gap-2 mt-3">
                      <p-button (onClick)="submitCreateMetadata()" severity="success" [outlined]="true" size="small" label="Create"/>
                      <p-button (onClick)="cancelCreateMetadata()" severity="secondary" [outlined]="true" size="small" label="Cancel"/>
                    </div>
                  </div>
                }

                <div class="flex gap-2 mt-4">
                  <p-button (onClick)="submitAddField()" severity="success" [outlined]="true" size="small" label="Add"/>
                  <p-button (onClick)="cancelAddField()" severity="secondary" [outlined]="true" size="small" label="Cancel"/>
                </div>
              </div>
            }

            <app-metadata-fields-table
              [fields]="allFields()"
              routePrefix="/settings/types/instrument-types"
              emptyMessage="No metadata fields defined. Click + Add Field to get started."
              (removeField)="removeField($event)" />
          </p-panel>

        </div>

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

    </div>
  </div>

  <app-safe-delete-dialog
    [(visible)]="showDeleteDialog"
    [entityLabel]="'Instrument Type'"
    [entityName]="type.name"
    [usage]="usage()"
    [deleting]="deleting()"
    (confirm)="confirmDelete()"
  />
}