import './index.css';
import { confirmRegistrationPage } from './pages/Auth/ConfirmRegistration';
import { forgotPasswordPage } from './pages/Auth/ForgotPassword';
import { loginPage } from './pages/Auth/Login';
import { registerPage } from './pages/Auth/Register';
import { buttonsPreviewPage } from './pages/Dashboard/Buttons';
import { companySettingsDashboardPage } from './pages/Dashboard/CompanySettings';
import { attendanceDashboardPage } from './pages/Dashboard/Attendance';
import { attendanceDetailDashboardPage } from './pages/Dashboard/AttendanceDetail';
import { customerEditDashboardPage } from './pages/Dashboard/CustomerEdit';
import { customersDashboardPage } from './pages/Dashboard/Customers';
import { employeesDashboardPage } from './pages/Dashboard/Employees';
import { inventoriesDashboardPage } from './pages/Dashboard/Inventories';
import { newCustomerDashboardPage } from './pages/Dashboard/NewCustomer';
import { employeeProfileDashboardPage } from './pages/Dashboard/EmployeeProfile';
import { completeRegistrationDashboardPage } from './pages/Dashboard/CompleteRegistration';
import { completeRegistrationFilledDashboardPage } from './pages/Dashboard/CompleteRegistrationFilled';
import { academyCompletionDashboardPage } from './pages/Dashboard/AcademyCompletion';
import { academyCreateCourseDashboardPage } from './pages/Dashboard/AcademyCreateCourse';
import { academyCourseDashboardPage } from './pages/Dashboard/AcademyCourse';
import { academyFailedDashboardPage } from './pages/Dashboard/AcademyFailed';
import { academyTestDashboardPage } from './pages/Dashboard/AcademyTest';
import { dashboardHomePage } from './pages/Dashboard/Home';
import { dashboardMailboxPage, setActiveMailboxMail } from './pages/Dashboard/Mailbox';
import { priceListEditDashboardPage } from './pages/Dashboard/PriceListEdit';
import { priceListsDashboardPage } from './pages/Dashboard/PriceLists';
import { templatesDashboardPage } from './pages/Dashboard/Templates';
import { ordersDashboardPage } from './pages/Dashboard/Orders';
import { orderDetailDashboardPage } from './pages/Dashboard/OrderDetail';
import { issuedDocumentsDashboardPage } from './pages/Dashboard/IssuedDocuments';
import { issuedDocumentDetailDashboardPage } from './pages/Dashboard/IssuedDocumentDetail';
import { issuedOrdersDashboardPage } from './pages/Dashboard/IssuedOrders';
import { newDocumentDashboardPage } from './pages/Dashboard/NewDocument';
import { newIssuedOrderDashboardPage } from './pages/Dashboard/NewIssuedOrder';
import { newReceivedDocumentDashboardPage } from './pages/Dashboard/NewReceivedDocument';
import { newSupplierDashboardPage } from './pages/Dashboard/NewSupplier';
import { receivedDocumentDetailDashboardPage } from './pages/Dashboard/ReceivedDocumentDetail';
import { receivedDocumentsDashboardPage } from './pages/Dashboard/ReceivedDocuments';
import { issueDashboardPage } from './pages/Dashboard/Issue';
import { receiptDashboardPage } from './pages/Dashboard/Receipt';
import { supplierEditDashboardPage } from './pages/Dashboard/SupplierEdit';
import { suppliersDashboardPage } from './pages/Dashboard/Suppliers';
import { stockMovementsDashboardPage } from './pages/Dashboard/StockMovements';
import { transferDashboardPage } from './pages/Dashboard/Transfer';
import { secondVehicleEditDashboardPage, vehicleEditDashboardPage } from './pages/Dashboard/VehicleEdit';
import { vehiclesDashboardPage } from './pages/Dashboard/Vehicles';
import { warehousesDashboardPage } from './pages/Dashboard/Warehouses';
import { getDashboardButtonPalette, dashboardInteractiveSurfaceStyle, dashboardInteractiveSurfaceClassName } from './components/dashboard/company-settings/DashboardTableButton';

const mainLightSuccessPalette = getDashboardButtonPalette('light', 'success');
const mainStandardSuccessPalette = getDashboardButtonPalette('standard', 'success');
const mainOutlineSuccessPalette = getDashboardButtonPalette('outline', 'success');
const mainOutlineSuccessBorderColor = 'borderColor' in mainOutlineSuccessPalette ? mainOutlineSuccessPalette.borderColor : '#B6E5A1';

