components/admin-dashboard.js

class AdminDashboard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          top: 0;
          right: 0;
          width: 300px;
          height: 100vh;
          background: white;
          box-shadow: -2px 0 10px rgba(0,0,0,0.1);
          z-index: 9999;
          transform: translateX(100%);
          transition: transform 0.3s ease;
          overflow-y: auto;
          padding: 20px;
        }
        :host(.open) {
          transform: translateX(0);
        }
        h2 {
          margin-top: 0;
          color: #1e40af;
          border-bottom: 2px solid #f59e0b;
          padding-bottom: 10px;
        }
        .section {
          margin-bottom: 20px;
          border: 1px solid #e2e8f0;
          padding: 15px;
          border-radius: 8px;
        }
        .section h3 {
          margin-top: 0;
          color: #3b82f6;
        }
        button, input, textarea, select {
          width: 100%;
          padding: 8px;
          margin-bottom: 10px;
          border: 1px solid #e2e8f0;
          border-radius: 4px;
        }
        button {
          background: #3b82f6;
          color: white;
          border: none;
          cursor: pointer;
          transition: background 0.3s;
        }
        button:hover {
          background: #2563eb;
        }
        .close-btn {
          position: absolute;
          top: 10px;
          right: 10px;
          background: transparent;
          color: #ef4444;
          width: auto;
          font-size: 20px;
          padding: 0;
        }
        .toggle-btn {
          position: fixed;
          top: 50%;
          right: 0;
          transform: translateX(100%) rotate(-90deg);
          transform-origin: right top;
          background: #3b82f6;
          color: white;
          border: none;
          padding: 8px 15px;
          border-radius: 0 0 4px 4px;
          cursor: pointer;
          z-index: 9998;
        }
      </style>
      
      <button class="toggle-btn">Admin Panel</button>
      <div class="panel-content">
        <button class="close-btn">×</button>
        <h2>Admin Dashboard</h2>
        
        <div class="section">
          <h3>Edit Content</h3>
          <select id="content-select">
            <option value="">Select section to edit</option>
            <option value="hero-title">Hero Title</option>
            <option value="hero-subtitle">Hero Subtitle</option>
            <option value="about-text">About Text</option>
          </select>
          <textarea id="content-editor" rows="4"></textarea>
          <button id="save-content">Save Changes</button>
        </div>
        
        <div class="section">
          <h3>Manage Images</h3>
          <select id="image-select">
            <option value="">Select image to replace</option>
            <option value="hero-image">Hero Background</option>
            <option value="about-image">About Section Image</option>
            <option value="gallery-1">Gallery Image 1</option>
          </select>
          <input type="file" id="image-upload" accept="image/*">
          <button id="save-image">Upload Image</button>
        </div>
        
        <div class="section">
          <h3>Add Yearly Data</h3>
          <input type="number" id="year-input" placeholder="Year (e.g., 2024)">
          <input type="text" id="champion-input" placeholder="Champion Team">
          <input type="text" id="runnerup-input" placeholder="Runner Up Team">
          <input type="text" id="bronze-input" placeholder="Bronze Medal Team">
          <button id="add-year">Add Year Data</button>
        </div>
      </div>
    `;

    this.togglePanel = this.togglePanel.bind(this);
    this.handleContentSave = this.handleContentSave.bind(this);
    this.handleImageUpload = this.handleImageUpload.bind(this);
    this.handleAddYear = this.handleAddYear.bind(this);

    const toggleBtn = this.shadowRoot.querySelector('.toggle-btn');
    const closeBtn = this.shadowRoot.querySelector('.close-btn');
    const saveContentBtn = this.shadowRoot.querySelector('#save-content');
    const saveImageBtn = this.shadowRoot.querySelector('#save-image');
    const addYearBtn = this.shadowRoot.querySelector('#add-year');

    toggleBtn.addEventListener('click', this.togglePanel);
    closeBtn.addEventListener('click', this.togglePanel);
    saveContentBtn.addEventListener('click', this.handleContentSave);
    saveImageBtn.addEventListener('click', this.handleImageUpload);
    addYearBtn.addEventListener('click', this.handleAddYear);

    // Load content options
    this.loadContentOptions();
  }

  togglePanel() {
    this.classList.toggle('open');
  }

  loadContentOptions() {
    // Could be enhanced to dynamically find all editable content
  }

  handleContentSave() {
    const selector = this.shadowRoot.querySelector('#content-select');
    const editor = this.shadowRoot.querySelector('#content-editor');
    
    const elementId = selector.value;
    const newContent = editor.value;
    
    if (elementId && newContent) {
      const element = document.getElementById(elementId);
      if (element) {
        element.textContent = newContent;
        this.saveToLocalStorage(elementId, newContent);
        alert('Content updated successfully!');
      }
    }
  }

  handleImageUpload() {
    const selector = this.shadowRoot.querySelector('#image-select');
    const fileInput = this.shadowRoot.querySelector('#image-upload');
    
    const imageId = selector.value;
    const file = fileInput.files[0];
    
    if (imageId && file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        this.updateImage(imageId, e.target.result);
      };
      reader.readAsDataURL(file);
    }
  }

  updateImage(imageId, imageData) {
    // This would update the specific image on the page
    // For demo, we'll just alert
    alert(`Image ${imageId} would be updated with the uploaded image in a real implementation`);
    this.saveToLocalStorage(imageId, imageData);
  }

  handleAddYear() {
    const year = this.shadowRoot.querySelector('#year-input').value;
    const champion = this.shadowRoot.querySelector('#champion-input').value;
    const runnerup = this.shadowRoot.querySelector('#runnerup-input').value;
    const bronze = this.shadowRoot.querySelector('#bronze-input').value;
    
    if (year && champion && runnerup && bronze) {
      const yearData = {
        year,
        champion,
        runnerup,
        bronze,
        // Can add more fields as needed
      };
      
      this.saveYearData(yearData);
      alert(`Year ${year} data added successfully!`);
    }
  }

  saveToLocalStorage(key, value) {
    let contentData = JSON.parse(localStorage.getItem('contentData')) || {};
    contentData[key] = value;
    localStorage.setItem('contentData', JSON.stringify(contentData));
  }

  saveYearData(yearData) {
    let yearlyData = JSON.parse(localStorage.getItem('yearlyData')) || [];
    
    // Check if year already exists
    const existingIndex = yearlyData.findIndex(item => item.year === yearData.year);
    if (existingIndex >= 0) {
      yearlyData[existingIndex] = yearData;
    } else {
      yearlyData.push(yearData);
    }
    
    localStorage.setItem('yearlyData', JSON.stringify(yearlyData));
  }
}

customElements.define('admin-dashboard', AdminDashboard);