// =============================================================================
// TiptapField — Advanced rich-text editor (Tiptap v3)
// =============================================================================

@use '../variables' as *;
@use '../mixins' as *;

// -----------------------------------------------------------------------------
// Container
// -----------------------------------------------------------------------------

.tiptap-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  position: relative;
}

.tiptap-field__label {
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: rgb(var(--color-text-primary));
  line-height: $line-height-sm;
}

.tiptap-field__required {
  color: $error-500;
  margin-left: 2px;
}

// -----------------------------------------------------------------------------
// Editor wrapper
// -----------------------------------------------------------------------------

.tiptap-field__wrapper {
  position: relative;
  border: 1px solid rgb(var(--color-border-default));
  border-radius: $radius-lg;
  background: rgb(var(--color-surface-input));
  @include transition-fast(border-color, box-shadow);

  .tiptap-field--focused & {
    border-color: $primary-500;
    box-shadow: 0 0 0 3px rgba($primary-500, 0.15);
  }

  .tiptap-field--error & {
    border-color: $error-500;
  }

  .tiptap-field--error.tiptap-field--focused & {
    box-shadow: 0 0 0 3px rgba($error-500, 0.15);
  }

  .tiptap-field--disabled & {
    opacity: 0.6;
    pointer-events: none;
    background: rgb(var(--color-surface-muted));
  }
}

// -----------------------------------------------------------------------------
// ProseMirror editor content area
// -----------------------------------------------------------------------------

