export function initResizablePanels() {
  const handle = document.getElementById('resize-handle-h');
  const container = document.getElementById('workspace-container');
  const topArea = document.getElementById('top-area');
  const bottomPanels = document.getElementById('bottom-panels');

  if (!handle || !container || !topArea || !bottomPanels) return;

  let dragging = false;

  handle.addEventListener('mousedown', (e) => {
    dragging = true;
    e.preventDefault();
  });

  document.addEventListener('mousemove', (e) => {
    if (!dragging) return;
    const rect = container.getBoundingClientRect();
    const offset = e.clientY - rect.top;
    const pct = Math.max(20, Math.min(85, (offset / rect.height) * 100));

    topArea.style.flex = `0 0 ${pct}%`;
    bottomPanels.style.flex = `0 0 ${100 - pct}%`;

    window.dispatchEvent(new Event('resize'));
  });

  document.addEventListener('mouseup', () => { dragging = false; });
}

export function initPanelToggles() {
  const bottomPanels = document.getElementById('bottom-panels');
  const projectsPanel = document.getElementById('projects-panel');

  function togglePanel(panel, btn) {
    panel.classList.toggle('collapsed');
    if (btn) updateToggleIcon(btn, panel);

    if (bottomPanels) {
      const code = document.getElementById('code-panel');
      const term = document.getElementById('terminal-panel');
      const allCollapsed = code?.classList.contains('collapsed') && term?.classList.contains('collapsed');
      bottomPanels.classList.toggle('all-collapsed', allCollapsed);
    }

    if (panel.id === 'projects-panel' && !panel.classList.contains('collapsed') && onProjectsPanelExpanded) {
      onProjectsPanelExpanded();
    }

    window.dispatchEvent(new Event('resize'));
  }

  document.querySelectorAll('.panel-toggle').forEach(btn => {
    btn.addEventListener('click', () => {
      const panel = document.getElementById(btn.dataset.panel);
      if (!panel) return;
      togglePanel(panel, btn);
    });
  });

  document.querySelectorAll('.panel-toggle').forEach(btn => {
    const panel = document.getElementById(btn.dataset.panel);
    if (panel) updateToggleIcon(btn, panel);
  });

  if (projectsPanel) {
    const projectsHeader = projectsPanel.querySelector('.panel-header');
    const projectsToggle = projectsPanel.querySelector('.panel-toggle');
    const projectsRailBtn = document.getElementById('btn-projects');
    projectsHeader?.addEventListener('click', (event) => {
      if (event.target instanceof Element && event.target.closest('.panel-toggle')) return;
      togglePanel(projectsPanel, projectsToggle);
    });
    projectsRailBtn?.addEventListener('click', () => {
      togglePanel(projectsPanel, projectsToggle);
    });

    projectsPanel.addEventListener('transitionend', (event) => {
      if (event.propertyName === 'width') {
        window.dispatchEvent(new Event('resize'));
      }
    });
  }
}

function updateToggleIcon(btn, panel) {
  const collapsed = panel.classList.contains('collapsed');
  const id = panel.id;

  if (id === 'projects-panel') {
    btn.innerHTML = collapsed ? '&#9666;' : '&#9656;';
  } else {
    btn.innerHTML = collapsed ? '&#9656;' : '&#9662;';
  }
}

let onDeviceTabActivated = null;
let onProjectsPanelExpanded = null;

export function setProjectsPanelCallbacks({ onDeviceTab, onExpand }) {
  onDeviceTabActivated = onDeviceTab;
  onProjectsPanelExpanded = onExpand;
}

export function initProjectTabs() {
  const tabs = document.querySelectorAll('.proj-tab');
  const contents = {
    browser: document.getElementById('proj-tab-browser'),
    device: document.getElementById('proj-tab-device'),
  };

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      tabs.forEach(t => t.classList.remove('active'));
      tab.classList.add('active');

      Object.values(contents).forEach(c => c?.classList.add('hidden'));
      const target = contents[tab.dataset.tab];
      if (target) target.classList.remove('hidden');

      if (tab.dataset.tab === 'device' && onDeviceTabActivated) {
        onDeviceTabActivated();
      }
    });
  });
}
