<?php
$isAdmin = (($_SESSION['usertype'] ?? '') === 'admins');
?>
<style>
<?php require_once(__DIR__ . '/../dictionary/dictionary.css'); ?>
</style>

<script>
    $('#navBox').html(
        '<li class="breadcrumb-item"><a href="index.php">Dashboard</a><i class="fad fa-angle-double-right mx-2 mt-1" aria-hidden="true"></i></li>' +
        '<li class="breadcrumb-item active">Dictionary</li>'
    );
</script>

<div class="dictionary-module">
    <div class="dictionary-header">
        <div>
            <h2 class="mb-1">Custom Dictionary</h2>
            <p class="mb-0 text-muted">Manage approved technical words used by the EnRep spelling review.</p>
        </div>
        <div class="dictionary-count" id="dictionaryCount">0 words</div>
    </div>

    <?php if (!$isAdmin) { ?>
        <div class="alert alert-warning mt-3">
            Dictionary management is restricted to administrators.
        </div>
    <?php } else { ?>
        <div class="dictionary-toolbar">
            <div class="dictionary-search">
                <i class="fad fa-search"></i>
                <input type="text" class="form-control" id="dictionarySearch" placeholder="Search dictionary words">
            </div>
            <div class="input-group dictionary-add">
                <input type="text" class="form-control" id="dictionaryNewWord" placeholder="Add word"
                    aria-label="Dictionary word" aria-describedby="dictionaryAddBtn">
                <button type="button" class="btn btn-success" id="dictionaryAddBtn">
                    <i class="fad fa-plus"></i>
                    Add
                </button>
            </div>
        </div>

        <div class="dictionary-csv-actions">
            <button type="button" class="btn btn-outline-primary btn-sm" id="dictionaryTemplateBtn">
                <i class="fad fa-file-csv"></i>
                Template
            </button>
            <button type="button" class="btn btn-outline-success btn-sm" id="dictionaryImportBtn">
                <i class="fad fa-file-import"></i>
                Import CSV
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm" id="dictionaryExportBtn">
                <i class="fad fa-file-export"></i>
                Export CSV
            </button>
        </div>

        <div class="note note-secondary mb-3" data-help-topic="dictionary_custom_words">
            <strong>Dictionary note:</strong> Add only reusable words that EnRep should accept across your reports. Use
            Ignore in the spelling review for one-off values, serial-like text, measurements, or site-specific wording.
        </div>

        <div class="dictionary-controls">
            <div class="dictionary-alpha" id="dictionaryAlpha"></div>
            <div class="dictionary-page-size">
                <label class="form-label mb-0" for="dictionaryPageSize">Show</label>
                <select class="form-select form-select-sm" id="dictionaryPageSize">
                    <option value="60">60</option>
                    <option value="120" selected>120</option>
                    <option value="240">240</option>
                </select>
            </div>
        </div>

        <div class="dictionary-summary" id="dictionarySummary">Loading dictionary...</div>

        <div class="dictionary-grid" id="dictionaryGrid">
            <div class="dictionary-empty">Loading dictionary...</div>
        </div>

        <div class="dictionary-pagination">
            <button type="button" class="btn btn-outline-secondary btn-sm" id="dictionaryPrev">
                <i class="fad fa-chevron-left"></i>
            </button>
            <span id="dictionaryPageStatus">Page 1</span>
            <button type="button" class="btn btn-outline-secondary btn-sm" id="dictionaryNext">
                <i class="fad fa-chevron-right"></i>
            </button>
        </div>

        <script src="<?= ROOT_URL ?>/includes/dictionary/dictionary.js?v=20260723c"></script>
    <?php } ?>
</div>
