// Project View - Shows a single project with folder tree

import { api } from '../api.js';
import { renderSidebar } from '../components/sidebar.js';

export async function renderProjectView(app) {
  const projectId = app.state.params.id;
  let project = null;
  let folders = [];
  let documents = [];
  let tags = [];
  let selectedFolderId = null;
  let selectedTag = null;
  let searchQuery = '';

  try {
    const [projResult, docsResult, tagsResult] = await Promise.all([
      api.getProject(projectId),
      api.getDocuments({ project: projectId }),
      api.getTags()
    ]);
    project = projResult;
    documents = docsResult.documents || [];
    tags = tagsResult.tags || [];

    // Get folders
    try {
      const foldersResult = await api.getFolders(projectId);
      folders = foldersResult.folders || [];
    } catch (e) {
      folders = [];
    }
  } catch (e) {
    app.showToast('Failed to load project', 'error');
    app.navigate('projects');
    return;
  }

  const appEl = document.getElementById('app');

  function render() {
    // Build folder tree
    const folderTree = buildFolderTree(folders, null);

    // Filter documents
    let filteredDocs = documents;

    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      filteredDocs = filteredDocs.filter(d =>
        d.title.toLowerCase().includes(q) ||
        (d.content && d.content.toLowerCase().includes(q))
      );
    }

    if (selectedFolderId !== null) {
      filteredDocs = filteredDocs.filter(d => d.folderId === selectedFolderId);
    }

    if (selectedTag) {
      filteredDocs = filteredDocs.filter(d =>
        d.tags && d.tags.includes(selectedTag)
      );
    }

    // Determine current folder name
    let currentFolderName = 'All Documents';
    if (selectedFolderId !== null) {
      const folder = folders.find(f => f.id === selectedFolderId);
      if (folder) currentFolderName = folder.name;
    } else if (selectedTag) {
      currentFolderName = `#${selectedTag}`;
    }

    appEl.innerHTML = `
      <header class="app-header">
        <button class="mobile-nav-btn" onclick="window.toggleMobileSidebar()" title="Menu">☰</button>
        <div class="logo">📝 SimpleNote</div>
        <div class="breadcrumb-nav">
          <span class="breadcrumb-link" onclick="window.app.navigate('projects')">Projects</span>
          <span class="breadcrumb-sep">/</span>
          <span class="breadcrumb-current">${escapeHtml(project.name)}</span>
        </div>
        <div class="header-actions">
          <button class="btn btn-ghost" onclick="window.showEditProjectModal('${project.id}')" title="Edit Project">✏️</button>
          <button class="btn btn-ghost" onclick="window.confirmDeleteProject('${project.id}')" title="Delete Project">🗑️</button>
        </div>
      </header>
      <div class="sidebar-overlay" onclick="window.closeMobileSidebar()"></div>
      <div class="app-layout">
        <aside class="sidebar project-sidebar" id="sidebar">
          <button class="sidebar-close-btn" onclick="window.closeMobileSidebar()">✕</button>
          <div class="sidebar-scroll">
            <div class="sidebar-section">
              <div class="section-header">
                <h3>📁 Folders</h3>
                <button class="btn btn-ghost btn-icon-only" onclick="window.showNewFolderModal('${projectId}', null)" title="New Folder">+</button>
              </div>
              <div class="folder-tree">
                <div class="tree-item ${selectedFolderId === null && !selectedTag ? 'active' : ''}" data-action="folder" data-folder-id="">
                  <span class="icon">📋</span>
                  <span class="label">All Documents</span>
                  <span class="count">${documents.length}</span>
                </div>
                ${folderTree}
              </div>
            </div>
            <div class="sidebar-section">
              <h3>🏷️ Tags</h3>
              <div class="tag-list">
                ${tags.map(tag => `
                  <div class="tag-item ${selectedTag === tag.name ? 'active' : ''}" data-action="tag" data-tag="${escapeHtml(tag.name)}">
                    <span>#${escapeHtml(tag.name)}</span>
                    <span class="tag-count">${tag.count}</span>
                  </div>
                `).join('')}
              </div>
            </div>
            <div class="quick-links">
              <a class="quick-link" href="#" onclick="window.app.navigate('projects'); return false;">📋 All Projects</a>
              <a class="quick-link" href="#" onclick="window.showNewDocModal('${projectId}', '${selectedFolderId || ''}'); return false;">📄 New Document</a>
            </div>
          </div>
        </aside>
        <main class="main-content">
          <div class="content-header">
            <div class="content-header-left">
              <h1>${escapeHtml(currentFolderName)}</h1>
              <span class="doc-count">${filteredDocs.length} document${filteredDocs.length !== 1 ? 's' : ''}</span>
            </div>
            <div class="content-header-right">
              <div class="search-box-inline">
                <span class="icon">🔍</span>
                <input type="text" id="search-input" placeholder="Search documents..." value="${escapeHtml(searchQuery)}">
              </div>
              <button class="btn btn-primary" onclick="window.showNewDocModal('${projectId}', '${selectedFolderId || ''}')">+ New</button>
            </div>
          </div>
          <div class="content-body">
            ${filteredDocs.length === 0 ? `
              <div class="empty-state">
                <div class="icon">📄</div>
                <h3>No documents found</h3>
                <p>${searchQuery || selectedTag ? 'Try adjusting your filters' : 'Create your first document in this project'}</p>
                ${!searchQuery && !selectedTag ? `<button class="btn btn-primary" onclick="window.showNewDocModal('${projectId}', '${selectedFolderId || ''}')">+ Create Document</button>` : ''}
              </div>
            ` : `
              <div class="doc-grid">
                ${filteredDocs.map(doc => renderDocCard(doc, projectId)).join('')}
              </div>
            `}
          </div>
        </main>
      </div>
    `;

    // Attach event listeners
    attachEventListeners();
  }

  // Mobile sidebar functions
  window.toggleMobileSidebar = function() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.querySelector('.sidebar-overlay');
    if (sidebar) {
      sidebar.classList.toggle('mobile-open');
      if (overlay) overlay.classList.toggle('active');
    }
  };

  window.closeMobileSidebar = function() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.querySelector('.sidebar-overlay');
    if (sidebar) {
      sidebar.classList.remove('mobile-open');
      if (overlay) overlay.classList.remove('active');
    }
  };

  function attachEventListeners() {
    // Search
    const searchInput = document.getElementById('search-input');
    searchInput.oninput = (e) => {
      searchQuery = e.target.value;
      render();
    };

    // Folder selection
    document.querySelectorAll('[data-action="folder"]').forEach(el => {
      el.addEventListener('click', (e) => {
        e.stopPropagation();
        const folderId = el.getAttribute('data-folder-id');
        selectedFolderId = folderId === '' ? null : folderId;
        selectedTag = null;
        render();
      });
    });

    // Tag selection
    document.querySelectorAll('[data-action="tag"]').forEach(el => {
      el.addEventListener('click', (e) => {
        e.stopPropagation();
        selectedTag = el.getAttribute('data-tag');
        selectedFolderId = null;
        render();
      });
    });
  }

  function buildFolderTree(folders, parentId, depth = 0) {
    return folders
      .filter(f => f.parentId === parentId)
      .map(folder => {
        const children = folders.filter(f => f.parentId === folder.id);
        const hasChildren = children.length > 0;
        const isSelected = selectedFolderId === folder.id;
        const docCount = documents.filter(d => d.folderId === folder.id).length;

        return `
          <div class="tree-node">
            <div class="tree-item ${isSelected ? 'active' : ''}" data-action="folder" data-folder-id="${folder.id}">
              <span class="tree-toggle ${hasChildren ? 'expanded' : ''}" style="padding-left: ${depth * 12}px">
                ${hasChildren ? '▶' : ''}
              </span>
              <span class="icon">📁</span>
              <span class="label">${escapeHtml(folder.name)}</span>
              <span class="count">${docCount}</span>
              <button class="tree-action" onclick="event.stopPropagation(); window.showNewFolderModal('${projectId}', '${folder.id}')" title="New subfolder">+</button>
            </div>
            ${hasChildren ? `<div class="tree-children">${buildFolderTree(folders, folder.id, depth + 1)}</div>` : ''}
          </div>
        `;
      })
      .join('');
  }

  render();
}

