<?php
$rows = $rows ?? [];
$groups = $groups ?? [];
$success = $_SESSION['flash_success'] ?? '';
$error = $_SESSION['flash_error'] ?? '';
unset($_SESSION['flash_success'], $_SESSION['flash_error']);
?>

<div class="container-fluid py-3">

    <div class="card border-0 shadow-sm mb-4" style="border-radius:24px;background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff;">
        <div class="card-body p-4 d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <h3 class="fw-bold mb-1"><i class="fa fa-language"></i> <?= eh(t('dictionary.title','Translation Dictionary')) ?></h3>
                <div class="opacity-75">Manage all Arabic/English labels, menu items, buttons, statuses, and page texts.</div>
            </div>

            <div class="d-flex gap-2">
                <a class="btn btn-light rounded-pill" href="/easychair/lang?set=ar">العربية</a>
                <a class="btn btn-outline-light rounded-pill" href="/easychair/lang?set=en">English</a>
            </div>
        </div>
    </div>

    <?php if ($success): ?>
        <div class="alert alert-success"><?= eh($success) ?></div>
    <?php endif; ?>

    <?php if ($error): ?>
        <div class="alert alert-danger"><?= eh($error) ?></div>
    <?php endif; ?>

    <div class="card border-0 shadow-sm mb-4" style="border-radius:22px;">
        <div class="card-body p-4">
            <h5 class="fw-bold mb-3"><?= eh(t('action.add','Add')) ?> Translation Key</h5>

            <form method="post" action="/easychair/admin/dictionary/store" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label fw-bold"><?= eh(t('dictionary.key','Key')) ?></label>
                    <input name="translation_key" class="form-control" placeholder="submission.new" required>
                </div>

                <div class="col-md-2">
                    <label class="form-label fw-bold"><?= eh(t('dictionary.group','Group')) ?></label>
                    <input name="group_key" class="form-control" placeholder="submission">
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-bold"><?= eh(t('dictionary.text_en','English Text')) ?></label>
                    <input name="text_en" class="form-control" dir="ltr">
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-bold"><?= eh(t('dictionary.text_ar','Arabic Text')) ?></label>
                    <input name="text_ar" class="form-control" dir="rtl">
                </div>

                <div class="col-md-1">
                    <label class="form-label fw-bold">&nbsp;</label>
                    <button class="btn btn-success w-100"><?= eh(t('action.add','Add')) ?></button>
                </div>

                <div class="col-12">
                    <input name="description" class="form-control" placeholder="Description / usage notes">
                </div>
            </form>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4" style="border-radius:22px;">
        <div class="card-body p-4">
            <form method="get" action="/easychair/admin/dictionary" class="row g-2 align-items-end">
                <div class="col-md-5">
                    <label class="form-label fw-bold"><?= eh(t('action.search','Search')) ?></label>
                    <input name="q" value="<?= eh($_GET['q'] ?? '') ?>" class="form-control" placeholder="key or text">
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-bold"><?= eh(t('dictionary.group','Group')) ?></label>
                    <select name="group" class="form-select">
                        <option value="">All</option>
                        <?php foreach ($groups as $g): ?>
                            <option value="<?= eh($g) ?>" <?= (($_GET['group'] ?? '') === $g) ? 'selected' : '' ?>>
                                <?= eh($g) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <div class="col-md-3">
                    <button class="btn btn-primary w-100"><?= eh(t('action.filter','Filter')) ?></button>
                </div>
            </form>
        </div>
    </div>

    <form method="post" action="/easychair/admin/dictionary/save">
        <div class="card border-0 shadow-sm" style="border-radius:22px;">
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-bordered align-middle">
                        <thead class="table-dark">
                        <tr>
                            <th style="min-width:220px;"><?= eh(t('dictionary.key','Key')) ?></th>
                            <th style="min-width:140px;"><?= eh(t('dictionary.group','Group')) ?></th>
                            <th style="min-width:260px;"><?= eh(t('dictionary.text_en','English Text')) ?></th>
                            <th style="min-width:260px;"><?= eh(t('dictionary.text_ar','Arabic Text')) ?></th>
                            <th>Description</th>
                            <th><?= eh(t('dictionary.active','Active')) ?></th>
                            <th><?= eh(t('action.delete','Delete')) ?></th>
                        </tr>
                        </thead>
                        <tbody>
                        <?php foreach ($rows as $r): ?>
                            <tr>
                                <td>
                                    <strong><?= eh($r['translation_key']) ?></strong>
                                    <div class="text-muted small">#<?= (int)$r['id'] ?></div>
                                </td>

                                <td>
                                    <input name="rows[<?= (int)$r['id'] ?>][group_key]" class="form-control" value="<?= eh($r['group_key'] ?? '') ?>">
                                </td>

                                <td>
                                    <textarea name="rows[<?= (int)$r['id'] ?>][text_en]" rows="2" class="form-control" dir="ltr"><?= eh($r['text_en'] ?? '') ?></textarea>
                                </td>

                                <td>
                                    <textarea name="rows[<?= (int)$r['id'] ?>][text_ar]" rows="2" class="form-control" dir="rtl"><?= eh($r['text_ar'] ?? '') ?></textarea>
                                </td>

                                <td>
                                    <input name="rows[<?= (int)$r['id'] ?>][description]" class="form-control" value="<?= eh($r['description'] ?? '') ?>">
                                </td>

                                <td class="text-center">
                                    <input type="checkbox" name="rows[<?= (int)$r['id'] ?>][is_active]" value="1" <?= !empty($r['is_active']) ? 'checked' : '' ?>>
                                </td>

                                <td>
                                    <a class="btn btn-sm btn-danger"
                                       onclick="return confirm('Delete this translation key?')"
                                       href="/easychair/admin/dictionary/delete?id=<?= (int)$r['id'] ?>">
                                        <?= eh(t('action.delete','Delete')) ?>
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>

                        <?php if (!$rows): ?>
                            <tr><td colspan="7" class="text-center text-muted py-4">No dictionary rows found.</td></tr>
                        <?php endif; ?>
                        </tbody>
                    </table>
                </div>

                <button class="btn btn-success btn-lg rounded-pill px-5">
                    <i class="fa fa-save"></i>
                    <?= eh(t('action.save','Save')) ?>
                </button>
            </div>
        </div>
    </form>
</div>