const routes: Record<string, () => string> = {
  '/': confirmRegistrationPage,
  '/buttons': buttonsPreviewPage,
  '/complete-registration': completeRegistrationDashboardPage,
  '/complete-registration-filled': completeRegistrationFilledDashboardPage,
  '/confirm-registration': confirmRegistrationPage,
  '/dashboard': dashboardHomePage,
  '/dashboard/attendance': attendanceDashboardPage,
  '/dashboard/attendance-detail': attendanceDetailDashboardPage,
  '/dashboard/academy-completion': academyCompletionDashboardPage,
  '/dashboard/academy-create-course': academyCreateCourseDashboardPage,
  '/dashboard/academy-course': academyCourseDashboardPage,
  '/dashboard/academy-failed': academyFailedDashboardPage,
  '/dashboard/academy-test': academyTestDashboardPage,
  '/dashboard/buttons': buttonsPreviewPage,
  '/dashboard/customer-edit': customerEditDashboardPage,
  '/dashboard/customers': customersDashboardPage,
  '/dashboard/customers/new': newCustomerDashboardPage,
  '/dashboard/employees': employeesDashboardPage,
  '/dashboard/inventories': inventoriesDashboardPage,
  '/dashboard/supplier-edit': supplierEditDashboardPage,
  '/dashboard/price-list-edit': priceListEditDashboardPage,
  '/dashboard/price-lists': priceListsDashboardPage,
  '/dashboard/templates': templatesDashboardPage,
  '/dashboard/orders': ordersDashboardPage,
  '/dashboard/issued-documents': issuedDocumentsDashboardPage,
  '/dashboard/issued-orders': issuedOrdersDashboardPage,
  '/dashboard/received-documents': receivedDocumentsDashboardPage,
  '/dashboard/issue': issueDashboardPage,
  '/dashboard/receipt': receiptDashboardPage,
  '/dashboard/suppliers': suppliersDashboardPage,
  '/dashboard/stock-movements': stockMovementsDashboardPage,
  '/dashboard/transfer': transferDashboardPage,
  '/dashboard/vehicle-edit': vehicleEditDashboardPage,
  '/dashboard/vehicle-edit-2': secondVehicleEditDashboardPage,
  '/dashboard/vehicles': vehiclesDashboardPage,
  '/dashboard/new-document': newDocumentDashboardPage,
  '/dashboard/new-issued-order': newIssuedOrderDashboardPage,
  '/dashboard/new-received-document': newReceivedDocumentDashboardPage,
  '/dashboard/suppliers/new': newSupplierDashboardPage,
  '/dashboard/warehouses': warehousesDashboardPage,
  '/dashboard/home': dashboardHomePage,
  '/dashboard/mailbox': dashboardMailboxPage,
  '/dashboard/company-settings': companySettingsDashboardPage,
  '/dashboard/employee-profile': employeeProfileDashboardPage,
  '/dashboard/complete-registration': completeRegistrationDashboardPage,
  '/dashboard/complete-registration-filled': completeRegistrationFilledDashboardPage,
  '/login': loginPage,
  '/forgot-password': forgotPasswordPage,
  '/register': registerPage,
};

function getRoute() {
  return window.location.hash.slice(1) || '/';
}

function getPage(route: string) {
  if (route.startsWith('/dashboard/orders/') && route.length > '/dashboard/orders/'.length) {
    const orderId = decodeURIComponent(route.slice('/dashboard/orders/'.length));
    return orderDetailDashboardPage(orderId);
  }

  if (route.startsWith('/dashboard/issued-documents/') && route.length > '/dashboard/issued-documents/'.length) {
    const docId = decodeURIComponent(route.slice('/dashboard/issued-documents/'.length));
    return issuedDocumentDetailDashboardPage(docId);
  }

  if (route.startsWith('/dashboard/received-documents/') && route.length > '/dashboard/received-documents/'.length) {
    const docId = decodeURIComponent(route.slice('/dashboard/received-documents/'.length));
    return receivedDocumentDetailDashboardPage(docId);
  }

  const page = routes[route] ?? confirmRegistrationPage;
  return page();
}

function render() {
  const app = document.querySelector<HTMLDivElement>('#app');

  if (!app) {
    return;
  }

  const route = getRoute();
  app.innerHTML = getPage(route);
  initializePriceListEditScrollbars();
}

function syncPriceListEditScrollbar(root: HTMLElement) {
  const headerArea = root.querySelector<HTMLElement>('[data-price-list-edit-header-area]');
  const bodyArea = root.querySelector<HTMLElement>('[data-price-list-edit-body-area]');
  const track = root.querySelector<HTMLElement>('[data-price-list-edit-scrollbar-track]');
  const thumb = root.querySelector<HTMLElement>('[data-price-list-edit-scrollbar-thumb]');
  const thumbWidth = 82;

  if (!headerArea || !bodyArea || !track || !thumb) {
    return;
  }

  const trackWidth = track.clientWidth;
  const maxScrollLeft = Math.max(bodyArea.scrollWidth - bodyArea.clientWidth, 0);
  const maxThumbOffset = Math.max(trackWidth - thumbWidth, 0);
  const thumbOffset = maxScrollLeft === 0 ? 0 : (bodyArea.scrollLeft / maxScrollLeft) * maxThumbOffset;

  thumb.style.width = `${thumbWidth}px`;
  thumb.style.transform = `translateX(${thumbOffset}px)`;
  thumb.style.cursor = maxScrollLeft === 0 ? 'default' : 'grab';

  if (headerArea.scrollLeft !== bodyArea.scrollLeft) {
    headerArea.scrollLeft = bodyArea.scrollLeft;
  }
}

