<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title ? ("Telegram Bot Paneli - " + title) : 'Telegram Bot Paneli' %></title>
    <meta name="description" content="<%- (typeof metaDescription !== 'undefined' && metaDescription) ? metaDescription : 'Telegram gönderilerini planla, logları takip et, modern panel ile kanallarını yönet.' %>">
    <% if (typeof canonicalUrl !== 'undefined' && canonicalUrl) { %>
      <link rel="canonical" href="<%= canonicalUrl %>">
    <% } %>
    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="<%= title ? ("Telegram Bot Paneli - " + title) : 'Telegram Bot Paneli' %>">
    <meta property="og:description" content="<%- (typeof metaDescription !== 'undefined' && metaDescription) ? metaDescription : 'Telegram gönderilerini planla, logları takip et, modern panel ile kanallarını yönet.' %>">
    <% if (typeof canonicalUrl !== 'undefined' && canonicalUrl) { %>
      <meta property="og:url" content="<%= canonicalUrl %>">
    <% } %>
    <% if (typeof ogImage !== 'undefined' && ogImage) { %>
      <meta property="og:image" content="<%= ogImage %>">
    <% } %>
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<%= title ? ("Telegram Bot Paneli - " + title) : 'Telegram Bot Paneli' %>">
    <meta name="twitter:description" content="<%- (typeof metaDescription !== 'undefined' && metaDescription) ? metaDescription : 'Telegram gönderilerini planla, logları takip et, modern panel ile kanallarını yönet.' %>">
    <% if (typeof ogImage !== 'undefined' && ogImage) { %>
      <meta name="twitter:image" content="<%= ogImage %>">
    <% } %>
    
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- Corporate web font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style> html, body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji'; } </style>
    
