<?php
// Tings Dashboard - Simple Single File (No GridStack)
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tings Dashboard</title>
  <style>
    :root {
      --bg: #0a0a14;
      --section: #1a1a2e;
      --accent: #00ffcc;
    }
    body {
      margin: 0;
      background: var(--bg);
      color: #eee;
      font-family: system-ui, sans-serif;
      height: 100vh;
      overflow: auto;
    }
    header {
      padding: 15px 20px;
      background: #111827;
      display: flex;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;
      border-bottom: 3px solid var(--accent);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    h1 { margin: 0; color: var(--accent); }
    button {
      padding: 10px 18px;
      background: #16213e;
      color: #eee;
      border: 1px solid #445;
      border-radius: 6px;
      cursor: pointer;
    }
    button:hover { background: #1e2a4a; }
    #edit-btn { font-weight: bold; }

    .sections-container {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    .section {
      background: var(--section);
      border: 2px solid #445577;
      border-radius: 10px;
      width: 380px;
      min-height: 300px;
      display: flex;
      flex-direction: column;
    }
    .section-header {
      background: #16213e;
      padding: 12px 16px;
      font-weight: bold;
      color: var(--accent);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: move;
    }
    .tings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 12px;
      padding: 16px;
      flex: 1;
    }
    .ting {
      background: rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 12px 8px;
      text-align: center;
      cursor: pointer;
      transition: 0.2s;
    }
    .ting:hover {
      background: rgba(0,255,204,0.2);
      transform: scale(1.08);
    }
    .ting div { font-size: 2.6rem; margin-bottom: 6px; }
    .add-ting {
      border: 2px dashed #666;
      color: #aaa;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
    }
  </style>
</head>
<body>

  <header>
    <h1>Tings</h1>
    <button id="edit-btn">Edit Mode: OFF</button>
    <button id="add-section-btn">+ Section</button>
    <button id="reset-btn">Reset All</button>
  </header>

  <div id="sections-container" class="sections-container"></div>

  <script>
    let isEditMode = false;
    let config = {
      sections: [
        {
          id: "main",
          title: "Main",
          color: "#00ffcc",
          tings: [{ name: "The Hub", url: "https://idontbyte.com", icon: "🌐" }]
        }
      ]
    };

    function saveConfig() {
      localStorage.setItem('tingsConfig', JSON.stringify(config));
    }

    function loadConfig() {
      const saved = localStorage.getItem('tingsConfig');
      if (saved) config = JSON.parse(saved);
    }

    function renderAll() {
      const container = document.getElementById('sections-container');
      container.innerHTML = '';

      config.sections.forEach(section => {
        const secDiv = document.createElement('div');
        secDiv.className = 'section';
        secDiv.style.borderColor = section.color;

        let html = `
          <div class="section-header" style="color:${section.color}">
            <span>${section.title}</span>
          </div>
          <div class="tings-grid" id="tings-${section.id}"></div>
        `;
        secDiv.innerHTML = html;

        // Render tings
        const tingsGrid = secDiv.querySelector(`#tings-${section.id}`);
        section.tings.forEach(ting => {
          const tingDiv = document.createElement('div');
          tingDiv.className = 'ting';
          tingDiv.innerHTML = `<div>${ting.icon || '🔗'}</div><span>${ting.name}</span>`;
          tingDiv.onclick = () => window.open(ting.url || '#', '_blank');
          tingsGrid.appendChild(tingDiv);
        });

        // Add Ting button only in Edit Mode
        if (isEditMode) {
          const addBtn = document.createElement('div');
          addBtn.className = 'ting add-ting';
          addBtn.textContent = '+ Add Ting';
          addBtn.onclick = () => addNewTing(section.id);
          tingsGrid.appendChild(addBtn);
        }

        container.appendChild(secDiv);
      });
    }

    function addNewTing(sectionId) {
      const name = prompt("Ting Name:");
      if (!name) return;
      const url = prompt("URL:", "https://");
      if (!url) return;

      const section = config.sections.find(s => s.id === sectionId);
      if (section) {
        section.tings.push({ name: name, url: url, icon: "🔗" });
        renderAll();
        saveConfig();
      }
    }

    // Button listeners
    document.addEventListener('DOMContentLoaded', () => {
      loadConfig();
      renderAll();

      document.getElementById('edit-btn').addEventListener('click', () => {
        isEditMode = !isEditMode;
        document.getElementById('edit-btn').textContent = `Edit Mode: ${isEditMode ? 'ON' : 'OFF'}`;
        renderAll();
      });

      document.getElementById('add-section-btn').addEventListener('click', () => {
        const newSection = {
          id: 'sec-' + Date.now(),
          title: 'New Section',
          color: '#ff8800',
          tings: []
        };
        config.sections.push(newSection);
        renderAll();
        saveConfig();
      });

      document.getElementById('reset-btn').addEventListener('click', () => {
        if (confirm('Reset everything to default?')) {
          localStorage.removeItem('tingsConfig');
          location.reload();
        }
      });
    });
  </script>
</body>
</html>