function initializePriceListEditScrollbars() {
  document.querySelectorAll<HTMLElement>('[data-price-list-edit-scroll-root]').forEach((root) => {
    const headerArea = root.querySelector<HTMLElement>('[data-price-list-edit-header-area]');
    const bodyArea = root.querySelector<HTMLElement>('[data-price-list-edit-body-area]');
    const track = root.querySelector<HTMLElement>('[data-price-list-edit-scrollbar-track]');
    const thumb = root.querySelector<HTMLElement>('[data-price-list-edit-scrollbar-thumb]');

    if (!headerArea || !bodyArea || !track || !thumb) {
      return;
    }

    if (root.dataset.priceListEditScrollbarInitialized === 'true') {
      syncPriceListEditScrollbar(root);
      return;
    }

    root.dataset.priceListEditScrollbarInitialized = 'true';

    let pointerStartX = 0;
    let startBodyScrollLeft = 0;
    let isDragging = false;
    let isSyncingScroll = false;

    const setScrollPosition = (scrollLeft: number) => {
      const maxScrollLeft = Math.max(bodyArea.scrollWidth - bodyArea.clientWidth, 0);
      const nextScrollLeft = Math.min(Math.max(scrollLeft, 0), maxScrollLeft);

      isSyncingScroll = true;
      bodyArea.scrollLeft = nextScrollLeft;
      headerArea.scrollLeft = nextScrollLeft;
      syncPriceListEditScrollbar(root);
      isSyncingScroll = false;
    };

    const stopDragging = (pointerId?: number) => {
      isDragging = false;
      thumb.style.cursor = Math.max(bodyArea.scrollWidth - bodyArea.clientWidth, 0) > 0 ? 'grab' : 'default';

      if (pointerId !== undefined && thumb.hasPointerCapture(pointerId)) {
        thumb.releasePointerCapture(pointerId);
      }
    };

    thumb.addEventListener('pointerdown', (event) => {
      if (Math.max(bodyArea.scrollWidth - bodyArea.clientWidth, 0) === 0) {
        return;
      }

      isDragging = true;
      pointerStartX = event.clientX;
      startBodyScrollLeft = bodyArea.scrollLeft;
      thumb.style.cursor = 'grabbing';
      thumb.setPointerCapture(event.pointerId);
      event.preventDefault();
    });

    thumb.addEventListener('pointermove', (event) => {
      if (!isDragging) {
        return;
      }

      const maxScrollLeft = Math.max(bodyArea.scrollWidth - bodyArea.clientWidth, 0);
      const maxThumbOffset = Math.max(track.clientWidth - thumb.clientWidth, 0);

      if (maxScrollLeft === 0 || maxThumbOffset === 0) {
        return;
      }

      const deltaX = event.clientX - pointerStartX;
      const nextScrollLeft = startBodyScrollLeft + (deltaX / maxThumbOffset) * maxScrollLeft;

      setScrollPosition(nextScrollLeft);
    });

    thumb.addEventListener('pointerup', (event) => {
      stopDragging(event.pointerId);
    });

    thumb.addEventListener('pointercancel', (event) => {
      stopDragging(event.pointerId);
    });

    track.addEventListener('pointerdown', (event) => {
      if (event.target instanceof Node && thumb.contains(event.target)) {
        return;
      }

      const maxScrollLeft = Math.max(bodyArea.scrollWidth - bodyArea.clientWidth, 0);
      const maxThumbOffset = Math.max(track.clientWidth - thumb.clientWidth, 0);

      if (maxScrollLeft === 0 || maxThumbOffset === 0) {
        return;
      }

      const rect = track.getBoundingClientRect();
      const targetThumbOffset = Math.min(Math.max(event.clientX - rect.left - thumb.clientWidth / 2, 0), maxThumbOffset);

      setScrollPosition((targetThumbOffset / maxThumbOffset) * maxScrollLeft);
    });

    headerArea.addEventListener('scroll', () => {
      if (isSyncingScroll) {
        return;
      }

      setScrollPosition(headerArea.scrollLeft);
    });

    bodyArea.addEventListener('scroll', () => {
      if (isSyncingScroll) {
        return;
      }

      setScrollPosition(bodyArea.scrollLeft);
    });

    syncPriceListEditScrollbar(root);
  });
}

function setMailboxComposeModalOpen(isOpen: boolean) {
  const panel = document.querySelector<HTMLElement>('[data-mailbox-compose-panel]');

  if (!panel) {
    return;
  }

  panel.classList.toggle('hidden', !isOpen);
  panel.classList.toggle('flex', isOpen);
  panel.setAttribute('aria-hidden', String(!isOpen));
}

function createMailboxRecipientChip(email: string) {
  const chip = document.createElement('span');

  chip.className = 'inline-flex h-7 shrink-0 items-center gap-3 rounded-md px-3 text-[12px] font-semibold';
  chip.setAttribute('style', `font-family: 'Inter', sans-serif; background-color: ${mainLightSuccessPalette.backgroundColor}; color: ${mainLightSuccessPalette.textColor};`);
  chip.setAttribute('data-mailbox-recipient-chip', '');

  const label = document.createElement('span');

  label.textContent = email;

  const removeButton = document.createElement('button');

  removeButton.type = 'button';
  removeButton.className = `${dashboardInteractiveSurfaceClassName()} flex h-4.5 w-4.5 items-center justify-center rounded-sm`;
  removeButton.setAttribute('aria-label', `Odebrat adresu ${email}`);
  removeButton.setAttribute('data-mailbox-recipient-remove', '');
  removeButton.setAttribute('style', dashboardInteractiveSurfaceStyle({
    backgroundColor: mainOutlineSuccessBorderColor,
    textColor: mainLightSuccessPalette.textColor,
    hoverBackgroundColor: mainOutlineSuccessBorderColor,
    hoverTextColor: mainLightSuccessPalette.textColor,
  }));

  const icon = document.createElement('span');

  icon.className = 'relative block h-1.5 w-1.5';
  icon.setAttribute('aria-hidden', 'true');

  const firstStroke = document.createElement('span');

  firstStroke.className = 'absolute left-1/2 top-1/2 h-px w-1.5 -translate-x-1/2 -translate-y-1/2 rotate-45';
  firstStroke.style.backgroundColor = mainLightSuccessPalette.textColor;

  const secondStroke = document.createElement('span');

  secondStroke.className = 'absolute left-1/2 top-1/2 h-px w-1.5 -translate-x-1/2 -translate-y-1/2 -rotate-45';
  secondStroke.style.backgroundColor = mainLightSuccessPalette.textColor;

  icon.append(firstStroke, secondStroke);
  removeButton.appendChild(icon);
  chip.append(label, removeButton);

  return chip;
}