function renderDocCard(doc, projectId) {
  const priorityEmoji = { high: '🔴', medium: '🟡', low: '🟢' };
  const priority = doc.priority || 'medium';

  return `
    <div class="doc-card" onclick="window.app.navigate('document', {id: '${doc.id}', projectId: '${projectId}'})">
      <div class="doc-card-header">
        <span class="doc-id">${doc.id}</span>
        <span class="type-badge ${doc.type || 'general'}">${doc.type || 'general'}</span>
      </div>
      <h3 class="doc-title">${escapeHtml(doc.title)}</h3>
      ${doc.tags && doc.tags.length ? `
        <div class="doc-tags">
          ${doc.tags.map(t => `<span class="tag-pill">${escapeHtml(t)}</span>`).join('')}
        </div>
      ` : ''}
      <div class="doc-meta">
        <span class="doc-meta-item">📅 ${formatDate(doc.createdAt)}</span>
        <span class="doc-meta-item">👤 ${escapeHtml(doc.author || 'unknown')}</span>
        <span class="status-badge ${doc.status || 'draft'}">${doc.status || 'draft'}</span>
        <span class="priority-indicator">${priorityEmoji[priority]}</span>
      </div>
      <div class="doc-card-actions">
        <button class="btn btn-ghost btn-icon-only" onclick="event.stopPropagation(); window.showMoveToFolderModal('${doc.id}')" title="Move to folder">📁</button>
      </div>
    </div>
  `;
}

