@use "../mixins" as *;
@use "../variables" as *;
@use "sass:color";

/**
 * @name Retro Table
 * @group components
 * @description
 * Table component with various styles and variants.
 * @example scss
 *   <table class="retro-table">
 *     <thead>
 *       <tr>
 *         <th>Header 1</th>
 *         <th>Header 2</th>
 *       </tr>
 *     </thead>
 *     <tbody>
 *       <tr>
 *         <td>Cell 1</td>
 *         <td>Cell 2</td>
 *       </tr>
 *     </tbody>
 *   </table>
 */

// --- Old School WinTable Style --- //

.retro-table {
  width: 100%;
  // Deliberately no border-radius here. `border-collapse: collapse` is what
  // merges adjacent cell borders into the single hairline this table wants,
  // and collapsed tables ignore border-radius in every engine. Switching to
  // `separate` to win a rounded corner would double every interior border.
  border-collapse: collapse;

  border: 1px solid var(--retro-border-dark);
  background-color: var(--retro-table-bg);
  color: var(--retro-table-header-text);
  font-family: var(--retro-font);
  font-size: $retro-font-size-base;
  box-shadow: var(--retro-box-shadow-outset-button); // Classic outset shadow
  overflow-x: auto; // Added for default responsiveness
  margin-bottom: var(--retro-spacing-md); // Added from responsive wrapper
  table-layout: fixed; // Added for predictable column widths and text truncation

  th,
  td {
    padding: 6px 8px;
    text-align: start;
    border: 1px solid var(--retro-border-medium); // Grid lines
    overflow: hidden; // Added for text truncation
    white-space: nowrap; // Added for text truncation
    text-overflow: ellipsis; // Added for text truncation
  }

  thead th {
    background-color: var(--retro-table-header-bg);
    color: var(--retro-table-header-text);
    font-weight: bold;
    // Classic 3D button look for headers
    border-top: 1px solid var(--retro-border-light);
    border-left: 1px solid var(--retro-border-light);
    border-right: 1px solid var(--retro-border-dark);
    border-bottom: 1px solid var(--retro-border-dark);
    // Ensure bottom border is distinct for header row
    &:not(:last-child) {
      border-right: 1px solid var(--retro-border-dark);
    }
  }

  tbody tr {
    &:hover {
      background-color: var(--retro-table-striped-bg);
    }
  }

  // --- Sortable headers ---
  // .retro-table-sortable had working JS and no styles at all, so a sorted
  // column looked identical to an unsorted one and the .asc/.desc classes it
  // set went nowhere. table.js adds .retro-th-sortable to the headers it
  // takes over, so a `data-sort="none"` column stays a plain header.
  thead th.retro-th-sortable {
    cursor: pointer;
    user-select: none;
    // Room for the indicator, so the label does not shift when it appears.
    padding-inline-end: calc(var(--retro-spacing-md) + 14px);
    position: relative;

    &:hover {
      background-color: var(--retro-primary);
      color: var(--retro-primary-fg);
    }

    // These headers are focusable, so they need a visible focus ring.
    &:focus-visible {
      outline: 2px solid var(--retro-border-light);
      outline-offset: -3px;
    }

    &::after {
      // The unsorted state gets a dimmed double arrow, so a reader can tell
      // which columns are sortable before clicking one.
      content: '\2195'; // up-down arrow
      position: absolute;
      inset-inline-end: 6px;
      top: 50%;
      transform: translateY(-50%);
      font-size: var(--retro-font-size-xs);
      opacity: 0.45;
    }

    &.asc::after {
      content: '\25B2'; // filled up triangle
      opacity: 1;
    }

    &.desc::after {
      content: '\25BC'; // filled down triangle
      opacity: 1;
    }
  }

  // Striped variant (optional, but common)
  &.retro-table-striped tbody tr:nth-child(odd) {
    background-color: var(--retro-table-striped-bg);
    &:hover {
      background-color: var(--retro-primary);
      color: var(--retro-primary-fg);
    }
  }

  // Bordered variant
  &.retro-table-bordered {
    border: 2px solid var(--retro-border-dark); // Stronger outer border
    th, td {
      border: 1px solid var(--retro-border-medium); // Ensure all cells have borders
    }
    thead th {
      border-bottom: 2px solid var(--retro-border-dark); // Header distinct bottom border
    }
  }

  // Basic scrollbar styling (moved from .retro-table-responsive)
  &::-webkit-scrollbar {
    height: 16px; // Chunky scrollbar
    width: 16px;
    background-color: var(--retro-table-bg);
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--retro-table-bg); // Same as button face
    border-top: 1px solid var(--retro-border-light);
    border-left: 1px solid var(--retro-border-light);
    border-right: 1px solid var(--retro-border-dark);
    border-bottom: 1px solid var(--retro-border-dark);
    min-height: 20px;
  }
  &::-webkit-scrollbar-track {
    background-color: var(--retro-table-striped-bg);
  }
  &::-webkit-scrollbar-button { // Arrows
    background-color: var(--retro-table-bg);
    border-top: 1px solid var(--retro-border-light);
    border-left: 1px solid var(--retro-border-light);
    border-right: 1px solid var(--retro-border-dark);
    border-bottom: 1px solid var(--retro-border-dark);
    display: block; // Required for some browsers
    height: 16px;
    width: 16px;
  }
}