function commitMailboxRecipientInput(input: HTMLInputElement) {
  const field = input.closest<HTMLElement>('[data-mailbox-recipient-field]');

  if (!field) {
    return;
  }

  const rawValue = input.value.trim();

  if (!rawValue) {
    return;
  }

  const recipients = rawValue
    .split(/[;,]+/)
    .map((value) => value.trim())
    .filter(Boolean);

  recipients.forEach((email) => {
    const chip = createMailboxRecipientChip(email);
    field.insertBefore(chip, input);
  });

  input.value = '';
}

function setMailboxDropdownOpen(root: HTMLElement, isOpen: boolean) {
  const panel = root.querySelector<HTMLElement>('[data-mailbox-dropdown-panel]');

  if (!panel) {
    return;
  }

  root.classList.toggle('mailbox-toolbar-dropdown-open', isOpen);
  panel.classList.toggle('hidden', !isOpen);
  panel.setAttribute('aria-hidden', String(!isOpen));
}

function closeMailboxDropdowns(exceptRoot?: HTMLElement) {
  document.querySelectorAll<HTMLElement>('[data-mailbox-dropdown]').forEach((root) => {
    if (exceptRoot && root === exceptRoot) {
      return;
    }

    setMailboxDropdownOpen(root, false);
  });
}

function setDashboardQuickActionsOpen(root: HTMLElement, isOpen: boolean) {
  const panel = root.querySelector<HTMLElement>('[data-dashboard-quick-actions-panel]');

  if (!panel) {
    return;
  }

  root.classList.toggle('dashboard-quick-actions-dropdown-open', isOpen);
  panel.classList.toggle('hidden', !isOpen);
  panel.setAttribute('aria-hidden', String(!isOpen));
}

function closeDashboardQuickActions(exceptRoot?: HTMLElement) {
  document.querySelectorAll<HTMLElement>('[data-dashboard-quick-actions-dropdown]').forEach((root) => {
    if (exceptRoot && root === exceptRoot) {
      return;
    }

    setDashboardQuickActionsOpen(root, false);
  });
}

function setDashboardExportOpen(root: HTMLElement, isOpen: boolean) {
  const panel = root.querySelector<HTMLElement>('[data-dashboard-export-panel]');

  if (!panel) {
    return;
  }

  panel.classList.toggle('hidden', !isOpen);
  panel.setAttribute('aria-hidden', String(!isOpen));
}

function closeDashboardExport(exceptRoot?: HTMLElement) {
  document.querySelectorAll<HTMLElement>('[data-dashboard-export-dropdown]').forEach((root) => {
    if (exceptRoot && root === exceptRoot) {
      return;
    }

    setDashboardExportOpen(root, false);
  });
}

function setDashboardCreateDropdownOpen(root: HTMLElement, isOpen: boolean) {
  const panel = root.querySelector<HTMLElement>('[data-dashboard-create-panel]');

  if (!panel) {
    return;
  }

  panel.classList.toggle('hidden', !isOpen);
  panel.setAttribute('aria-hidden', String(!isOpen));
}

function closeDashboardCreateDropdowns(exceptRoot?: HTMLElement) {
  document.querySelectorAll<HTMLElement>('[data-dashboard-create-dropdown]').forEach((root) => {
    if (exceptRoot && root === exceptRoot) {
      return;
    }

    setDashboardCreateDropdownOpen(root, false);
  });
}

function setDashboardProductSearchCategoriesOpen(root: HTMLElement, isOpen: boolean) {
  const panel = root.querySelector<HTMLElement>('[data-dashboard-product-search-categories-panel]');

  if (!panel) {
    return;
  }

  panel.classList.toggle('hidden', !isOpen);
  panel.setAttribute('aria-hidden', String(!isOpen));
}

function setDashboardProductSearchOpen(root: HTMLElement, isOpen: boolean) {
  const panel = root.querySelector<HTMLElement>('[data-dashboard-product-search-panel]');

  if (!panel) {
    return;
  }

  panel.classList.toggle('hidden', !isOpen);
  panel.setAttribute('aria-hidden', String(!isOpen));

  if (!isOpen) {
    setDashboardProductSearchCategoriesOpen(root, false);
  }
}

function closeDashboardProductSearch(exceptRoot?: HTMLElement) {
  document.querySelectorAll<HTMLElement>('[data-dashboard-product-search]').forEach((root) => {
    if (exceptRoot && root === exceptRoot) {
      return;
    }

    setDashboardProductSearchOpen(root, false);
  });
}

function setDashboardSupplierAccordionOpen(root: HTMLElement, isOpen: boolean) {
  const panel = root.querySelector<HTMLElement>('[data-dashboard-supplier-accordion-panel]');

  if (!panel) {
    return;
  }

  root.classList.toggle('dashboard-supplier-accordion-open', isOpen);
  panel.setAttribute('aria-hidden', String(!isOpen));
}