function escapeHtml(str) {
  if (!str) return '';
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

function formatDate(dateStr) {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}

// Global function: Show modal to create new folder
window.showNewFolderModal = async function(projectId, parentId) {
  let folders = [];
  try {
    const result = await api.getFolders(projectId);
    folders = result.folders || [];
  } catch (e) {}

  const backdrop = document.createElement('div');
  backdrop.className = 'modal-backdrop';
  backdrop.innerHTML = `
    <div class="modal" style="min-width: 450px;">
      <div class="modal-header">
        <span>📁</span>
        <h3>Create New Folder</h3>
        <button class="modal-close" onclick="this.closest('.modal-backdrop').remove()">✕</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="new-folder-name">Folder Name</label>
          <input type="text" id="new-folder-name" class="form-control" placeholder="e.g., API Documentation">
        </div>
        <div class="form-group" style="margin-top: 16px;">
          <label for="new-folder-parent">Parent Folder (optional)</label>
          <select id="new-folder-parent" class="form-control">
            <option value="">— Root (no parent) —</option>
            ${folders.map(f => `<option value="${f.id}">📁 ${escapeHtml(f.name)}</option>`).join('')}
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-ghost" onclick="this.closest('.modal-backdrop').remove()">Cancel</button>
        <button class="btn btn-primary" id="create-folder-btn">Create Folder</button>
      </div>
    </div>
  `;
  document.body.appendChild(backdrop);

  const nameInput = document.getElementById('new-folder-name');
  const parentSelect = document.getElementById('new-folder-parent');
  const createBtn = document.getElementById('create-folder-btn');

  // Pre-select parent if provided
  if (parentId) {
    parentSelect.value = parentId;
  }

  createBtn.onclick = async () => {
    const name = nameInput.value.trim();
    if (!name) {
      window.app.showToast('Please enter a folder name', 'error');
      return;
    }
    try {
      await api.createFolder({
        name,
        projectId,
        parentId: parentSelect.value || null
      });
      backdrop.remove();
      window.app.showToast('Folder created', 'success');
      window.app.navigate('project', { id: projectId });
    } catch (e) {
      window.app.showToast('Failed to create folder: ' + e.message, 'error');
    }
  };

  backdrop.onclick = (e) => {
    if (e.target === backdrop) backdrop.remove();
  };

  nameInput.focus();
};

// Global function: Edit project modal
window.showEditProjectModal = async function(projectId) {
  let project = null;
  try {
    project = await api.getProject(projectId);
  } catch (e) {
    window.app.showToast('Failed to load project', 'error');
    return;
  }

  const backdrop = document.createElement('div');
  backdrop.className = 'modal-backdrop';
  backdrop.innerHTML = `
    <div class="modal" style="min-width: 450px;">
      <div class="modal-header">
        <span>✏️</span>
        <h3>Edit Project</h3>
        <button class="modal-close" onclick="this.closest('.modal-backdrop').remove()">✕</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="edit-project-name">Project Name</label>
          <input type="text" id="edit-project-name" class="form-control" value="${escapeHtml(project.name)}">
        </div>
        <div class="form-group" style="margin-top: 16px;">
          <label for="edit-project-description">Description</label>
          <textarea id="edit-project-description" class="form-control" rows="3" style="resize: vertical;">${escapeHtml(project.description || '')}</textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-ghost" onclick="this.closest('.modal-backdrop').remove()">Cancel</button>
        <button class="btn btn-primary" id="save-project-btn">Save Changes</button>
      </div>
    </div>
  `;
  document.body.appendChild(backdrop);

  const nameInput = document.getElementById('edit-project-name');
  const descInput = document.getElementById('edit-project-description');
  const saveBtn = document.getElementById('save-project-btn');

  saveBtn.onclick = async () => {
    const name = nameInput.value.trim();
    if (!name) {
      window.app.showToast('Please enter a project name', 'error');
      return;
    }
    try {
      await api.updateProject(projectId, {
        name,
        description: descInput.value.trim()
      });
      backdrop.remove();
      window.app.showToast('Project updated', 'success');
      window.app.navigate('project', { id: projectId });
    } catch (e) {
      window.app.showToast('Failed to update project: ' + e.message, 'error');
    }
  };

  backdrop.onclick = (e) => {
    if (e.target === backdrop) backdrop.remove();
  };

  nameInput.focus();
  nameInput.select();
};

// Global function: Confirm delete project
window.confirmDeleteProject = async function(projectId) {
  const confirmed = await window.app.confirmDelete('Delete this project? All documents and folders will be deleted.');
  if (!confirmed) return;

  try {
    await api.deleteProject(projectId);
    window.app.showToast('Project deleted', 'success');
    window.app.navigate('projects');
  } catch (e) {
    window.app.showToast('Failed to delete project: ' + e.message, 'error');
  }
};

// Global function: Move document to folder modal
window.showMoveToFolderModal = async function(documentId) {
  const currentProjectId = window.app.state.params.id;

  let folders = [];
  try {
    const result = await api.getFolders(currentProjectId);
    folders = result.folders || [];
  } catch (e) {}

  // Also get current document to show its current folder
  let currentDoc = null;
  try {
    currentDoc = await api.getDocument(documentId);
  } catch (e) {}

  const backdrop = document.createElement('div');
  backdrop.className = 'modal-backdrop';
  backdrop.innerHTML = `
    <div class="modal" style="min-width: 450px;">
      <div class="modal-header">
        <span>📁</span>
        <h3>Move to Folder</h3>
        <button class="modal-close" onclick="this.closest('.modal-backdrop').remove()">✕</button>
      </div>
      <div class="modal-body">
        <p style="color: var(--color-text-secondary); margin-bottom: 16px;">Select a folder for this document:</p>
        <div class="form-group">
          <select id="move-folder-select" class="form-control">
            <option value="">— No Folder (Root) —</option>
            ${folders.map(f => `<option value="${f.id}">📁 ${escapeHtml(f.name)}</option>`).join('')}
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-ghost" onclick="this.closest('.modal-backdrop').remove()">Cancel</button>
        <button class="btn btn-primary" id="move-folder-btn">Move</button>
      </div>
    </div>
  `;
  document.body.appendChild(backdrop);

  const select = document.getElementById('move-folder-select');
  const moveBtn = document.getElementById('move-folder-btn');

  // Pre-select current folder if any
  if (currentDoc && currentDoc.folderId) {
    select.value = currentDoc.folderId;
  }

  moveBtn.onclick = async () => {
    try {
      await api.moveDocumentToFolder(documentId, select.value || null);
      backdrop.remove();
      window.app.showToast('Document moved', 'success');
      window.app.navigate('project', { id: currentProjectId });
    } catch (e) {
      window.app.showToast('Failed to move document: ' + e.message, 'error');
    }
  };

  backdrop.onclick = (e) => {
    if (e.target === backdrop) backdrop.remove();
  };
};

// Global function: Show modal to create new document in project
window.showNewDocModal = async function(projectId, folderId = '') {
  const backdrop = document.createElement('div');
  backdrop.className = 'modal-backdrop';
  
  backdrop.innerHTML = `
    <div class="modal" style="min-width: 450px;">
      <div class="modal-header">
        <span>📄</span>
        <h3>Create New Document</h3>
        <button class="modal-close" onclick="this.closest('.modal-backdrop').remove()">✕</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="new-doc-title">Title</label>
          <input type="text" id="new-doc-title" class="form-control" placeholder="Document title">
        </div>
        <div class="form-group" style="margin-top: 16px;">
          <label for="new-doc-type">Type</label>
          <select id="new-doc-type" class="form-control">
            <option value="general">General</option>
            <option value="requirement">Requirement</option>
            <option value="spec">Spec</option>
            <option value="note">Note</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-ghost" onclick="this.closest('.modal-backdrop').remove()">Cancel</button>
        <button class="btn btn-primary" id="create-doc-btn">Create</button>
      </div>
    </div>
  `;
  document.body.appendChild(backdrop);

  const titleInput = document.getElementById('new-doc-title');
  const typeSelect = document.getElementById('new-doc-type');
  const createBtn = document.getElementById('create-doc-btn');

  titleInput.focus();

  createBtn.onclick = async () => {
    const title = titleInput.value.trim();
    if (!title) {
      window.app.showToast('Please enter a title', 'error');
      return;
    }
    try {
      const doc = await api.createDocument({
        title,
        type: typeSelect.value,
        projectId,
        folderId: folderId || null
      });
      backdrop.remove();
      window.app.showToast('Document created', 'success');
      window.app.navigate('editor', { id: doc.id, projectId, folderId: folderId || null });
    } catch (e) {
      window.app.showToast('Failed to create document: ' + e.message, 'error');
    }
  };

  backdrop.onclick = (e) => {
    if (e.target === backdrop) backdrop.remove();
  };
};