@implements IDisposable
@using TuringMachine.Core
@inject IJSRuntime JS
@inject LocalizationService Loc

<div class="transition-table" @ref="tableContainer">
    <h3>@Loc["label.actionTable"]</h3>
    <table class="table table-bordered table-sm">
        <thead>
            <tr>
                <th class="col-no">@Loc["table.no"]</th>
                <th class="col-state">@Loc["table.currentState"]</th>
                <th class="col-symbol">@Loc["table.read"]</th>
                <th class="col-state">@Loc["table.newState"]</th>
                <th class="col-symbol">@Loc["table.write"]</th>
                <th class="col-move">@Loc["table.move"]</th>
                <th class="col-comment">@Loc["table.comment"]</th>
            </tr>
        </thead>
        <tbody>
            @{
                int rowIndex = 0;
            }
            @foreach (var item in Transitions.Items)
            {
                var isActive = CurrentState == item.Key.State && (CurrentReadSymbol == item.Key.ReadSymbol);
                var rowId = $"row-{rowIndex}";
                rowIndex++;
                <tr class="@(isActive ? "active" : "")" id="@rowId">
                    <td class="col-no">@rowIndex</td>
                    <td class="col-state">@item.Key.State</td>
                    <td class="col-symbol">@item.Key.ReadSymbol</td>
                    <td class="col-state">@item.Value.NewState</td>
                    <td class="col-symbol">@item.Value.WriteSymbol</td>
                    <td class="col-move">@item.Value.MoveDirection</td>
                    <td class="col-comment">@item.Value.Comment</td>
                </tr>
                if (isActive)
                {
                    activeRowId = rowId;
                }
            }
        </tbody>
    </table>
</div>

<style>
    .transition-table {
        margin-top: 20px;
        height: 370px;
        overflow-y: auto;
        resize: vertical;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background-color: var(--bg-secondary);
    }

    .transition-table h3 {
        padding: 10px;
        margin: 0;
        font-size: 1rem;
        font-weight: bold;
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-color);
    }

    .transition-table table {
        width: 100%;
        margin-bottom: 0;
        table-layout: auto;
    }

    /* 컬럼 폭 설정 - 데이터 컬럼은 내용에 맞게 축소, 주석 컬럼은 나머지 공간 차지 */
    .col-no {
        width: 1%;
        white-space: nowrap;
        text-align: center;
    }

    .col-state {
        width: 1%;
        white-space: nowrap;
    }

    .col-symbol {
        width: 1%;
        white-space: nowrap;
        text-align: center;
    }

    .col-move {
        width: 1%;
        white-space: nowrap;
        text-align: center;
    }

    .col-comment {
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        padding: 8px;
    }

    .transition-table tbody tr {
        transition: background-color 0.2s;
    }

    .transition-table tbody tr.active {
        background-color: var(--table-active-bg);
        font-weight: bold;
    }

    .transition-table tbody tr:hover {
        background-color: var(--bg-tertiary);
    }
</style>

@code {
    [Parameter] public TransitionTable Transitions { get; set; } = new();
    [Parameter] public string CurrentState { get; set; } = string.Empty;
    [Parameter] public char CurrentReadSymbol { get; set; }

    private ElementReference tableContainer;
    private string? activeRowId;

    protected override void OnInitialized()
    {
        Loc.OnLanguageChanged += OnLanguageChanged;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!string.IsNullOrEmpty(activeRowId))
        {
            await JS.InvokeVoidAsync("scrollToElement", activeRowId);
        }
    }

    private void OnLanguageChanged() => InvokeAsync(StateHasChanged);

    public void Dispose()
    {
        Loc.OnLanguageChanged -= OnLanguageChanged;
    }
}