RpgRoller/RpgRoller/Components/Pages/Home.razor

@page "/"
@implements IAsyncDisposable

<div class="rr-app">
    <p class="sr-only" aria-live="polite">@LiveAnnouncement</p>

    @if (!IsInitialized)
    {
        <main class="loading-shell" aria-busy="true" aria-live="polite">
            <h1>RpgRoller</h1>
            <p>Connecting...</p>
        </main>
    }
    else
    {
        @if (HasHealthIssue)
        {
            <section class="health-banner" role="alert">
                <div>
                    <strong>API currently unavailable.</strong>
                    <p>@HealthIssueMessage</p>
                </div>
                <button type="button" @onclick="RetryAfterHealthIssueAsync">Retry</button>
            </section>
        }

        @if (User is null)
        {
            <main class="auth-shell">
                <h1>RpgRoller</h1>
                <p class="auth-subtitle">Register or log in to join a campaign session.</p>
                @if (!string.IsNullOrWhiteSpace(StatusMessage))
                {
                    <p class="status-message @(StatusIsError ? "error" : "success")">@StatusMessage</p>
                }
                <div class="auth-grid">
                    <section class="card auth-card">
                        <h2>Register</h2>
                        @if (!string.IsNullOrWhiteSpace(RegisterFormError))
                        {
                            <p class="form-error">@RegisterFormError</p>
                        }
                        <form class="form-grid" @onsubmit="RegisterAsync" @onsubmit:preventDefault>
                            <label for="register-username">Username</label>
                            <input id="register-username" @bind="RegisterForm.Username" @bind:event="oninput" autocomplete="username" />
                            @if (RegisterErrors.TryGetValue("username", out var registerUsernameError))
                            {
                                <p class="field-error">@registerUsernameError</p>
                            }
                            <label for="register-display-name">Display name</label>
                            <input id="register-display-name" @bind="RegisterForm.DisplayName" @bind:event="oninput" autocomplete="name" />
                            @if (RegisterErrors.TryGetValue("displayName", out var registerDisplayNameError))
                            {
                                <p class="field-error">@registerDisplayNameError</p>
                            }
                            <label for="register-password">Password</label>
                            <input id="register-password" type="password" @bind="RegisterForm.Password" @bind:event="oninput" autocomplete="new-password" />
                            @if (RegisterErrors.TryGetValue("password", out var registerPasswordError))
                            {
                                <p class="field-error">@registerPasswordError</p>
                            }
                            <button type="submit" disabled="@IsMutating">@(IsMutating ? "Registering..." : "Register")</button>
                        </form>
                    </section>

                    <section class="card auth-card">
                        <h2>Login</h2>
                        @if (!string.IsNullOrWhiteSpace(LoginFormError))
                        {
                            <p class="form-error">@LoginFormError</p>
                        }
                        <form class="form-grid" @onsubmit="LoginAsync" @onsubmit:preventDefault>
                            <label for="login-username">Username</label>
                            <input id="login-username" @bind="LoginForm.Username" @bind:event="oninput" autocomplete="username" />
                            @if (LoginErrors.TryGetValue("username", out var loginUsernameError))
                            {
                                <p class="field-error">@loginUsernameError</p>
                            }
                            <label for="login-password">Password</label>
                            <input id="login-password" type="password" @bind="LoginForm.Password" @bind:event="oninput" autocomplete="current-password" />
                            @if (LoginErrors.TryGetValue("password", out var loginPasswordError))
                            {
                                <p class="field-error">@loginPasswordError</p>
                            }
                            <button type="submit" disabled="@IsMutating">@(IsMutating ? "Logging in..." : "Login")</button>
                        </form>
                    </section>
                </div>
            </main>
        }
        else
        {
            <div class="workspace-shell">
                <header class="workspace-header">
                    <div class="header-group brand">
                        <h1>RpgRoller</h1>
                        <p>Tabletop utility cockpit</p>
                    </div>
                    <div class="header-group context">
                        <p><strong>@User.DisplayName</strong> <span class="muted">(@User.Username)</span></p>
                        <p>Campaign: <strong>@(SelectedCampaignName ?? "No campaign selected")</strong></p>
                        <p>Active: <strong>@(ActiveCharacterName ?? "None selected")</strong></p>
                    </div>
                    <div class="header-group controls">
                        <p class="connection @ConnectionStateCssClass">@ConnectionStateLabel</p>
                        <div class="switch-group" role="tablist" aria-label="Screen selector">
                            <button type="button" class="switch @(CurrentScreen == "play" ? "active" : string.Empty)" @onclick="SwitchToPlayAsync">Play</button>
                            <button type="button" class="switch @(CurrentScreen == "management" ? "active" : string.Empty)" @onclick="SwitchToManagementAsync">Campaign Management</button>
                        </div>
                        <div class="header-actions">
                            <button type="button" @onclick="ManualRefreshAsync" disabled="@IsMutating">Refresh</button>
                            <button type="button" class="ghost" @onclick="LogoutAsync" disabled="@IsMutating">Logout</button>
                        </div>
                    </div>
                </header>

                @if (!string.IsNullOrWhiteSpace(StatusMessage))
                {
                    <p class="status-message @(StatusIsError ? "error" : "success")">@StatusMessage</p>
                }

                @if (CurrentScreen == "play")
                {
                    <main class="play-screen @(MobilePanel == "log" ? "mobile-log" : "mobile-character")">
                        <section class="card character-panel">
                            <div class="section-head"><h2>Character Context</h2></div>
                            @if (IsCampaignDataLoading)
                            {
                                <div class="skeleton-stack"><div class="skeleton-line"></div><div class="skeleton-line short"></div><div class="skeleton-line"></div></div>
                            }
                            else if (SelectedCampaign is null)
                            {
                                <p class="empty">No campaign selected. Choose one in Campaign Management.</p>
                            }
                            else if (SelectedCampaign.Characters.Count == 0)
                            {
                                <p class="empty">No characters in this campaign yet.</p>
                            }
                            else
                            {
                                <div class="character-picker" role="tablist" aria-label="Character picker">
                                    @foreach (var character in SelectedCampaign.Characters)
                                    {
                                        var isSelectedCharacter = SelectedCharacterId == character.Id;
                                        <button type="button" class="icon-tab @(isSelectedCharacter ? "active" : string.Empty)" aria-label="@character.Name" @onclick="() => SelectCharacter(character.Id)">
                                            <span class="icon-tab-glyph">@InitialsFor(character.Name)</span>
                                            <span class="icon-tab-text">@character.Name</span>
                                        </button>
                                    }
                                </div>
                                @if (SelectedCharacter is not null)
                                {
                                    <article class="character-sheet">
                                        <h3>@SelectedCharacter.Name</h3>
                                        <p>Owner: @OwnerLabel(SelectedCharacter.OwnerUserId)</p>
                                        <p>Campaign: @SelectedCampaign.Name</p>
                                        @if (SelectedCharacter.Id == ActiveCharacterId)
                                        {
                                            <span class="badge active">Active</span>
                                        }
                                        <div class="inline-actions">
                                            <button type="button" disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))" @onclick="() => OpenEditCharacterModal(SelectedCharacter)">Edit Character</button>
                                            <button type="button" disabled="@(IsMutating || !CanActivateCharacter(SelectedCharacter))" @onclick="() => ActivateCharacterAsync(SelectedCharacter.Id)">Activate Character</button>
                                        </div>
                                    </article>
                                    <article class="skills-section">
                                        <div class="section-head">
                                            <h3>Skills</h3>
                                            <div class="inline-actions">
                                                <button type="button" disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))" @onclick="OpenCreateSkillModal">Create Skill</button>
                                                <button type="button" disabled="@(IsMutating || SelectedSkill is null || !CanEditSkill(SelectedSkill))" @onclick="OpenEditSkillModal">Edit Skill</button>
                                            </div>
                                        </div>
                                        @if (SelectedCharacterSkills.Count == 0)
                                        {
                                            <p class="empty">No skills for this character yet.</p>
                                        }
                                        else
                                        {
                                            <div class="skill-list">
                                                @foreach (var skill in SelectedCharacterSkills)
                                                {
                                                    var isSelectedSkill = SelectedSkillId == skill.Id;
                                                    <button type="button" class="skill-item @(isSelectedSkill ? "active" : string.Empty)" @onclick="() => SelectSkill(skill.Id)">
                                                        <strong>@skill.Name</strong><span>@SkillDefinitionLabel(skill)</span>
                                                    </button>
                                                }
                                            </div>
                                        }
                                        <form class="roll-panel" @onsubmit="RollSelectedSkillAsync" @onsubmit:preventDefault>
                                            <label for="roll-visibility">Visibility</label>
                                            <select id="roll-visibility" @bind="RollVisibility">
                                                <option value="public">Public</option>
                                                <option value="private">Private</option>
                                            </select>
                                            <button type="submit" disabled="@(IsMutating || SelectedSkill is null || !CanRollSkill(SelectedSkill))">Roll Skill</button>
                                        </form>
                                    </article>
                                }
                            }
                            <article class="last-roll">
                                <h3>Last Roll</h3>
                                @if (LastRoll is null)
                                {
                                    <p class="empty">No roll yet.</p>
                                }
                                else
                                {
                                    <p class="roll-total">@LastRoll.Result</p>
                                    @if (LastRoll.Dice.Count > 0)
                                    {
                                        <div class="roll-dice-strip" aria-label="Rolled dice">
                                            @foreach (var die in LastRoll.Dice)
                                            {
                                                <span class="@RollDieCssClass(die)" title="@RollDieTitle(die)">@RollDieGlyph(die.Roll)</span>
                                            }
                                        </div>
                                    }
                                    <p>@LastRoll.Breakdown</p>
                                    <p><span class="badge @(LastRoll.Visibility == "private" ? "private-self" : "public")">@LastRoll.Visibility</span> <time title="@LastRoll.TimestampUtc.ToString("O")">@LastRoll.TimestampUtc.ToLocalTime().ToString("g")</time></p>
                                }
                            </article>
                        </section>

                        <aside class="card log-panel">
                            <div class="section-head"><h2>Campaign Log</h2></div>
                            @if (IsCampaignDataLoading)
                            {
                                <div class="skeleton-stack"><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line short"></div></div>
                            }
                            else if (CampaignLog.Count == 0)
                            {
                                <p class="empty">No log entries yet.</p>
                            }
                            else
                            {
                                <ul class="log-list">
                                    @foreach (var entry in CampaignLog)
                                    {
                                        <li class="log-entry @LogEntryCssClass(entry)">
                                            <p><strong>@RollerLabel(entry)</strong> rolled <strong>@SkillLabel(entry.SkillId)</strong> with <strong>@CharacterLabel(entry.CharacterId)</strong></p>
                                            <p>@entry.Breakdown</p>
                                            <p class="log-meta"><span class="badge @VisibilityBadgeCssClass(entry)">@VisibilityLabel(entry)</span> <time title="@entry.TimestampUtc.ToString("O")">@entry.TimestampUtc.ToLocalTime().ToString("g")</time></p>
                                        </li>
                                    }
                                </ul>
                            }
                        </aside>
                    </main>
                    <nav class="mobile-bottom-nav" aria-label="Play panel selector">
                        <button type="button" class="switch @(MobilePanel == "character" ? "active" : string.Empty)" @onclick="SetMobilePanelCharacterAsync">Character</button>
                        <button type="button" class="switch @(MobilePanel == "log" ? "active" : string.Empty)" @onclick="SetMobilePanelLogAsync">Log</button>
                    </nav>
                }
                else
                {
                    <main class="management-screen">
                        <section class="card">
                            <h2>Campaign Selector</h2>
                            @if (Campaigns.Count == 0)
                            {
                                <p class="empty">No campaigns yet.</p>
                            }
                            else
                            {
                                <label for="campaign-select">Campaign</label>
                                <select id="campaign-select" @onchange="OnCampaignSelectionChangedAsync">
                                    @foreach (var campaign in Campaigns)
                                    {
                                        <option value="@campaign.Id" selected="@(campaign.Id == SelectedCampaignId)">@campaign.Name (@campaign.RulesetId)</option>
                                    }
                                </select>
                            }
                            <p class="muted">Current campaign in this tab: <strong>@(SelectedCampaignName ?? "None selected")</strong></p>
                        </section>
                        <section class="card">
                            <h2>Create Campaign</h2>
                            @if (!string.IsNullOrWhiteSpace(CampaignFormError))
                            {
                                <p class="form-error">@CampaignFormError</p>
                            }
                            <form class="form-grid" @onsubmit="CreateCampaignAsync" @onsubmit:preventDefault>
                                <label for="campaign-name">Campaign name</label>
                                <input id="campaign-name" @bind="CampaignForm.Name" @bind:event="oninput" />
                                @if (CampaignErrors.TryGetValue("name", out var campaignNameError))
                                {
                                    <p class="field-error">@campaignNameError</p>
                                }
                                <label for="campaign-ruleset">Ruleset</label>
                                <select id="campaign-ruleset" @bind="CampaignForm.RulesetId">
                                    <option value="">Select ruleset</option>
                                    @foreach (var ruleset in Rulesets)
                                    {
                                        <option value="@ruleset.Id">@ruleset.Name</option>
                                    }
                                </select>
                                @if (CampaignErrors.TryGetValue("rulesetId", out var campaignRulesetError))
                                {
                                    <p class="field-error">@campaignRulesetError</p>
                                }
                                <button type="submit" disabled="@IsMutating">@(IsMutating ? "Creating..." : "Create Campaign")</button>
                            </form>
                        </section>
                        <section class="card">
                            <h2>Campaign Details</h2>
                            @if (SelectedCampaign is null)
                            {
                                <p class="empty">No campaign selected.</p>
                            }
                            else
                            {
                                <p>Name: <strong>@SelectedCampaign.Name</strong></p>
                                <p>Ruleset: <strong>@SelectedCampaign.RulesetId</strong></p>
                                <p>GM: <strong>@SelectedCampaign.Gm.DisplayName</strong> <span class="muted">(@SelectedCampaign.Gm.Username)</span></p>
                                <p>Characters visible: <strong>@SelectedCampaign.Characters.Count</strong></p>
                            }
                        </section>
                        <section class="card">
                            <div class="section-head">
                                <h2>Character Management</h2>
                                <button type="button" disabled="@(IsMutating || SelectedCampaign is null)" @onclick="OpenCreateCharacterModal">Create Character</button>
                            </div>
                            @if (SelectedCampaign is null)
                            {
                                <p class="empty">Select a campaign first.</p>
                            }
                            else if (SelectedCampaign.Characters.Count == 0)
                            {
                                <p class="empty">No characters in this campaign yet.</p>
                            }
                            else
                            {
                                <ul class="management-list">
                                    @foreach (var character in SelectedCampaign.Characters)
                                    {
                                        <li>
                                            <div><strong>@character.Name</strong><p class="muted">Owner: @OwnerLabel(character.OwnerUserId)</p></div>
                                            <div class="inline-actions">
                                                <button type="button" disabled="@(IsMutating || !CanEditCharacter(character))" @onclick="() => OpenEditCharacterModal(character)">Edit</button>
                                                <button type="button" disabled="@(IsMutating || !CanActivateCharacter(character))" @onclick="() => ActivateCharacterAsync(character.Id)">Activate</button>
                                            </div>
                                        </li>
                                    }
                                </ul>
                            }
                        </section>
                    </main>
                }
            </div>
        }
    }
