//
// Copyright IBM Corp. 2026
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

// Standard imports.
@use '@carbon/styles/scss/config' as carbon-config;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/utilities';

@use '../../global/styles/project-settings' as c4p-settings;

$block-class-next: #{c4p-settings.$pkg-prefix}--card-next;

// Base card styles
.#{$block-class-next} {
  position: relative;
  border: 1px solid $border-subtle-01;
  border-radius: 0; // Carbon cards don't have border radius by default
  background-color: $layer-01;
  color: $text-primary;
}

// Clickable card styles
.#{$block-class-next}--clickable {
  cursor: pointer;
  transition: background-color $duration-fast-02 motion(standard, productive);

  &:hover {
    background-color: $layer-hover-01;
  }

  &:focus {
    @include utilities.focus-outline('outline');
  }

  &:active {
    background-color: $layer-active-01;
  }
}

// Disabled state
.#{$block-class-next}--disabled {
  border-color: $border-disabled;
  background-color: $layer-01;
  color: $text-disabled;
  cursor: not-allowed;
  pointer-events: none;
}

// Header styles
// Uses a two-column grid so __title-media (left) and __title (right) can sit
// side-by-side without JS injecting wrapper divs. Each child declares its own
// grid-column; absent children simply leave their cell empty and it collapses.
//
//  col 1 (auto)  │  col 2 (1fr)
//  ──────────────────────────────────────────
//  __header-media  spans 1 / -1  (full width)
//  __title-media   col 1         │  __title col 2
//  __actions       absolute, not in flow
//
// When __title-media is absent, __title gets grid-column: 1 / -1 via :not(:has(...))
.#{$block-class-next}__header {
  position: relative;
  display: grid;
  column-gap: $spacing-05; // 16px gap between __title-media (col 1) and __title (col 2)
  grid-template-columns: auto 1fr;
  row-gap: 0; // vertical rhythm is handled by margin-block on each child
}

// Body styles
.#{$block-class-next}__body {
  @include type-style('body-compact-01');

  margin-block: $spacing-05;
  margin-block-start: 0;
  margin-inline: $spacing-05;
}

// When body is the first child (no header), restore top padding
.#{$block-class-next} > .#{$block-class-next}__body:first-child {
  margin-block-start: $spacing-05;
}

// ─── Footer ────────────────────────────────────────────────────
// Base: padded, no border — the raw-content (non-action) default.
.#{$block-class-next}__footer {
  display: flex;
  align-items: center;
  padding: $spacing-05;
}

// Action-set layout: CardAction children present.
// Override base with no padding, overflow clip, auto border, 1px gap.
.#{$block-class-next}__footer:has(> .#{$block-class-next}__action) {
  overflow: hidden;
  padding: 0;
  border-block-start: 1px solid $border-subtle;
  gap: 1px;
}

// Text/secondary actions stretch to fill available space.
.#{$block-class-next}__footer
  > .#{$block-class-next}__action:not(
    :has(.#{carbon-config.$prefix}--btn--icon-only)
  ) {
  flex: 1 0 0;
  min-inline-size: 0;

  > .#{carbon-config.$prefix}--btn,
  > * > .#{carbon-config.$prefix}--btn {
    inline-size: 100%;
    max-inline-size: none;
  }
}

// Icon-only actions are fixed-width and always right-aligned.
// margin-inline-start: auto pushes them to the right edge regardless of
// what precedes them — text action, custom content, or nothing.
.#{$block-class-next}__footer
  > .#{$block-class-next}__action:has(
    .#{carbon-config.$prefix}--btn--icon-only
  ) {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

// Consecutive icon-only actions: only the first gets the auto margin,
// the rest follow naturally in the flex row.
.#{$block-class-next}__footer
  > .#{$block-class-next}__action:has(.#{carbon-config.$prefix}--btn--icon-only)
  + .#{$block-class-next}__action:has(
    .#{carbon-config.$prefix}--btn--icon-only
  ) {
  margin-inline-start: 0;
}

// Action wrapper styles
.#{$block-class-next}__action {
  display: inline-flex;
}

// Header primitive components

// CardHeaderMedia — icon/pictogram slot above the title row.
// $spacing-05 padding on all four sides, max-height 64px per design spec.
// Spans both grid columns so it is always full-width.
.#{$block-class-next}__header-media {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  grid-column: 1 / -1; // span full width
  margin-block: $spacing-05;
  margin-inline: $spacing-05;
  max-block-size: $spacing-10; // 64px max height
}

// Media styles (uses Carbon AspectRatio)
.#{$block-class-next}__media {
  inline-size: 100%;
}

// ──────────────────────────────────────────────────────────────
// Horizontal layout
// ──────────────────────────────────────────────────────────────
// Card root: side-by-side flex row
.#{$block-class-next}--horizontal {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