// Responsive wrapper for horizontal scrolling (old-school scrollbar feel)
// .retro-table-responsive { // This class is now removed
// overflow-x: auto;
// margin-bottom: var(--retro-spacing-md);
// border: 1px solid var(--retro-border-medium); // Standard border for scroll area
// box-shadow: var(--retro-box-shadow-inset);   // Inset scroll area
// background-color: var(--retro-bg);          // Match table bg
// padding: 1px;                               // Minimal padding to show inset border
//
// // Basic scrollbar styling
// &::-webkit-scrollbar {
// height: 16px; // Chunky scrollbar
// width: 16px;
// background-color: var(--retro-bg);
// }
// &::-webkit-scrollbar-thumb {
// background-color: var(--retro-bg); // Same as button face
// border-top: 1px solid var(--retro-border-light);
// border-left: 1px solid var(--retro-border-light);
// border-right: 1px solid var(--retro-border-dark);
// border-bottom: 1px solid var(--retro-border-dark);
// min-height: 20px;
// }
// &::-webkit-scrollbar-track {
// background-color: color.adjust($retro-bg, $lightness: -10%); // Trough darker than bg
// border: 1px solid var(--retro-border-medium);
// }
// &::-webkit-scrollbar-button { // Arrows
// background-color: var(--retro-bg);
// border-top: 1px solid var(--retro-border-light);
// border-left: 1px solid var(--retro-border-light);
// border-right: 1px solid var(--retro-border-dark);
// border-bottom: 1px solid var(--retro-border-dark);
// display: block; // Required for some browsers
// height: 16px;
// width: 16px;
// }
// }  // End of removed .retro-table-responsive

/**
 * @name Responsive Table Wrapper
 * @group components
 * @description
 * Horizontal scroll container for a wide table. `table-responsive.js` wraps
 * every `.retro-table` in this class — but the styles had been commented out,
 * so the wrapper was inert and wide tables simply overflowed the page on
 * narrow viewports.
 */
.retro-table-responsive {
  display: block;
  width: 100%;
  max-width: 100%;
  // Stop the table's max-content width propagating to a flex or grid parent.
  // Grid and flex items default to min-width: auto, so without this the
  // intrinsic width of a wide table blows the whole column out -- it produced
  // a 1,000,000px card on the theme-matrix page.
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  > .retro-table {
    // Deliberately no `min-width: max-content` here. Combined with the
    // `width: 100%` these tables carry, it forms a circular size resolution
    // that browsers settle at ~1,000,000px, blowing out any flex or grid
    // ancestor. overflow-x on the wrapper is enough on its own.
    margin-bottom: 0;
  }
}