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

:host {
  --schedule-time-width: #{$schedule-time-column-width};
  // Responsive day column widths
  --schedule-day-width: #{$schedule-day-column-width-desktop}; // Default for desktop

  @include mq(md, max) {
    // Tablet
    --schedule-day-width: #{$schedule-day-column-width-tablet};
  }

  @include mq(xs, max) {
    // Mobile
    --schedule-day-width: #{$schedule-day-column-width-mobile};
  }

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

      // Match grid-container column widths exactly
      .week-header-dates {
        grid-template-columns: var(--schedule-time-width) repeat(
            var(--nr-of-days),
            minmax(var(--schedule-day-width), 1fr)
          );
        width: fit-content;
        min-width: 100%;
      }

      // Pin the corner cell above the sticky time column. Border on the
      // right side of the *time* column instead of the left side of the
      // first day, so it stays visible (sticky) when scrolling horizontally.
      .filler {
        position: sticky;
        left: 0;
        // Topmost element in the week-header's stacking context, so the
        // corner stays in front of the day cells next to it.
        z-index: 1;
        @include extraBorder('-right');
      }

      // First day's left border is now drawn by .filler's right border.
      .filler + .day {
        border-left: 0;
      }
    }

    .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%;
    }

    // Pin the time labels to the left edge while scrolling horizontally.
    // The right border stays with the time column (sticky) instead of with
    // the first day column (scrolls), so the divider remains visible.
    .time-column-bg {
      display: block;
      grid-column: 1;
      grid-row: 1 / -1;
      position: sticky;
      left: 0;
      z-index: 4;
      border-right: 1px solid var(--grid-color);
      pointer-events: none;
    }

    // First day's left border is now drawn by .time-column-bg's right border.
    // .row + .col selects the first .col in the grid (it sits right after the
    // last .row in DOM order; subsequent .col follow other .col).
    .row + .col {
      border-left: 0;
    }

    .time {
      position: sticky;
      left: 0;
      z-index: 5;
    }

    // The sticky time column only needs a background once the user has
    // actually scrolled horizontally — that's when day content starts
    // sliding under it.
    &[data-hscrolled] .time-column-bg {
      background: var(--bg-lighter);
    }
  }

  // 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;
  // Use start alignment to ensure grid aligns with header
  place-content: start;
  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));
  // Ensure same sizing as .days header grid
  width: 100%;
  box-sizing: border-box;

  @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 {
  --over-budget-badge-bg: var(--schedule-event-bg);

  width: 100%;
  box-sizing: border-box;
  display: grid;
  position: sticky;
  top: 0;
  @include extraBorder('-bottom');
  // Above the sticky time column (z-index 4–5) so it visually sits in front
  // of it both at rest and while scrolling.
  z-index: 12;
  color: var(--text-color);
  background: var(--bg-lighter);
  box-shadow: var(--whiteframe-shadow-1dp);

  &.isInPanel {
    //border: 0;
    justify-content: center;
    border-top: 0;
    box-shadow: none;
    background: transparent;
    border: none;
    --over-budget-badge-bg: var(--schedule-event-bg-in-side-panel);

    .day {
      border: none !important;
    }

    // Panel is a single, full-width day cell with centered content. Anchoring
    // the badge absolutely to the right edge leaves a large gap from the
    // centered date; let it flow as a centered flex child next to the date
    // instead (the week-view multi-column layout keeps the absolute variant).
    .over-budget-badge {
      position: static;
      transform: none;
    }

    .filler {
      display: none;
    }
  }
}

.week-header-dates {
  display: grid;
  grid-auto-flow: column;
  // Use start alignment to match grid-container
  place-content: start;
  text-align: center;
  grid-auto-columns: 1fr;
  grid-template-columns: var(--schedule-time-width) repeat(var(--nr-of-days), 1fr);
  width: 100%;
  box-sizing: border-box;
  min-height: 32px;

  @include mq(xs, max) {
    min-height: 22px;
  }
}

.day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-half);
  min-width: 0;
  padding: 0 var(--s-quarter);
  box-sizing: border-box;
  line-height: 32px;
  font-size: 18px;
  @include extraBorder('-left');

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

  mat-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
  }
}

.day-num {
  font-weight: 600;
}

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

.over-budget-badge {
  position: absolute;
  top: 50%;
  right: var(--s-half);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-quarter);
  box-sizing: border-box;
  max-width: calc(100% - var(--s-half));
  height: calc(var(--s2) + var(--s-quarter));
  min-width: calc(var(--s2) + var(--s-quarter));
  padding: 0 var(--s-quarter);
  overflow: hidden;
  border: 1px solid var(--c-warn);
  border-radius: var(--s2);
  background: var(--over-budget-badge-bg);
  color: var(--c-warn);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;

  &:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  @include mq(xs, max) {
    right: var(--s-quarter);
    font-size: 10px;
  }
}

.over-budget-symbol {
  font-weight: 900;
}

.over-budget-count {
  font-weight: 700;
}

.time {
  grid-column: 1;
  align-self: end;
  font-size: 80%;
  position: relative;
  // Pull the label up so its visual center sits on the hour line instead
  // of sitting slightly below it.
  top: -0.7em;
  color: var(--text-color-muted);
  padding-right: 6px;
  line-height: 1.2;
  text-align: right;

  // To prevent overlapsing first time ("00:00") by .week-header
  &:first-of-type {
    height: 5px;
  }
}

// Background strip behind the time column. Only shown in horizontal-scroll mode
// (see &[data-horizontal-scroll] above) where it becomes sticky-left.
.time-column-bg {
  display: none;
}

.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: var(--s-half) var(--s-half);
  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;
}

.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: var(--s-quarter) var(--s);
    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: var(--s) var(--s2);
    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: var(--s);
    background: var(--bg-darker);
    color: var(--text-color);
    padding: 12px var(--s2);
    border-radius: 8px;
    box-shadow: var(--whiteframe-shadow-12dp);
    @include extraBorder();
    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;
}
