@extends('layouts.messaging')
@section('title', '🎨 貼圖商店')

@section('content')
<div class="container py-4" style="max-width:1000px">
  <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
    <h4 class="mb-0"><i class="bi bi-shop me-2 text-primary"></i>貼圖商店</h4>
    <div class="d-flex gap-2">
      <a href="{{ route('messaging.index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>返回聊天
      </a>
      @if($isAdmin)
      <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#newPackModal">
        <i class="bi bi-plus-lg me-1"></i>上架新貼圖包
      </button>
      @endif
    </div>
  </div>

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

  {{-- 篩選：分類 + 排序 --}}
  <form method="GET" action="{{ route('stickers.index') }}" class="d-flex flex-wrap gap-2 align-items-center mb-3">
    <select name="category" class="form-select form-select-sm" style="width:auto" onchange="this.form.submit()">
      <option value="">全部分類</option>
      @foreach($categories as $cat)
      <option value="{{ $cat }}" @selected($currentCategory === $cat)>{{ $cat }}</option>
      @endforeach
    </select>
    <div class="btn-group btn-group-sm" role="group">
      <a href="{{ route('stickers.index', array_filter(['category' => $currentCategory, 'sort' => 'popular'])) }}"
         class="btn {{ $currentSort !== 'new' ? 'btn-primary' : 'btn-outline-primary' }}">
        <i class="bi bi-fire me-1"></i>熱門
      </a>
      <a href="{{ route('stickers.index', array_filter(['category' => $currentCategory, 'sort' => 'new'])) }}"
         class="btn {{ $currentSort === 'new' ? 'btn-primary' : 'btn-outline-primary' }}">
        <i class="bi bi-stars me-1"></i>最新
      </a>
    </div>
  </form>

  @if($packs->isEmpty())
  <div class="text-center text-muted py-5">
    <i class="bi bi-sticky fs-1 d-block mb-2"></i>
    目前還沒有上架的貼圖包
  </div>
  @else
  <div class="row g-3">
    @foreach($packs as $pack)
    <div class="col-6 col-md-4 col-lg-3">
      <div class="card h-100 shadow-sm">
        <div class="d-flex align-items-center justify-content-center bg-light" style="height:140px; cursor:pointer;" role="button" data-bs-toggle="modal" data-bs-target="#previewModal-{{ $pack->id }}" title="預覽這組貼圖">
          @if($pack->coverUrl())
          <img src="{{ $pack->coverUrl() }}" alt="{{ $pack->name }}" style="max-width:100%; max-height:100%; object-fit:contain;">
          @else
          <i class="bi bi-sticky fs-1 text-muted"></i>
          @endif
        </div>
        <div class="card-body py-2 px-3">
          <div class="fw-semibold text-truncate" title="{{ $pack->name }}">{{ $pack->name }}</div>
          <div class="small text-muted d-flex justify-content-between">
            <span>{{ $pack->category ?? '未分類' }}</span>
            <span><i class="bi bi-download"></i> {{ $pack->downloads_count }}</span>
          </div>
        </div>
        <div class="card-footer bg-white border-top-0 pt-0 pb-2 px-3 d-flex gap-1">
          <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#previewModal-{{ $pack->id }}" title="預覽全部貼圖">
            <i class="bi bi-eye"></i>
          </button>
          @if(in_array($pack->id, $downloadedIds))
          <button type="button" class="btn btn-sm btn-outline-success flex-grow-1" disabled>
            <i class="bi bi-check-lg me-1"></i>已下載
          </button>
          @else
          <button type="button" class="btn btn-sm btn-primary flex-grow-1 download-pack-btn" data-pack-id="{{ $pack->id }}">
            <i class="bi bi-download me-1"></i>免費下載
          </button>
          @endif
          @if($isAdmin)
          <div class="dropdown">
            <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#editPackModal-{{ $pack->id }}">
                  <i class="bi bi-pencil me-1"></i>編輯 / 上下架
                </button>
              </li>
              <li>
                <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#addStickersModal-{{ $pack->id }}">
                  <i class="bi bi-images me-1"></i>新增貼圖
                </button>
              </li>
              <li>
                <form method="POST" action="{{ route('stickers.destroy', $pack) }}" onsubmit="return confirm('確定要刪除整組貼圖包嗎？此動作無法復原。')">
                  @csrf @method('DELETE')
                  <button type="submit" class="dropdown-item text-danger"><i class="bi bi-trash me-1"></i>刪除</button>
                </form>
              </li>
            </ul>
          </div>
          @endif
        </div>
      </div>
    </div>

    {{-- 貼圖預覽 Modal：所有人都能看，跟 LINE 商店一樣點縮圖可以看整組貼圖 --}}
    <div class="modal fade" id="previewModal-{{ $pack->id }}" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h6 class="modal-title fw-bold">{{ $pack->name }}</h6>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <div class="d-flex justify-content-between text-muted small mb-3">
              <span>{{ $pack->category ?? '未分類' }}</span>
              <span><i class="bi bi-download"></i> {{ $pack->downloads_count }} 次下載 · 共 {{ $pack->stickers_count }} 張貼圖</span>
            </div>
            <div class="d-flex flex-wrap gap-2 justify-content-center" style="max-height:50vh; overflow-y:auto;">
              @forelse($pack->stickers as $s)
              <img src="{{ $s->imageUrl() }}" alt="{{ $pack->name }} 貼圖" style="width:88px; height:88px; object-fit:contain;">
              @empty
              <div class="text-muted small py-4">這組貼圖包還沒有貼圖</div>
              @endforelse
            </div>
          </div>
          <div class="modal-footer">
            @if(in_array($pack->id, $downloadedIds))
            <button type="button" class="btn btn-sm btn-outline-success flex-grow-1" disabled>
              <i class="bi bi-check-lg me-1"></i>已下載
            </button>
            @else
            <button type="button" class="btn btn-sm btn-primary flex-grow-1 download-pack-btn" data-pack-id="{{ $pack->id }}">
              <i class="bi bi-download me-1"></i>免費下載
            </button>
            @endif
          </div>
        </div>
      </div>
    </div>

    @if($isAdmin)
    {{-- 編輯 / 上下架 Modal --}}
    <div class="modal fade" id="editPackModal-{{ $pack->id }}" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <form method="POST" action="{{ route('stickers.update', $pack) }}">
            @csrf @method('PATCH')
            <div class="modal-header">
              <h6 class="modal-title fw-bold">編輯貼圖包</h6>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <div class="mb-2">
                <label class="form-label small">名稱</label>
                <input type="text" name="name" class="form-control" value="{{ $pack->name }}" required maxlength="100">
              </div>
              <div class="mb-2">
                <label class="form-label small">分類</label>
                <input type="text" name="category" class="form-control" value="{{ $pack->category }}" maxlength="50" placeholder="例如：動物、節慶、日常">
              </div>
              <div class="form-check">
                <input type="checkbox" name="is_active" value="1" class="form-check-input" id="isActive-{{ $pack->id }}" @checked($pack->is_active)>
                <label class="form-check-label" for="isActive-{{ $pack->id }}">上架中（取消勾選＝下架，使用者在商店看不到）</label>
              </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary btn-sm">儲存</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    {{-- 新增貼圖 Modal --}}
    <div class="modal fade" id="addStickersModal-{{ $pack->id }}" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <form method="POST" action="{{ route('stickers.stickers.add', $pack) }}" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
              <h6 class="modal-title fw-bold">新增貼圖到「{{ $pack->name }}」</h6>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <input type="file" name="stickers[]" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" multiple required>
              <div class="form-text">格式限制：jpg／png／gif／webp，單張圖片大小上限 2MB，可一次選多張。聊天室會以 120×120 像素顯示，建議上傳至少 240×240 像素的正方形透明背景 PNG，太小會顯示模糊。</div>
              @if($pack->stickers->isNotEmpty())
              <div class="d-flex flex-wrap gap-2 mt-3">
                @foreach($pack->stickers as $s)
                <div class="position-relative">
                  <img src="{{ $s->imageUrl() }}" style="width:56px;height:56px;object-fit:contain;border:1px solid #eee;border-radius:.3rem;">
                </div>
                @endforeach
              </div>
              @endif
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary btn-sm">上傳</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    @endif
    @endforeach
  </div>
  @endif