// Media column in horizontal mode.
// Width is driven by the --ibm-products--card-next--media-width custom property
// (set by the mediaWidth prop, default 33.33%).
// Height stretches to match the content column via align-self: stretch.
.#{$block-class-next}__media--horizontal {
  overflow: hidden;
  flex-basis: var(
    --#{c4p-settings.$pkg-prefix}--card-next--media-width,
    33.33%
  );
  flex-shrink: 0;
  align-self: stretch;
}

// Right-hand content column: Header/Body/Footer wrapped in __content, stacks vertically.
.#{$block-class-next}--horizontal > .#{$block-class-next}__content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-inline-size: 0;
}

// Body grows to fill remaining space when present.
.#{$block-class-next}--horizontal
  > .#{$block-class-next}__content
  > .#{$block-class-next}__body {
  flex: 1 0 auto;
}

// Footer always pins to the bottom edge, whether or not a body is present.
.#{$block-class-next}--horizontal
  > .#{$block-class-next}__content
  > .#{$block-class-next}__footer {
  margin-block-start: auto;
}

// __label nested inside __title (via label prop on CardTitle).
// __title owns the horizontal margins; __label carries only typography + color.
// Truncation modifiers are standalone rules — &--modifier inside a descendant
// combinator block compiles to `.parent > .element--modifier` which only
// matches the sole modifier class, not the element with base + modifier.
// Standalone rules match both classes correctly.
.#{$block-class-next}__title > .#{$block-class-next}__label {
  @include type-style('label-01');

  color: $text-secondary;
}

.#{$block-class-next}__label--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.#{$block-class-next}__label--truncate-multi {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(
    --#{c4p-settings.$pkg-prefix}--card-next--label-line-clamp
  );
  text-overflow: ellipsis;
}

// Title container — always a flex column so label / text-row / description stack.
// Never set display on this element: truncation lives on __title-text-row below.
// min-inline-size: 0 is required because __title is a grid item: grid items
// default to min-inline-size: auto (i.e. their content width), which means
// they won't shrink to fit the cell and overflow: hidden on __title-text-row
// has no effect. Setting 0 allows the grid cell to constrain the item width.
// overflow: hidden clips any content that still escapes (e.g. unbreakable words).
.#{$block-class-next}__title {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  color: $text-primary;
  gap: $spacing-01; // 2px between label / text-row / description
  margin-inline: $spacing-05; // 16px left and right
  min-inline-size: 0;
}

// Title text row — wraps the leading icon, title text, and trailing icon.
// Truncation modifiers live here so they only clip the text row and never
// affect the flex column that keeps description visible below.
.#{$block-class-next}__title-text-row {
  // Default: inline so bare text nodes wrap naturally.
  display: block;
}

.#{$block-class-next}__title-text-row--truncate {
  overflow: hidden;
  max-inline-size: var(
    --#{c4p-settings.$pkg-prefix}--card-next--title-max-width,
    100%
  );
  text-overflow: ellipsis;
  white-space: nowrap;
}

.#{$block-class-next}__title-text-row--truncate-multi {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(
    --#{c4p-settings.$pkg-prefix}--card-next--title-line-clamp
  );
  max-inline-size: var(
    --#{c4p-settings.$pkg-prefix}--card-next--title-max-width,
    100%
  );
  text-overflow: ellipsis;
}

// CardTitleMedia — inline icon, left column of the title row.
// Sits in grid column 1; __title takes column 2 alongside it.
.#{$block-class-next}__title-media {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start; // top-align so it tracks the first line on long titles
  justify-content: center;
  grid-column: 1; // left column
  margin-block-start: $spacing-05; // aligns top edge with title text top margin
  margin-inline-start: $spacing-05; // 16px from card edge
  max-block-size: $spacing-10; // 64px max height
}

// When __title-media is present, __title sits in the right column.
// When absent, __title spans both columns (full width).
.#{$block-class-next}__header:has(> .#{$block-class-next}__title-media)
  > .#{$block-class-next}__title {
  grid-column: 2;
  margin-inline-start: 0; // left margin is provided by the gap from __title-media
}

// Expressive density uses larger heading — applied to the text row so only the
// title text itself inherits the type style, not the label or description.
.#{$block-class-next}--expressive .#{$block-class-next}__title-text-row {
  @include type-style('heading-03');
}

// Productive density uses compact heading (must come after expressive to override)
.#{$block-class-next}--productive .#{$block-class-next}__title-text-row {
  @include type-style('heading-compact-02');
}

// Leading icon: flex row so icon and text sit side-by-side on the same line.
.#{$block-class-next}__title-text-row--with-start-icon {
  display: flex;
  align-items: flex-start;
  gap: $spacing-03; // 8px between icon and text per design
}

// Trailing icon - no override needed; icon span is inline-flex inside block text.
.#{$block-class-next}__title-text-row--with-end-icon {
  display: block;
}

// Title leading icon wrapper
.#{$block-class-next}__title-start-icon {
  display: flex;
  flex-shrink: 0; // Prevent icon from shrinking
  margin-block-start: $spacing-01; // 2px top/bottom padding to center with first line of text
}