</div>

@if (ShowCreateCharacterModal)
{
    <div class="modal-overlay" role="presentation">
        <section class="modal-card" role="dialog" aria-modal="true" aria-label="Create character">
            <h2>Create Character</h2>
            @if (!string.IsNullOrWhiteSpace(CharacterFormError))
            {
                <p class="form-error">@CharacterFormError</p>
            }
            <form class="form-grid" @onsubmit="CreateCharacterAsync" @onsubmit:preventDefault>
                <label for="character-create-name">Character name</label>
                <input id="character-create-name" @bind="CharacterForm.Name" @bind:event="oninput" />
                @if (CharacterErrors.TryGetValue("name", out var createCharacterNameError))
                {
                    <p class="field-error">@createCharacterNameError</p>
                }
                <label for="character-create-campaign">Campaign</label>
                <select id="character-create-campaign" @bind="CharacterForm.CampaignId">
                    <option value="">Select campaign</option>
                    @foreach (var campaign in Campaigns)
                    {
                        <option value="@campaign.Id">@campaign.Name</option>
                    }
                </select>
                <div class="inline-actions">
                    <button type="submit" disabled="@IsMutating">Create Character</button>
                    <button type="button" class="ghost" @onclick="CloseCharacterModals">Cancel</button>
                </div>
            </form>
        </section>
    </div>
}