function closeDashboardSupplierAccordions(exceptRoot?: HTMLElement) {
  document.querySelectorAll<HTMLElement>('[data-dashboard-supplier-accordion]').forEach((root) => {
    if (exceptRoot && root === exceptRoot) {
      return;
    }

    setDashboardSupplierAccordionOpen(root, false);
  });
}

function setDashboardSupplierSelection(root: HTMLElement, supplierName: string) {
  const value = root.querySelector<HTMLElement>('[data-dashboard-supplier-accordion-value]');

  if (value) {
    value.textContent = supplierName;
  }

  root.querySelectorAll<HTMLElement>('[data-dashboard-supplier-option]').forEach((option) => {
    option.classList.toggle('dashboard-supplier-option-selected', option.dataset.dashboardSupplierName === supplierName);
  });
}

function setDashboardWarehouseAccordionOpen(root: HTMLElement, isOpen: boolean) {
  const panel = root.querySelector<HTMLElement>('[data-dashboard-warehouse-accordion-panel]');

  if (!panel) {
    return;
  }

  root.classList.toggle('dashboard-warehouse-accordion-open', isOpen);
  panel.setAttribute('aria-hidden', String(!isOpen));
}

function closeDashboardWarehouseAccordions(exceptRoot?: HTMLElement) {
  document.querySelectorAll<HTMLElement>('[data-dashboard-warehouse-accordion]').forEach((root) => {
    if (exceptRoot && root === exceptRoot) {
      return;
    }

    setDashboardWarehouseAccordionOpen(root, false);
  });
}

function setDashboardWarehouseSelection(root: HTMLElement, warehouseName: string) {
  const label = root.querySelector<HTMLElement>('[data-dashboard-warehouse-accordion-label]');
  const value = root.querySelector<HTMLElement>('[data-dashboard-warehouse-accordion-value]');

  if (label) {
    label.textContent = 'Sklad';
  }

  if (value) {
    value.textContent = warehouseName;
    value.classList.remove('hidden');
  }

  root.classList.add('dashboard-warehouse-accordion-selected');

  root.querySelectorAll<HTMLElement>('[data-dashboard-warehouse-option]').forEach((option) => {
    option.classList.toggle('dashboard-warehouse-option-selected', option.dataset.dashboardWarehouseName === warehouseName);
  });
}

function setQuickStockModalOpen(isOpen: boolean) {
  document.querySelectorAll<HTMLElement>('[data-quick-stock-modal]').forEach((modal) => {
    modal.classList.toggle('hidden', !isOpen);
    modal.setAttribute('aria-hidden', String(!isOpen));
  });
}

function setQuickStockTabActive(button: HTMLElement, isActive: boolean) {
  button.dataset.quickStockActive = isActive ? 'true' : 'false';
  button.setAttribute('aria-pressed', String(isActive));
  button.style.backgroundColor = isActive ? '#FFFFFF' : 'transparent';
  button.style.borderRadius = isActive ? '6px 6px 0 0' : '0';
}

function setQuickStockWarehouseActive(button: HTMLElement, isActive: boolean) {
  button.dataset.quickStockActive = isActive ? 'true' : 'false';
  button.setAttribute('aria-pressed', String(isActive));
  button.style.backgroundColor = isActive ? mainStandardSuccessPalette.backgroundColor : '#F9F9F9';
  button.style.color = isActive ? mainStandardSuccessPalette.textColor : '#656565';

  const icon = button.querySelector<HTMLElement>('[data-quick-stock-warehouse-icon]');

  if (icon) {
    icon.style.filter = isActive
      ? 'brightness(0) invert(1)'
      : 'brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(139deg) brightness(98%) contrast(93%)';
  }
}

function setWarehouseFilterActive(button: HTMLElement, isActive: boolean) {
  button.dataset.warehouseActive = isActive ? 'true' : 'false';
  button.setAttribute('aria-pressed', String(isActive));
  button.style.backgroundColor = isActive ? mainStandardSuccessPalette.backgroundColor : '#F9F9F9';
  button.style.color = isActive ? mainStandardSuccessPalette.textColor : '#656565';

  const icon = button.querySelector<HTMLElement>('[data-warehouse-filter-icon]');

  if (icon) {
    icon.style.filter = isActive
      ? 'brightness(0) invert(1)'
      : 'brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(139deg) brightness(98%) contrast(93%)';
  }
}

function activateQuickStockGroupItem(root: HTMLElement, selector: string, activeElement: HTMLElement, setter: (button: HTMLElement, isActive: boolean) => void) {
  root.querySelectorAll<HTMLElement>(selector).forEach((element) => {
    setter(element, element === activeElement);
  });
}

function setHeaderProfileMenuOpen(root: HTMLElement, isOpen: boolean) {
  const button = root.querySelector<HTMLElement>('[data-header-action="profile"]');
  const panel = root.querySelector<HTMLElement>('[data-dashboard-header-profile-menu]');

  if (!button || !panel) {
    return;
  }

  root.classList.toggle('dashboard-header-profile-open', isOpen);
  button.setAttribute('aria-pressed', String(isOpen));
  button.classList.toggle('dashboard-header-action-active', isOpen);
  panel.classList.toggle('hidden', !isOpen);
  panel.classList.toggle('block', isOpen);
  panel.setAttribute('aria-hidden', String(!isOpen));

  const profileArrow = button.querySelector<HTMLElement>('.dashboard-header-profile-arrow');

  if (profileArrow) {
    profileArrow.classList.toggle('rotate-0', isOpen);
    profileArrow.classList.toggle('rotate-180', !isOpen);
  }
}

