// API Base
const API_BASE = '/api';

// Utility functions
const api = {
  async get(endpoint) {
    const response = await fetch(`${API_BASE}${endpoint}`);
    if (!response.ok) throw new Error(`API error: ${response.status}`);
    return response.json();
  },

  async post(endpoint, data) {
    const response = await fetch(`${API_BASE}${endpoint}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    if (!response.ok) throw new Error(`API error: ${response.status}`);
    return response.json();
  },

  async put(endpoint, data) {
    const response = await fetch(`${API_BASE}${endpoint}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    if (!response.ok) throw new Error(`API error: ${response.status}`);
    return response.json();
  },

  async delete(endpoint) {
    const response = await fetch(`${API_BASE}${endpoint}`, {
      method: 'DELETE',
    });
    if (!response.ok) throw new Error(`API error: ${response.status}`);
    return response.json();
  },
};

// Toast notifications
class Toast {
  static show(message, type = 'info', duration = 3000) {
    const toast = document.createElement('div');
    toast.className = `toast toast--${type}`;
    toast.textContent = message;
    toast.style.cssText = `
      position: fixed;
      bottom: 24px;
      right: 24px;
      background-color: var(--md-sys-color-surface);
      color: var(--md-sys-color-on-surface);
      padding: 16px 24px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 9999;
      animation: slideIn 0.3s ease;
      border-left: 4px solid var(--md-sys-color-primary);
    `;

    if (type === 'success') {
      toast.style.borderLeftColor = '#4caf50';
    } else if (type === 'error') {
      toast.style.borderLeftColor = 'var(--md-sys-color-error)';
    }

    document.body.appendChild(toast);

    setTimeout(() => {
      toast.style.animation = 'slideOut 0.3s ease';
      setTimeout(() => toast.remove(), 300);
    }, duration);
  }
}

// Modal dialog
class Modal {
  constructor(title, content) {
    this.title = title;
    this.content = content;
    this.element = null;
  }

  open() {
    const modal = document.createElement('div');
    modal.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9998;
      animation: fadeIn 0.2s ease;
    `;

    const dialog = document.createElement('div');
    dialog.style.cssText = `
      background-color: var(--md-sys-color-surface);
      border-radius: 12px;
      padding: 24px;
      max-width: 500px;
      width: 90%;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      animation: slideUp 0.3s ease;
    `;

    const titleEl = document.createElement('h2');
    titleEl.textContent = this.title;
    titleEl.style.cssText = 'margin: 0 0 16px 0;';

    const contentEl = document.createElement('div');
    contentEl.innerHTML = this.content;
    contentEl.style.cssText = 'margin-bottom: 24px;';

    dialog.appendChild(titleEl);
    dialog.appendChild(contentEl);

    modal.appendChild(dialog);
    modal.addEventListener('click', (e) => {
      if (e.target === modal) this.close();
    });

    this.element = modal;
    document.body.appendChild(modal);
  }

  close() {
    if (this.element) {
      this.element.style.animation = 'fadeOut 0.2s ease';
      setTimeout(() => this.element.remove(), 200);
    }
  }
}

// Post editor
class PostEditor {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.postId = null;
    this.init();
  }

  init() {
    this.container.innerHTML = `
      <form id="post-form" class="card">
        <h2>Create New Post</h2>
        
        <div class="form-group">
          <label for="title">Title</label>
          <input type="text" id="title" name="title" required placeholder="Post title">
        </div>

        <div class="form-group">
          <label for="type">Post Type</label>
          <select id="type" name="type">
            <option value="post">Blog Post</option>
            <option value="micro">Micro Post</option>
          </select>
        </div>

        <div class="form-group">
          <label for="category">Category</label>
          <input type="text" id="category" name="category" placeholder="e.g., Technology, Personal">
        </div>

        <div class="form-group">
          <label for="excerpt">Excerpt</label>
          <textarea id="excerpt" name="excerpt" placeholder="Brief summary of the post"></textarea>
        </div>

        <div class="form-group">
          <label for="content">Content (Markdown)</label>
          <textarea id="content" name="content" required placeholder="Write your content in Markdown..."></textarea>
          <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-top: 8px;">
            Supports Markdown syntax. Preview available.
          </div>
        </div>

        <div class="form-group">
          <label for="tags">Tags (comma-separated)</label>
          <input type="text" id="tags" name="tags" placeholder="tag1, tag2, tag3">
        </div>

        <div class="form-group">
          <label>
            <input type="checkbox" id="published" name="published">
            Publish immediately
          </label>
        </div>

        <div style="display: flex; gap: 16px;">
          <button type="submit" class="button button--primary">Save Post</button>
          <button type="button" id="preview-btn" class="button button--secondary">Preview</button>
        </div>
      </form>
    `;

    this.form = document.getElementById('post-form');
    this.form.addEventListener('submit', (e) => this.handleSubmit(e));
    document.getElementById('preview-btn').addEventListener('click', () => this.showPreview());
  }

  async handleSubmit(e) {
    e.preventDefault();

    const formData = {
      title: document.getElementById('title').value,
      content: document.getElementById('content').value,
      excerpt: document.getElementById('excerpt').value,
      type: document.getElementById('type').value,
      category: document.getElementById('category').value,
      tags: document.getElementById('tags').value.split(',').map(t => t.trim()).filter(t => t),
      published: document.getElementById('published').checked,
    };

    try {
      const endpoint = this.postId ? `/posts/${this.postId}` : '/posts';
      const method = this.postId ? 'put' : 'post';
      
      const result = await api[method](endpoint, formData);

      if (result.success) {
        Toast.show('Post saved successfully!', 'success');
        if (!this.postId) {
          this.postId = result.data.id;
        }
        setTimeout(() => window.location.href = '/', 1500);
      }
    } catch (error) {
      Toast.show('Error saving post: ' + error.message, 'error');
    }
  }

  showPreview() {
    const content = document.getElementById('content').value;
    const title = document.getElementById('title').value;
    
    const previewHtml = `
      <div style="padding: 24px;">
        <h1>${title || 'Untitled'}</h1>
        <div id="preview-content" style="margin-top: 24px;">
          ${this.markdownToHtml(content)}
        </div>
      </div>
    `;

    const modal = new Modal('Preview', previewHtml);
    modal.open();
  }

  markdownToHtml(markdown) {
    let html = markdown
      .replace(/^### (.*?)$/gm, '<h3>$1</h3>')
      .replace(/^## (.*?)$/gm, '<h2>$1</h2>')
      .replace(/^# (.*?)$/gm, '<h1>$1</h1>')
      .replace(/\*\*(.*?)\*\*/gm, '<strong>$1</strong>')
      .replace(/\*(.*?)\*/gm, '<em>$1</em>')
      .replace(/`(.*?)`/gm, '<code>$1</code>')
      .replace(/\n\n/gm, '</p><p>')
      .replace(/^/gm, '<p>')
      .replace(/$/gm, '</p>');

    return html;
  }
}

// Posts list
class PostsList {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.page = 1;
    this.loading = false;
    this.init();
  }

  async init() {
    this.container.innerHTML = '<div style="text-align: center; padding: 40px;">Loading posts...</div>';
    await this.loadPosts();
  }

  async loadPosts() {
    if (this.loading) return;
    this.loading = true;

    try {
      const result = await api.get(`/posts?page=${this.page}`);
      
      if (result.success && result.data) {
        this.render(result.data);
      }
    } catch (error) {
      this.container.innerHTML = `<div style="text-align: center; padding: 40px; color: var(--md-sys-color-error);">Error loading posts</div>`;
    }

    this.loading = false;
  }

  render(posts) {
    if (posts.length === 0) {
      this.container.innerHTML = '<div style="text-align: center; padding: 40px;">No posts yet.</div>';
      return;
    }

    let html = '<ul class="post-list">';

    posts.forEach(post => {
      const date = new Date(post.created_at).toLocaleDateString();
      html += `
        <li class="post-item">
          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
            <h3 class="post-title">
              <a href="/post/${post.slug}">${post.title}</a>
            </h3>
            <span class="post-type ${post.type === 'micro' ? 'post-type--micro' : ''}">
              ${post.type === 'micro' ? '💬' : '📝'} ${post.type}
            </span>
          </div>
          <div class="post-meta">
            <span>${date}</span>
            ${post.category ? `<span>${post.category}</span>` : ''}
          </div>
          <p class="post-excerpt">${post.excerpt || post.content.substring(0, 200)}</p>
          <a href="/post/${post.slug}" style="font-weight: 500;">Read more →</a>
        </li>
      `;
    });

    html += '</ul>';
    this.container.innerHTML = html;

    // Pagination
    if (posts.length >= 20) {
      const paginationBtn = document.createElement('div');
      paginationBtn.style.cssText = 'text-align: center; margin-top: 40px;';
      paginationBtn.innerHTML = `
        <button class="button button--secondary" id="load-more-btn">Load More Posts</button>
      `;
      this.container.appendChild(paginationBtn);

      document.getElementById('load-more-btn').addEventListener('click', () => {
        this.page++;
        this.loadPosts();
      });
    }
  }
}

// Search functionality
class SearchBox {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.init();
  }

  init() {
    this.input = this.container.querySelector('input[type="search"]');
    if (!this.input) return;

    this.input.addEventListener('keyup', (e) => this.search(e.target.value));
  }

  async search(query) {
    if (!query || query.length < 2) {
      this.clearResults();
      return;
    }

    try {
      const result = await api.get(`/search?q=${encodeURIComponent(query)}`);
      this.renderResults(result.data || []);
    } catch (error) {
      console.error('Search error:', error);
    }
  }

  renderResults(posts) {
    let html = '<div style="position: absolute; top: 100%; left: 0; right: 0; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100; max-height: 400px; overflow-y: auto;">';

    posts.slice(0, 10).forEach(post => {
      html += `
        <a href="/post/${post.slug}" style="display: block; padding: 12px 16px; border-bottom: 1px solid #eee; color: inherit; text-decoration: none;">
          <div style="font-weight: 500;">${post.title}</div>
          <div style="font-size: 12px; color: #666;">${new Date(post.created_at).toLocaleDateString()}</div>
        </a>
      `;
    });

    html += '</div>';

    let dropdown = document.getElementById('search-results');
    if (dropdown) dropdown.remove();

    const resultsDiv = document.createElement('div');
    resultsDiv.id = 'search-results';
    resultsDiv.innerHTML = html;
    resultsDiv.style.cssText = 'position: relative;';
    this.container.appendChild(resultsDiv);
  }

  clearResults() {
    const dropdown = document.getElementById('search-results');
    if (dropdown) dropdown.remove();
  }
}

// Initialize on document ready
document.addEventListener('DOMContentLoaded', () => {
  // Initialize any editors or lists if they exist
  if (document.getElementById('post-editor')) {
    new PostEditor('post-editor');
  }

  if (document.getElementById('posts-list')) {
    new PostsList('posts-list');
  }

  if (document.getElementById('search-box')) {
    new SearchBox('search-box');
  }
});

// Add CSS animations
const style = document.createElement('style');
style.textContent = `
  @keyframes slideIn {
    from {
      transform: translateX(400px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideOut {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(400px);
      opacity: 0;
    }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
`;
document.head.appendChild(style);