@props([
    'folder',
    'cards' => null,
    // 可選：使用者自訂資料夾顏色 map（controller 帶：pluck('color','folder_id')）
    'userColors' => [],
])

@php
  $all = collect($cards ?? [])->values();
  $total = $all->count();
  $items = $all->take(9); // 只顯示前 9 個
  $count = $items->count();
  $pages = (int) ceil(max(1, $total) / 9);
  $showDots = $total > 9;

  // 顏色：個人偏好 > 資料夾預設 > 柔和藍
  $base = $userColors[$folder->id] ?? ($folder->color ?? '#cfe4ff');
  $hex = ltrim($base, '#');
  if (strlen($hex) !== 6) {
      $hex = 'cfe4ff';
  }
  [$r, $g, $b] = [hexdec(substr($hex, 0, 2)), hexdec(substr($hex, 2, 2)), hexdec(substr($hex, 4, 2))];
  $light = sprintf('#%02x%02x%02x', min(255, $r + 28), min(255, $g + 28), min(255, $b + 28));
  $deep = sprintf('#%02x%02x%02x', max(0, $r - 40), max(0, $g - 40), max(0, $b - 40));
@endphp

<div class="folder-wrap">
  <div class="ios-folder"
    style="--slot-bg: {{ $light }}33; --slot-fg: {{ $deep }}; --title-fg: {{ $deep }};"
    onclick="location.href='{{ route('dashboard.folders.show', ['folder' => $folder->id]) }}'" role="button"
    aria-label="開啟資料夾 {{ $folder->name }}">

    <div class="folder-inner">
      <div class="icon-grid">
        {{-- 固定 3×3：不足九個以空槽占位，格線位置不跑版 --}}
        @for ($i = 0; $i < 9; $i++)
          @if ($i < $count)
            @php
              $c = $items[$i];
              $emoji = trim((string) data_get($c, 'icon_emoji', ''));
              $icon = trim((string) data_get($c, 'icon', 'bi bi-grid-3x3-gap'));
              $name = data_get($c, 'title') ?? (data_get($c, 'name') ?? '');
            @endphp
            <div class="icon-slot" title="{{ $name }}" aria-label="{{ $name }}">
              @if ($emoji !== '')
                <span class="emoji">{{ $emoji }}</span>
              @else
                <i class="{{ $icon }}"></i>
              @endif
              <span class="label">{{ $name }}</span>
            </div>
          @else
            <div class="icon-slot empty" aria-hidden="true"></div>
          @endif
        @endfor
      </div>
    </div>

    {{-- 頁點指示：超過 9 才顯示，最多 5 個，多的加「+」 --}}
    @if ($showDots)
      @php $dots = min(5, $pages); @endphp
      <div class="page-dots" aria-hidden="true">
        @for ($d = 0; $d < $dots; $d++)
          <span class="dot {{ $d === 0 ? 'active' : '' }}"></span>
        @endfor
        @if ($pages > 5)
          <span class="dot more">+</span>
        @endif
      </div>
    @endif
  </div>

  {{-- 資料夾標題（外層置中、非粗體） --}}
  <div class="folder-title" style="color:var(--title-fg, #1f1f1f);">
    {{ $folder->name }}
  </div>
</div>

@once
  @push('styles')
    <style>
      /* 外層容器 */
      .folder-wrap {
        text-align: center;
        margin-bottom: 1.1rem;
        padding-top: .4rem;
      }

      /* 透明毛玻璃資料夾 */
      .ios-folder {
        position: relative;
        width: 100%;
        aspect-ratio: 1/1;
        border-radius: 24px;
        background: rgba(255, 255, 255, .08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(0, 0, 0, .06);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
        overflow: hidden;
        transition: transform .2s ease, box-shadow .2s ease;
      }

      .ios-folder:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
      }

      /* 絕對填滿：確保在任何裝置上都貼合正方形邊界 */
      .ios-folder .folder-inner {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 10% 7% 18%;
      }

      .ios-folder .icon-grid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 8%;
      }

      /* 小卡片格 */
      .ios-folder .icon-slot {
        border-radius: 12px;
        background: var(--slot-bg, rgba(255, 255, 255, .18));
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4px;
        text-align: center;
        overflow: hidden;
        min-height: 0;
      }

      .ios-folder .icon-slot.empty {
        background: transparent;
      }

      .ios-folder .icon-slot .emoji,
      .ios-folder .icon-slot i {
        font-size: clamp(1.1rem, 3vw, 1.8rem);
        margin-bottom: 4px;
        color: var(--slot-fg, #2b2b2b);
        line-height: 1;
        flex-shrink: 0;
      }

      .ios-folder .icon-slot .label {
        display: block;
        font-weight: 400;
        font-size: clamp(.58rem, 1.8vw, .72rem);
        line-height: 1;
        color: var(--slot-fg, #2b2b2b);
        width: 100%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* 頁點（iPhone 風）：置底置中；active 比較實心 */
      .ios-folder .page-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        pointer-events: none;
      }

      .ios-folder .page-dots .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--slot-fg, #2b2b2b);
        opacity: .35;
      }

      .ios-folder .page-dots .dot.active {
        opacity: .9;
      }

      .ios-folder .page-dots .dot.more {
        width: auto;
        min-width: 12px;
        height: 6px;
        line-height: 6px;
        background: none;
        color: var(--slot-fg, #2b2b2b);
        font-size: 10px;
        opacity: .7;
      }

      /* 外部標題 */
      .folder-title {
        margin-top: .52rem;
        font-weight: 400;
        font-size: clamp(1.0rem, 2.6vw, 1.2rem);
        color: var(--title-fg, #1f1f1f);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* 暗黑模式 */
      .dark .ios-folder {
        background: rgba(30, 32, 36, .45);
        border-color: rgba(255, 255, 255, .10);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
      }

      .dark .ios-folder .icon-slot {
        --slot-bg: rgba(255, 255, 255, .10);
      }

      .dark .ios-folder .icon-slot .emoji,
      .dark .ios-folder .icon-slot i,
      .dark .ios-folder .icon-slot .label,
      .dark .folder-title {
        color: #e9ecef !important;
      }

      .dark .ios-folder .page-dots .dot {
        background: rgba(255, 255, 255, .5);
      }

      .dark .ios-folder .page-dots .dot.active {
        background: rgba(255, 255, 255, .95);
      }

      .dark .ios-folder .page-dots .dot.more {
        color: #fff;
        opacity: .85;
      }

      /* ===== 手機（≤ 600px）：icon 放大、隱藏文字 ===== */
      @media (max-width:600px) {
        .ios-folder {
          border-radius: 18px;
        }

        .ios-folder .folder-inner {
          padding: 8% 6% 16%;
        }

        .ios-folder .icon-slot .label {
          display: none;
        }

        .ios-folder .icon-slot .emoji,
        .ios-folder .icon-slot i {
          font-size: clamp(1.4rem, 7vw, 2.2rem);
          margin-bottom: 0;
        }

        .folder-title {
          font-size: clamp(.75rem, 3.5vw, .95rem);
        }
      }
    </style>
  @endpush
@endonce