function closeHeaderProfileMenus(exceptRoot?: HTMLElement) {
  document.querySelectorAll<HTMLElement>('[data-dashboard-header-profile]').forEach((root) => {
    if (exceptRoot && root === exceptRoot) {
      return;
    }

    setHeaderProfileMenuOpen(root, false);
  });
}

document.addEventListener('click', (event) => {
  const target = event.target;

  if (!(target instanceof Element)) {
    return;
  }

  const mailboxDropdownRoot = target.closest<HTMLElement>('[data-mailbox-dropdown]');
  const mailboxDropdownToggle = target.closest<HTMLElement>('[data-mailbox-dropdown-toggle]');

  if (mailboxDropdownToggle && mailboxDropdownRoot) {
    const panel = mailboxDropdownRoot.querySelector<HTMLElement>('[data-mailbox-dropdown-panel]');
    const isOpen = panel ? !panel.classList.contains('hidden') : false;
    const nextOpen = !isOpen;

    closeMailboxDropdowns(nextOpen ? mailboxDropdownRoot : undefined);
    setMailboxDropdownOpen(mailboxDropdownRoot, nextOpen);
    return;
  }

  if (!mailboxDropdownRoot) {
    closeMailboxDropdowns();
  }

  const dashboardQuickActionsRoot = target.closest<HTMLElement>('[data-dashboard-quick-actions-dropdown]');
  const dashboardQuickActionsToggle = target.closest<HTMLElement>('[data-dashboard-quick-actions-toggle]');

  if (dashboardQuickActionsToggle && dashboardQuickActionsRoot) {
    const panel = dashboardQuickActionsRoot.querySelector<HTMLElement>('[data-dashboard-quick-actions-panel]');
    const isOpen = panel ? !panel.classList.contains('hidden') : false;
    const nextOpen = !isOpen;

    closeDashboardQuickActions(nextOpen ? dashboardQuickActionsRoot : undefined);
    setDashboardQuickActionsOpen(dashboardQuickActionsRoot, nextOpen);
    return;
  }

  if (!dashboardQuickActionsRoot) {
    closeDashboardQuickActions();
  }

  const dashboardExportRoot = target.closest<HTMLElement>('[data-dashboard-export-dropdown]');
  const dashboardExportToggle = target.closest<HTMLElement>('[data-dashboard-export-toggle]');

  if (dashboardExportToggle && dashboardExportRoot) {
    const panel = dashboardExportRoot.querySelector<HTMLElement>('[data-dashboard-export-panel]');
    const isOpen = panel ? !panel.classList.contains('hidden') : false;
    const nextOpen = !isOpen;

    closeDashboardExport(nextOpen ? dashboardExportRoot : undefined);
    setDashboardExportOpen(dashboardExportRoot, nextOpen);
    return;
  }

  if (!dashboardExportRoot) {
    closeDashboardExport();
  }

  const dashboardCreateRoot = target.closest<HTMLElement>('[data-dashboard-create-dropdown]');
  const dashboardCreateToggle = target.closest<HTMLElement>('[data-dashboard-create-toggle]');

  if (dashboardCreateToggle && dashboardCreateRoot) {
    const panel = dashboardCreateRoot.querySelector<HTMLElement>('[data-dashboard-create-panel]');
    const isOpen = panel ? !panel.classList.contains('hidden') : false;
    const nextOpen = !isOpen;

    closeDashboardCreateDropdowns(nextOpen ? dashboardCreateRoot : undefined);
    setDashboardCreateDropdownOpen(dashboardCreateRoot, nextOpen);
    return;
  }

  if (!dashboardCreateRoot) {
    closeDashboardCreateDropdowns();
  }

  const dashboardProductSearchRoot = target.closest<HTMLElement>('[data-dashboard-product-search]');
  const dashboardProductSearchToggle = target.closest<HTMLElement>('[data-dashboard-product-search-toggle]');

  if (dashboardProductSearchToggle && dashboardProductSearchRoot) {
    const panel = dashboardProductSearchRoot.querySelector<HTMLElement>('[data-dashboard-product-search-panel]');
    const isOpen = panel ? !panel.classList.contains('hidden') : false;
    const nextOpen = !isOpen;

    closeDashboardProductSearch(nextOpen ? dashboardProductSearchRoot : undefined);
    setDashboardProductSearchOpen(dashboardProductSearchRoot, nextOpen);
    return;
  }

  if (!dashboardProductSearchRoot) {
    closeDashboardProductSearch();
  }

  const dashboardSupplierAccordionRoot = target.closest<HTMLElement>('[data-dashboard-supplier-accordion]');
  const dashboardSupplierAccordionToggle = target.closest<HTMLElement>('[data-dashboard-supplier-accordion-toggle]');
  const dashboardSupplierOption = target.closest<HTMLElement>('[data-dashboard-supplier-option]');

  if (dashboardSupplierOption && dashboardSupplierAccordionRoot) {
    const supplierName = dashboardSupplierOption.dataset.dashboardSupplierName;

    if (supplierName) {
      setDashboardSupplierSelection(dashboardSupplierAccordionRoot, supplierName);
    }

    setDashboardSupplierAccordionOpen(dashboardSupplierAccordionRoot, false);
    return;
  }

  if (dashboardSupplierAccordionToggle && dashboardSupplierAccordionRoot) {
    const isOpen = dashboardSupplierAccordionRoot.classList.contains('dashboard-supplier-accordion-open');
    const nextOpen = !isOpen;

    closeDashboardSupplierAccordions(nextOpen ? dashboardSupplierAccordionRoot : undefined);
    setDashboardSupplierAccordionOpen(dashboardSupplierAccordionRoot, nextOpen);
    return;
  }

  if (!dashboardSupplierAccordionRoot) {
    closeDashboardSupplierAccordions();
  }

  const dashboardWarehouseAccordionRoot = target.closest<HTMLElement>('[data-dashboard-warehouse-accordion]');
  const dashboardWarehouseAccordionToggle = target.closest<HTMLElement>('[data-dashboard-warehouse-accordion-toggle]');
  const dashboardWarehouseOption = target.closest<HTMLElement>('[data-dashboard-warehouse-option]');

  if (dashboardWarehouseOption && dashboardWarehouseAccordionRoot) {
    const warehouseName = dashboardWarehouseOption.dataset.dashboardWarehouseName;

    if (warehouseName) {
      setDashboardWarehouseSelection(dashboardWarehouseAccordionRoot, warehouseName);
    }

    setDashboardWarehouseAccordionOpen(dashboardWarehouseAccordionRoot, false);
    return;
  }

  if (dashboardWarehouseAccordionToggle && dashboardWarehouseAccordionRoot) {
    const isOpen = dashboardWarehouseAccordionRoot.classList.contains('dashboard-warehouse-accordion-open');
    const nextOpen = !isOpen;

    closeDashboardWarehouseAccordions(nextOpen ? dashboardWarehouseAccordionRoot : undefined);
    setDashboardWarehouseAccordionOpen(dashboardWarehouseAccordionRoot, nextOpen);
    return;
  }

  if (!dashboardWarehouseAccordionRoot) {
    closeDashboardWarehouseAccordions();
  }

  const dashboardProductSearchCategoriesToggle = target.closest<HTMLElement>('[data-dashboard-product-search-categories-toggle]');
  const dashboardProductSearchCategoriesClose = target.closest<HTMLElement>('[data-dashboard-product-search-categories-close]');

  if ((dashboardProductSearchCategoriesToggle || dashboardProductSearchCategoriesClose) && dashboardProductSearchRoot) {
    const categoriesPanel = dashboardProductSearchRoot.querySelector<HTMLElement>('[data-dashboard-product-search-categories-panel]');
    const isOpen = categoriesPanel ? !categoriesPanel.classList.contains('hidden') : false;

    if (dashboardProductSearchCategoriesClose) {
      setDashboardProductSearchCategoriesOpen(dashboardProductSearchRoot, false);
      return;
    }

    setDashboardProductSearchCategoriesOpen(dashboardProductSearchRoot, !isOpen);
    return;
  }

  const quickStockTabTrigger = target.closest<HTMLElement>('[data-quick-stock-tab]');

  if (quickStockTabTrigger) {
    const quickStockRoot = quickStockTabTrigger.closest<HTMLElement>('[data-quick-stock-modal]');

    if (quickStockRoot) {
      activateQuickStockGroupItem(quickStockRoot, '[data-quick-stock-tab]', quickStockTabTrigger, setQuickStockTabActive);
    }

    return;
  }

  const quickStockWarehouseTrigger = target.closest<HTMLElement>('[data-quick-stock-warehouse]');

  if (quickStockWarehouseTrigger) {
    const quickStockRoot = quickStockWarehouseTrigger.closest<HTMLElement>('[data-quick-stock-modal]');

    if (quickStockRoot) {
      activateQuickStockGroupItem(quickStockRoot, '[data-quick-stock-warehouse]', quickStockWarehouseTrigger, setQuickStockWarehouseActive);
    }

    return;
  }

  const warehouseFilterTrigger = target.closest<HTMLElement>('[data-warehouse-filter]');

  if (warehouseFilterTrigger) {
    const warehouseFilterRoot = warehouseFilterTrigger.closest<HTMLElement>('[data-warehouse-filter-root]');

    if (warehouseFilterRoot) {
      activateQuickStockGroupItem(warehouseFilterRoot, '[data-warehouse-filter]', warehouseFilterTrigger, setWarehouseFilterActive);
    }

    return;
  }

  const quickStockOpenTrigger = target.closest<HTMLElement>('[data-quick-stock-open]');

  if (quickStockOpenTrigger) {
    setQuickStockModalOpen(true);
    return;
  }

  const quickStockCloseTrigger = target.closest<HTMLElement>('[data-quick-stock-close]');

  if (quickStockCloseTrigger) {
    setQuickStockModalOpen(false);
    return;
  }

  const orderRowOpenTrigger = target.closest<HTMLElement>('[data-order-route]');

  if (orderRowOpenTrigger) {
    if (target.closest('[data-order-row-checkbox]')) {
      return;
    }

    const route = orderRowOpenTrigger.dataset.orderRoute;

    if (route) {
      window.location.hash = route;
    }

    return;
  }

  const dashboardTab = target.closest<HTMLElement>('[data-dashboard-tab]');

  if (dashboardTab) {
    const tabsContainer = dashboardTab.closest<HTMLElement>('[data-dashboard-tabs]');

    if (!tabsContainer) {
      return;
    }

    const tabs = tabsContainer.querySelectorAll<HTMLElement>('[data-dashboard-tab]');

    tabs.forEach((tab) => {
      const isActive = tab === dashboardTab;
      tab.classList.toggle('dashboard-pill-active', isActive);
      tab.setAttribute('aria-pressed', String(isActive));
    });

    const tabGroup = dashboardTab.dataset.dashboardTabGroup ?? tabsContainer.dataset.dashboardTabGroup;
    const tabIndex = dashboardTab.dataset.dashboardTabIndex;

    if (tabGroup && tabIndex) {
      const panels = document.querySelectorAll<HTMLElement>(`[data-dashboard-panel-group="${tabGroup}"]`);

      panels.forEach((panel) => {
        const isActive = panel.dataset.dashboardPanelIndex === tabIndex;
        panel.classList.toggle('hidden', !isActive);
        panel.setAttribute('aria-hidden', String(!isActive));
      });
    }

    return;
  }

  const composeOpenTrigger = target.closest<HTMLElement>('[data-mailbox-compose-open]');

  if (composeOpenTrigger) {
    setMailboxComposeModalOpen(true);
    return;
  }

  const mailboxRowOpenTrigger = target.closest<HTMLElement>('[data-mailbox-mail-open]');

  if (mailboxRowOpenTrigger) {
    if (target.closest('[data-mailbox-row-checkbox]')) {
      return;
    }

    const mailId = mailboxRowOpenTrigger.dataset.mailboxMailId;

    if (mailId === 'europapier-order') {
      setActiveMailboxMail(mailId);
      render();
    }

    return;
  }

  const mailboxDetailBackTrigger = target.closest<HTMLElement>('[data-mailbox-detail-back]');

  if (mailboxDetailBackTrigger) {
    setActiveMailboxMail(null);
    render();
    return;
  }

  const composeCloseTrigger = target.closest<HTMLElement>('[data-mailbox-compose-close]');

  if (composeCloseTrigger) {
    setMailboxComposeModalOpen(false);
    return;
  }

  const recipientRemoveTrigger = target.closest<HTMLElement>('[data-mailbox-recipient-remove]');

  if (recipientRemoveTrigger) {
    recipientRemoveTrigger.closest('[data-mailbox-recipient-chip]')?.remove();
    return;
  }

  const recipientField = target.closest<HTMLElement>('[data-mailbox-recipient-field]');

  if (recipientField) {
    recipientField.querySelector<HTMLInputElement>('[data-mailbox-recipient-input]')?.focus();
    return;
  }

  const headerProfileRoot = target.closest<HTMLElement>('[data-dashboard-header-profile]');
  const headerProfileToggle = target.closest<HTMLElement>('[data-header-action="profile"]');

  if (headerProfileToggle && headerProfileRoot) {
    const panel = headerProfileRoot.querySelector<HTMLElement>('[data-dashboard-header-profile-menu]');
    const isOpen = panel ? !panel.classList.contains('hidden') : false;
    const nextOpen = !isOpen;

    closeHeaderProfileMenus(nextOpen ? headerProfileRoot : undefined);
    setHeaderProfileMenuOpen(headerProfileRoot, nextOpen);
    return;
  }

  if (!headerProfileRoot) {
    closeHeaderProfileMenus();
  }

  const headerAction = target.closest<HTMLElement>('[data-header-action]');

  if (headerAction) {
    const pressed = headerAction.getAttribute('aria-pressed') === 'true';
    const nextPressed = !pressed;

    headerAction.setAttribute('aria-pressed', String(nextPressed));
    headerAction.classList.toggle('dashboard-header-action-active', nextPressed);

    const profileArrow = headerAction.querySelector<HTMLElement>('.dashboard-header-profile-arrow');

    if (profileArrow) {
      profileArrow.classList.toggle('rotate-0', nextPressed);
      profileArrow.classList.toggle('rotate-180', !nextPressed);
    }

    return;
  }

  const toggle = target.closest<HTMLElement>('[data-sidebar-toggle]');

  if (!toggle) {
    return;
  }

  const section = toggle.closest<HTMLElement>('[data-sidebar-section]');

  if (!section) {
    return;
  }

  const collapsed = section.classList.toggle('sidebar-section-collapsed');
  toggle.setAttribute('aria-expanded', String(!collapsed));
});

