<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>User Profile</title>
    <link rel="stylesheet" href="/static/admin.css">
    <script src="/static/admin-nav.js" defer></script>
    <style>
        .profile-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
        .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
        .avatar-fallback { display: flex; align-items: center; justify-content: center;
            background: var(--info-bg); color: var(--info-fg); font-size: 36px; font-weight: 600; }
        .details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
        .details dt { color: var(--muted); }
        .details dd { margin: 0; word-break: break-word; }
        tr.highlight td { background: var(--warning-bg); }
    </style>
</head>

<body>
    <% function toUrl(raw) { const n=(raw || '' ).replace(/\\/g, '/' );
        return n.startsWith('http') || n.startsWith('/') ? n : '/' + n; }
        function fmt(d) { return d ? new Date(d).toLocaleString('en-IN', { timeZone: 'Asia/Kolkata' }) : '—' ; }
        const displayName=user.name || user.username || ('User #' + user.id); %>
    <div class="container">
        <p><a href="/admin/redeem-product-orders">&larr; Back to redeem orders</a></p>

        <div class="card">
            <div class="profile-head">
                <% if (user.profile_picture) { %>
                    <img class="avatar" src="<%= toUrl(user.profile_picture) %>" alt="<%= displayName %>">
                <% } else { %>
                    <div class="avatar avatar-fallback"><%= displayName.charAt(0).toUpperCase() %></div>
                <% } %>
                <div>
                    <h1 style="margin: 0;"><%= displayName %></h1>
                    <div class="muted">
                        User #<%= user.id %><% if (user.username) { %> &middot; @<%= user.username %><% } %>
                    </div>
                    <div class="row-flex" style="margin-top: 10px;">
                        <% if (user.is_block || user.disable) { %>
                            <span class="badge danger"><%= user.is_block ? 'Blocked' : 'Disabled' %></span>
                        <% } %>
                        <span class="badge info"><%= user.total_points %> pts</span>
                        <% if (user.phone_number) { %>
                            <a class="btn btn-sm" href="tel:<%= user.phone_number %>">Call</a>
                        <% } %>
                        <% if (user.email) { %>
                            <a class="btn btn-sm btn-ghost" href="mailto:<%= user.email %>">Email</a>
                        <% } %>
                        <a class="btn btn-sm btn-ghost" target="_blank" rel="noopener"
                            href="https://cricketfanapp.com/open/profile/<%= user.id %>">Open in app</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <h2>Account details</h2>
            <dl class="details">
                <dt>Phone</dt><dd><%= user.phone_number || '—' %></dd>
                <dt>Email</dt><dd><%= user.email || '—' %></dd>
                <dt>Address</dt><dd><%= user.address || '—' %></dd>
                <dt>Location</dt><dd><%= user.location || '—' %></dd>
                <dt>Joined</dt><dd><%= fmt(user.created_at) %></dd>
                <dt>Last login</dt><dd><%= fmt(user.last_login) %></dd>
            </dl>
        </div>

        <div class="card">
            <h2>Redeemed products (<%= redemptions.length %>)</h2>
            <% if (redemptions.length === 0) { %>
                <p class="muted">This user has not redeemed any product.</p>
            <% } else { %>
                <div class="table-wrap">
                    <table>
                        <thead>
                            <tr>
                                <th>Order</th>
                                <th>Product</th>
                                <th>Shipping details</th>
                                <th>Redeemed on</th>
                                <th>Status</th>
                                <th class="right">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <% redemptions.forEach(function(r) { %>
                                <tr id="order-<%= r.id %>" class="<%= highlightOrder === r.id ? 'highlight' : '' %>">
                                    <td class="muted">#<%= r.id %></td>
                                    <td>
                                        <div class="row-flex">
                                            <img src="<%= toUrl(r.product_image) %>" alt="" width="40" height="40" style="object-fit: cover;">
                                            <div>
                                                <strong><%= r.product_name %></strong>
                                                <div class="muted"><%= r.points %> pts</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div><%= r.name || '—' %></div>
                                        <div class="muted"><%= r.phone || '' %> <%= r.email || '' %></div>
                                        <div class="muted"><%= r.address || '' %></div>
                                    </td>
                                    <td class="nowrap"><%= fmt(r.created_at) %></td>
                                    <td><span class="badge <%= r.status %>"><%= r.status %></span></td>
                                    <td class="right"><a class="btn btn-sm" href="/admin/change-status/<%= r.id %>">Change status</a></td>
                                </tr>
                            <% }) %>
                        </tbody>
                    </table>
                </div>
            <% } %>
        </div>
    </div>
    <script>
        // Order se aaye hain to wahi row dikhao.
        const row = document.querySelector('tr.highlight');
        if (row) row.scrollIntoView({ block: 'center' });
    </script>
</body>

</html>