@if (ShowEditCharacterModal)
{
    <div class="modal-overlay" role="presentation">
        <section class="modal-card" role="dialog" aria-modal="true" aria-label="Edit character">
            <h2>Edit Character</h2>
            @if (!string.IsNullOrWhiteSpace(EditCharacterFormError))
            {
                <p class="form-error">@EditCharacterFormError</p>
            }
            <form class="form-grid" @onsubmit="UpdateCharacterAsync" @onsubmit:preventDefault>
                <label for="character-edit-name">Character name</label>
                <input id="character-edit-name" @bind="EditCharacterForm.Name" @bind:event="oninput" />
                @if (EditCharacterErrors.TryGetValue("name", out var editCharacterNameError))
                {
                    <p class="field-error">@editCharacterNameError</p>
                }
                <label for="character-edit-campaign">Campaign</label>
                <select id="character-edit-campaign" @bind="EditCharacterForm.CampaignId">
                    <option value="">Select campaign</option>
                    @foreach (var campaign in Campaigns)
                    {
                        <option value="@campaign.Id">@campaign.Name</option>
                    }
                </select>
                <div class="inline-actions">
                    <button type="submit" disabled="@IsMutating">Save Character</button>
                    <button type="button" class="ghost" @onclick="CloseCharacterModals">Cancel</button>
                </div>
            </form>
        </section>
    </div>
}

