<?php

declare(strict_types=1);

/**
 * 手機底部浮動 dock（由 fate_mobile_member_bar_render 注入變數）。
 *
 * @var string $prefix
 * @var string $brandMain
 * @var string $brandSub
 * @var bool $loggedIn
 * @var string|null $avatarUrl
 * @var string $memberLabel
 * @var string $memberUsername
 * @var int|null $memberNcoin
 * @var string $ncoinName
 * @var bool $adminNavVisible
 * @var string $loginNextQ
 * @var bool $profileActive
 * @var list<array{id:string,label:string,href:string,active:bool,action?:string}> $navItems
 * @var array{action:string,q:string,hidden:array<string,string>} $searchForm
 */

$mbSheetId = 'fate-mobile-bar-sheet';
$mbSearchSheetId = 'fate-mobile-search-sheet';
$searchQ = (string) ($searchForm['q'] ?? '');
$searchAction = (string) ($searchForm['action'] ?? ($prefix . 'index.php'));
/** @var array<string,string> $searchHidden */
$searchHidden = is_array($searchForm['hidden'] ?? null) ? $searchForm['hidden'] : ['page' => '1'];
?>
<div class="fate-mobile-dock" role="navigation" aria-label="手機快捷導覽">
    <a class="fate-mobile-dock__brand" href="<?= htmlspecialchars($prefix, ENT_QUOTES, 'UTF-8') ?>">
        <span class="fate-mobile-dock__brand-main"><?= htmlspecialchars($brandMain, ENT_QUOTES, 'UTF-8') ?></span>
        <?php if ($brandSub !== ''): ?>
            <span class="fate-mobile-dock__brand-sub"><?= htmlspecialchars($brandSub, ENT_QUOTES, 'UTF-8') ?></span>
        <?php endif; ?>
    </a>

    <div class="fate-mobile-dock__bar">
        <div class="fate-mobile-dock__links">
            <?php foreach ($navItems as $navItem): ?>
                <?php if (($navItem['action'] ?? '') === 'search'): ?>
                    <button type="button"
                            class="fate-mobile-dock__link fate-mobile-dock__link--action<?= !empty($navItem['active']) ? ' is-active' : '' ?>"
                            data-fate-mobile-search-trigger
                            aria-expanded="false"
                            aria-controls="<?= htmlspecialchars($mbSearchSheetId, ENT_QUOTES, 'UTF-8') ?>"
                            aria-label="<?= htmlspecialchars((string) $navItem['label'], ENT_QUOTES, 'UTF-8') ?>">
                        <span class="fate-mobile-dock__icon-wrap">
                            <span class="fate-mobile-dock__icon fate-mobile-dock__icon--search" aria-hidden="true"></span>
                        </span>
                    </button>
                <?php else: ?>
                <a class="fate-mobile-dock__link<?= !empty($navItem['active']) ? ' is-active' : '' ?>"
                   href="<?= htmlspecialchars((string) $navItem['href'], ENT_QUOTES, 'UTF-8') ?>"
                   data-fate-mobile-nav="<?= htmlspecialchars((string) $navItem['id'], ENT_QUOTES, 'UTF-8') ?>"
                   aria-label="<?= htmlspecialchars((string) $navItem['label'], ENT_QUOTES, 'UTF-8') ?>">
                    <span class="fate-mobile-dock__icon-wrap">
                        <span class="fate-mobile-dock__icon fate-mobile-dock__icon--<?= htmlspecialchars((string) $navItem['id'], ENT_QUOTES, 'UTF-8') ?>" aria-hidden="true"></span>
                    </span>
                </a>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
    </div>

    <button type="button"
            class="fate-mobile-dock__profile<?= $profileActive ? ' is-active' : '' ?>"
            aria-expanded="false"
            aria-controls="<?= htmlspecialchars($mbSheetId, ENT_QUOTES, 'UTF-8') ?>"
            aria-label="<?= $loggedIn ? '會員選單' : '登入或註冊' ?>">
        <?php if ($loggedIn && $avatarUrl !== null): ?>
            <img class="fate-mobile-dock__avatar" src="<?= htmlspecialchars($avatarUrl, ENT_QUOTES, 'UTF-8') ?>" alt="" width="92" height="92" decoding="async">
        <?php else: ?>
            <span class="fate-mobile-dock__avatar fate-mobile-dock__avatar--default" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="42" height="42" focusable="false">
                    <path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
            </span>
        <?php endif; ?>
    </button>
