@model BCards.Web.Models.UserPage
@{
    var seo = ViewBag.SeoSettings as BCards.Web.Models.SeoSettings;
    var category = ViewBag.Category as BCards.Web.Models.Category;
    var isPreview = ViewBag.IsPreview as bool? ?? false;
    
    ViewData["Title"] = seo?.Title ?? $"{Model.DisplayName} - {category?.Name}";
    Layout = isPreview ? "_Layout" : "_UserPageLayout";
}

@if (!isPreview)
{
    @section Styles {
        <style>
            @Html.Raw(await Html.PartialAsync("_ThemeStyles", Model.Theme))
        </style>
    }
}

<div class="user-page min-vh-100 d-flex align-items-center py-4">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8">
                <div class="profile-card text-center mx-auto">
                    <!-- Profile Image -->
                    @if (!string.IsNullOrEmpty(Model.ProfileImage))
                    {
                        <img src="@Model.ProfileImage" alt="@Model.DisplayName" class="profile-image mb-3">
                    }
                    else
                    {
                        <div class="profile-image-placeholder mb-3 mx-auto d-flex align-items-center justify-content-center">
                            <i class="fs-1">👤</i>
                        </div>
                    }

                    <!-- Profile Info -->
                    <h1 class="profile-name">@Model.DisplayName</h1>
                    
                    @if (!string.IsNullOrEmpty(Model.Bio))
                    {
                        <p class="profile-bio">@Model.Bio</p>
                    }

                    <!-- Links -->
                    <div class="links-container">
                        @if (Model.Links?.Any(l => l.IsActive) == true)
                        {
                            @for (int i = 0; i < Model.Links.Count; i++)
                            {
                                var link = Model.Links[i];
                                if (link.IsActive)
                                {
                                    <a href="@link.Url" 
                                       target="_blank" 
                                       rel="noopener noreferrer"
                                       class="link-button"
                                       data-link-index="@i"
                                       onclick="recordClick('@Model.Id', @i)">
                                        @if (!string.IsNullOrEmpty(link.Icon))
                                        {
                                            <span class="link-icon me-2">@link.Icon</span>
                                        }
                                        <div>
                                            <div class="link-title">@link.Title</div>
                                            @if (!string.IsNullOrEmpty(link.Description))
                                            {
                                                <div class="link-description">@link.Description</div>
                                            }
                                        </div>
                                    </a>
                                }
                            }
                        }
                        else
                        {
                            <div class="text-muted">
                                <p>Nenhum link disponível no momento.</p>
                            </div>
                        }
                    </div>

                    <!-- Footer -->
                    <div class="profile-footer mt-4 pt-3 border-top">
                        <small class="text-muted">
                            Criado com <a href="@Url.Action("Index", "Home")" class="text-decoration-none">BCards</a>
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if (isPreview)
{
    <div class="position-fixed top-0 start-0 w-100 bg-warning text-dark text-center py-2" style="z-index: 9999;">
        <strong>MODO PREVIEW</strong> - Esta é uma prévia da sua página
    </div>
}

@section Scripts {
    <script>
        function recordClick(pageId, linkIndex) {
            // Record click asynchronously
            fetch('/click/' + pageId, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ linkIndex: linkIndex })
            }).catch(function(error) {
                console.log('Error recording click:', error);
            });
        }
    </script>
}