/*
 * Editor Component
 * Fullscreen content editor with sidebar tree and edit panel
 * Benchmarked against BelajarGPT admin organize view
 */

@layer components {

  /* === Header Bar === */

  .editor-header {
    display: flex;
    align-items: center;
    gap: var(--block-space-half);
    padding: var(--block-space-half) var(--block-space);
    border-block-end: var(--border-subtle);
    background-color: var(--color-white);
  }

  .editor-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-gray-dark);
    transition: color 150ms ease;

    @media (any-hover: hover) {
      &:hover { color: var(--color-gray-darker); }
    }
  }

  .editor-header__title-wrapper {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
  }

  .editor-header__title {
    font-size: var(--text-medium);
    color: var(--color-gray-darker);
    text-decoration: none;
    white-space: nowrap;
  }

  .editor-header__title--active {
    background-color: oklch(var(--lch-black) / 8%);
    border-radius: var(--radius);
    padding: 0.25rem 0.5rem;
  }

  .editor-header__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
  }

  .editor-header__action {
    display: flex;
    align-items: center;
    gap: 0.25ch;
    padding: var(--block-space-half);
    border-radius: var(--radius-sm);
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
    white-space: nowrap;
    transition: color 150ms ease, background-color 150ms ease;

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-gray-darker);
        background-color: var(--color-gray-lightest);
      }
    }
  }

  /* === Split Layout === */

  .editor-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  .editor-sidebar {
    inline-size: 20rem;
    flex-shrink: 0;
    border-inline-end: var(--border-subtle);
    overflow-y: auto;
    /* background-color: oklch(var(--lch-gray-lightest) / 30%); */
  }

  .editor-main {
    flex: 1;
    overflow-y: auto;
    background-color: var(--color-white);
  }

  .editor-main__content {
    max-inline-size: none;
    padding: var(--block-space) var(--block-space);
  }

  /* === Inline title + slug === */

  .editor-title-row {
    display: flex;
    align-items: baseline;
    gap: var(--block-space);

    & > :first-child {
      flex: 1;
      min-inline-size: 0;
    }
  }

  .editor-title-row__toggles {
    display: flex;
    align-items: center;
    gap: var(--block-space);
    flex-shrink: 0;
  }

  .editor-title {
    font-size: var(--text-xx-large);
    line-height: var(--leading-tight, 1.25);
    letter-spacing: -0.01em;
    border: none;
    background: transparent;
    padding: 0;
    inline-size: 100%;
    color: var(--color-gray-darker);

    &::placeholder {
      color: var(--color-gray-medium);
    }

    &:focus {
      outline: none;
    }
  }

  .editor-slug {
    font-size: var(--text-normal);
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--color-gray-dark);
    border: none;
    background: transparent;
    padding: 0;
    inline-size: 100%;

    &::placeholder {
      color: var(--color-gray-medium);
    }

    &:focus {
      outline: none;
    }
  }

  /* === Action Bar (sticky form toolbar) === */

  .editor-action-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--block-space);
    padding: var(--block-space-half) var(--block-space);
    border-block-end: var(--border-subtle);
    background-color: var(--color-white);
  }


  /* === Tree === */

  .editor-tree {
    padding: var(--block-space-half);
  }

  /* Module item */
  .tree-module {
    margin-block-end: 2px;
  }

  .tree-module__header {
    display: flex;
    align-items: center;
    gap: 0.5ch;
    padding: var(--block-space-half) var(--block-space-half);
    border-radius: var(--radius);
    transition: background-color 150ms ease;

    @media (any-hover: hover) {
      &:hover {
        background-color: oklch(var(--lch-black) / 5%);
      }
    }
  }

  .tree-module__header--active {
    background-color: oklch(var(--lch-black) / 8%);
  }

  .tree-module__lessons {
    margin-inline-start: 1.5rem;

    /* Ensure empty lesson containers remain droppable */
    > [data-controller~="sortable"] {
      min-height: 2rem;
    }
  }

  /* Lesson item */
  .tree-lesson {
    display: flex;
    align-items: center;
    gap: 0.5ch;
    padding: 0.25rem var(--block-space-half);
    border-radius: var(--radius);
    transition: background-color 150ms ease;

    @media (any-hover: hover) {
      &:hover {
        background-color: oklch(var(--lch-black) / 5%);
      }
    }
  }

  .tree-lesson--active {
    background-color: oklch(var(--lch-black) / 8%);
  }

  /* Shared tree item elements */

  .tree-item__drag {
    flex-shrink: 0;
    color: var(--color-gray-dark);
    transition: color 150ms ease;

    @media (any-hover: hover) {
      &:hover { color: var(--color-gray-dark); }
    }
  }

  .tree-item__badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 1.25rem;
    inline-size: 1.25rem;
    border-radius: var(--radius-full);
    font-size: 0.5625rem;
    line-height: 1;
  }

  .tree-item__badge--module {
    background-color: var(--color-gray-dark);
    color: var(--color-white);
  }

  .tree-item__badge--lesson {
    background-color: var(--color-gray-medium);
    color: var(--color-white);
  }

  .tree-item__badge--video {
    background-color: var(--color-green-dark);
    color: var(--color-white);
  }

  .tree-item__title {
    flex: 1;
    font-size: var(--text-normal);
    color: var(--color-gray-darker);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 150ms ease;

    @media (any-hover: hover) {
      &:hover { color: var(--color-green-dark); }
    }
  }

  .tree-item__tag {
    flex-shrink: 0;
    font-size: 0.5625rem;
    line-height: 1;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }

  .tree-item__tag--free {
    background-color: var(--color-green-lightest);
    color: var(--color-green-dark);
  }

  .tree-item__visibility {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0.125rem;
    cursor: pointer;
    color: var(--color-gray-dark);
    transition: color 150ms ease;

    @media (any-hover: hover) {
      &:hover { color: var(--color-gray-darker); }
    }

    /* Toggle eye icons based on checkbox state */
    & input[type="checkbox"]:checked ~ .tree-item__icon-hidden { display: none; }
    & input[type="checkbox"]:checked ~ .tree-item__icon-visible { display: flex; }
    & input[type="checkbox"]:not(:checked) ~ .tree-item__icon-visible { display: none; }
    & input[type="checkbox"]:not(:checked) ~ .tree-item__icon-hidden { display: flex; }
  }

  /* === Orphaned Items === */

  .editor-orphans {
    border-block-start: var(--border-subtle);
    padding: var(--block-space-half);
  }

  .editor-orphans__header {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    padding: var(--block-space-half);
  }

  .editor-orphans__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: 0.25rem;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-medium);
    color: var(--color-white);
    font-size: 0.5625rem;
    line-height: 1;
  }

  /* === Cursor === */

  .cursor-move {
    cursor: grab;
  }

  /* === Empty State === */

  .editor-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    padding: var(--block-space-double);
    text-align: center;
    gap: var(--block-space-half);
  }

}

/* === Fullscreen mode === */
/* In modules layer to override body.full grid from layout.css */

@keyframes flash-dismiss {
  0%, 60% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 -100%; }
}

@layer modules {
  body.full.editor-fullscreen {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;

    & > .admin-sidebar,
    & > .admin-sidebar__overlay,
    & > input.admin-sidebar__toggle {
      display: none;
    }

    & > main {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      block-size: 100dvh;
      overflow: hidden;

      & > .admin-topbar {
        display: none;
      }

      & > .flash {
        position: absolute;
        inset-inline: 0;
        z-index: var(--z-toast);
        animation: flash-dismiss 3s ease forwards;
      }
    }
  }
}