@extends('layouts.app')

@section('title', 'Docker 管理')

@push('styles')
<style>
  .state-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
  .state-running { background:#10b981; box-shadow:0 0 5px #10b981; }
  .state-exited   { background:#6b7280; }
  .state-paused   { background:#f59e0b; }
  .stat-val { font-size:1.5rem; font-weight:700; line-height:1; }
  .stat-lbl { font-size:0.7rem; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; }
  .resource-bar { height:4px; border-radius:2px; background:#e5e7eb; overflow:hidden; margin-top:4px; }
  .resource-fill { height:100%; border-radius:2px; background:#3b82f6; transition:width .4s; }
  .log-box { background:#0f172a; color:#94a3b8; font-family:'Courier New',monospace; font-size:0.75rem;
             height:300px; overflow-y:auto; padding:1rem; border-radius:6px; white-space:pre-wrap; word-break:break-all; }
  .compose-badge { font-size:0.7rem; background:rgba(59,130,246,.1); color:#3b82f6;
                   padding:1px 6px; border-radius:4px; font-family:monospace; }
  .action-btn { font-size:0.75rem; padding:2px 8px; }
  [data-theme="dark"] .resource-bar { background:#374151; }
  .meta-pill { font-size:0.7rem; padding:1px 7px; border-radius:10px; }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div class="d-flex align-items-center gap-3">
      <h1 class="h4 mb-0"><i class="bi bi-box me-2"></i>Docker 管理</h1>
      {{-- 主機選擇器 --}}
      @if($hosts->count() > 1)
      <form method="GET" action="{{ route('docker.index') }}" class="d-flex align-items-center gap-2">
        <label for="host_selector" class="form-label mb-0 text-muted small text-nowrap">主機：</label>
        <select id="host_selector" name="host_id" class="form-select form-select-sm"
                style="min-width:160px;max-width:280px" onchange="this.form.submit()">
          @foreach($hosts as $h)
          <option value="{{ $h->id }}" {{ $currentHost && $currentHost->id === $h->id ? 'selected' : '' }}>
            {{ $h->name }}@if($h->isTcp()) ({{ $h->tcp_host }})@endif
          </option>
          @endforeach
        </select>
      </form>
      @else
        @if($currentHost)
        <span class="badge bg-secondary-subtle text-secondary border small">
          <i class="bi bi-hdd-network me-1"></i>{{ $currentHost->name }}
        </span>
        @endif
      @endif
    </div>
    <div class="d-flex gap-2">
      <button class="btn btn-sm btn-outline-secondary" id="refreshBtn">
        <i class="bi bi-arrow-clockwise me-1"></i>重整
      </button>
      @if($canManage && $isLocal)
      <a href="{{ route('docker.compose.new') }}" class="btn btn-sm btn-primary">
        <i class="bi bi-plus me-1"></i>新增 Compose
      </a>
      @endif
    </div>
  </div>

  {{-- 系統概況卡片 --}}
  <div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
      <div class="card text-center py-3">
        <div class="stat-val text-success">{{ $info['containers_running'] }}</div>
        <div class="stat-lbl mt-1">執行中容器</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card text-center py-3">
        <div class="stat-val text-secondary">{{ $info['containers_stopped'] }}</div>
        <div class="stat-lbl mt-1">已停止容器</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card text-center py-3">
        <div class="stat-val">{{ $info['images'] }}</div>
        <div class="stat-lbl mt-1">Images</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card text-center py-3">
        <div class="stat-val text-primary">{{ $info['cpus'] }}</div>
        <div class="stat-lbl mt-1">CPU 核心 / {{ $info['mem_total'] }}</div>
      </div>
    </div>
  </div>

  {{-- 頁籤導覽 --}}
  <ul class="nav nav-tabs mb-0" id="dockerTabs">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="tab" href="#tab-containers">
        <i class="bi bi-list-ul me-1"></i>容器
        <span class="badge bg-success ms-1">{{ $info['containers_running'] }}</span>
      </a>
    </li>
    @if($isLocal)
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#tab-compose">
        <i class="bi bi-file-code me-1"></i>Compose
        <span class="badge bg-secondary ms-1">{{ count($composes) }}</span>
      </a>
    </li>
    @endif
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#tab-images">
        <i class="bi bi-layers me-1"></i>Images
        <span class="badge bg-secondary ms-1">{{ count($images) }}</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#tab-volumes">
        <i class="bi bi-hdd me-1"></i>Volumes
        <span class="badge bg-secondary ms-1">{{ count($volumes) }}</span>
      </a>
    </li>
  </ul>

  <div class="tab-content border border-top-0 rounded-bottom bg-body">

    {{-- ══ 頁籤：容器 ══ --}}
    <div class="tab-pane fade show active" id="tab-containers">
      <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle" style="font-size:.85rem;">
          <thead class="table-light">
            <tr>
              <th style="width:42px;min-width:42px" class="text-center">#</th>
              <th style="width:120px;min-width:120px">客戶</th>
              <th style="width:140px;min-width:140px">容器名稱</th>
              <th style="width:80px;min-width:80px">對應 Port</th>
              <th style="width:180px;min-width:180px">用途</th>
              <th style="width:100px;min-width:100px">狀態</th>
              <th style="width:170px;min-width:170px">資源</th>
              <th style="width:80px;min-width:80px">負責人</th>
              <th style="width:90px;min-width:90px">建立日期</th>
              @if($canManage)<th style="width:110px;min-width:110px">操作</th>@endif
            </tr>
          </thead>
          <tbody id="containerTable">
            @forelse($containers as $c)
            @php $cmeta = $c['compose'] ? ($composeMeta[$c['compose']] ?? []) : []; @endphp
            <tr data-id="{{ $c['id'] }}" data-state="{{ $c['state'] }}">
              <td class="text-center text-muted" style="font-size:.8rem;">{{ $loop->iteration }}</td>
              <td>
                @if(!empty($cmeta['client']))
                  <small><i class="bi bi-building me-1 text-muted"></i>{{ $cmeta['client'] }}</small>
                @else
                  <small class="text-muted">—</small>
                @endif
              </td>
              <td>
                <span class="state-dot state-{{ $c['state'] }}"></span>
                <strong>{{ $c['name'] }}</strong>
                @if($c['compose'])
                  <br><span class="compose-badge">{{ $c['compose'] }}</span>
                @endif
                <br><small class="text-muted font-monospace">{{ $c['id'] }}</small>
              </td>
              <td>
                @foreach($c['ports'] as $p)
                  <span class="badge bg-light text-dark border font-monospace" style="font-size:.7rem;">{{ $p }}</span>
                @endforeach
                @if(empty($c['ports']))<small class="text-muted">—</small>@endif
              </td>
              <td>
                @if(!empty($cmeta['purpose']))
                  <small class="text-muted text-truncate d-block" style="max-width:180px;" title="{{ $cmeta['purpose'] }}">{{ $cmeta['purpose'] }}</small>
                @else
                  <small class="text-muted">—</small>
                @endif
              </td>
              <td>
                <span class="badge {{ $c['state']==='running' ? 'bg-success' : ($c['state']==='paused' ? 'bg-warning text-dark' : 'bg-secondary') }}">
                  {{ $c['state'] }}
                </span>
                <br><small class="text-muted">{{ $c['status'] }}</small>
              </td>
              <td class="stats-cell" data-id="{{ $c['id'] }}">
                @if($c['state']==='running')
                  <div class="text-muted small">載入中…</div>
                @else
                  <div class="text-muted small">—</div>
                @endif
              </td>
              <td>
                @if(!empty($cmeta['owner']))
                  <small><i class="bi bi-person me-1 text-muted"></i>{{ $cmeta['owner'] }}</small>
                @else
                  <small class="text-muted">—</small>
                @endif
              </td>
              <td>
                <small class="text-muted">{{ $c['created'] ? date('Y-m-d', $c['created']) : '—' }}</small>
              </td>
              @if($canManage)
              <td style="white-space:nowrap;">
                @if($c['state']==='running')
                  <button class="btn btn-outline-warning action-btn me-1" data-id="{{ $c['id'] }}" data-action="stop" title="停止"><i class="bi bi-stop-fill"></i></button>
                  <button class="btn btn-outline-secondary action-btn me-1" data-id="{{ $c['id'] }}" data-action="restart" title="重啟"><i class="bi bi-arrow-repeat"></i></button>
                @else
                  <button class="btn btn-outline-success action-btn me-1" data-id="{{ $c['id'] }}" data-action="start" title="啟動"><i class="bi bi-play-fill"></i></button>
                @endif
                <button class="btn btn-outline-secondary action-btn me-1 detail-btn" data-id="{{ $c['id'] }}" data-name="{{ $c['name'] }}" title="詳細資訊"><i class="bi bi-info-circle"></i></button>
                <button class="btn btn-outline-info action-btn me-1 log-btn" data-id="{{ $c['id'] }}" data-name="{{ $c['name'] }}" title="查看 Log"><i class="bi bi-terminal"></i></button>
                <button class="btn btn-outline-danger action-btn rm-btn" data-id="{{ $c['id'] }}" data-name="{{ $c['name'] }}" title="刪除"><i class="bi bi-trash"></i></button>
              </td>
              @else
              <td style="white-space:nowrap;">
                <button class="btn btn-outline-secondary action-btn me-1 detail-btn" data-id="{{ $c['id'] }}" data-name="{{ $c['name'] }}" title="詳細資訊"><i class="bi bi-info-circle"></i></button>
                <button class="btn btn-outline-info action-btn log-btn" data-id="{{ $c['id'] }}" data-name="{{ $c['name'] }}" title="查看 Log"><i class="bi bi-terminal"></i></button>
              </td>
              @endif
            </tr>
            @empty
            <tr><td colspan="{{ $canManage ? 10 : 9 }}" class="text-center text-muted py-4">目前沒有容器</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>
      <div class="px-3 py-2">
        <small class="text-muted">Docker {{ $info['docker_version'] }} · {{ $info['os'] }}</small>
      </div>
    </div>

    {{-- ══ 頁籤：Compose ══ --}}
    <div class="tab-pane fade" id="tab-compose">
      @if($canManage)
      <div class="px-3 pt-3 pb-1 text-end">
        <a href="{{ route('docker.compose.new') }}" class="btn btn-sm btn-primary">
          <i class="bi bi-plus me-1"></i>新增 Compose
        </a>
      </div>
      @endif
      @if(empty($composes))
        <div class="text-muted p-4 text-center">
          <i class="bi bi-file-code display-5 d-block mb-2 opacity-25"></i>
          尚無 Compose 設定
          @if($canManage)，<a href="{{ route('docker.compose.new') }}">新增一個</a>@endif
        </div>
      @else
      <div class="table-responsive">
        <table class="table mb-0 align-middle" style="font-size:.85rem;">
          <thead class="table-light">
            <tr>
              <th style="min-width:180px">名稱 / 標題</th>
              <th>案子 / 客戶</th>
              <th style="width:100px">負責人</th>
              <th>用途</th>
              <th style="width:120px">最後修改</th>
              @if($canManage)<th style="width:280px">操作</th>@endif
            </tr>
          </thead>
          <tbody>
            @foreach($composes as $c)
            <tr>
              <td>
                <i class="bi bi-file-earmark-code me-1 text-primary"></i>
                <strong>{{ $c['name'] }}</strong>.yml
                @if(!empty($c['meta']['title']))
                  <br><span class="text-body-secondary" style="font-size:.8rem;">{{ $c['meta']['title'] }}</span>
                @endif
              </td>
              <td>
                @if(!empty($c['meta']['project']))
                  <span class="badge bg-primary bg-opacity-10 text-primary meta-pill">
                    <i class="bi bi-folder2-open me-1"></i>{{ $c['meta']['project'] }}
                  </span>
                @endif
                @if(!empty($c['meta']['client']))
                  <br><span class="badge bg-success bg-opacity-10 text-success meta-pill">
                    <i class="bi bi-building me-1"></i>{{ $c['meta']['client'] }}
                  </span>
                @endif
                @if(empty($c['meta']['project']) && empty($c['meta']['client']))
                  <small class="text-muted">—</small>
                @endif
              </td>
              <td>
                @if(!empty($c['meta']['owner']))
                  <small><i class="bi bi-person me-1 text-muted"></i>{{ $c['meta']['owner'] }}</small>
                @else
                  <small class="text-muted">—</small>
                @endif
              </td>
              <td>
                @if(!empty($c['meta']['purpose']))
                  <small class="text-muted">{{ Str::limit($c['meta']['purpose'], 50) }}</small>
                @else
                  <small class="text-muted">—</small>
                @endif
              </td>
              <td><small class="text-muted">{{ date('Y-m-d H:i', $c['modified']) }}</small></td>
              @if($canManage)
              <td>
                <button class="btn btn-sm btn-outline-success compose-action me-1" data-name="{{ $c['name'] }}" data-action="up" title="Up">
                  <i class="bi bi-play-fill"></i> Up
                </button>
                <button class="btn btn-sm btn-outline-warning compose-action me-1" data-name="{{ $c['name'] }}" data-action="down" title="Down">
                  <i class="bi bi-stop-fill"></i> Down
                </button>
                <button class="btn btn-sm btn-outline-secondary compose-action me-1" data-name="{{ $c['name'] }}" data-action="pull" title="Pull">
                  <i class="bi bi-cloud-download"></i>
                </button>
                <a href="{{ route('docker.compose.edit', $c['name']) }}" class="btn btn-sm btn-outline-primary me-1" title="編輯">
                  <i class="bi bi-pencil"></i>
                </a>
                <button class="btn btn-sm btn-outline-danger compose-del" data-name="{{ $c['name'] }}" title="刪除">
                  <i class="bi bi-trash"></i>
                </button>
              </td>
              @endif
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      @endif
    </div>

    {{-- ══ 頁籤：Images ══ --}}
    <div class="tab-pane fade" id="tab-images">
      @if($canManage)
      <div class="p-3 border-bottom d-flex flex-wrap gap-2 align-items-end">
        {{-- Pull --}}
        <div class="d-flex gap-2 align-items-end">
          <div>
            <label for="pullImageInput" class="form-label small mb-1 fw-semibold">從 Registry Pull</label>
            <input type="text" id="pullImageInput" class="form-control form-control-sm font-monospace" style="width:260px"
              placeholder="例：nginx:latest">
          </div>
          <button id="pullImageBtn" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-cloud-download me-1"></i>Pull
          </button>
        </div>
        <div class="vr d-none d-md-block"></div>
        {{-- Load --}}
        <div class="d-flex gap-2 align-items-end">
          <div>
            <label for="loadImageInput" class="form-label small mb-1 fw-semibold">載入本機 .tar</label>
            <input type="file" id="loadImageInput" class="form-control form-control-sm" accept=".tar,.tar.gz,.tgz" style="width:240px">
          </div>
          <button id="loadImageBtn" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-upload me-1"></i>Load
          </button>
        </div>
      </div>
      @endif
      @if(empty($images))
        <div class="text-muted p-4 text-center">尚無 Images</div>
      @else
      <div class="table-responsive">
        <table class="table mb-0 align-middle" style="font-size:.85rem; table-layout:fixed; width:100%;">
          <thead class="table-light">
            <tr>
              <th style="width:6%" class="text-center">#</th>
              <th style="width:30%">名稱 / Tag</th>
              <th style="width:12%">ID</th>
              <th style="width:12%">使用容器</th>
              <th style="width:5%">大小</th>
              <th style="width:7%">建立者</th>
              <th style="width:7%">時間</th>
              <th style="width:10%">備註</th>
              @if($canManage)<th style="width:10%">操作</th>@endif
            </tr>
          </thead>
          <tbody>
            @foreach($images as $img)
            @php
              $autoUsed   = collect($img['tags'])->flatMap(fn($t) => $imageContainers[$t] ?? [])->unique()->values();
              $manualUsed = array_filter(array_map('trim', explode(',', $img['meta']['used_by'] ?? '')));
              $allUsed    = $autoUsed->merge($manualUsed)->unique()->values();
            @endphp
            <tr>
              <td class="text-center text-muted" style="font-size:.8rem;">{{ $loop->iteration }}</td>
              <td>
                @foreach($img['tags'] as $tag)
                  <span class="badge bg-light text-dark border font-monospace me-1" style="font-size:.75rem;">{{ $tag }}</span>
                @endforeach
              </td>
              <td><small class="font-monospace text-muted">{{ $img['id'] }}</small></td>
              <td>
                @forelse($allUsed as $cn)
                  <span class="badge bg-light text-dark border me-1" style="font-size:.75rem;">{{ $cn }}</span>
                @empty
                  <small class="text-muted">—</small>
                @endforelse
              </td>
              <td><small>{{ $img['size'] }}</small></td>
              <td>
                @if(!empty($img['meta']['owner']))
                  <small><i class="bi bi-person me-1 text-muted"></i>{{ $img['meta']['owner'] }}</small>
                @else
                  <small class="text-muted">—</small>
                @endif
              </td>
              <td><small class="text-muted">{{ date('Y-m-d', $img['created']) }}</small></td>
              <td>
                @if(!empty($img['meta']['note']))
                  <small class="text-muted fst-italic" title="{{ $img['meta']['note'] }}">{{ Str::limit($img['meta']['note'], 30) }}</small>
                @else
                  <small class="text-muted">—</small>
                @endif
              </td>
              @if($canManage)
              <td style="white-space:nowrap;">
                <button class="btn btn-sm btn-outline-primary me-1 edit-image-meta"
                  data-id="{{ $img['id'] }}"
                  data-tags="{{ implode(', ', $img['tags']) }}"
                  data-used="{{ $img['meta']['used_by'] ?? '' }}"
                  data-owner="{{ $img['meta']['owner'] ?? '' }}"
                  data-note="{{ $img['meta']['note'] ?? '' }}"
                  title="編輯說明"><i class="bi bi-pencil"></i>
                </button>
                <button class="btn btn-sm btn-outline-danger rm-image" data-id="{{ $img['id'] }}" title="刪除">
                  <i class="bi bi-trash"></i>
                </button>
              </td>
              @endif
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      @endif
    </div>

    {{-- ══ 頁籤：Volumes ══ --}}
    <div class="tab-pane fade" id="tab-volumes">
      @if(empty($volumes))
        <div class="text-muted p-4 text-center">尚無 Volumes</div>
      @else
      <div class="table-responsive">
        <table class="table mb-0 align-middle" style="font-size:.85rem;">
          <thead class="table-light">
            <tr>
              <th>名稱</th>
              <th style="width:80px">Driver</th>
              <th>掛載路徑</th>
              <th style="width:100px">建立時間</th>
              <th>使用容器</th>
              @if($canManage)<th style="width:60px"></th>@endif
            </tr>
          </thead>
          <tbody>
            @foreach($volumes as $v)
            <tr>
              <td><strong>{{ $v['name'] }}</strong></td>
              <td><small>{{ $v['driver'] }}</small></td>
              <td><small class="font-monospace text-muted">{{ $v['mountpoint'] }}</small></td>
              <td><small class="text-muted">{{ $v['created'] ? date('Y-m-d', strtotime($v['created'])) : '—' }}</small></td>
              <td>
                @forelse($volumeContainers[$v['name']] ?? [] as $cn)
                  <span class="badge bg-light text-dark border me-1" style="font-size:.75rem;">{{ $cn }}</span>
                @empty
                  <small class="text-muted">—</small>
                @endforelse
              </td>
              @if($canManage)
              <td>
                <button class="btn btn-sm btn-outline-danger rm-volume" data-name="{{ $v['name'] }}">
                  <i class="bi bi-trash"></i>
                </button>
              </td>
              @endif
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      @endif
    </div>

  </div>{{-- /tab-content --}}
</div>

{{-- Image Meta 編輯 Modal --}}
<div class="modal fade" id="imageMetaModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-pencil me-1"></i>編輯 Image 資訊</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted small mb-3" id="imageMetaTags"></p>
        <input type="hidden" id="imageMetaId">
        <div class="mb-3">
          <label for="imageMetaUsedBy" class="form-label fw-semibold small">使用容器（多個以逗號分隔）</label>
          <input type="text" id="imageMetaUsedBy" class="form-control form-control-sm"
            placeholder="例：sonarqube, nginx-prod">
        </div>
        <div class="mb-3">
          <label for="imageMetaOwner" class="form-label fw-semibold small">負責人</label>
          <input type="text" id="imageMetaOwner" class="form-control form-control-sm" placeholder="例：王小明">
        </div>
        <div class="mb-3">
          <label for="imageMetaNote" class="form-label fw-semibold small">備註</label>
          <textarea id="imageMetaNote" class="form-control form-control-sm" rows="3"
            placeholder="說明此 image 的用途或注意事項…"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="imageMetaSaveBtn">
          <i class="bi bi-floppy me-1"></i>儲存
        </button>
      </div>
    </div>
  </div>
</div>

{{-- Image Pull / Load 輸出 Modal --}}
<div class="modal fade" id="imageOpModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="imageOpTitle">執行中…</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="log-box" id="imageOpOutput">等待中…</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
      </div>
    </div>
  </div>
</div>

{{-- Container 詳細 Modal --}}
<div class="modal fade" id="detailModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-info-circle me-1"></i><span id="detailModalTitle">容器詳細</span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" id="detailBody">
        <div class="text-center text-muted py-3">載入中…</div>
      </div>
    </div>
  </div>
</div>

{{-- Log Modal --}}
<div class="modal fade" id="logModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-terminal me-1"></i><span id="logModalTitle">Container Log</span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
      </div>
      <div class="modal-body p-0">
        <div class="log-box" id="logContent">載入中…</div>
      </div>
      <div class="modal-footer">
        <label for="logTail" class="visually-hidden">顯示行數</label>
        <select id="logTail" class="form-select form-select-sm" style="width:auto">
          <option value="100">最後 100 行</option>
          <option value="200" selected>最後 200 行</option>
          <option value="500">最後 500 行</option>
        </select>
        <button class="btn btn-sm btn-outline-secondary" id="logRefresh">重整</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
      </div>
    </div>
  </div>
</div>

{{-- Compose 輸出 Modal --}}
<div class="modal fade" id="composeModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="composeModalTitle">執行中…</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="log-box" id="composeOutput">等待中…</div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
const token = document.querySelector('meta[name="csrf-token"]').content;

async function api(url, method = 'GET') {
  const r = await fetch(url, { method, headers: { 'X-CSRF-TOKEN': token, 'Accept': 'application/json' } });
  return r.json();
}

// ── 資源統計 ─────────────────────────────────────────────────────────────────
async function fetchStats(id, cell) {
  const s = await api(`/docker/containers/${id}/stats`).catch(() => null);
  if (!s || !s.cpu_pct) { cell.innerHTML = '<small class="text-muted">—</small>'; return; }
  const cpuPct = Math.min(s.cpu_pct, 100);
  const memPct = Math.min(s.mem_pct, 100);
  cell.innerHTML = `
    <div style="font-size:.75rem">CPU <strong>${s.cpu_pct}%</strong></div>
    <div class="resource-bar"><div class="resource-fill" style="width:${cpuPct}%;background:#3b82f6"></div></div>
    <div style="font-size:.75rem;margin-top:3px">MEM <strong>${s.mem_usage}</strong> / ${s.mem_limit} (${s.mem_pct}%)</div>
    <div class="resource-bar"><div class="resource-fill" style="width:${memPct}%;background:#8b5cf6"></div></div>`;
}

function refreshAllStats() {
  document.querySelectorAll('.stats-cell[data-id]').forEach(cell => {
    const row = cell.closest('tr');
    if (row.dataset.state === 'running') { fetchStats(cell.dataset.id, cell); }
  });
}
refreshAllStats();
setInterval(refreshAllStats, 8000);

// ── 容器狀態輪詢 ──────────────────────────────────────────────────────────────
setInterval(async () => {
  const list = await api('/docker/status-all').catch(() => null);
  if (!list) { return; }
  list.forEach(c => {
    const row = document.querySelector(`tr[data-id="${c.id}"]`);
    if (!row) { return; }
    row.dataset.state = c.state;
    const dot = row.querySelector('.state-dot');
    if (dot) { dot.className = `state-dot state-${c.state}`; }
  });
}, 10000);

// ── 容器操作 ─────────────────────────────────────────────────────────────────
document.querySelectorAll('[data-action]').forEach(btn => {
  btn.addEventListener('click', async () => {
    const id  = btn.dataset.id;
    const act = btn.dataset.action;
    btn.disabled = true;
    await api(`/docker/containers/${id}/action/${act}`, 'POST');
    setTimeout(() => location.reload(), 1200);
  });
});

// ── 刪除容器 ─────────────────────────────────────────────────────────────────
document.querySelectorAll('.rm-btn').forEach(btn => {
  btn.addEventListener('click', async () => {
    if (!confirm(`確定刪除容器「${btn.dataset.name}」？`)) { return; }
    await api(`/docker/containers/${btn.dataset.id}`, 'DELETE');
    location.reload();
  });
});

// ── 刪除 Image ────────────────────────────────────────────────────────────────
document.querySelectorAll('.rm-image').forEach(btn => {
  btn.addEventListener('click', async () => {
    if (!confirm('確定刪除此 Image？')) { return; }
    const r = await api(`/docker/images/${btn.dataset.id}`, 'DELETE');
    if (r.success) { btn.closest('tr').remove(); }
    else { alert('刪除失敗，可能有容器正在使用此 Image'); }
  });
});

// ── Detail Modal ──────────────────────────────────────────────────────────────
const detailModal = new bootstrap.Modal('#detailModal');
const detailBody  = document.getElementById('detailBody');

document.querySelectorAll('.detail-btn').forEach(btn => {
  btn.addEventListener('click', async () => {
    document.getElementById('detailModalTitle').textContent = btn.dataset.name + ' — 詳細資訊';
    detailBody.innerHTML = '<div class="text-center text-muted py-3">載入中…</div>';
    detailModal.show();

    const c = await api(`/docker/containers/${btn.dataset.id}/detail`).catch(() => null);
    if (!c || c.error) { detailBody.innerHTML = '<div class="text-danger p-3">載入失敗</div>'; return; }

    const stBadge = c.state === 'running'
      ? '<span class="badge bg-success">running</span>'
      : `<span class="badge bg-secondary">${c.state}</span>`;

    const mountRows = (c.mounts || []).map(m => `
      <tr>
        <td><span class="badge bg-light text-dark border">${m.type}</span></td>
        <td class="font-monospace" style="font-size:.8rem;">${m.name || m.source}</td>
        <td class="font-monospace" style="font-size:.8rem;">${m.destination}</td>
        <td>${m.rw ? '<span class="text-success">rw</span>' : '<span class="text-muted">ro</span>'}</td>
      </tr>`).join('') || '<tr><td colspan="4" class="text-muted">無掛載</td></tr>';

    detailBody.innerHTML = `
      <div class="row g-3 mb-3">
        <div class="col-sm-6">
          <div class="mb-1"><small class="text-muted">Container ID</small></div>
          <code style="font-size:.8rem;">${c.id}</code>
        </div>
        <div class="col-sm-3">
          <div class="mb-1"><small class="text-muted">狀態</small></div>
          ${stBadge} <small class="text-muted">${c.status}</small>
        </div>
        <div class="col-sm-3">
          <div class="mb-1"><small class="text-muted">建立日期</small></div>
          <small>${c.created ? new Date(c.created * 1000).toLocaleDateString('zh-TW') : '—'}</small>
        </div>
      </div>
      <div class="mb-3">
        <div class="mb-1"><small class="text-muted">Image</small></div>
        <span class="badge bg-light text-dark border font-monospace">${c.image}</span>
        <small class="text-muted ms-2">${c.image_id || ''}</small>
      </div>
      <div>
        <div class="mb-2"><small class="text-muted fw-semibold">Volumes / Mounts</small></div>
        <div class="table-responsive">
          <table class="table table-sm table-bordered mb-0" style="font-size:.82rem;">
            <thead class="table-light"><tr><th>類型</th><th>來源 / 名稱</th><th>容器路徑</th><th>模式</th></tr></thead>
            <tbody>${mountRows}</tbody>
          </table>
        </div>
      </div>`;
  });
});

// ── Log Modal ─────────────────────────────────────────────────────────────────
let currentLogId = null;
const logModal   = new bootstrap.Modal('#logModal');
const logContent = document.getElementById('logContent');

async function loadLogs(id) {
  const tail = document.getElementById('logTail').value;
  logContent.textContent = '載入中…';
  const r = await api(`/docker/containers/${id}/logs?tail=${tail}`).catch(() => null);
  logContent.textContent = r?.logs || '（無 log 輸出）';
  logContent.scrollTop = logContent.scrollHeight;
}

document.querySelectorAll('.log-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    currentLogId = btn.dataset.id;
    document.getElementById('logModalTitle').textContent = btn.dataset.name + ' — Log';
    logModal.show();
    loadLogs(currentLogId);
  });
});
document.getElementById('logRefresh').addEventListener('click', () => loadLogs(currentLogId));
document.getElementById('logTail').addEventListener('change', () => loadLogs(currentLogId));

// ── Compose 操作 ──────────────────────────────────────────────────────────────
const composeModal  = new bootstrap.Modal('#composeModal');
const composeOutput = document.getElementById('composeOutput');

document.querySelectorAll('.compose-action').forEach(btn => {
  btn.addEventListener('click', async () => {
    const name   = btn.dataset.name;
    const action = btn.dataset.action;
    document.getElementById('composeModalTitle').textContent = `${name} — docker compose ${action}`;
    composeOutput.textContent = '執行中，請稍候…';
    composeModal.show();
    const r = await api(`/docker/compose/${name}/action/${action}`, 'POST');
    composeOutput.textContent = r.output || '（無輸出）';
  });
});

// ── 刪除 Compose ──────────────────────────────────────────────────────────────
document.querySelectorAll('.compose-del').forEach(btn => {
  btn.addEventListener('click', async () => {
    if (!confirm(`確定刪除 ${btn.dataset.name}.yml？`)) { return; }
    await api(`/docker/compose/${btn.dataset.name}`, 'DELETE');
    location.reload();
  });
});

// ── 刪除 Volume ───────────────────────────────────────────────────────────────
document.querySelectorAll('.rm-volume').forEach(btn => {
  btn.addEventListener('click', async () => {
    const name = btn.dataset.name;
    if (!confirm(`確定刪除 Volume「${name}」？\n（Volume 內的資料將永久刪除）`)) { return; }
    const r = await api(`/docker/volumes/${encodeURIComponent(name)}`, 'DELETE');
    if (r.success) { btn.closest('tr').remove(); }
    else { alert('刪除失敗：' + (r.message || '未知錯誤')); }
  });
});

// ── Image Meta 編輯 ───────────────────────────────────────────────────────────
const imageMetaModal = new bootstrap.Modal('#imageMetaModal');

document.querySelectorAll('.edit-image-meta').forEach(btn => {
  btn.addEventListener('click', () => {
    document.getElementById('imageMetaId').value      = btn.dataset.id;
    document.getElementById('imageMetaTags').textContent = btn.dataset.tags;
    document.getElementById('imageMetaUsedBy').value  = btn.dataset.used;
    document.getElementById('imageMetaOwner').value   = btn.dataset.owner;
    document.getElementById('imageMetaNote').value    = btn.dataset.note;
    imageMetaModal.show();
  });
});

document.getElementById('imageMetaSaveBtn').addEventListener('click', async () => {
  const id = document.getElementById('imageMetaId').value;
  const r  = await fetch(`/docker/images/${id}/meta`, {
    method:  'POST',
    headers: { 'X-CSRF-TOKEN': token, 'Content-Type': 'application/json', 'Accept': 'application/json' },
    body: JSON.stringify({
      used_by: document.getElementById('imageMetaUsedBy').value,
      owner:   document.getElementById('imageMetaOwner').value,
      note:    document.getElementById('imageMetaNote').value,
    }),
  }).then(r => r.json());
  if (r.success) { imageMetaModal.hide(); location.reload(); }
  else { alert('儲存失敗'); }
});

// ── Image Pull / Load ─────────────────────────────────────────────────────────
const imageOpModal  = new bootstrap.Modal('#imageOpModal');
const imageOpOutput = document.getElementById('imageOpOutput');

function showImageOp(title, work) {
  document.getElementById('imageOpTitle').textContent = title;
  imageOpOutput.textContent = '執行中，請稍候…';
  imageOpModal.show();
  work().then(r => {
    imageOpOutput.textContent = r.output || (r.success ? '完成' : '失敗');
    if (r.success) { setTimeout(() => location.reload(), 2000); }
  });
}

document.getElementById('pullImageBtn')?.addEventListener('click', () => {
  const image = document.getElementById('pullImageInput').value.trim();
  if (!image) { alert('請輸入 image 名稱'); return; }
  showImageOp(`docker pull ${image}`, () =>
    fetch('{{ route("docker.image.pull") }}', {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': token, 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({ image }),
    }).then(r => r.json())
  );
});

document.getElementById('loadImageBtn')?.addEventListener('click', () => {
  const file = document.getElementById('loadImageInput').files[0];
  if (!file) { alert('請選擇 .tar 檔案'); return; }
  const fd = new FormData();
  fd.append('file', file);
  fd.append('_token', token);
  showImageOp(`docker load ← ${file.name}`, () =>
    fetch('{{ route("docker.image.load") }}', { method: 'POST', headers: { 'Accept': 'application/json' }, body: fd })
      .then(r => r.json())
  );
});

// ── 重整 / 記憶頁籤 ───────────────────────────────────────────────────────────
document.getElementById('refreshBtn').addEventListener('click', () => location.reload());

// 記憶最後開啟的頁籤
const savedTab = sessionStorage.getItem('dockerTab');
if (savedTab) {
  const tab = document.querySelector(`[href="${savedTab}"]`);
  if (tab) { bootstrap.Tab.getOrCreateInstance(tab).show(); }
}
document.querySelectorAll('#dockerTabs .nav-link').forEach(tab => {
  tab.addEventListener('shown.bs.tab', e => {
    sessionStorage.setItem('dockerTab', e.target.getAttribute('href'));
  });
});
</script>
@endpush