document.addEventListener('keydown', (event) => {
  const target = event.target;

  if (target instanceof HTMLElement && target.hasAttribute('data-order-route') && (event.key === 'Enter' || event.key === ' ')) {
    event.preventDefault();
    const route = target.dataset.orderRoute;

    if (route) {
      window.location.hash = route;
    }

    return;
  }

  if (!(target instanceof HTMLInputElement) || !target.hasAttribute('data-mailbox-recipient-input')) {
    return;
  }

  if (event.key === 'Enter' || event.key === ',' || event.key === ';' || event.key === 'Tab') {
    if (!target.value.trim()) {
      return;
    }

    event.preventDefault();
    commitMailboxRecipientInput(target);
  }
});

document.addEventListener(
  'focusout',
  (event) => {
    const target = event.target;

    if (!(target instanceof HTMLInputElement) || !target.hasAttribute('data-mailbox-recipient-input')) {
      return;
    }

    commitMailboxRecipientInput(target);
  },
  true,
);

document.addEventListener('submit', (event) => {
  const form = event.target;

  if (!(form instanceof HTMLFormElement)) {
    return;
  }

  const route = form.dataset.navigateTo;

  if (!route) {
    return;
  }

  event.preventDefault();
  window.location.hash = route;
});

window.addEventListener('hashchange', render);
window.addEventListener('resize', initializePriceListEditScrollbars);
render();