.tiptap-field__editor {
  .ProseMirror {
    min-height: var(--tiptap-min-height, 200px);
    max-height: var(--tiptap-max-height, 600px);
    overflow-y: auto;
    padding: 0.75rem 1rem;
    outline: none;
    font-size: $font-size-base;
    line-height: 1.7;
    color: rgb(var(--color-text-primary));
    @include custom-scrollbar;

    // Placeholder
    p.is-editor-empty:first-child::before {
      content: attr(data-placeholder);
      float: left;
      color: rgb(var(--color-text-muted));
      pointer-events: none;
      height: 0;
    }

    // --- Typography ---

    > * + * {
      margin-top: 0.75em;
    }

    h1, h2, h3, h4, h5, h6 {
      font-weight: $font-weight-bold;
      line-height: 1.3;
      color: rgb(var(--color-text-primary));
    }

    h1 { font-size: $font-size-2xl; margin-top: 1.25em; }
    h2 { font-size: $font-size-xl; margin-top: 1em; }
    h3 { font-size: $font-size-lg; margin-top: 0.75em; }

    p {
      margin: 0;
    }

    strong {
      font-weight: $font-weight-bold;
    }

    em {
      font-style: italic;
    }

    u {
      text-decoration: underline;
    }

    s {
      text-decoration: line-through;
    }

    // --- Lists ---

    ul, ol {
      padding-left: 1.5em;
      margin: 0.5em 0;
    }

    ul {
      list-style-type: disc;
    }

    ol {
      list-style-type: decimal;
    }

    li {
      margin: 0.25em 0;

      > p {
        margin: 0;
      }
    }

    // --- Blockquote ---

    blockquote {
      border-left: 3px solid $primary-400;
      padding-left: 1rem;
      margin: 0.75em 0;
      color: rgb(var(--color-text-secondary));
      font-style: italic;

      .dark & {
        border-left-color: $primary-600;
      }
    }

    // --- Code ---

    code {
      font-family: $font-mono;
      font-size: 0.9em;
      background: rgb(var(--color-surface-muted));
      border-radius: $radius-sm;
      padding: 0.15em 0.35em;
      color: $error-600;

      .dark & {
        color: $error-400;
      }
    }

    pre {
      background: $neutral-900;
      color: $neutral-100;
      border-radius: $radius;
      padding: 0.75rem 1rem;
      overflow-x: auto;
      margin: 0.75em 0;
      font-family: $font-mono;
      font-size: $font-size-sm;
      line-height: 1.6;

      code {
        background: none;
        color: inherit;
        padding: 0;
        border-radius: 0;
        font-size: inherit;
      }

      // Lowlight syntax highlighting
      .hljs-keyword { color: #c678dd; }
      .hljs-string { color: #98c379; }
      .hljs-number { color: #d19a66; }
      .hljs-comment { color: #5c6370; font-style: italic; }
      .hljs-function { color: #61afef; }
      .hljs-tag { color: #e06c75; }
      .hljs-attr { color: #d19a66; }
      .hljs-built_in { color: #e6c07b; }
    }

    // --- Horizontal rule ---

    hr {
      border: none;
      border-top: 2px solid rgb(var(--color-border-light));
      margin: 1.5em 0;
    }

    // --- Links ---

    a,
    .tiptap-link {
      color: $primary-500;
      text-decoration: underline;
      cursor: pointer;

      &:hover {
        color: $primary-700;
      }

      .dark & {
        color: $primary-400;

        &:hover {
          color: $primary-300;
        }
      }
    }

    // --- Images ---

    .tiptap-image {
      max-width: 100%;
      height: auto;
      border-radius: $radius;
      margin: 0.75em 0;
      display: block;
    }

    img {
      max-width: 100%;
      height: auto;
      border-radius: $radius;
    }

    // --- Tables ---

    table {
      border-collapse: collapse;
      width: 100%;
      margin: 0.75em 0;

      th, td {
        border: 1px solid rgb(var(--color-border-default));
        padding: 0.5rem 0.75rem;
        min-width: 80px;
        vertical-align: top;
        font-size: $font-size-sm;
      }

      th {
        background: rgb(var(--color-surface-muted));
        font-weight: $font-weight-semibold;
        text-align: left;
      }

      td {
        background: rgb(var(--color-surface-input));
      }
    }

    // --- Text alignment ---

    .has-text-align-center { text-align: center; }
    .has-text-align-right { text-align: right; }
    .has-text-align-justify { text-align: justify; }
  }
}

// -----------------------------------------------------------------------------
// Bubble menu (floating toolbar on text selection)
// -----------------------------------------------------------------------------

.tiptap-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: $neutral-900;
  border: 1px solid $neutral-700;
  border-radius: $radius;
  box-shadow: $shadow-lg;
  z-index: $z-dropdown;

  .dark & {
    background: $neutral-800;
    border-color: $neutral-600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

.tiptap-bubble__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: $neutral-200;
  border-radius: $radius-sm;
  cursor: pointer;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  @include transition-fast(background-color, color);

  &:hover {
    background: rgba(white, 0.12);
    color: white;
  }

  &--active {
    background: rgba(white, 0.2);
    color: white;
  }

  .dark & {
    color: $neutral-100;

    &:hover {
      background: rgba(white, 0.15);
      color: white;
    }

    &--active {
      background: $primary-600;
      color: white;
    }
  }
}

.tiptap-bubble__divider {
  width: 1px;
  height: 18px;
  background: $neutral-600;
  margin: 0 3px;
  flex-shrink: 0;

  .dark & {
    background: $neutral-500;
  }
}

// -----------------------------------------------------------------------------
// Slash command menu
// -----------------------------------------------------------------------------

.tiptap-slash {
  position: absolute;
  z-index: $z-dropdown;
  background: rgb(var(--color-surface-card));
  border: 1px solid rgb(var(--color-border-default));
  border-radius: $radius-lg;
  box-shadow: $shadow-lg;
  padding: 0.375rem;
  min-width: 240px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  @include custom-scrollbar;
}

.tiptap-slash__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  background: none;
  border-radius: $radius;
  cursor: pointer;
  text-align: left;
  @include transition-fast(background-color);

  &:hover,
  &--active {
    background: rgb(var(--color-surface-hover));
  }
}

.tiptap-slash__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: $radius;
  background: rgb(var(--color-surface-muted));
  color: rgb(var(--color-text-secondary));
  font-size: $font-size-sm;
  font-weight: $font-weight-semibold;
}

.tiptap-slash__content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.tiptap-slash__label {
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: rgb(var(--color-text-primary));
  @include truncate;
}

.tiptap-slash__desc {
  font-size: $font-size-xs;
  color: rgb(var(--color-text-muted));
  @include truncate;
}

// -----------------------------------------------------------------------------
// Error and hint text
// -----------------------------------------------------------------------------

.tiptap-field__error-text {
  font-size: $font-size-xs;
  color: $error-500;
  margin: 0;
}

.tiptap-field__hint {
  font-size: $font-size-xs;
  color: rgb(var(--color-text-muted));
  margin: 0;
}

// =============================================================================
// Drag Handle (Notion-style block controls)
// =============================================================================

.tiptap-drag-handle {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  @include transition-fast(opacity);

  &:hover {
    opacity: 1;
  }
}

.tiptap-drag-handle__grip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
  border-radius: $radius-sm;
  cursor: grab;
  color: rgb(var(--color-text-muted));
  @include transition-fast(background-color, color);

  &:hover {
    background: rgb(var(--color-surface-hover));
    color: rgb(var(--color-text-secondary));
  }

  &:active {
    cursor: grabbing;
  }
}

.tiptap-drag-handle__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
  border: none;
  background: none;
  border-radius: $radius-sm;
  cursor: pointer;
  color: rgb(var(--color-text-muted));
  padding: 0;
  @include transition-fast(background-color, color);

  &:hover {
    background: rgb(var(--color-surface-hover));
    color: rgb(var(--color-text-primary));
  }
}

// =============================================================================
// Block Menu (dropdown with categories, search, items)
// =============================================================================

.tiptap-block-menu {
  position: absolute;
  z-index: $z-dropdown;
  background: rgb(var(--color-surface-card));
  border: 1px solid rgb(var(--color-border-default));
  border-radius: $radius-lg;
  box-shadow: $shadow-lg;
  width: 320px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tiptap-block-menu__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgb(var(--color-border-light));
  color: rgb(var(--color-text-muted));

  input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: $font-size-sm;
    color: rgb(var(--color-text-primary));

    &::placeholder {
      color: rgb(var(--color-text-muted));
    }
  }
}

.tiptap-block-menu__categories {
  display: flex;
  gap: 2px;
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid rgb(var(--color-border-light));
  overflow-x: auto;
  flex-shrink: 0;

  // Hide scrollbar on horizontal scroll
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }

  button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    border-radius: $radius;
    font-size: $font-size-xs;
    font-weight: $font-weight-medium;
    color: rgb(var(--color-text-secondary));
    white-space: nowrap;
    cursor: pointer;
    @include transition-fast(background-color, color);

    &:hover {
      background: rgb(var(--color-surface-hover));
    }

    &.active {
      background: rgb(var(--color-surface-active));
      color: $primary-600;

      .dark & {
        color: $primary-400;
      }
    }
  }
}

.tiptap-block-menu__items {
  flex: 1;
  overflow-y: auto;
  padding: 0.375rem;
  @include custom-scrollbar;
}

.tiptap-block-menu__group-title {
  font-size: $font-size-xs;
  font-weight: $font-weight-semibold;
  color: rgb(var(--color-text-muted));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.5rem 0.25rem;

  &:not(:first-child) {
    margin-top: 0.5rem;
    border-top: 1px solid rgb(var(--color-border-light));
    padding-top: 0.75rem;
  }
}

.tiptap-block-menu__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.5rem;
  border: none;
  background: none;
  border-radius: $radius;
  cursor: pointer;
  text-align: left;
  @include transition-fast(background-color);

  &:hover,
  &--active {
    background: rgb(var(--color-surface-hover));
  }
}