// Title trailing icon wrapper - inline element that flows with text
.#{$block-class-next}__title-end-icon {
  display: inline-flex; // Inline flex to flow with text like a character
  align-items: center; // Center icon vertically within its line
  margin-inline-start: $spacing-03; // 8px gap before icon
  vertical-align: middle; // Align with text baseline
}

// __title vertical rhythm.
// Grid layout makes all sibling-combinator rules unnecessary — every __title
// that is a direct child of __header always needs 16px top and bottom.
.#{$block-class-next}__header > .#{$block-class-next}__title {
  margin-block: $spacing-05;
}

// __description nested inside __title (via description prop on CardTitle).
// __title owns the horizontal margins; __description carries only typography + color.
// No block margins — the parent flex gap provides the 2px separation from the title text.
// Truncation modifiers are standalone — see note above __label for why.
.#{$block-class-next}__title > .#{$block-class-next}__description {
  @include type-style('label-01');

  color: $text-secondary;
}

.#{$block-class-next}__description--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.#{$block-class-next}__description--truncate-multi {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(
    --#{c4p-settings.$pkg-prefix}--card-next--description-line-clamp
  );
  text-overflow: ellipsis;
}

// Actions container styles
.#{$block-class-next}__actions {
  position: absolute;
  display: inline-flex; // Use inline-flex for overflow handler
  align-items: center;
  justify-content: flex-end; // Right-align actions
  block-size: $spacing-07; // 32px default height
  gap: $spacing-02;
  inline-size: 50%; // Limit actions to 50% of available header space per design
  inset-block-start: $spacing-03; // 8px from top
  inset-inline-end: $spacing-03; // 8px from right edge
  max-inline-size: 50%; // Enforce 50% maximum width
}

// Action wrapper styles
.#{$block-class-next}__action {
  display: inline-flex;
}

// ──────────────────────────────────────────────────────────────
// AI Label Support
// ──────────────────────────────────────────────────────────────

// AI Label - Apply blue gradient border when decorator is present
.#{$block-class-next}--has-ai-label {
  @include utilities.ai-popover-gradient('default', 0, 'layer');

  border: 1px solid transparent;
  box-shadow:
    inset 0 -80px 70px -65px $ai-inner-shadow,
    0 4px 10px 2px $ai-drop-shadow;
}

// Decorator (AI Label) positioning - top-right corner
.#{$block-class-next}__decorator {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  block-size: $spacing-07; // 32px height to match actions
  inset-block-start: $spacing-03; // 16px from top (aligned with actions)
  inset-inline-end: $spacing-03; // 8px from right edge
}

// Adjust title padding when AI label is present to prevent text overlap
.#{$block-class-next}--has-ai-label .#{$block-class-next}__title {
  // Add right padding to prevent title text from overlapping with AI label
  // AI label width (~32px) + spacing (8px) + buffer (8px) = 48px
  padding-inline-end: calc($spacing-07 + $spacing-05);
}

// When both actions and AI label are present, increase title padding
// to account for the action group width
.#{$block-class-next}--has-ai-label:has(.#{$block-class-next}__actions)
  .#{$block-class-next}__title {
  // Actions (2-3 buttons ~80px) + gaps + AI label (32px) + spacing = ~120px
  // Using $spacing-13 (104px) as a reasonable max to prevent excessive padding
  padding-inline-end: $spacing-13;
}

// Adjust label padding when AI label is present
.#{$block-class-next}--has-ai-label .#{$block-class-next}__label {
  padding-inline-end: calc($spacing-07 + $spacing-05);
}

// When both actions and AI label are present, increase label padding
.#{$block-class-next}--has-ai-label:has(.#{$block-class-next}__actions)
  .#{$block-class-next}__label {
  padding-inline-end: $spacing-13;
}

// Adjust description padding when AI label is present
.#{$block-class-next}--has-ai-label .#{$block-class-next}__description {
  padding-inline-end: calc($spacing-07 + $spacing-05);
}

// When both actions and AI label are present, increase description padding
.#{$block-class-next}--has-ai-label:has(.#{$block-class-next}__actions)
  .#{$block-class-next}__description {
  padding-inline-end: $spacing-13;
}

// Adjust actions positioning when AI label is present
.#{$block-class-next}--has-ai-label .#{$block-class-next}__actions {
  // Position actions to the left of AI label with proper spacing per Figma
  // AI label right edge spacing (12px) + AI label width (24px) + gap (12px) = 48px
  // Using spacing tokens: $spacing-03 + $spacing-06 + $spacing-03 = 48px
  inset-inline-end: calc($spacing-03 + $spacing-06 + $spacing-03);
}

// Hover state for clickable cards with AI label
.#{$block-class-next}__clickable.#{$block-class-next}--has-ai-label::before {
  @include utilities.ai-popover-gradient('hover', 0, 'layer');

  position: absolute;
  display: block;
  block-size: 100%;
  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
  content: '';
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
  transition: opacity $duration-fast-02 motion(standard, productive);
}

.#{$block-class-next}__clickable.#{$block-class-next}--has-ai-label:hover::before {
  opacity: 1;
}