{% extends "base.html" %}
{% block title %}مینی‌اپ تلگرام{% endblock %}
{% block content %}
<div class="dashboard">
{% include "_sidebar.html" %}
<main class="main">
<header class="topbar"><h2>✦ مینی‌اپ تلگرام</h2></header>
<div class="content">

<div class="card" style="margin-bottom:16px">
  <div class="card-title">اتصال HTTPS و دکمه ورود</div>
  <p class="muted" style="font-size:.88rem;margin-bottom:12px">آدرس عمومی مینی‌اپ (HTTPS) و کنترل دکمه «ورود به اپلیکیشن» در منوی ربات.</p>
  <form method="post" action="{{ url_for('miniapp_settings_save') }}">
    <div class="form-group"><label>آدرس مینی‌اپ</label>
      <input name="miniapp_url" value="{{ miniapp_url }}" placeholder="https://YOUR-DOMAIN/miniapp/" style="width:100%">
    </div>
    <div class="form-group"><label>متن دکمه ورود به اپلیکیشن</label>
      <input name="miniapp_btn_label" value="{{ miniapp_btn_label }}" placeholder="ورود به اپلیکیشن" style="width:100%">
    </div>
    <label style="display:flex;align-items:center;gap:8px;margin:10px 0">
      <input type="checkbox" name="miniapp_btn_enabled" value="1" {% if miniapp_btn_enabled %}checked{% endif %}>
      نمایش دکمه ورود به اپلیکیشن در منوی ربات
    </label>
    <hr style="margin:16px 0;opacity:.2">
    <div class="card-title" style="margin-bottom:8px">تایید خودکار کارت‌به‌کارت</div>
    <p class="muted" style="font-size:.85rem;margin-bottom:10px">اگر ادمین تا X دقیقه تایید نکرد، خودکار تایید شود. همچنین می‌توانید شناسه عددی کاربرانی که همیشه خودکار تایید می‌شوند را وارد کنید (با کاما).</p>
    <div class="form-group"><label>دقیقه تا تایید خودکار (0 = خاموش)</label>
      <input name="card_auto_approve_minutes" type="number" value="{{ card_auto_approve_minutes }}" style="width:100%">
    </div>
    <div class="form-group"><label>کاربران تایید خودکار (telegram id با کاما)</label>
      <input name="card_auto_approve_users" value="{{ card_auto_approve_users }}" placeholder="123456789,987654321" style="width:100%">
    </div>
    <button class="btn-primary inline" type="submit">ذخیره تنظیمات</button>
  </form>
  {% if miniapp_url %}
  <p style="margin-top:10px;font-size:.85rem">لینک: <a href="{{ miniapp_url }}" target="_blank">{{ miniapp_url }}</a></p>
  {% endif %}
</div>

<div class="card" style="margin-bottom:16px">
  <div class="card-title">باشگاه مشتریان — سطح‌بندی</div>
  <p class="muted" style="font-size:.85rem;margin-bottom:12px">نام سطوح و حداقل امتیاز هر سطح را مشخص کنید (از کم به زیاد).</p>
  <form method="post" action="{{ url_for('miniapp_loyalty_save') }}">
    <input type="hidden" name="action" value="levels">
    <div id="levelsBox">
      {% for lv in loyalty.levels %}
      <div style="display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap">
        <input name="level_name" value="{{ lv.name }}" placeholder="نام سطح" style="flex:1;min-width:120px">
        <input name="level_min" type="number" value="{{ lv.min_points }}" placeholder="حداقل امتیاز" style="width:140px">
      </div>
      {% endfor %}
      {% if not loyalty.levels %}
      <div style="display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap">
        <input name="level_name" value="Bronze" placeholder="نام سطح" style="flex:1;min-width:120px">
        <input name="level_min" type="number" value="0" style="width:140px">
      </div>
      {% endif %}
    </div>
    <button type="button" class="btn-secondary inline" onclick="addLevelRow()">+ سطح جدید</button>
    <button class="btn-primary inline" type="submit">ذخیره سطوح</button>
  </form>
</div>

