<?php
$pageTitle = "Members – Seven O'Clock Dinner Club";

$targetUserId = (int)($_GET['user_id'] ?? 0);

$stmt = $db->prepare('
    SELECT
        u.id AS user_id,
        m.display_name,
        m.photo_url,
        m.short_bio,
        m.city,
        m.links_json
    FROM member_profiles m
    JOIN users u ON u.id = m.user_id
    WHERE u.status = "active"
    ORDER BY u.created_at DESC
');
$stmt->execute();
$members = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
?>

<section class="page-grid">
    <div class="card" data-animate-initial>
        <div class="muted" style="font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px;">
            Our Regulars
        </div>
        <h1 style="font-family: 'Georgia', 'Times New Roman', serif; font-weight: 400; font-size: 26px; margin: 0 0 12px;">
            The handsomest dinner enthusiasts.
        </h1>
    </div>

    <div class="card" data-animate>
        <?php if (!$members): ?>
            <p class="muted" style="font-size: 13px;">
                The first invitations are being prepared. Members will appear here as the circle opens.
            </p>
        <?php else: ?>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;">
                <?php foreach ($members as $member): ?>
                    <?php $memberUserId = (int)($member['user_id'] ?? 0); ?>
                    <article
                        id="<?= 'member-' . $memberUserId ?>"
                        style="border-radius: 14px; border: 1px solid rgba(0,0,0,0.06); padding: 16px 16px 18px; background: rgba(255,255,255,0.8);"
                    >
                        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                            <div style="width: 44px; height: 44px; border-radius: 999px; overflow: hidden; background: #e1d7cb; display:flex; align-items:center; justify-content:center; font-size: 18px; font-family:'Georgia','Times New Roman',serif;">
                                <?php if (!empty($member['photo_url'])): ?>
                                    <button type="button" data-image-full="<?= htmlspecialchars($member['photo_url'], ENT_QUOTES, 'UTF-8') ?>" style="all: unset; width: 100%; height: 100%; cursor: zoom-in;">
                                        <img src="<?= htmlspecialchars($member['photo_url'], ENT_QUOTES, 'UTF-8') ?>" alt="" style="width: 100%; height: 100%; object-fit: cover; border-radius: 999px;">
                                    </button>
                                <?php else: ?>
                                    <?= htmlspecialchars(strtoupper(mb_substr($member['display_name'], 0, 1)), ENT_QUOTES, 'UTF-8') ?>
                                <?php endif; ?>
                            </div>
                            <div>
                                <div style="font-size: 14px; font-weight: 500;">
                                    <?= htmlspecialchars($member['display_name'], ENT_QUOTES, 'UTF-8') ?>
                                </div>
                                <?php if (!empty($member['city'])): ?>
                                    <div class="muted" style="font-size: 12px;">
                                        <?= htmlspecialchars($member['city'], ENT_QUOTES, 'UTF-8') ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?php if (!empty($member['short_bio'])): ?>
                            <p class="muted" style="font-size: 13px; line-height: 1.6; margin: 0 0 8px;">
                                <?= nl2br(htmlspecialchars($member['short_bio'], ENT_QUOTES, 'UTF-8')) ?>
                            </p>
                        <?php endif; ?>
                        <?php if (!empty($member['links_json'])): ?>
                            <?php
                            $decoded = json_decode($member['links_json'], true);
                            $links = is_array($decoded) ? $decoded : [];
                            ?>
                            <?php if ($links): ?>
                                <div style="margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px;">
                                    <?php foreach ($links as $label => $url): ?>
                                        <?php
                                        // Support both associative arrays (label => url) and numeric arrays ([url1, url2, ...])
                                        if (is_int($label)) {
                                            $url = $url;
                                            $host = parse_url($url, PHP_URL_HOST);
                                            $displayLabel = $host ?: 'Link ' . ($label + 1);
                                        } else {
                                            $displayLabel = $label;
                                        }
                                        ?>
                                        <a href="<?= htmlspecialchars($url, ENT_QUOTES, 'UTF-8') ?>" class="pill" style="font-size: 10px; padding: 5px 10px;" target="_blank" rel="noreferrer">
                                            <?= htmlspecialchars($displayLabel, ENT_QUOTES, 'UTF-8') ?>
                                        </a>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                        <?php endif; ?>
                    </article>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</section>

<?php if ($targetUserId > 0): ?>
    <script>
        (function () {
            document.addEventListener('DOMContentLoaded', function () {
                var el = document.getElementById('member-<?= (int)$targetUserId ?>');
                if (!el) return;
                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
                el.style.boxShadow = '0 0 0 3px rgba(178,146,99,0.25)';
            });
        })();
    </script>
<?php endif; ?>