@use 'angular-material-css-vars' as mat-css-vars;
@use '../../../../styles/_globals.scss' as *;

:host {
  --schedule-time-width: 3em;
  // Responsive day column widths
  --schedule-day-width: 180px; // Default for desktop

  @include mq(md, max) {
    // Tablet
    --schedule-day-width: 150px;
  }

  @include mq(xs, max) {
    // Mobile
    --schedule-day-width: 120px;
  }

  // Enable horizontal scroll when viewport is too small for 7 days
  &[data-horizontal-scroll] {
    .week-header {
      // Remove left/right constraints to allow horizontal scrolling
      left: auto;
      right: auto;
      // Force width to match grid width
      width: fit-content;
      min-width: 100%;
    }

    .grid-container {
      // Allow columns to scale up when space available, but enforce minimum for scroll
      grid-template-columns: var(--schedule-time-width) repeat(
          var(--nr-of-days),
          minmax(var(--schedule-day-width), 1fr)
        );
      // Force grid to size based on content, not container
      width: fit-content;
      min-width: 100%;
      // Disable centering to allow proper overflow
      place-content: start;
    }

    .days {
      // Match grid-container column widths exactly
      grid-template-columns: var(--schedule-time-width) repeat(
          var(--nr-of-days),
          minmax(var(--schedule-day-width), 1fr)
        );
      // Ensure days container matches grid width
      width: fit-content;
      // Disable centering
      place-content: start;
    }
  }

  // State-based styles using host classes
  &.isCtrlKeyPressed {
    .current-time,
    .work-start,
    .work-end,
    schedule-event,
    schedule-event ::ng-deep * {
      pointer-events: none !important;
    }
  }

  // Show grabbing cursor during all drag operations
  &.is-dragging {
    cursor: grabbing !important;

    .grid-container {
      cursor: grabbing !important;
    }
  }

  // When dragging without shift key, disable pointer events on schedule-events
  // This prevents dropping tasks on other events (forces time-based scheduling)
  &.is-dragging:not(.isShiftKeyPressed) {
    .current-time,
    .work-start,
    .work-end,
    schedule-event,
    schedule-event ::ng-deep * {
      pointer-events: none !important;
    }

    // Prevent CDK drag-drop from animating items out of the way in time mode.
    // Keep the custom drag preview exempt so its scale transform remains applied.
    schedule-event:not(.custom-drag-preview) {
      transform: none !important;
      transition: none !important;
    }
  }
}

.grid-container {
  --schedule-row-height: 9px;
  --schedule-row-height-mobile: 7px;
  --schedule-fr: 12;
  --schedule-total-rows: calc(24 * var(--schedule-fr));

  grid-auto-flow: column;
  display: grid;
  place-content: center;
  text-align: center;
  grid-auto-columns: 1fr;
  grid-template-columns: var(--schedule-time-width) repeat(var(--nr-of-days), 1fr);
  grid-template-rows: repeat(var(--schedule-total-rows), var(--schedule-row-height));

  @include mq(xs, max) {
    grid-template-rows: repeat(
      var(--schedule-total-rows),
      var(--schedule-row-height-mobile)
    );
  }
}

// TODO fix that this currently only shows inside schedule-day-panel
// Fix drag placeholder to stay in original position and make it subtle
.cdk-drag-placeholder {
  opacity: 0.2 !important;
  //transform: none !important;
  //transition: none !important;
  //position: static !important;
}

.week-header {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--extra-border-color);
  border-bottom: 1px solid var(--extra-border-color);
  box-shadow: var(--whiteframe-shadow-1dp);
  z-index: 10;
  color: var(--text-color);
  background: var(--bg-lighter);

  &.isInPanel {
    //border: 0;
    justify-content: center;
    border-top: 0;
    box-shadow: none;
    background: transparent;
    border: none;

    * {
      border: none !important;
    }

    .filler {
      display: none;
    }
  }
}

.days {
  grid-auto-flow: column;
  display: grid;
  place-content: center;
  text-align: center;
  grid-auto-columns: 1fr;
  grid-template-columns: var(--schedule-time-width) repeat(var(--nr-of-days), 1fr);
}

.day {
  line-height: 32px;
  font-size: 18px;
  border-left: 1px solid var(--extra-border-color);

  @include mq(xs, max) {
    font-size: 14px;
    line-height: 20px;
  }
}

.day-num {
  font-weight: 600;
  display: inline;
  padding-right: 6px;
}

.day-day {
  display: inline;
  font-weight: 100;
}

.time {
  grid-column: 1;
  align-self: end;
  font-size: 80%;
  position: relative;
  color: var(--text-color-muted);
  padding-right: 6px;
  line-height: 1.2;
  text-align: right;
}

.col {
  border-left: 1px solid var(--grid-color);
  grid-row: 1 / span var(--schedule-total-rows);
  grid-column: span 1;

  // Only show drag-over background when shift is pressed (planning for day)
  :host(.isShiftKeyPressed) &.drag-over {
    background: mat-css-vars.mat-css-color-primary($opacity: 0.05);
  }
}

