@extends('layouts.app')

@section('title', '手冊產生器')

@push('styles')
<style>
.mg-card { transition: box-shadow .15s; }
.mg-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1) !important; }
.mg-card .mg-title { font-size: 1rem; font-weight: 600; }
.mg-card .mg-meta { font-size: .78rem; }
.mg-section-label {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: #888; margin-bottom: .25rem;
}
.mg-url {
  font-size: .8rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%;
  display: inline-block; vertical-align: middle;
}
.mg-progress-wrap { margin-top: .5rem; }
.mg-progress-step { font-size: .75rem; color: #666; margin-bottom: .25rem; }
.progress { height: 6px; border-radius: 4px; }
</style>
@endpush

@section('content')
<div class="container-fluid py-4 px-4">

  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h4 class="mb-0 fw-bold"><i class="bi bi-journal-text me-2 text-primary"></i>手冊產生器</h4>
      <div class="text-muted small mt-1">自動分析專案程式碼與介面，產生使用手冊或管理者手冊</div>
    </div>
    <a href="{{ route('manual-generators.create') }}" class="btn btn-primary">
      <i class="bi bi-plus-lg me-1"></i>新增產生器
    </a>
  </div>

  @foreach(['success','info','error'] as $t)
    @if(session($t))
      <div class="alert alert-{{ $t === 'error' ? 'danger' : $t }} alert-dismissible fade show py-2 mb-3">
        {{ session($t) }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    @endif
  @endforeach

  @if($generators->isEmpty())
    <div class="card shadow-sm border-0">
      <div class="card-body text-center py-5 text-muted">
        <i class="bi bi-journal-plus" style="font-size:2.5rem;opacity:.3;"></i>
        <div class="mt-3">尚無手冊產生器設定</div>
        <a href="{{ route('manual-generators.create') }}" class="btn btn-primary btn-sm mt-3">
          <i class="bi bi-plus-lg me-1"></i>立即建立
        </a>
      </div>
    </div>
  @else
  <div class="row g-3">
    @foreach($generators as $g)
    <div class="col-12 col-xl-6">
      <div class="card shadow-sm border-0 mg-card h-100">
        {{-- card header --}}
        <div class="card-body pb-2">
          <div class="d-flex align-items-start justify-content-between gap-2 mb-3">
            <div>
              <div class="mg-title">{{ $g->name }}</div>
              @if($g->project)
                <div class="text-muted mg-meta mt-1">
                  <i class="bi bi-folder me-1"></i>{{ $g->project->name }}
                </div>
              @endif
            </div>
            <span class="badge bg-{{ $g->statusColor() }} mt-1" id="status-badge-{{ $g->id }}">{{ $g->statusLabel() }}</span>
          </div>

          <div class="row g-3 mb-2">
            {{-- GitLab --}}
            <div class="col-6">
              <div class="mg-section-label"><i class="bi bi-git me-1"></i>GitLab</div>
              @if($g->source_ref)
                <a href="{{ $g->source_ref }}" target="_blank"
                   class="text-decoration-none text-dark mg-url"
                   title="{{ $g->source_ref }}">
                  <i class="bi bi-box me-1 text-warning"></i>{{ basename($g->source_ref, '.git') }}
                </a>
                <div class="text-muted" style="font-size:.73rem;">branch: {{ $g->branch }}</div>
              @else
                <span class="text-muted small">未設定</span>
              @endif
            </div>
            {{-- 目標網站 --}}
            <div class="col-6">
              <div class="mg-section-label"><i class="bi bi-globe me-1"></i>目標網站</div>
              @if($g->site_url)
                <a href="{{ $g->site_url }}" target="_blank"
                   class="text-decoration-none text-dark mg-url"
                   title="{{ $g->site_url }}">
                  <i class="bi bi-globe2 me-1 text-success"></i>{{ preg_replace('#^https?://#', '', $g->site_url) }}
                </a>
              @else
                <span class="text-muted small">未設定</span>
              @endif
            </div>
          </div>

          {{-- 帳號組 --}}
          @if($g->accounts->isNotEmpty())
          <div class="d-flex flex-wrap gap-1 mt-2">
            @foreach($g->accounts as $acc)
              <span class="badge bg-{{ $acc->typeBadgeColor() }}-subtle text-{{ $acc->typeBadgeColor() }}-emphasis border border-{{ $acc->typeBadgeColor() }}-subtle">
                <i class="bi bi-person me-1"></i>{{ $acc->label }}
                <span class="text-opacity-75 ms-1" style="font-size:.7em;">{{ $acc->typeLabel() }}</span>
              </span>
            @endforeach
          </div>
          @endif

          {{-- 進度條（產生中才顯示） --}}
          <div class="mg-progress-wrap" id="progress-wrap-{{ $g->id }}"
               style="{{ $g->status === 'generating' ? '' : 'display:none;' }}">
            <div class="mg-progress-step" id="progress-step-{{ $g->id }}">
              {{ $g->progress_step ?? '準備中…' }}
            </div>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                   id="progress-bar-{{ $g->id }}"
                   style="width:{{ $g->progress ?? 0 }}%"
                   role="progressbar"
                   aria-valuenow="{{ $g->progress ?? 0 }}"
                   aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>
            <div class="text-muted mt-1" id="progress-pct-{{ $g->id }}" style="font-size:.72rem;">
              {{ $g->progress ?? 0 }}%
            </div>
          </div>

          {{-- 失敗訊息 --}}
          @if($g->status === 'failed' && $g->error_message)
          <div class="alert alert-danger py-1 px-2 mt-2 mb-0 small" id="error-msg-{{ $g->id }}">
            <i class="bi bi-exclamation-triangle me-1"></i>{{ $g->error_message }}
          </div>
          @else
          <div class="d-none" id="error-msg-{{ $g->id }}"></div>
          @endif

          @if($g->last_generated_at)
          <div class="text-muted mt-2" style="font-size:.75rem;" id="last-gen-{{ $g->id }}">
            <i class="bi bi-clock-history me-1"></i>上次產生：{{ $g->last_generated_at->format('Y-m-d H:i') }}
          </div>
          @else
          <div id="last-gen-{{ $g->id }}"></div>
          @endif

          @if($g->notes)
          <div class="text-muted mt-1" style="font-size:.78rem;">
            <i class="bi bi-chat-left-text me-1"></i>{{ $g->notes }}
          </div>
          @endif
        </div>

        {{-- card footer --}}
        <div class="card-footer bg-transparent border-top-0 pt-0 pb-3 px-3 d-flex align-items-center justify-content-end gap-2">
          @if($g->accounts->isNotEmpty())
          <div class="dropdown">
            <button class="btn btn-primary btn-sm dropdown-toggle"
                    data-bs-toggle="dropdown"
                    {{ $g->status === 'generating' ? 'disabled' : '' }}>
              <i class="bi bi-play-fill me-1"></i>產生手冊
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              @foreach($g->accounts as $acc)
              <li>
                <form method="POST" action="{{ route('manual-generators.generate', $g) }}">
                  @csrf
                  <input type="hidden" name="account_id" value="{{ $acc->id }}">
                  <button type="submit" class="dropdown-item d-flex align-items-center gap-2 py-2">
                    <span class="badge bg-{{ $acc->typeBadgeColor() }}">{{ $acc->typeLabel() }}</span>
                    <span>{{ $acc->label }}</span>
                  </button>
                </form>
              </li>
              @endforeach
            </ul>
          </div>
          @else
          <button class="btn btn-sm btn-outline-secondary" disabled>
            <i class="bi bi-play-fill me-1"></i>產生手冊
          </button>
          @endif

          @if($g->status === 'done')
          <div class="dropdown">
            <button class="btn btn-sm btn-outline-success dropdown-toggle" data-bs-toggle="dropdown">
              <i class="bi bi-eye me-1"></i>查看手冊
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              @foreach($g->accounts as $acc)
              @php $file = storage_path("app/manual-generators/{$g->id}/{$acc->manual_type}.html"); @endphp
              @if(file_exists($file))
              <li>
                <a class="dropdown-item" href="{{ route('manual-generators.view', [$g, $acc->manual_type]) }}" target="_blank">
                  <span class="badge bg-{{ $acc->typeBadgeColor() }} me-1">{{ $acc->typeLabel() }}</span>{{ $acc->label }}
                </a>
              </li>
              @endif
              @endforeach
            </ul>
          </div>
          @endif
          <a href="{{ route('manual-generators.edit', $g) }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-pencil me-1"></i>編輯
          </a>
          <form method="POST" action="{{ route('manual-generators.destroy', $g) }}"
                onsubmit="return confirm('確定刪除「{{ $g->name }}」？')">
            @csrf @method('DELETE')
            <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
          </form>
        </div>
      </div>
    </div>
    @endforeach
  </div>
  @endif
</div>
@endsection

@push('scripts')
<script>
(function () {
  // 收集所有「產生中」的卡片 ID
  const generating = @json(
    $generators->where('status', 'generating')->pluck('id')->values()
  );

  if (!generating.length) return;

  const statusUrls = @json(
    $generators->where('status', 'generating')
      ->mapWithKeys(fn($g) => [$g->id => route('manual-generators.status', $g)])
      ->toArray()
  );

  const BADGE_COLORS = {
    idle: 'secondary', generating: 'warning', done: 'success', failed: 'danger'
  };

  function updateCard(id, data) {
    // badge
    const badge = document.getElementById(`status-badge-${id}`);
    if (badge) {
      badge.textContent = data.status_label;
      badge.className = `badge bg-${BADGE_COLORS[data.status] ?? 'secondary'} mt-1`;
    }

    // progress wrap
    const wrap = document.getElementById(`progress-wrap-${id}`);
    const bar  = document.getElementById(`progress-bar-${id}`);
    const step = document.getElementById(`progress-step-${id}`);
    const pct  = document.getElementById(`progress-pct-${id}`);

    if (data.status === 'generating') {
      if (wrap) wrap.style.display = '';
      if (bar)  { bar.style.width = data.progress + '%'; bar.setAttribute('aria-valuenow', data.progress); }
      if (step) step.textContent = data.progress_step ?? '處理中…';
      if (pct)  pct.textContent  = data.progress + '%';
    } else {
      if (wrap) wrap.style.display = 'none';
    }

    // 失敗訊息
    const errEl = document.getElementById(`error-msg-${id}`);
    if (errEl) {
      if (data.status === 'failed' && data.error_message) {
        errEl.className = 'alert alert-danger py-1 px-2 mt-2 mb-0 small';
        errEl.innerHTML = `<i class="bi bi-exclamation-triangle me-1"></i>${data.error_message}`;
      } else {
        errEl.className = 'd-none';
        errEl.innerHTML = '';
      }
    }

    // 上次產生時間
    const lastEl = document.getElementById(`last-gen-${id}`);
    if (lastEl && data.last_generated_at) {
      lastEl.innerHTML = `<i class="bi bi-clock-history me-1"></i>上次產生：${data.last_generated_at}`;
      lastEl.style.display = '';
    }
  }

  const active = new Set(generating);

  function poll() {
    if (!active.size) return;
    active.forEach(id => {
      fetch(statusUrls[id])
        .then(r => r.json())
        .then(data => {
          updateCard(id, data);
          if (data.status !== 'generating') {
            active.delete(id);
          }
        })
        .catch(() => {});
    });
    if (active.size) setTimeout(poll, 2500);
  }

  setTimeout(poll, 2500);
})();
</script>
@endpush