import * as plugins from "../plugins.js";

import {
  DeesElement,
  css,
  cssManager,
  customElement,
  html,
  property,
  state,
  type TemplateResult,
} from "@design.estate/dees-element";
import { demoFunc } from "./viewer.demo.js";
import { DeDocument } from "./document.js";

import "@design.estate/dees-catalog";

declare global {
  interface HTMLElementTagNameMap {
    "dedocument-viewer": DeDocumentViewer;
  }
}

type TZoomPreset = "auto" | "fit-width" | "fit-page" | number;

interface ISpacingPreset {
  label: string;
  value: number;
  icon: string;
}

const ZOOM_PRESETS: { label: string; value: TZoomPreset }[] = [
  { label: "Auto Fit", value: "auto" },
  { label: "Fit Width", value: "fit-width" },
  { label: "Fit Page", value: "fit-page" },
  { label: "50%", value: 50 },
  { label: "75%", value: 75 },
  { label: "100%", value: 100 },
  { label: "125%", value: 125 },
  { label: "150%", value: 150 },
  { label: "200%", value: 200 },
];

const SPACING_PRESETS: ISpacingPreset[] = [
  { label: "Compact", value: 8, icon: "lucide:minimize2" },
  { label: "Normal", value: 16, icon: "lucide:minus" },
  { label: "Comfortable", value: 32, icon: "lucide:maximize2" },
];

@customElement("dedocument-viewer")
export class DeDocumentViewer extends DeesElement {
  // DEMO
  public static demo = demoFunc;

  // INSTANCE
  @property({
    type: Object,
    reflect: true,
  })
  accessor letterData: plugins.tsclass.business.TLetter = null;

  @property({
    type: Object,
    reflect: true,
  })
  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;

  // External configuration properties
  @property({ type: Number })
  accessor initialZoom: number = null; // Initial zoom % (null = auto)

  @property({ type: Number })
  accessor initialPageGap: number = 16; // Initial page gap in pixels

  // Internal state
  @state()
  accessor zoomMode: TZoomPreset = "auto";

  @state()
  accessor zoomLevel: number = null; // null = auto, otherwise percentage

  @state()
  accessor pageGap: number = 16;

  @state()
  accessor showZoomDropdown: boolean = false;