.tiptap-block-menu__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: $radius;
  background: rgb(var(--color-surface-muted));
  color: rgb(var(--color-text-secondary));
  border: 1px solid rgb(var(--color-border-light));
}

.tiptap-block-menu__item-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.tiptap-block-menu__item-label {
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: rgb(var(--color-text-primary));
  @include truncate;
}

.tiptap-block-menu__item-desc {
  font-size: $font-size-xs;
  color: rgb(var(--color-text-muted));
  @include truncate;
}

.tiptap-block-menu__empty {
  padding: 1.5rem;
  text-align: center;
  font-size: $font-size-sm;
  color: rgb(var(--color-text-muted));
}

// =============================================================================
// ProseMirror block hover/drag highlighting (blockEditor mode)
// =============================================================================

.tiptap-field--block-editor {
  .ProseMirror {
    // Left padding for drag handle zone
    padding-left: 3rem;

    // Visual hover highlight on top-level blocks
    > p, > h1, > h2, > h3, > h4, > h5, > h6,
    > ul, > ol, > blockquote, > pre, > table,
    > hr, > .tiptap-image {
      position: relative;
      border-radius: $radius-sm;
      @include transition-fast(background-color);

      &:hover {
        background: rgb(var(--color-surface-hover) / 0.5);
      }
    }

    // Style for active dragging (tiptap adds .ProseMirror-selectednode)
    .ProseMirror-selectednode {
      outline: 2px solid $primary-400;
      outline-offset: 2px;
      border-radius: $radius-sm;

      .dark & {
        outline-color: $primary-500;
      }
    }

    // Drop cursor (line shown during dragging)
    .ProseMirror-gapcursor {
      &::after {
        border-top: 2px solid $primary-500;
      }
    }
  }
}

// Drag handle wrapper created by tiptap — position absolutely
.tiptap-field--block-editor .tiptap-field__wrapper {
  [data-drag-handle-wrapper] {
    position: absolute;
    left: 0.5rem;
    @include transition-fast(opacity);
  }

  &:hover .tiptap-drag-handle {
    opacity: 1;
  }
}