.row {
  grid-column: 2 / -1;
  border-top: 1px solid var(--grid-color);
  pointer-events: none;
}

.current-time {
  border-top: 2px solid var(--c-accent);
  position: relative;
  top: calc(50% - 1px);
}

.circle {
  width: 12px;
  height: 12px;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  background: var(--c-accent);
  position: relative;
  top: -6px;
  left: -6px;
}

.cdk-drag-dragging {
  position: relative;
  z-index: 99 !important;
  box-shadow: var(--whiteframe-shadow-20dp);
}

.drop-label {
  display: flex;
  top: 40px;
  position: sticky;
  line-height: 1.2;
  padding: 4px 4px;
  justify-content: stretch;
  align-self: start;
  z-index: 33;
  box-shadow: var(--whiteframe-shadow-4dp);
  width: inherit;
  flex-direction: column;
  border: 1px dashed var(--c-primary);
  background: var(--c-primary);
  color: var(--palette-primary-contrast-500);
  pointer-events: none;
}

.excess-entries {
  z-index: 10;
  position: sticky;
  bottom: -2px;
  max-height: 100px;
  padding-bottom: 30px;
  border-top: 4px solid var(--c-warn);
  border: 2px solid var(--c-warn);
  box-shadow: var(--whiteframe-shadow-6dp);
  border-radius: 4px;
  background: var(--bg);

  @media (min-height: 1000px) {
    max-height: 200px;
  }

  schedule-event {
    margin: 5px;
  }
}

.excess-entries-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;

  @include mq(xs, max) {
    padding: 4px;
  }

  mat-icon {
    font-size: 20px;
    height: 20px;

    @include mq(xs, max) {
      font-size: 16px;
      height: 16px;
    }
  }
}

.work-end,
.work-start {
  scroll-margin-top: 80px;
  border-top: 2px dashed var(--separator-color);
  min-width: 100px;
  grid-column: 2 / -1;
  position: relative;
  color: var(--text-color);

  &:hover {
    z-index: 22;
    border-color: var(--text-color-most-intense);
  }

  > div {
    left: 0;
    font-weight: bold;
    font-size: 10px;
    position: absolute;
    bottom: 100%;
    line-height: 1;
    padding: 2px 8px;
    margin-bottom: -6px;
    background: var(--bg);
  }

  :host(.is-dragging) & {
    pointer-events: none;
  }
}

.work-end {
  > div {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -16px;
  }
}

// Prevent CDK from moving items out of the way when not in shift mode
:host(:not(.isShiftKeyPressed)) {
  schedule-event.cdk-drag:not(.custom-drag-preview) {
    transform: none !important;
    transition: none !important;
  }

  schedule-event.cdk-drag-dragging + schedule-event:not(.custom-drag-preview) {
    transform: none !important;

    &:after {
      display: none;
    }
  }
}

// In shift mode, allow minimal movement but control it
:host(.isShiftKeyPressed) {
  schedule-event.cdk-drag-dragging + schedule-event {
    &:after {
      display: none;
    }
  }
}

// no animation feels slicker and is less error prone
.cdk-drag {
  transition: none !important;
}

.cdk-drag-animating {
  transition: none !important;
}

.drag-time-preview {
  position: fixed;
  transform: translate(-50%, -100%);
  z-index: 2000;
  pointer-events: none;
  margin-top: -44px;

  .time-badge {
    background: var(--c-accent);
    color: var(--text-on-accent);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--whiteframe-shadow-8dp);
    white-space: nowrap;
    border: 2px solid var(--c-primary);
  }
}

.shift-key-info {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none;
  animation: fadeInOut 3s ease-in-out;

  .info-content {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-darker);
    color: var(--text-color);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: var(--whiteframe-shadow-12dp);
    border: 1px solid var(--extra-border-color);
    font-size: 14px;
    white-space: nowrap;

    mat-icon {
      font-size: 18px;
      height: 18px;
      width: 18px;
      color: var(--c-accent);
    }

    span {
      font-weight: 500;
    }
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  20%,
  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}

// Custom drag preview
.custom-drag-preview {
  --scale: 1.02;
  pointer-events: none;
  border: 2px solid var(--c-primary) !important;
  z-index: 1000;
  box-shadow: var(--whiteframe-shadow-8dp);
  transform-origin: center top;
  border-radius: 0;
  transform: scale(var(--scale)) !important;

  :host.is-dragging:not(.isShiftKeyPressed) & {
    transform-origin: center top;
    transform: scale(var(--scale)) !important;
  }

  &.isScheduleForDay {
    border-radius: var(--card-border-radius);
    border-radius: 12px;

    //.drag-preview-time-badge {
    //font-size: 13px;
    //}
  }

  // NOTE has global styles in _overwrite-material.scss
  .drag-preview-time-badge {
    top: 0 !important;
    right: -8px;
    border-radius: 12px;
  }

  &.isShiftInsertPreview {
    transform: translate(-16px, -50%) scale(var(--scale)) !important;
  }
}

.cdk-drag-preview {
  opacity: 0 !important;
}
