<?php
// Tings Dashboard - Single File Version (index.php)
?>
<!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>
  
  <!-- GridStack CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@12.6.0/dist/gridstack.min.css">
  
  <style>
    :root {
      --bg: #0a0a14;
      --section: #1a1a2e;
      --accent: #00ffcc;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--bg);
      color: #eee;
      font-family: system-ui, -apple-system, sans-serif;
      height: 100vh;
      overflow: hidden;
    }
    header {
      padding: 15px 20px;
      background: #111827;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      border-bottom: 3px solid var(--accent);
      z-index: 100;
    }
    h1 {
      margin: 0;
      color: var(--accent);
      font-size: 1.8rem;
    }
    button {
      padding: 10px 18px;
      background: #16213e;
      color: #eee;
      border: 1px solid #445577;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1rem;
    }
    button:hover {
      background: #1e2a4a;
    }
    #edit-btn {
      font-weight: bold;
      min-width: 140px;
    }
    .grid-stack {
      padding: 20px;
      min-height: calc(100vh - 75px);
      background: var(--bg);
    }
    .grid-stack-item-content {
      background: var(--section);
      border: 2px solid #445577;
      border-radius: 10px;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .section-header {
      background: #16213e;
      padding: 12px 16px;
      cursor: move;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      color: var(--accent);
      user-select: none;
    }
    .tings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 14px;
      padding: 16px;
      flex: 1;
      overflow: auto;
    }
    .ting {
      background: rgba(255,255,255,0.07);
      border-radius: 8px;
      padding: 14px 8px;
      text-align: center;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .ting:hover {
      background: rgba(0, 255, 204, 0.18);
      transform: scale(1.1);
    }
    .ting div {
      font-size: 2.8rem;
      margin-bottom: 6px;
    }
    .add-ting {
      border: 2px dashed #666;
      color: #aaa;
      font-size: 1.1rem;
    }
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.95);
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .overlay-content {
      width: 90%;
      max-width: 1100px;
      background: #111827;
      border-radius: 12px;
      padding: 15px;
      position: relative;
    }
    #close-overlay {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      background: none;
      border: none;
      color: #fff;
      cursor: pointer;
    }
  </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="grid" class="grid-stack"></div>

  <!-- Overlay -->
  <div id="overlay" class="overlay">
    <div class="overlay-content">
      <button id="close-overlay">✕</button>
      <div id="overlay-body"></div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/gridstack@12.6.0/dist/gridstack.all.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

  <script>
    let grid = null;
    let isEditMode = false;

    let config = {
      sections: [
        {
          id: "main",
          title: "Main",
          color: "#00ffcc",
          x: 0, y: 0, w: 6, h: 4,
          tings: [
            { name: "The Hub", url: "https://idontbyte.com", icon: "🌐" }
          ]
        }
      ]
    };

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

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

    function initGrid() {
      if (grid) grid.destroy(true);

      const gridContainer = document.getElementById('grid');
      gridContainer.innerHTML = '';

      config.sections.forEach(section => {
        const html = `
          <div class="grid-stack-item" 
               data-gs-id="${section.id}"
               data-gs-x="${section.x}" 
               data-gs-y="${section.y}" 
               data-gs-w="${section.w}" 
               data-gs-h="${section.h}">
            <div class="grid-stack-item-content">
              <div class="section-header" style="color:${section.color}">
                <span>${section.title}</span>
              </div>
              <div class="tings-grid" id="tings-${section.id}"></div>
            </div>
          </div>`;
        gridContainer.innerHTML += html;
      });

      grid = GridStack.init({
        cellHeight: 110,
        margin: 12,
        draggable: { handle: '.section-header' },
        resizable: isEditMode,
        disableDrag: !isEditMode,
        disableResize: !isEditMode,
        column: 12
      });

      config.sections.forEach(s => renderSection(s.id));
    }

    function renderSection(sectionId) {
      const container = document.getElementById(`tings-${sectionId}`);
      if (!container) return;
      container.innerHTML = '';

      const section = config.sections.find(s => s.id === sectionId);
      if (!section) return;

      section.tings.forEach(ting => {
        const div = document.createElement('div');
        div.className = 'ting';
        div.innerHTML = `<div>${ting.icon || '🔗'}</div><span>${ting.name}</span>`;
        div.onclick = () => {
          if (!isEditMode) window.open(ting.url || '#', '_blank');
        };
        container.appendChild(div);
      });

      // Add Ting button - only visible in Edit Mode
      if (isEditMode) {
        const addBtn = document.createElement('div');
        addBtn.className = 'ting add-ting';
        addBtn.innerHTML = '+ Add Ting';
        addBtn.onclick = () => addTing(sectionId);
        container.appendChild(addBtn);
      }
    }

    function addTing(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: "🔗" });
        renderSection(sectionId);
        saveToLocal();
      }
    }

    // Button Setup
    document.addEventListener('DOMContentLoaded', function() {
      loadFromLocal();
      initGrid();

      // Edit Mode Toggle
      document.getElementById('edit-btn').addEventListener('click', function() {
        isEditMode = !isEditMode;
        this.textContent = `Edit Mode: ${isEditMode ? 'ON' : 'OFF'}`;
        initGrid();
      });

      // Add New Section
      document.getElementById('add-section-btn').addEventListener('click', function() {
        const newSec = {
          id: 'sec-' + Date.now(),
          title: 'New Section',
          color: '#ffaa00',
          x: 0,
          y: 999,
          w: 5,
          h: 3,
          tings: []
        };
        config.sections.push(newSec);
        initGrid();
        saveToLocal();
      });

      // Reset Everything
      document.getElementById('reset-btn').addEventListener('click', function() {
        if (confirm('Reset entire dashboard to default?')) {
          localStorage.removeItem('tingsConfig');
          location.reload();
        }
      });

      // Close Overlay
      document.getElementById('close-overlay').addEventListener('click', function() {
        document.getElementById('overlay').style.display = 'none';
      });

      console.log('Tings Minimal Dashboard loaded - Click Edit Mode to begin');
    });
  </script>
</body>
</html>