<!DOCTYPE html>
<html lang="ko" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>텔레그램 봇 테스트 | 신라 AMP</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'sans-serif']
          }
        }
      }
    };
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
</head>
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white min-h-screen flex items-center justify-center px-4 font-sans">

  <div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg p-8 rounded-2xl shadow-2xl w-full max-w-md transition-all">
    <div class="text-center mb-6">
      <h1 class="text-3xl font-bold tracking-tight text-white">📱 텔레그램 봇 테스트</h1>
      <p class="text-sm text-gray-400 mt-2">관리자 전용 기능</p>
    </div>

    <!-- Django 메시지 표시 -->
    {% if messages %}
      {% for message in messages %}
        <div class="p-4 rounded-lg mb-4 {% if message.tags == 'success' %}bg-green-600{% else %}bg-red-600{% endif %} text-white">
          {{ message }}
        </div>
      {% endfor %}
    {% endif %}

    <div class="space-y-4">
      <div class="bg-gray-700 bg-opacity-50 p-4 rounded-xl">
        <h3 class="text-lg font-semibold mb-2">🤖 봇 정보</h3>
        <div class="text-sm text-gray-300 space-y-1">
          <p><strong>토큰:</strong> {{ settings.TELEGRAM_BOT_TOKEN|slice:":10" }}...</p>
          <p><strong>채팅 ID:</strong> {{ settings.TELEGRAM_CHAT_ID }}</p>
        </div>
      </div>

      <form method="POST" class="space-y-4">
        {% csrf_token %}
        <button type="submit"
          class="w-full py-3 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl text-white font-semibold text-base transition duration-200 shadow-md hover:shadow-lg">
          🚀 테스트 메시지 전송
        </button>
      </form>

      <div class="text-center">
        <a href="{% url 'main' %}" class="text-gray-400 hover:text-gray-300 transition text-sm">
          ← 메인 페이지로 돌아가기
        </a>
      </div>
    </div>
  </div>

  <script>
    // 메시지 자동 숨기기
    setTimeout(function() {
      const messages = document.querySelectorAll('.bg-green-600, .bg-red-600');
      messages.forEach(function(message) {
        message.style.transition = 'opacity 0.5s';
        message.style.opacity = '0';
        setTimeout(function() {
          message.remove();
        }, 500);
      });
    }, 3000);
  </script>
</body>
</html>