</div>

@if($isAdmin)
{{-- 新增貼圖包 Modal --}}
<div class="modal fade" id="newPackModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" action="{{ route('stickers.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="modal-header">
          <h6 class="modal-title fw-bold">上架新貼圖包</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label small">名稱</label>
            <input type="text" name="name" class="form-control" required maxlength="100">
          </div>
          <div class="mb-2">
            <label class="form-label small">分類</label>
            <input type="text" name="category" class="form-control" maxlength="50" placeholder="例如：動物、節慶、日常">
          </div>
          <div class="mb-2">
            <label class="form-label small">封面圖片</label>
            <input type="file" name="cover" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" required>
            <div class="form-text">格式限制：jpg／png／gif／webp，檔案大小上限 2MB。</div>
          </div>
          <div class="mb-2">
            <label class="form-label small">貼圖圖片（可多選）</label>
            <input type="file" name="stickers[]" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" multiple required>
            <div class="form-text">格式限制：jpg／png／gif／webp，單張圖片大小上限 2MB，可一次選多張。聊天室會以 120×120 像素顯示，建議上傳至少 240×240 像素的正方形透明背景 PNG，太小會顯示模糊。</div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary btn-sm">上架</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endif

<script>
// 同一個貼圖包的「免費下載」按鈕現在有兩個地方（卡片本身 + 預覽彈窗），
// 下載成功／失敗都要兩邊一起同步，不然點其中一邊下載完，另一邊看起來
// 還是沒下載過。
document.querySelectorAll('.download-pack-btn').forEach((btn) => {
  btn.addEventListener('click', async () => {
    const packId = btn.dataset.packId;
    const sameBtns = () => document.querySelectorAll(`.download-pack-btn[data-pack-id="${packId}"]`);
    sameBtns().forEach((b) => { b.disabled = true; b.innerHTML = '<span class="spinner-border spinner-border-sm"></span>'; });
    try {
      const res = await fetch(`/stickers/${packId}/download`, {
        method: 'POST',
        headers: {
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
          'Accept': 'application/json',
        },
      });
      if (!res.ok) throw new Error('failed');
      sameBtns().forEach((b) => {
        b.outerHTML = '<button type="button" class="btn btn-sm btn-outline-success flex-grow-1" disabled><i class="bi bi-check-lg me-1"></i>已下載</button>';
      });
    } catch (e) {
      alert('下載失敗，請稍後再試');
      sameBtns().forEach((b) => { b.disabled = false; b.innerHTML = '<i class="bi bi-download me-1"></i>免費下載'; });
    }
  });
});
</script>
@endsection