@if (ShowCreateSkillModal)
{
    <div class="modal-overlay" role="presentation">
        <section class="modal-card" role="dialog" aria-modal="true" aria-label="Create skill">
            <h2>Create Skill</h2>
            @if (!string.IsNullOrWhiteSpace(SkillFormError))
            {
                <p class="form-error">@SkillFormError</p>
            }
            <form class="form-grid" @onsubmit="CreateSkillAsync" @onsubmit:preventDefault>
                <label for="skill-create-name">Skill name</label>
                <input id="skill-create-name" @bind="SkillForm.Name" @bind:event="oninput" />
                @if (SkillErrors.TryGetValue("name", out var createSkillNameError))
                {
                    <p class="field-error">@createSkillNameError</p>
                }
                <label for="skill-create-expression">Expression</label>
                <input id="skill-create-expression" @bind="SkillForm.DiceRollDefinition" @bind:event="oninput" />
                @if (SkillErrors.TryGetValue("diceRollDefinition", out var createSkillExpressionError))
                {
                    <p class="field-error">@createSkillExpressionError</p>
                }
                @if (IsSelectedCampaignD6)
                {
                    <label for="skill-create-wild-dice">Wild dice</label>
                    <input id="skill-create-wild-dice" type="number" min="1" step="1" @bind="SkillForm.WildDice" />
                    @if (SkillErrors.TryGetValue("wildDice", out var createSkillWildDiceError))
                    {
                        <p class="field-error">@createSkillWildDiceError</p>
                    }
                    <label for="skill-create-allow-fumble">Allow fumble</label>
                    <input id="skill-create-allow-fumble" type="checkbox" @bind="SkillForm.AllowFumble" />
                }
                <div class="inline-actions">
                    <button type="submit" disabled="@IsMutating">Create Skill</button>
                    <button type="button" class="ghost" @onclick="CloseSkillModals">Cancel</button>
                </div>
            </form>
        </section>
    </div>
}

