/**
 * Quick Panel Shell
 *
 * A unified panel container that hosts multiple views:
 * - `search`: the launcher/search UI (Phase 1+)
 * - `chat`: AI Chat view (existing capability)
 *
 * The shell owns the overlay + glass panel layout and provides isolated
 * mount points per-view for header/content/footer sections.
 */

import { Disposer } from '@/entrypoints/web-editor-v2/utils/disposables';
import type { QuickPanelView } from '../core/types';

// SVG Icons
const ICON_CLOSE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>`;

// ============================================================
// Types
// ============================================================

export interface QuickPanelShellElements {
  /** Overlay backdrop */
  overlay: HTMLDivElement;
  /** Main panel container */
  panel: HTMLDivElement;

  /** Header section */
  header: HTMLDivElement;
  headerLeft: HTMLDivElement;
  headerRight: HTMLDivElement;
  closeBtn: HTMLButtonElement;

  /** View-specific header mounts */
  headerSearchMount: HTMLDivElement;
  headerChatMount: HTMLDivElement;
  headerRightSearchMount: HTMLDivElement;
  headerRightChatMount: HTMLDivElement;

  /** Content section */
  content: HTMLDivElement;
  contentSearchMount: HTMLDivElement;
  contentChatMount: HTMLDivElement;

  /** Footer section */
  footer: HTMLDivElement;
  footerSearchMount: HTMLDivElement;
  footerChatMount: HTMLDivElement;
}

export interface QuickPanelShellOptions {
  /** Shadow DOM mount point (typically `elements.root` from shadow-host.ts) */
  mount: HTMLElement;
  /** Default view on mount. Default: `search` */
  defaultView?: QuickPanelView;
  /** Accessible label for the dialog. Default: "Quick Panel" */
  ariaLabel?: string;
  /** Close when clicking the backdrop. Default: true */
  closeOnBackdropClick?: boolean;
  /** Called when close is requested (button/backdrop/api) */
  onRequestClose?: (reason: 'button' | 'backdrop' | 'api') => void;
  /** Called after view changes */
  onViewChange?: (view: QuickPanelView) => void;
}

export interface QuickPanelShellManager {
  /** Get shell elements (null if disposed) */
  getElements: () => QuickPanelShellElements | null;
  /** Get current view */
  getView: () => QuickPanelView;
  /** Switch to a different view */
  setView: (view: QuickPanelView) => void;
  /** Request panel close */
  requestClose: (reason?: 'button' | 'backdrop' | 'api') => void;
  /** Clean up resources */
  dispose: () => void;
}

// ============================================================
// Constants
// ============================================================

const DEFAULT_ARIA_LABEL = 'Quick Panel';
const DEFAULT_VIEW: QuickPanelView = 'search';

// ============================================================
// Main Factory
// ============================================================

/**
 * Mount the Quick Panel shell.
 *
 * @example
 * ```typescript
 * const shell = mountQuickPanelShell({
 *   mount: shadowHostElements.root,
 *   defaultView: 'search',
 *   onRequestClose: () => quickPanel.hide(),
 * });
 *
 * // Get mount points for search view
 * const elements = shell.getElements();
 * if (elements) {
 *   // Mount search input to elements.headerSearchMount
 *   // Mount results to elements.contentSearchMount
 * }
 *
 * // Switch to chat view
 * shell.setView('chat');
 *
 * // Cleanup
 * shell.dispose();
 * ```
 */
export function mountQuickPanelShell(options: QuickPanelShellOptions): QuickPanelShellManager {
  const disposer = new Disposer();
  const mount = options.mount;
  const closeOnBackdropClick = options.closeOnBackdropClick ?? true;

  let disposed = false;
  let elements: QuickPanelShellElements | null = null;
  let currentView: QuickPanelView = options.defaultView ?? DEFAULT_VIEW;

  // Best-effort cleanup (crash recovery / duplicate mounts)
  try {
    const existing = mount.querySelector?.('[data-mcp-quick-panel-shell="true"]');
    if (existing instanceof HTMLElement) {
      existing.remove();
    }
  } catch {
    // Ignore cleanup errors
  }

  // --------------------------------------------------------
  // DOM Construction
  // --------------------------------------------------------

  const overlay = document.createElement('div');
  overlay.className = 'qp-overlay';
  overlay.setAttribute('data-mcp-quick-panel-shell', 'true');

  const panel = document.createElement('div');
  panel.className = 'qp-panel';
  panel.setAttribute('role', 'dialog');
  panel.setAttribute('aria-modal', 'true');
  panel.setAttribute('aria-label', options.ariaLabel?.trim() || DEFAULT_ARIA_LABEL);
  panel.dataset.qpView = currentView;

  // Header
  const header = document.createElement('div');
  header.className = 'qp-header';

  const headerLeft = document.createElement('div');
  headerLeft.className = 'qp-header-left';

  const headerSearchMount = document.createElement('div');
  headerSearchMount.className = 'qp-header-mount qp-header-mount--search';

  const headerChatMount = document.createElement('div');
  headerChatMount.className = 'qp-header-mount qp-header-mount--chat';

  headerLeft.append(headerSearchMount, headerChatMount);

  const headerRight = document.createElement('div');
  headerRight.className = 'qp-header-right';

  const headerRightSearchMount = document.createElement('div');
  headerRightSearchMount.className = 'qp-header-right-mount qp-header-right-mount--search';

  const headerRightChatMount = document.createElement('div');
  headerRightChatMount.className = 'qp-header-right-mount qp-header-right-mount--chat';

  const closeBtn = document.createElement('button');
  closeBtn.type = 'button';
  closeBtn.className = 'qp-icon-btn ac-focus-ring';
  closeBtn.innerHTML = ICON_CLOSE;
  closeBtn.setAttribute('aria-label', 'Close Quick Panel');

  headerRight.append(headerRightSearchMount, headerRightChatMount, closeBtn);
  header.append(headerLeft, headerRight);

  // Content
  const content = document.createElement('div');
  content.className = 'qp-content ac-scroll';

  const contentSearchMount = document.createElement('div');
  contentSearchMount.className = 'qp-content-mount qp-content-mount--search';

  const contentChatMount = document.createElement('div');
  contentChatMount.className = 'qp-content-mount qp-content-mount--chat';

  content.append(contentSearchMount, contentChatMount);

  // Footer (reuse `.qp-composer` for consistent glass divider/padding)
  const footer = document.createElement('div');
  footer.className = 'qp-composer';

  const footerSearchMount = document.createElement('div');
  footerSearchMount.className = 'qp-footer-mount qp-footer-mount--search';

  const footerChatMount = document.createElement('div');
  footerChatMount.className = 'qp-footer-mount qp-footer-mount--chat';

  footer.append(footerSearchMount, footerChatMount);

  // Assemble
  panel.append(header, content, footer);
  overlay.append(panel);
  mount.append(overlay);
  disposer.add(() => overlay.remove());

  elements = {
    overlay,
    panel,
    header,
    headerLeft,
    headerRight,
    closeBtn,
    headerSearchMount,
    headerChatMount,
    headerRightSearchMount,
    headerRightChatMount,
    content,
    contentSearchMount,
    contentChatMount,
    footer,
    footerSearchMount,
    footerChatMount,
  };

  // --------------------------------------------------------
  // View Switching
  // --------------------------------------------------------

  function renderView(view: QuickPanelView): void {
    if (!elements) return;

    elements.panel.dataset.qpView = view;

    // Search view visibility
    const isSearch = view === 'search';
    elements.headerSearchMount.hidden = !isSearch;
    elements.headerRightSearchMount.hidden = !isSearch;
    elements.contentSearchMount.hidden = !isSearch;
    elements.footerSearchMount.hidden = !isSearch;

    // Chat view visibility
    const isChat = view === 'chat';
    elements.headerChatMount.hidden = !isChat;
    elements.headerRightChatMount.hidden = !isChat;
    elements.contentChatMount.hidden = !isChat;
    elements.footerChatMount.hidden = !isChat;
  }

  function setView(view: QuickPanelView): void {
    if (disposed) return;
    if (view !== 'search' && view !== 'chat') return;
    if (view === currentView) return;

    currentView = view;
    renderView(currentView);

    try {
      options.onViewChange?.(currentView);
    } catch {
      // Best-effort callback
    }
  }

  // Apply initial visibility
  renderView(currentView);

  // --------------------------------------------------------
  // Close Handling
  // --------------------------------------------------------

  function requestClose(reason: 'button' | 'backdrop' | 'api' = 'api'): void {
    if (disposed) return;

    try {
      options.onRequestClose?.(reason);
    } catch {
      // Best-effort: caller owns lifecycle
    }
  }

  disposer.listen(closeBtn, 'click', () => requestClose('button'));

  if (closeOnBackdropClick) {
    disposer.listen(overlay, 'click', (ev: MouseEvent) => {
      if (disposed) return;
      if (ev.target === overlay) {
        requestClose('backdrop');
      }
    });
  }

  // --------------------------------------------------------
  // Public API
  // --------------------------------------------------------

  return {
    getElements: () => elements,
    getView: () => currentView,
    setView,
    requestClose,
    dispose: () => {
      if (disposed) return;
      disposed = true;
      elements = null;
      disposer.dispose();
    },
  };
}