</head>
<body class="bg-base-200" id="appBody">
  <% if (typeof user !== 'undefined' && user) { %>
  <div class="drawer lg:drawer-open">
    <input id="app-drawer" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content flex flex-col">
      <!-- Navbar -->
      <div class="navbar bg-base-100 shadow-sm sticky top-0 z-10">
        <div class="flex-none lg:hidden">
          <label for="app-drawer" aria-label="open sidebar" class="btn btn-ghost btn-square">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
          </label>
        </div>
        <div class="flex-1">
          <a href="/" class="btn btn-ghost normal-case text-xl"><i class="fab fa-telegram mr-2"></i>Telegram Bot</a>
        </div>
        <div class="flex-none">
          <label class="label cursor-pointer mr-2 hidden sm:flex">
            <span class="label-text mr-2">Tema</span>
            <input id="themeToggle" type="checkbox" class="toggle toggle-primary" />
          </label>
          <a href="/posts/new" class="btn btn-primary btn-sm mr-2 hidden sm:inline-flex"><i class="fas fa-plus-circle mr-2"></i>Yeni</a>
          <a href="/auth/logout" class="btn btn-error btn-sm">Çıkış</a>
        </div>
      </div>

      <!-- Main content -->
      <main class="p-4 md:p-6">
        <% if (typeof usageSummary !== 'undefined' && usageSummary) { %>
          <% const warnCh = (usageSummary.channels.limit>0 && usageSummary.channels.pct>=80);
             const warnPs = (usageSummary.posts.limit>0 && usageSummary.posts.pct>=80);
             const warnSj = (usageSummary.schedules.limit>0 && usageSummary.schedules.pct>=80);
             const anyWarn = warnCh || warnPs || warnSj; %>
          <% if (anyWarn) { %>
            <div class="alert alert-warning shadow mb-4">
              <div>
                <span class="font-semibold mr-2">Uyarı:</span>
                <% if (warnCh) { %>
                  <span class="badge badge-warning mr-2">Kanal kullanımı <%= usageSummary.channels.pct %>%</span>
                <% } %>
                <% if (warnPs) { %>
                  <span class="badge badge-warning mr-2">Aylık gönderim <%= usageSummary.posts.pct %>%</span>
                <% } %>
                <% if (warnSj) { %>
                  <span class="badge badge-warning">Planlı iş <%= usageSummary.schedules.pct %>%</span>
                <% } %>
                <span class="ml-2 text-xs text-gray-600">Dönem bitişi: <%= new Date(usageSummary.periodEnd).toLocaleString('tr-TR') %></span>
              </div>
            </div>
          <% } %>
        <% } %>
        <%- body %>
      </main>
    </div>
    <div class="drawer-side">
      <label for="app-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
      <aside class="w-64 min-h-full bg-base-100 border-r">
        <div class="px-4 py-4 flex items-center gap-2 text-primary">
          <i class="fab fa-telegram fa-lg"></i>
          <span class="font-bold">Telegram Bot</span>
        </div>
        <ul class="menu px-2">
          <li><a href="/posts"><i class="fas fa-layer-group w-4"></i>Paylaşımlar</a></li>
          <li class="mt-1"><a href="/pools"><i class="fas fa-random w-4"></i>Havuz Planları</a></li>
          <li><a href="/delivery"><i class="fas fa-paper-plane w-4"></i>Gönderim Logları</a></li>
          <li><a href="/channels"><i class="fas fa-hashtag w-4"></i>Kanallar</a></li>
          <% if (Array.isArray(permissions) && permissions.includes('manage_users')) { %>
            <li><a href="/admin"><i class="fas fa-shield-alt w-4"></i>Admin (özel)</a></li>
          <% } %>
          <li><a href="/posts/new"><i class="fas fa-plus-circle w-4"></i>Yeni Paylaşım</a></li>
          <li><a href="/account/plan"><i class="fas fa-user-cog w-4"></i>Planım & Kullanım</a></li>
          <li><a href="/auth/change-password"><i class="fas fa-key w-4"></i>Şifre Değiştir</a></li>
          <li class="mt-2"><a href="/auth/logout" class="text-error"><i class="fas fa-sign-out-alt w-4"></i>Çıkış Yap</a></li>
        </ul>
      </aside>
    </div>
  </div>
  <% } else { %>
    <%- body %>
  <% } %>

    <!-- Scripts -->
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- Tema toggle (localStorage: theme = 'corporate' | 'business') -->
    <script>
      (function() {
        const body = document.documentElement;
        const key = 'theme';
        const current = localStorage.getItem(key) || 'corporate';
        body.setAttribute('data-theme', current);
        const toggle = document.getElementById('themeToggle');
        if (toggle) {
          toggle.checked = current === 'business';
          toggle.addEventListener('change', function() {
            const next = this.checked ? 'business' : 'corporate';
            body.setAttribute('data-theme', next);
            localStorage.setItem(key, next);
          });
        }
        // Drawer state persistence
        const drawerKey = 'drawerOpen';
        const drawer = document.getElementById('app-drawer');
        const saved = localStorage.getItem(drawerKey);
        if (drawer) {
          // default open if nothing saved
          if (saved === null) {
            drawer.checked = true;
            localStorage.setItem(drawerKey, 'true');
          } else {
            drawer.checked = saved === 'true';
          }
          drawer.addEventListener('change', function(){
            localStorage.setItem(drawerKey, this.checked ? 'true' : 'false');
          });
        }
      })();
    </script>
    <!-- Toast data carrier (read by /js/toast.js) -->
    <div id="toast-data" style="display:none"
         data-errors='<%- JSON.stringify((typeof errors !== 'undefined' && errors.length) ? (errors.map(e => e.msg || e)) : []) %>'
         data-success="<%- typeof success_msg !== 'undefined' ? encodeURIComponent(success_msg) : '' %>"
         data-error="<%- typeof error_msg !== 'undefined' ? encodeURIComponent(error_msg) : '' %>"></div>
    <script src="/js/toast.js"></script>
  </body>
</html>