  @state()
  accessor displayZoom: number = 100;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        --toolbar-height: 40px;
        --toolbar-bg: ${cssManager.bdTheme("rgba(250, 250, 250, 0.95)", "rgba(24, 24, 24, 0.95)")};
        --toolbar-border: ${cssManager.bdTheme("rgba(0, 0, 0, 0.1)", "rgba(255, 255, 255, 0.1)")};
        --button-hover: ${cssManager.bdTheme("rgba(0, 0, 0, 0.08)", "rgba(255, 255, 255, 0.08)")};
        --button-active: ${cssManager.bdTheme("rgba(0, 0, 0, 0.12)", "rgba(255, 255, 255, 0.15)")};
        --text-primary: ${cssManager.bdTheme("#1a1a1a", "#e5e5e5")};
        --text-secondary: ${cssManager.bdTheme("#666", "#999")};
        --accent-color: ${cssManager.bdTheme("#0066cc", "#4d9fff")};
        --dropdown-bg: ${cssManager.bdTheme("#fff", "#1e1e1e")};
        --dropdown-shadow: ${cssManager.bdTheme("0 4px 16px rgba(0,0,0,0.15)", "0 4px 16px rgba(0,0,0,0.4)")};
        --slider-track: ${cssManager.bdTheme("#ddd", "#444")};
        --slider-fill: ${cssManager.bdTheme("#0066cc", "#4d9fff")};
      }

      .maincontainer {
        position: relative;
        height: 100%;
        width: 100%;
        background: ${cssManager.bdTheme("#eeeeeb", "#111")};
      }

      .controls {
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        height: var(--toolbar-height);
        background: var(--toolbar-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--toolbar-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        z-index: 100;
        box-sizing: border-box;
      }

      .controls__section {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .controls__divider {
        width: 1px;
        height: 20px;
        background: var(--toolbar-border);
        margin: 0 8px;
      }

      .controls__button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        border-radius: 6px;
        cursor: pointer;
        color: var(--text-primary);
        transition: background 0.15s ease;
      }

      .controls__button:hover {
        background: var(--button-hover);
      }

      .controls__button:active {
        background: var(--button-active);
      }

      .controls__button--active {
        background: var(--button-active);
        color: var(--accent-color);
      }

      .controls__button dees-icon {
        font-size: 16px;
      }

      .zoom-control {
        position: relative;
        display: flex;
        align-items: center;
        gap: 2px;
      }

      .zoom-dropdown-trigger {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border: 1px solid var(--toolbar-border);
        background: transparent;
        border-radius: 6px;
        cursor: pointer;
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 500;
        min-width: 80px;
        justify-content: space-between;
        transition: all 0.15s ease;
      }

      .zoom-dropdown-trigger:hover {
        background: var(--button-hover);
        border-color: var(--text-secondary);
      }

      .zoom-dropdown-trigger dees-icon {
        font-size: 12px;
        opacity: 0.6;
        transition: transform 0.2s ease;
      }

      .zoom-dropdown-trigger--open dees-icon {
        transform: rotate(180deg);
      }

      .zoom-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--dropdown-bg);
        border: 1px solid var(--toolbar-border);
        border-radius: 8px;
        box-shadow: var(--dropdown-shadow);
        min-width: 140px;
        padding: 4px;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(-8px);
        transition: all 0.2s ease;
      }

      .zoom-dropdown--visible {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
      }

      .zoom-dropdown__item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
        cursor: pointer;
        border-radius: 4px;
        color: var(--text-primary);
        font-size: 13px;
        transition: background 0.1s ease;
      }

      .zoom-dropdown__item:hover {
        background: var(--button-hover);
      }

      .zoom-dropdown__item--active {
        color: var(--accent-color);
        font-weight: 500;
      }

      .zoom-slider-container {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 4px;
      }

      .zoom-slider {
        width: 80px;
        height: 4px;
        -webkit-appearance: none;
        appearance: none;
        background: var(--slider-track);
        border-radius: 2px;
        outline: none;
        cursor: pointer;
      }

      .zoom-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        background: var(--slider-fill);
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.15s ease;
      }

      .zoom-slider::-webkit-slider-thumb:hover {
        transform: scale(1.15);
      }

      .zoom-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        background: var(--slider-fill);
        border: none;
        border-radius: 50%;
        cursor: pointer;
      }

      .spacing-control {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .spacing-label {
        font-size: 12px;
        color: var(--text-secondary);
        margin-right: 4px;
      }

      .spacing-presets {
        display: flex;
        align-items: center;
        gap: 2px;
      }

      .spacing-slider-container {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .spacing-slider {
        width: 60px;
        height: 4px;
        -webkit-appearance: none;
        appearance: none;
        background: var(--slider-track);
        border-radius: 2px;
        outline: none;
        cursor: pointer;
      }

      .spacing-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 12px;
        height: 12px;
        background: var(--slider-fill);
        border-radius: 50%;
        cursor: pointer;
      }

      .spacing-slider::-moz-range-thumb {
        width: 12px;
        height: 12px;
        background: var(--slider-fill);
        border: none;
        border-radius: 50%;
        cursor: pointer;
      }

      .spacing-value {
        font-size: 11px;
        color: var(--text-secondary);
        min-width: 28px;
        text-align: right;
      }

      .controlsShadow {
        position: absolute;
        top: var(--toolbar-height);
        right: 0px;
        left: 0px;
        height: 16px;
        background: ${cssManager.bdTheme(
          "linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 100%)",
          "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 100%)"
        )};
        pointer-events: none;
        z-index: 99;
      }

      .viewport {
        position: absolute;
        padding: 16px;
        padding-top: calc(var(--toolbar-height) + 16px);
        padding-bottom: 0px;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        overflow-y: scroll;
        overflow-x: auto;
        overscroll-behavior: contain;
      }

      .viewport--centered {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    `,
    // Tablet styles
    cssManager.cssForTablet(css`
      .zoom-slider-container {
        display: none;
      }
      .spacing-slider-container {
        display: none;
      }
    `),
    // Phone styles
    cssManager.cssForPhone(css`
      .zoom-slider-container {
        display: none;
      }
      .spacing-label {
        display: none;
      }
      .spacing-presets {
        display: none;
      }
      .controls__divider {
        display: none;
      }
      .controls {
        padding: 0 8px;
      }
      .controls__section {
        gap: 2px;
      }
    `),
  ];

  public render(): TemplateResult {
    return html`
      <div class="maincontainer">
        <div class="viewport ${this.zoomMode !== "auto" ? "viewport--centered" : ""}">
          ${this.letterData
            ? html`
                <dedocument-dedocument
                  .letterData=${this.letterData}
                  .documentSettings=${this.documentSettings}
                  .zoomLevel=${this.zoomLevel}
                  .pageGap=${this.pageGap}
                ></dedocument-dedocument>
              `
            : html``}
        </div>
        <div class="controls">
          ${this.renderZoomControls()}
          ${this.renderSpacingControls()}
        </div>
        <div class="controlsShadow"></div>
      </div>
    `;
  }

  private renderZoomControls(): TemplateResult {
    return html`
      <div class="controls__section">
        <!-- Zoom Out Button -->
        <button
          class="controls__button"
          @click=${() => this.handleZoomStep(-10)}
          title="Zoom Out"
        >
          <dees-icon icon="lucide:minus"></dees-icon>
        </button>

        <!-- Zoom Dropdown -->
        <div class="zoom-control">
          <button
            class="zoom-dropdown-trigger ${this.showZoomDropdown ? "zoom-dropdown-trigger--open" : ""}"
            @click=${() => this.toggleZoomDropdown()}
          >
            <span>${this.getZoomDisplayText()}</span>
            <dees-icon icon="lucide:chevronDown"></dees-icon>
          </button>
          <div class="zoom-dropdown ${this.showZoomDropdown ? "zoom-dropdown--visible" : ""}">
            ${ZOOM_PRESETS.map(
              (preset) => html`
                <button
                  class="zoom-dropdown__item ${this.isActivePreset(preset.value) ? "zoom-dropdown__item--active" : ""}"
                  @click=${() => this.handleZoomPreset(preset.value)}
                >
                  ${preset.label}
                </button>
              `
            )}
          </div>
        </div>

        <!-- Zoom In Button -->
        <button
          class="controls__button"
          @click=${() => this.handleZoomStep(10)}
          title="Zoom In"
        >
          <dees-icon icon="lucide:plus"></dees-icon>
        </button>

        <div class="controls__divider"></div>

        <!-- Zoom Slider -->
        <div class="zoom-slider-container">
          <input
            type="range"
            class="zoom-slider"
            min="25"
            max="400"
            .value=${String(this.displayZoom)}
            @input=${this.handleZoomSlider}
          />
        </div>
      </div>
    `;
  }

  private renderSpacingControls(): TemplateResult {
    return html`
      <div class="controls__section">
        <span class="spacing-label">Spacing</span>

        <!-- Spacing Presets -->
        <div class="spacing-presets">
          ${SPACING_PRESETS.map(
            (preset) => html`
              <button
                class="controls__button ${this.pageGap === preset.value ? "controls__button--active" : ""}"
                @click=${() => this.handleSpacingPreset(preset.value)}
                title="${preset.label} (${preset.value}px)"
              >
                <dees-icon icon="${preset.icon}"></dees-icon>
              </button>
            `
          )}
        </div>

        <div class="controls__divider"></div>

        <!-- Spacing Slider -->
        <div class="spacing-slider-container">
          <input
            type="range"
            class="spacing-slider"
            min="0"
            max="64"
            .value=${String(this.pageGap)}
            @input=${this.handleSpacingSlider}
          />
          <span class="spacing-value">${this.pageGap}px</span>
        </div>

        <div class="controls__divider"></div>

        <!-- Print Button -->
        <button
          class="controls__button"
          @click=${() => this.handlePrint()}
          title="Print Document"
        >
          <dees-icon icon="lucide:printer"></dees-icon>
        </button>
      </div>
    `;
  }

  private getZoomDisplayText(): string {
    if (this.zoomMode === "auto") return "Auto";
    if (this.zoomMode === "fit-width") return "Fit Width";
    if (this.zoomMode === "fit-page") return "Fit Page";
    return `${this.displayZoom}%`;
  }

  private isActivePreset(value: TZoomPreset): boolean {
    if (typeof value === "string") {
      return this.zoomMode === value;
    }
    return this.zoomMode === value || (typeof this.zoomMode === "number" && this.zoomMode === value);
  }

  private toggleZoomDropdown(): void {
    this.showZoomDropdown = !this.showZoomDropdown;

    if (this.showZoomDropdown) {
      // Close dropdown when clicking outside
      const closeHandler = (e: MouseEvent) => {
        const target = e.target as HTMLElement;
        if (!target.closest(".zoom-control")) {
          this.showZoomDropdown = false;
          document.removeEventListener("click", closeHandler);
        }
      };
      setTimeout(() => document.addEventListener("click", closeHandler), 0);
    }
  }

  private handleZoomPreset(value: TZoomPreset): void {
    this.showZoomDropdown = false;
    this.zoomMode = value;

    if (value === "auto") {
      this.zoomLevel = null;
      this.updateDisplayZoom();
    } else if (value === "fit-width") {
      // Calculate zoom to fit page width to viewport width
      this.calculateFitWidth();
    } else if (value === "fit-page") {
      // Calculate zoom to fit entire page in viewport
      this.calculateFitPage();
    } else {
      this.zoomLevel = value;
      this.displayZoom = value;
    }
  }

  private handleZoomStep(delta: number): void {
    const current = this.zoomLevel ?? this.displayZoom;
    const newZoom = Math.min(400, Math.max(25, current + delta));
    this.zoomLevel = newZoom;
    this.displayZoom = newZoom;
    this.zoomMode = newZoom;
  }

  private handleZoomSlider(e: Event): void {
    const value = parseInt((e.target as HTMLInputElement).value, 10);
    this.zoomLevel = value;
    this.displayZoom = value;
    this.zoomMode = value;
  }

  private handleSpacingPreset(value: number): void {
    this.pageGap = value;
  }

  private handleSpacingSlider(e: Event): void {
    this.pageGap = parseInt((e.target as HTMLInputElement).value, 10);
  }

  private async handlePrint(): Promise<void> {
    // Create a print-specific container - hidden on screen, visible only in print
    const printContainer = document.createElement("div");
    printContainer.className = "dedocument-print-container";
    printContainer.style.cssText = `
      position: absolute;
      left: -9999px;
      top: 0;
      width: 210mm;
      height: auto;
      visibility: hidden;
      pointer-events: none;
    `;

    // Create a document element in print mode
    const printDoc = document.createElement("dedocument-dedocument") as DeDocument;
    printDoc.letterData = this.letterData;
    printDoc.documentSettings = this.documentSettings;
    printDoc.printMode = true;
    printDoc.pageGap = 0;

    printContainer.appendChild(printDoc);
    document.body.appendChild(printContainer);

    // Add print styles - hide everything except print container during print
    const printStyles = document.createElement("style");
    printStyles.id = "dedocument-print-styles";
    printStyles.textContent = `
      @media print {
        body > *:not(.dedocument-print-container) {
          display: none !important;
        }
        .dedocument-print-container {
          position: static !important;
          left: auto !important;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          pointer-events: auto !important;
        }
        dedocument-dedocument {
          display: block !important;
        }
        dedocument-page {
          page-break-after: always;
          page-break-inside: avoid;
          break-after: page;
          break-inside: avoid;
        }
        dedocument-page:last-child {
          page-break-after: auto;
          break-after: auto;
        }
        @page {
          size: A4;
          margin: 0;
        }
      }
    `;
    document.head.appendChild(printStyles);

    // Wait for the document to render
    await new Promise((resolve) => setTimeout(resolve, 500));

    // Cleanup function
    const cleanup = () => {
      if (document.body.contains(printContainer)) {
        printContainer.remove();
      }
      if (document.head.contains(printStyles)) {
        printStyles.remove();
      }
      window.removeEventListener("afterprint", cleanup);
    };

    // Listen for print dialog close
    window.addEventListener("afterprint", cleanup);

    // Trigger print
    window.print();

    // Fallback: also clean up immediately after print() returns
    // (some browsers return from print() after dialog closes)
    setTimeout(cleanup, 100);
  }

  private calculateFitWidth(): void {
    const viewport = this.shadowRoot?.querySelector(".viewport");
    if (!viewport) return;

    // Account for padding and scrollbar width
    const viewportWidth = viewport.clientWidth - 32 - 16;
    const scale = viewportWidth / plugins.shared.A4_WIDTH;

    this.zoomLevel = Math.round(scale * 100);
    this.displayZoom = this.zoomLevel;
  }

  private calculateFitPage(): void {
    const viewport = this.shadowRoot?.querySelector(".viewport");
    if (!viewport) return;

    // Account for padding: top = toolbar (40px) + 16px, bottom = 16px margin for visibility
    const topPadding = 40 + 16; // toolbar height + padding
    const bottomPadding = 16; // some margin at bottom
    const sidePadding = 32; // 16px each side

    const viewportHeight = viewport.clientHeight - topPadding - bottomPadding;
    const viewportWidth = viewport.clientWidth - sidePadding;

    const scaleByHeight = viewportHeight / plugins.shared.A4_HEIGHT;
    const scaleByWidth = viewportWidth / plugins.shared.A4_WIDTH;
    const scale = Math.min(scaleByHeight, scaleByWidth);

    this.zoomLevel = Math.round(scale * 100);
    this.displayZoom = this.zoomLevel;
  }

  private updateDisplayZoom(): void {
    // Update display zoom based on current auto scale
    requestAnimationFrame(() => {
      const doc = this.shadowRoot?.querySelector("dedocument-dedocument") as DeDocument;
      if (doc) {
        this.displayZoom = doc.getEffectiveZoom();
      }
    });
  }

  public updated(
    changedProperties: Map<string | number | symbol, unknown>
  ): void {
    super.updated(changedProperties);

    if (changedProperties.has("letterData")) {
      // Update display zoom after document renders
      setTimeout(() => this.updateDisplayZoom(), 100);
    }
  }

  public firstUpdated(): void {
    // Apply initial settings if provided
    if (this.initialPageGap !== 16) {
      this.pageGap = this.initialPageGap;
    }

    if (this.initialZoom !== null) {
      this.zoomLevel = this.initialZoom;
      this.displayZoom = this.initialZoom;
      this.zoomMode = this.initialZoom;
    } else {
      // Update display zoom initially for auto mode
      setTimeout(() => this.updateDisplayZoom(), 200);
    }

    // Handle viewport resize to update display zoom in auto mode
    const viewport = this.shadowRoot?.querySelector(".viewport");
    if (viewport) {
      const resizeObserver = new ResizeObserver(() => {
        if (this.zoomMode === "auto" || this.zoomMode === "fit-width") {
          this.updateDisplayZoom();
        }
      });
      resizeObserver.observe(viewport);
      this.registerGarbageFunction(() => resizeObserver.disconnect());
    }
  }

  // ============================================
  // PUBLIC API METHODS
  // ============================================

  /**
   * Set the zoom level programmatically
   * @param level - Zoom percentage (25-400), or 'auto', 'fit-width', 'fit-page'
   */
  public setZoom(level: number | "auto" | "fit-width" | "fit-page"): void {
    if (level === "auto") {
      this.handleZoomPreset("auto");
    } else if (level === "fit-width") {
      this.handleZoomPreset("fit-width");
    } else if (level === "fit-page") {
      this.handleZoomPreset("fit-page");
    } else {
      const clampedZoom = Math.min(400, Math.max(25, level));
      this.zoomLevel = clampedZoom;
      this.displayZoom = clampedZoom;
      this.zoomMode = clampedZoom;
    }
  }

  /**
   * Get the current zoom percentage
   */
  public getZoom(): number {
    return this.displayZoom;
  }

  /**
   * Set the page gap (spacing between pages)
   * @param gap - Gap in pixels (0-64)
   */
  public setPageGap(gap: number): void {
    this.pageGap = Math.min(64, Math.max(0, gap));
  }

  /**
   * Get the current page gap in pixels
   */
  public getPageGap(): number {
    return this.pageGap;
  }

  /**
   * Get the total number of pages in the document
   */
  public getPageCount(): number {
    const doc = this.shadowRoot?.querySelector("dedocument-dedocument");
    if (!doc) return 0;
    const pages = doc.shadowRoot?.querySelectorAll("dedocument-page");
    return pages?.length ?? 0;
  }

  /**
   * Get the currently visible page number (1-indexed)
   */
  public getCurrentPage(): number {
    const viewport = this.shadowRoot?.querySelector(".viewport");
    const doc = this.shadowRoot?.querySelector("dedocument-dedocument");
    if (!viewport || !doc) return 1;

    const pages = doc.shadowRoot?.querySelectorAll("dedocument-page");
    if (!pages || pages.length === 0) return 1;

    const viewportRect = viewport.getBoundingClientRect();
    const viewportCenter = viewportRect.top + viewportRect.height / 2;

    let currentPage = 1;
    for (let i = 0; i < pages.length; i++) {
      const pageRect = pages[i].getBoundingClientRect();
      if (pageRect.top <= viewportCenter && pageRect.bottom >= viewportCenter) {
        currentPage = i + 1;
        break;
      }
      if (pageRect.top > viewportCenter) {
        currentPage = Math.max(1, i);
        break;
      }
      currentPage = i + 1;
    }

    return currentPage;
  }

  /**
   * Scroll to a specific page
   * @param pageNumber - Page number (1-indexed)
   * @param smooth - Whether to use smooth scrolling (default: true)
   */
  public scrollToPage(pageNumber: number, smooth: boolean = true): void {
    const doc = this.shadowRoot?.querySelector("dedocument-dedocument");
    if (!doc) return;

    const pages = doc.shadowRoot?.querySelectorAll("dedocument-page");
    if (!pages || pages.length === 0) return;

    const targetIndex = Math.min(Math.max(0, pageNumber - 1), pages.length - 1);
    const targetPage = pages[targetIndex];

    if (targetPage) {
      targetPage.scrollIntoView({
        behavior: smooth ? "smooth" : "instant",
        block: "start",
      });
    }
  }

  /**
   * Trigger the print dialog
   */
  public async print(): Promise<void> {
    await this.handlePrint();
  }
}