@if (ShowEditSkillModal)
{
    <div class="modal-overlay" role="presentation">
        <section class="modal-card" role="dialog" aria-modal="true" aria-label="Edit skill">
            <h2>Edit Skill</h2>
            @if (!string.IsNullOrWhiteSpace(EditSkillFormError))
            {
                <p class="form-error">@EditSkillFormError</p>
            }
            <form class="form-grid" @onsubmit="UpdateSkillAsync" @onsubmit:preventDefault>
                <label for="skill-edit-name">Skill name</label>
                <input id="skill-edit-name" @bind="EditSkillForm.Name" @bind:event="oninput" />
                @if (EditSkillErrors.TryGetValue("name", out var editSkillNameError))
                {
                    <p class="field-error">@editSkillNameError</p>
                }
                <label for="skill-edit-expression">Expression</label>
                <input id="skill-edit-expression" @bind="EditSkillForm.DiceRollDefinition" @bind:event="oninput" />
                @if (EditSkillErrors.TryGetValue("diceRollDefinition", out var editSkillExpressionError))
                {
                    <p class="field-error">@editSkillExpressionError</p>
                }
                @if (IsSelectedCampaignD6)
                {
                    <label for="skill-edit-wild-dice">Wild dice</label>
                    <input id="skill-edit-wild-dice" type="number" min="1" step="1" @bind="EditSkillForm.WildDice" />
                    @if (EditSkillErrors.TryGetValue("wildDice", out var editSkillWildDiceError))
                    {
                        <p class="field-error">@editSkillWildDiceError</p>
                    }
                    <label for="skill-edit-allow-fumble">Allow fumble</label>
                    <input id="skill-edit-allow-fumble" type="checkbox" @bind="EditSkillForm.AllowFumble" />
                }
                <div class="inline-actions">
                    <button type="submit" disabled="@IsMutating">Save Skill</button>
                    <button type="button" class="ghost" @onclick="CloseSkillModals">Cancel</button>
                </div>
            </form>
        </section>
    </div>
}