<div class="card" style="margin-bottom:16px">
  <div class="card-title">باشگاه مشتریان — بسته‌های امتیازی</div>
  <p class="muted" style="font-size:.85rem;margin-bottom:12px">بسته ویژه در برابر کسر امتیاز مشخص. می‌توانید برای هر سطح حداقل سطح لازم بگذارید.</p>
  <form method="post" action="{{ url_for('miniapp_loyalty_save') }}" style="margin-bottom:16px">
    <input type="hidden" name="action" value="add_package">
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px">
      <div class="form-group"><label>عنوان بسته</label><input name="pkg_title" required></div>
      <div class="form-group"><label>هزینه (امتیاز)</label><input name="pkg_cost" type="number" value="100" required></div>
      <div class="form-group"><label>حداقل سطح</label>
        <select name="pkg_min_level">
          <option value="">همه</option>
          {% for lv in loyalty.levels %}
          <option value="{{ lv.name }}">{{ lv.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group"><label>نوع پاداش</label>
        <select name="pkg_reward_type">
          <option value="vpn">سرویس VPN هدیه</option>
          <option value="none">فقط ثبت (دستی)</option>
        </select>
      </div>
      <div class="form-group"><label>پنل مقصد</label>
        <select name="pkg_panel_id" required>
          <option value="">انتخاب پنل...</option>
          {% for pan in panels %}
          <option value="{{ pan.id }}">{{ pan.name }} ({{ pan.panel_type or 'panel' }})</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group"><label>حجم (GB)</label><input name="pkg_volume_gb" type="number" step="0.1" value="10"></div>
      <div class="form-group"><label>مدت (روز)</label><input name="pkg_duration_days" type="number" value="30"></div>
      <div class="form-group"><label>محدودیت کاربر (HWID / 0=نامحدود)</label><input name="pkg_hwid_limit" type="number" value="0"></div>
      <div class="form-group"><label>توضیح</label><input name="pkg_desc"></div>
    </div>
    <button class="btn-primary inline" type="submit">افزودن بسته</button>
  </form>
  {% if loyalty.packages %}
  <table class="table" style="width:100%;font-size:.9rem">
    <thead><tr><th>عنوان</th><th>امتیاز</th><th>سطح</th><th>پنل/حجم/روز</th><th></th></tr></thead>
    <tbody>
    {% for pkg in loyalty.packages %}
      <tr>
        <td>{{ pkg.title }}</td>
        <td>{{ pkg.points_cost }}</td>
        <td>{{ pkg.min_level or 'همه' }}</td>
        <td>پنل {{ pkg.panel_id or "—" }} · {{ pkg.volume_gb or "—" }}GB / {{ pkg.duration_days or "—" }}روز · HWID {{ pkg.hwid_limit or "∞" }}</td>
        <td>
          <form method="post" action="{{ url_for('miniapp_loyalty_save') }}" style="display:inline">
            <input type="hidden" name="action" value="del_package">
            <input type="hidden" name="package_id" value="{{ pkg.id }}">
            <button class="btn-danger inline" type="submit">حذف</button>
          </form>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="muted">هنوز بسته‌ای تعریف نشده.</p>
  {% endif %}
</div>
<script>
function addLevelRow(){
  var box=document.getElementById('levelsBox');
  var d=document.createElement('div');
  d.style.cssText='display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap';
  d.innerHTML='<input name="level_name" placeholder="نام سطح" style="flex:1;min-width:120px"><input name="level_min" type="number" value="0" placeholder="حداقل امتیاز" style="width:140px">';
  box.appendChild(d);
}
</script>

<div class="card" style="margin-bottom:16px">
  <div class="card-title">لوگوی مینی‌اپ (آپلود مستقیم)</div>
  <p class="muted" style="font-size:.85rem;margin-bottom:12px">به‌جای لینک، تصویر لوگو را مستقیم آپلود کنید (PNG/JPG/WebP، حداکثر ۲ مگابایت). بعد از آپلود به‌صورت خودکار در مینی‌اپ نمایش داده می‌شود.</p>
  <form method="post" action="{{ url_for('miniapp_logo_upload') }}" enctype="multipart/form-data" style="display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end">
    <div class="form-group" style="flex:1;min-width:200px">
      <label>فایل لوگو</label>
      <input type="file" name="logo" accept="image/png,image/jpeg,image/webp,image/gif">
    </div>
    <button type="submit" class="btn-primary">آپلود لوگو</button>
    {% if theme.logo_url %}
    <a class="btn-secondary" href="{{ theme.logo_url }}" target="_blank" rel="noopener">مشاهده لوگو فعلی</a>
    {% endif %}
  </form>
</div>

<div class="card" style="margin-bottom:16px">
  <div class="card-title">شخصی‌سازی کامل مینی‌اپ</div>
  <p class="muted" style="font-size:.85rem;margin-bottom:14px">با تغییر این‌ها ظاهر، متن‌ها و رفتار اپ عوض می‌شود — مثل یک اپ اختصاصی.</p>
  <form method="post" action="{{ url_for('miniapp_theme_save') }}">
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px">
      <div class="form-group"><label>نام برند</label><input name="brand_name" value="{{ theme.brand_name }}"></div>
      <div class="form-group"><label>زیرعنوان</label><input name="brand_sub" value="{{ theme.brand_sub }}"></div>
      <div class="form-group"><label>حرف لوگو (اگر تصویر نباشد)</label><input name="brand_mark" value="{{ theme.brand_mark }}" maxlength="2"></div>
      <div class="form-group"><label>آدرس لوگو (URL)</label><input name="logo_url" value="{{ theme.logo_url }}" placeholder="https://..."></div>
      <div class="form-group"><label>عنوان خوش‌آمد ({name} = نام کاربر)</label><input name="welcome_title" value="{{ theme.welcome_title }}"></div>
      <div class="form-group"><label>توضیح خوش‌آمد</label><input name="welcome_subtitle" value="{{ theme.welcome_subtitle }}"></div>
      <div class="form-group"><label>رنگ اصلی</label><input type="color" name="primary" value="{{ theme.primary }}"></div>
      <div class="form-group"><label>رنگ اصلی ۲</label><input type="color" name="primary_2" value="{{ theme.primary_2 }}"></div>
      <div class="form-group"><label>پس‌زمینه</label><input type="color" name="bg" value="{{ theme.bg }}"></div>
      <div class="form-group"><label>سطح کارت‌ها</label><input type="color" name="surface" value="{{ theme.surface }}"></div>
      <div class="form-group"><label>رنگ متن</label><input type="color" name="text" value="{{ theme.text }}"></div>
      <div class="form-group"><label>متن کم‌رنگ</label><input type="color" name="muted" value="{{ theme.muted }}"></div>
      <div class="form-group"><label>موفق</label><input type="color" name="success" value="{{ theme.success }}"></div>
      <div class="form-group"><label>خطر</label><input type="color" name="danger" value="{{ theme.danger }}"></div>
      <div class="form-group"><label>هشدار</label><input type="color" name="warning" value="{{ theme.warning }}"></div>
      <div class="form-group"><label>شعاع گوشه (px)</label><input type="number" name="radius" value="{{ theme.radius }}" min="8" max="32"></div>
      <div class="form-group"><label>فونت</label>
        <select name="font" class="form-select">
          <option value="Vazirmatn" {% if theme.font=='Vazirmatn' %}selected{% endif %}>وزیرمتن</option>
          <option value="Tahoma" {% if theme.font=='Tahoma' %}selected{% endif %}>Tahoma</option>
          <option value="system-ui" {% if theme.font=='system-ui' %}selected{% endif %}>سیستمی</option>
        </select>
      </div>
      <div class="form-group"><label>تب خانه</label><input name="tab_home" value="{{ theme.tab_home }}"></div>
      <div class="form-group"><label>تب سرویس</label><input name="tab_services" value="{{ theme.tab_services }}"></div>
      <div class="form-group"><label>تب کیف پول</label><input name="tab_wallet" value="{{ theme.tab_wallet }}"></div>
      <div class="form-group"><label>تب باشگاه</label><input name="tab_rewards" value="{{ theme.tab_rewards }}"></div>
      <div class="form-group"><label>تب پروفایل</label><input name="tab_profile" value="{{ theme.tab_profile }}"></div>
      <div class="form-group"><label>لینک پشتیبانی</label><input name="support_url" value="{{ theme.support_url }}" placeholder="https://t.me/..."></div>
    </div>
    <div style="display:flex;gap:16px;flex-wrap:wrap;margin:12px 0">
      <label><input type="checkbox" name="show_rewards" value="1" {% if theme.show_rewards=='1' %}checked{% endif %}> نمایش باشگاه</label>
      <label><input type="checkbox" name="show_news" value="1" {% if theme.show_news=='1' %}checked{% endif %}> نمایش اخبار</label>
      <label><input type="checkbox" name="show_banners" value="1" {% if theme.show_banners=='1' %}checked{% endif %}> نمایش بنر</label>
      <label><input type="checkbox" name="show_trial" value="1" {% if theme.show_trial=='1' %}checked{% endif %}> نمایش تست رایگان در باشگاه</label>
    </div>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px">
      <div class="form-group"><label>متن دکمه خرید (خانه)</label><input name="home_cta_buy" value="{{ theme.home_cta_buy }}"></div>
      <div class="form-group"><label>متن دکمه مدیریت سرویس</label><input name="home_cta_manage" value="{{ theme.home_cta_manage }}"></div>
      <div class="form-group"><label>عنوان خالی سرویس</label><input name="empty_services_title" value="{{ theme.empty_services_title }}"></div>
      <div class="form-group"><label>توضیح خالی سرویس</label><input name="empty_services_body" value="{{ theme.empty_services_body }}"></div>
      <div class="form-group"><label>عنوان مرحله ۱ خرید</label><input name="buy_step1_title" value="{{ theme.buy_step1_title }}"></div>
      <div class="form-group"><label>عنوان مرحله ۲ خرید</label><input name="buy_step2_title" value="{{ theme.buy_step2_title }}"></div>
      <div class="form-group"><label>عنوان مرحله ۳ خرید</label><input name="buy_step3_title" value="{{ theme.buy_step3_title }}"></div>
      <div class="form-group"><label>عنوان مرحله ۴ خرید</label><input name="buy_step4_title" value="{{ theme.buy_step4_title }}"></div>
    </div>
    <div class="form-group"><label>CSS سفارشی (پیشرفته)</label>
      <textarea name="custom_css" rows="4" placeholder=".topbar{...}">{{ theme.custom_css }}</textarea>
    </div>
    <div style="display:flex;gap:10px;flex-wrap:wrap">
      <button class="btn-primary inline" type="submit">ذخیره شخصی‌سازی</button>
      <button class="btn-danger inline" type="submit" name="reset_theme" value="1" onclick="return confirm('بازگشت به پیش‌فرض؟')">بازنشانی تم</button>
    </div>
  </form>
</div>

<div class="cards" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px">
  <div class="card">
    <h3>خبر جدید</h3>
    <form method="post" action="{{ url_for('miniapp_news_create') }}">
      <div class="form-group"><input name="title" placeholder="عنوان" required></div>
      <div class="form-group"><input name="image_url" placeholder="آدرس تصویر"></div>
      <div class="form-group"><input name="summary" placeholder="خلاصه"></div>
      <div class="form-group"><textarea name="content" placeholder="متن" rows="3"></textarea></div>
      <button class="btn-primary inline" type="submit">انتشار</button>
    </form>
  </div>
  <div class="card">
    <h3>بنر جدید</h3>
    <form method="post" action="{{ url_for('miniapp_banner_create') }}">
      <div class="form-group"><input name="title" placeholder="عنوان" required></div>
      <div class="form-group"><input name="description" placeholder="توضیح"></div>
      <div class="form-group"><input name="image_url" placeholder="تصویر"></div>
      <div class="form-group"><input name="cta" placeholder="متن دکمه"></div>
      <div class="form-group"><input name="link" placeholder="لینک"></div>
      <div class="form-group"><input name="priority" type="number" value="0"></div>
      <button class="btn-primary inline" type="submit">ذخیره</button>
    </form>
  </div>
  <div class="card">
    <h3>اعلان</h3>
    <form method="post" action="{{ url_for('miniapp_notification_create') }}">
      <div class="form-group"><input name="telegram_id" placeholder="Telegram ID خالی=همه"></div>
      <div class="form-group"><input name="title" placeholder="عنوان" required></div>
      <div class="form-group"><textarea name="body" required rows="3"></textarea></div>
      <button class="btn-primary inline" type="submit">ارسال</button>
    </form>
  </div>
</div>

<div class="card" style="margin-top:16px">
  <h3>خبرها</h3>
  <table class="data-table"><thead><tr><th>عنوان</th><th>وضعیت</th><th>تاریخ</th></tr></thead><tbody>
  {% for n in news %}<tr><td>{{ n.title }}</td><td>{{ 'فعال' if n.is_active else 'خاموش' }}</td><td>{{ n.created_at }}</td></tr>{% else %}<tr><td colspan="3">خالی</td></tr>{% endfor %}
  </tbody></table>
</div>
</div></main></div>
{% endblock %}