<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مدیریت متن‌های ربات (نسخه کارتی)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tahoma', 'Arial', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .container {
            max-width: 800px;
            width: 100%;
        }

        h1 {
            color: #333;
            margin-bottom: 30px;
            text-align: center;
            font-size: 2rem;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        /* کارت اصلی فرم */
        .card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 25px;
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card h2 {
            color: #4a4a4a;
            margin-bottom: 20px;
            font-size: 1.5rem;
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 10px;
        }

        /* فرم افزودن */
        .text-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-group label {
            font-weight: bold;
            color: #555;
            font-size: 0.95rem;
        }

        .form-group input,
        .form-group textarea {
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
            background-color: #fafafa;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #1e88e5;
            background-color: #fff;
        }

        /* دکمه براق آبی */
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            background: linear-gradient(145deg, #2196f3, #1976d2);
            color: white;
            box-shadow: 0 4px 10px rgba(33, 150, 243, 0.4), 0 2px 4px rgba(0,0,0,0.2);
            border: 1px solid rgba(255,255,255,0.3);
        }

        .btn:hover {
            background: linear-gradient(145deg, #42a5f5, #1e88e5);
            box-shadow: 0 6px 14px rgba(33, 150, 243, 0.6), 0 2px 4px rgba(0,0,0,0.2);
            transform: translateY(-2px);
        }

        .btn:active {
            transform: translateY(1px);
            box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4);
        }

        /* دکمه‌های کوچک در کارت‌ها */
        .btn-icon {
            padding: 8px 12px;
            font-size: 0.9rem;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        /* محفظه کارت‌های متن */
        .items-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* کارت هر متن */
        .item-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            padding: 18px;
            transition: all 0.3s;
            border-right: 5px solid #2196f3;
        }

        .item-card:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .item-key {
            background: #e3f2fd;
            color: #0d47a1;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            display: inline-block;
        }

        .item-actions {
            display: flex;
            gap: 8px;
        }

        .item-text {
            color: #333;
            line-height: 1.6;
            margin-bottom: 10px;
            word-break: break-word;
            background: #f9f9f9;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid #eee;
        }

        /* باکس ویرایش (مخفی در ابتدا) */
        .edit-box {
            margin-top: 15px;
            display: none;
            flex-direction: column;
            gap: 12px;
            background: #f5f5f5;
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #ddd;
        }

        .edit-box textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #ccc;
            border-radius: 8px;
            font-size: 1rem;
            resize: vertical;
            min-height: 80px;
        }

        .edit-box textarea:focus {
            border-color: #2196f3;
            outline: none;
        }

        .edit-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-start;
        }

        .btn-save {
            background: linear-gradient(145deg, #4caf50, #388e3c);
            box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4);
        }

        .btn-cancel {
            background: linear-gradient(145deg, #9e9e9e, #616161);
            box-shadow: 0 4px 10px rgba(158, 158, 158, 0.4);
        }

        /* موبایل */
        @media (max-width: 600px) {
            .item-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .item-actions {
                width: 100%;
                justify-content: flex-end;
            }

            .btn-icon {
                padding: 6px 10px;
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🤖 مدیریت متن‌های ربات</h1>

        <!-- کارت افزودن متن جدید -->
        <div class="card">
            <h2>➕ افزودن متن جدید</h2>
            <form class="text-form" id="addForm" onsubmit="event.preventDefault(); addNewItem();">
                <div class="form-group">
                    <label for="newKey">🔑 کلید:</label>
                    <input type="text" id="newKey" placeholder="مثال: welcome_message" required>
                </div>
                <div class="form-group">
                    <label for="newText">📄 متن:</label>
                    <textarea id="newText" rows="2" placeholder="متن مورد نظر را وارد کنید..." required></textarea>
                </div>
                <button type="submit" class="btn">💾 افزودن متن</button>
            </form>
        </div>

        <!-- کارت لیست متن‌ها -->
        <div class="card">
            <h2>📋 لیست متن‌های موجود</h2>
            <div class="items-container" id="itemsContainer">
                <!-- کارت‌ها توسط جاوااسکریپت ساخته می‌شوند -->
            </div>
        </div>
    </div>

    <script>
        // داده‌های اولیه (دمو)
        let texts = [
            { id: 1, key: 'welcome_message', text: 'به ربات خوش آمدید! برای شروع از دستور /start استفاده کنید.' },
            { id: 2, key: 'help_text', text: 'راهنما: دستورات موجود - /help, /about, /contact' },
            { id: 3, key: 'error_message', text: 'خطایی رخ داده است. لطفاً دوباره تلاش کنید.' },
            { id: 4, key: 'about_bot', text: 'این ربات برای مدیریت متن‌ها طراحی شده است.' }
        ];

        // عناصر DOM
        const container = document.getElementById('itemsContainer');

        // تابع نمایش همه کارت‌ها
        function renderItems() {
            container.innerHTML = '';
            texts.forEach(item => {
                const card = createCard(item);
                container.appendChild(card);
            });
        }

        // تابع ساخت کارت
        function createCard(item) {
            const cardDiv = document.createElement('div');
            cardDiv.className = 'item-card';
            cardDiv.dataset.id = item.id;

            // هدر کارت
            const header = document.createElement('div');
            header.className = 'item-header';

            const keySpan = document.createElement('span');
            keySpan.className = 'item-key';
            keySpan.textContent = item.key;

            const actionsDiv = document.createElement('div');
            actionsDiv.className = 'item-actions';

            // دکمه مداد (ویرایش)
            const editBtn = document.createElement('button');
            editBtn.className = 'btn btn-icon';
            editBtn.innerHTML = '✏️ ویرایش';
            editBtn.onclick = (e) => {
                e.stopPropagation();
                toggleEditBox(cardDiv);
            };

            // دکمه بازنشانی (برگشت به متن اولیه)
            const resetBtn = document.createElement('button');
            resetBtn.className = 'btn btn-icon';
            resetBtn.innerHTML = '🔄 بازنشانی';
            resetBtn.onclick = (e) => {
                e.stopPropagation();
                resetText(item.id);
            };

            actionsDiv.appendChild(editBtn);
            actionsDiv.appendChild(resetBtn);

            header.appendChild(keySpan);
            header.appendChild(actionsDiv);

            // متن اصلی
            const textDiv = document.createElement('div');
            textDiv.className = 'item-text';
            textDiv.id = `text-${item.id}`;
            textDiv.textContent = item.text;

            // باکس ویرایش (مخفی)
            const editBox = document.createElement('div');
            editBox.className = 'edit-box';
            editBox.id = `edit-${item.id}`;

            const textarea = document.createElement('textarea');
            textarea.value = item.text;
            textarea.id = `textarea-${item.id}`;

            const editActions = document.createElement('div');
            editActions.className = 'edit-actions';

            const saveBtn = document.createElement('button');
            saveBtn.className = 'btn btn-save';
            saveBtn.textContent = '💾 ذخیره';
            saveBtn.onclick = () => {
                const newText = textarea.value.trim();
                if (newText) {
                    updateText(item.id, newText);
                    hideEditBox(cardDiv);
                } else {
                    alert('لطفاً متنی وارد کنید.');
                }
            };

            const cancelBtn = document.createElement('button');
            cancelBtn.className = 'btn btn-cancel';
            cancelBtn.textContent = '❌ انصراف';
            cancelBtn.onclick = () => hideEditBox(cardDiv);

            editActions.appendChild(saveBtn);
            editActions.appendChild(cancelBtn);

            editBox.appendChild(textarea);
            editBox.appendChild(editActions);

            cardDiv.appendChild(header);
            cardDiv.appendChild(textDiv);
            cardDiv.appendChild(editBox);

            return cardDiv;
        }

        // توابع کمکی برای نمایش/مخفی کردن باکس ویرایش
        function toggleEditBox(card) {
            const editBox = card.querySelector('.edit-box');
            if (editBox.style.display === 'flex') {
                editBox.style.display = 'none';
            } else {
                // ابتدا همه باکس‌های ویرایش را مخفی کن (اختیاری)
                document.querySelectorAll('.edit-box').forEach(box => box.style.display = 'none');
                editBox.style.display = 'flex';
                // فوکوس روی textarea
                const textarea = editBox.querySelector('textarea');
                if (textarea) textarea.focus();
            }
        }

        function hideEditBox(card) {
            const editBox = card.querySelector('.edit-box');
            editBox.style.display = 'none';
        }

        // به‌روزرسانی متن در آرایه و صفحه
        function updateText(id, newText) {
            const item = texts.find(t => t.id === id);
            if (item) {
                item.text = newText;
                const textDiv = document.getElementById(`text-${id}`);
                if (textDiv) textDiv.textContent = newText;
                // آپدیت textarea داخل edit box هم می‌شود اما نیاز نیست
            }
        }

        // بازنشانی به متن پیش‌فرض (اینجا اولین متن ذخیره شده به عنوان پیش‌فرض در نظر گرفته می‌شود)
        function resetText(id) {
            const defaultTexts = {
                1: 'به ربات خوش آمدید! برای شروع از دستور /start استفاده کنید.',
                2: 'راهنما: دستورات موجود - /help, /about, /contact',
                3: 'خطایی رخ داده است. لطفاً دوباره تلاش کنید.',
                4: 'این ربات برای مدیریت متن‌ها طراحی شده است.'
            };
            if (defaultTexts[id]) {
                updateText(id, defaultTexts[id]);
            } else {
                // برای آیتم‌های جدید، یک پیش‌فرض کلی
                updateText(id, 'متن پیش‌فرض');
            }
        }

        // افزودن متن جدید از فرم
        function addNewItem() {
            const keyInput = document.getElementById('newKey');
            const textInput = document.getElementById('newText');
            const key = keyInput.value.trim();
            const text = textInput.value.trim();

            if (!key || !text) {
                alert('لطفاً کلید و متن را وارد کنید.');
                return;
            }

            // ساخت id جدید
            const newId = texts.length > 0 ? Math.max(...texts.map(t => t.id)) + 1 : 1;
            const newItem = { id: newId, key, text };
            texts.push(newItem);

            // کارت جدید را به DOM اضافه کن
            const newCard = createCard(newItem);
            container.appendChild(newCard);

            // پاک کردن فرم
            keyInput.value = '';
            textInput.value = '';
        }

        // مقداردهی اولیه
        renderItems();
    </script>
</body>
</html>