</div>
<div class="fate-mobile-bar__backdrop" data-fate-mobile-bar-backdrop hidden></div>
<div class="fate-mobile-bar__sheet fate-mobile-bar__sheet--member" id="<?= htmlspecialchars($mbSheetId, ENT_QUOTES, 'UTF-8') ?>" role="dialog" aria-modal="true" aria-label="會員" hidden>
    <div class="fate-mobile-bar__sheet-head">
        <p class="fate-mobile-bar__sheet-title">會員</p>
        <button type="button" class="fate-mobile-bar__sheet-close" data-fate-mobile-bar-close aria-label="關閉">×</button>
    </div>
    <?php if ($loggedIn): ?>
        <div class="fate-mobile-bar__sheet-user">
            <?php if ($avatarUrl !== null): ?>
                <img class="fate-mobile-bar__sheet-avatar" src="<?= htmlspecialchars($avatarUrl, ENT_QUOTES, 'UTF-8') ?>" alt="" width="48" height="48" decoding="async">
            <?php else: ?>
                <span class="fate-mobile-bar__sheet-avatar fate-mobile-dock__avatar--default" aria-hidden="true">
                    <svg viewBox="0 0 24 24" width="26" height="26" focusable="false">
                        <path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                    </svg>
                </span>
            <?php endif; ?>
            <div class="fate-mobile-bar__sheet-user-text">
                <p class="fate-mobile-bar__sheet-name"><?= htmlspecialchars($memberLabel, ENT_QUOTES, 'UTF-8') ?></p>
                <p class="fate-mobile-bar__sheet-meta"><?= htmlspecialchars($memberUsername, ENT_QUOTES, 'UTF-8') ?></p>
                <?php if ($memberNcoin !== null): ?>
                    <p class="fate-mobile-bar__sheet-ncoin">
                        <span class="fate-mobile-bar__sheet-ncoin-label"><?= htmlspecialchars($ncoinName, ENT_QUOTES, 'UTF-8') ?></span>
                        <span class="fate-mobile-bar__sheet-ncoin-amount"><?= htmlspecialchars(number_format($memberNcoin), ENT_QUOTES, 'UTF-8') ?></span>
                    </p>
                <?php endif; ?>
            </div>
        </div>
        <div class="fate-mobile-bar__sheet-actions">
            <a class="fate-mobile-bar__sheet-btn" href="<?= htmlspecialchars($prefix . 'member_profile.php', ENT_QUOTES, 'UTF-8') ?>">我的帳號</a>
            <a class="fate-mobile-bar__sheet-btn fate-mobile-bar__sheet-btn--ghost" href="<?= htmlspecialchars($prefix . 'logout.php', ENT_QUOTES, 'UTF-8') ?>">登出</a>
            <?php if ($adminNavVisible): ?>
                <a class="fate-mobile-bar__sheet-btn fate-mobile-bar__sheet-btn--ghost" href="<?= htmlspecialchars($prefix . 'admin/', ENT_QUOTES, 'UTF-8') ?>">後台</a>
            <?php endif; ?>
        </div>
    <?php else: ?>
        <p class="fate-mobile-bar__sheet-hint">登入後可查看帳號、<?= htmlspecialchars($ncoinName, ENT_QUOTES, 'UTF-8') ?>與收藏。</p>
        <div class="fate-mobile-bar__sheet-actions">
            <a class="fate-mobile-bar__sheet-btn" href="<?= htmlspecialchars($prefix . 'login.php?next=' . $loginNextQ, ENT_QUOTES, 'UTF-8') ?>">登入</a>
            <a class="fate-mobile-bar__sheet-btn fate-mobile-bar__sheet-btn--ghost" href="<?= htmlspecialchars($prefix . 'register.php?next=' . $loginNextQ, ENT_QUOTES, 'UTF-8') ?>">註冊</a>
            <?php if ($adminNavVisible): ?>
                <a class="fate-mobile-bar__sheet-btn fate-mobile-bar__sheet-btn--ghost" href="<?= htmlspecialchars($prefix . 'admin/', ENT_QUOTES, 'UTF-8') ?>">後台</a>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</div>
<div class="fate-mobile-bar__sheet fate-mobile-bar__sheet--search" id="<?= htmlspecialchars($mbSearchSheetId, ENT_QUOTES, 'UTF-8') ?>" role="dialog" aria-modal="true" aria-label="店家搜尋" hidden>
    <form class="fate-mobile-search-form" method="get" action="<?= htmlspecialchars($searchAction, ENT_QUOTES, 'UTF-8') ?>">
        <div class="fate-mobile-bar__sheet-head">
            <p class="fate-mobile-bar__sheet-title">店家搜尋</p>
            <button type="button" class="fate-mobile-bar__sheet-close" data-fate-mobile-bar-close aria-label="關閉">×</button>
        </div>
        <?php foreach ($searchHidden as $hiddenName => $hiddenValue): ?>
            <input type="hidden" name="<?= htmlspecialchars((string) $hiddenName, ENT_QUOTES, 'UTF-8') ?>" value="<?= htmlspecialchars((string) $hiddenValue, ENT_QUOTES, 'UTF-8') ?>">
        <?php endforeach; ?>
        <label class="fate-mobile-search-form__label" for="fate-mobile-search-q">店名、地址、電話或區域關鍵字</label>
        <div class="fate-mobile-search-form__row">
            <input class="fate-mobile-search-form__input"
                   type="search"
                   name="q"
                   id="fate-mobile-search-q"
                   maxlength="120"
                   autocomplete="off"
                   enterkeyhint="search"
                   placeholder="輸入關鍵字…"
                   value="<?= htmlspecialchars($searchQ, ENT_QUOTES, 'UTF-8') ?>">
            <button type="submit" class="fate-mobile-search-form__submit">搜尋</button>
        </div>
        <?php if ($searchQ !== ''): ?>
            <p class="fate-mobile-search-form__hint">
                目前關鍵字：<strong><?= htmlspecialchars($searchQ, ENT_QUOTES, 'UTF-8') ?></strong>
            </p>
        <?php endif; ?>
    </form>
</div>
