@extends('layouts.app')

@section('title', ($name ? '編輯' : '新增') . ' Compose')

@section('content')
<div class="container-fluid py-4" style="max-width:960px">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h4 mb-0">
      <i class="bi bi-file-code me-2"></i>{{ $name ? '編輯：'.$name.'.yml' : '新增 Compose' }}
    </h1>
    <a href="{{ route('docker.index') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回
    </a>
  </div>

  <div class="row g-4">
    {{-- 左欄：YAML 編輯器 --}}
    <div class="col-lg-8">
      <div class="card h-100">
        <div class="card-header fw-semibold">docker-compose.yml</div>
        <div class="card-body p-2">
          <div class="mb-3 px-1">
            <label for="composeName" class="form-label fw-semibold small">Compose 名稱</label>
            <input type="text" id="composeName" class="form-control form-control-sm font-monospace" style="max-width:300px"
              value="{{ $name }}" placeholder="例：elasticsearch" {{ $name ? 'readonly' : '' }}>
            @if(!$name)
              <div class="form-text">只能使用英文、數字、底線、連字號</div>
            @endif
          </div>
          <label for="yamlEditor" class="visually-hidden">docker-compose.yml 內容</label>
          <textarea id="yamlEditor" class="form-control font-monospace"
            style="height:62vh; resize:vertical; font-size:0.83rem; line-height:1.5;"
            placeholder="在此貼上 docker-compose.yml 內容…">{{ $content }}</textarea>
        </div>
      </div>
    </div>

    {{-- 右欄：Metadata --}}
    <div class="col-lg-4">
      <div class="card mb-3">
        <div class="card-header fw-semibold"><i class="bi bi-tag me-1"></i>標記資訊</div>
        <div class="card-body">
          <div class="mb-3">
            <label for="metaTitle" class="form-label small fw-semibold">自訂標題</label>
            <input type="text" id="metaTitle" class="form-control form-control-sm"
              value="{{ $meta['title'] ?? '' }}"
              placeholder="例：Elasticsearch 正式環境">
            <div class="form-text">方便識別此 Compose 的用途</div>
          </div>

          <div class="mb-3">
            <label for="metaProject" class="form-label small fw-semibold">案子（Project）</label>
            <select id="metaProject" class="form-select form-select-sm">
              <option value="">— 不指定 —</option>
              @foreach($projects as $id => $pname)
                <option value="{{ $pname }}" {{ (($meta['project'] ?? '') === $pname) ? 'selected' : '' }}>
                  {{ $pname }}
                </option>
              @endforeach
            </select>
          </div>

          <div class="mb-3">
            <label for="metaClient" class="form-label small fw-semibold">客戶（Client）</label>
            <select id="metaClient" class="form-select form-select-sm">
              <option value="">— 不指定 —</option>
              @foreach($clients as $id => $cname)
                <option value="{{ $cname }}" {{ (($meta['client'] ?? '') === $cname) ? 'selected' : '' }}>
                  {{ $cname }}
                </option>
              @endforeach
            </select>
          </div>

          <div class="mb-3">
            <label for="metaOwner" class="form-label small fw-semibold">負責人</label>
            <input type="text" id="metaOwner" class="form-control form-control-sm"
              value="{{ $meta['owner'] ?? '' }}"
              placeholder="例：王小明">
          </div>

          <div class="mb-3">
            <label for="metaPurpose" class="form-label small fw-semibold">用途說明</label>
            <textarea id="metaPurpose" class="form-control form-control-sm" rows="3"
              placeholder="說明這個 Compose 的用途…">{{ $meta['purpose'] ?? '' }}</textarea>
          </div>

          @if(!empty($meta['created_at']))
          <div class="text-muted" style="font-size:.75rem;">
            <i class="bi bi-calendar3 me-1"></i>建立：{{ $meta['created_at'] }}<br>
            @if(!empty($meta['updated_at']))
            <i class="bi bi-pencil me-1"></i>更新：{{ $meta['updated_at'] }}
            @endif
          </div>
          @endif
        </div>
      </div>

      @if(!empty($localImages))
      <div class="card mb-3">
        <div class="card-header fw-semibold small"><i class="bi bi-layers me-1"></i>本機 Images（點擊插入）</div>
        <div class="card-body py-2 px-2" style="max-height:200px;overflow-y:auto;">
          @foreach($localImages as $tag)
            <button type="button" class="btn btn-sm btn-outline-secondary mb-1 me-1 font-monospace insert-image"
              data-tag="{{ $tag }}" style="font-size:.72rem;">{{ $tag }}</button>
          @endforeach
        </div>
      </div>
      @endif

      <div class="d-grid gap-2">
        <button id="saveBtn" class="btn btn-primary">
          <i class="bi bi-floppy me-1"></i>儲存
        </button>
        <button id="saveUpBtn" class="btn btn-success">
          <i class="bi bi-play-fill me-1"></i>儲存並 Up
        </button>
        <a href="{{ route('docker.index') }}" class="btn btn-outline-secondary">取消</a>
      </div>
    </div>
  </div>
</div>
@endsection

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

async function save() {
  const name = document.getElementById('composeName').value.trim();
  if (!name) { alert('請輸入 Compose 名稱'); return false; }

  const payload = {
    name,
    content: document.getElementById('yamlEditor').value,
    title:   document.getElementById('metaTitle').value,
    project: document.getElementById('metaProject').value,
    client:  document.getElementById('metaClient').value,
    owner:   document.getElementById('metaOwner').value,
    purpose: document.getElementById('metaPurpose').value,
  };

  const r = await fetch('{{ route("docker.compose.save") }}', {
    method:  'POST',
    headers: { 'X-CSRF-TOKEN': token, 'Content-Type': 'application/json', 'Accept': 'application/json' },
    body:    JSON.stringify(payload),
  });
  const data = await r.json();
  if (data.success) { return name; }
  alert('儲存失敗：' + (data.message || JSON.stringify(data.errors || {})));
  return false;
}

// ── 本機 Image 插入 ───────────────────────────────────────────────────────────
document.querySelectorAll('.insert-image').forEach(btn => {
  btn.addEventListener('click', () => {
    const ta    = document.getElementById('yamlEditor');
    const tag   = btn.dataset.tag;
    const start = ta.selectionStart;
    const end   = ta.selectionEnd;
    // 找出游標所在行，取代整行或插在游標處
    const before = ta.value.substring(0, start);
    const after  = ta.value.substring(end);
    const insert = `image: ${tag}`;
    ta.value = before + insert + after;
    ta.selectionStart = ta.selectionEnd = start + insert.length;
    ta.focus();
  });
});

document.getElementById('saveBtn').addEventListener('click', async () => {
  if (await save()) { window.location = '{{ route("docker.index") }}'; }
});

document.getElementById('saveUpBtn').addEventListener('click', async () => {
  const name = await save();
  if (!name) { return; }

  const btn = document.getElementById('saveUpBtn');
  btn.disabled    = true;
  btn.textContent = '執行中…';

  const r = await fetch(`/docker/compose/${name}/action/up`, {
    method:  'POST',
    headers: { 'X-CSRF-TOKEN': token, 'Accept': 'application/json' },
  });
  const data = await r.json();
  alert(data.success ? '✅ docker compose up 成功！\n\n' + data.output : '❌ 執行失敗：\n' + data.output);
  window.location = '{{ route("docker.index") }}';
});
</script>
@endpush