// ============================================================================
// Components | Table
// ============================================================================

@use "../../../dev" as *;
@use "../../../variables" as *;

@use "../../head_layout" as *;
@use "../../soul_object" as *;

@use "../../soul_type" as *;
// @use "../animation" as *;

$table_border_color: var(--color_text_primary);
$table_cell_padding_y: q(2);
$table_cell_padding_x: q(4);

//     table-color: #{$table-color};
//     table-bg: #{$table-bg};
//     table-border-color: #{$table-border-color};
//     table-accent-bg: #{$table-accent-bg};
//     table-striped-color: #{$table-striped-color};
//     table-striped-bg: #{$table-striped-bg};
//     table-active-color: #{$table-active-color};
//     table-active-bg: #{$table-active-bg};
//     table-hover-color: #{$table-hover-color};
//     table-hover-bg: #{$table-hover-bg};
// q(1) solid var(--color_text_primary);

// -----------------------------------------------------------------------------
// Base Table
// -----------------------------------------------------------------------------

// @mixin table__cell--height_q(16)($border: q(1), $padding: 0px) {
//     height: q(16);
//     max-height: q(16);
//     line-height: 1;
//     font-size: q(10); // Optional: keep font within height
//     padding: $padding;
//     border: $border solid var(--color_border);
//         @include sizing--border;

//     overflow: hidden;
// }

@mixin table__cell--size__base {
    @include sizing--border;
    overflow: hidden;
}

@mixin table__cell--size__sm {
    @include table__cell--size__base;
    height: q(15);
    max-height: q(15);
}

@mixin table__cell--size__md {
    @include table__cell--size__base;
    height: q(20);
    max-height: q(20);
}

@mixin table__cell--size__lg {
    @include table__cell--size__base;
    height: q(25);
    max-height: q(25);
}

// ----------------------------------------------------------------------------

/// Table size: Small
/// Reduces padding and font size for compact tables.
@mixin table--size--sm {
    font-size: q(14);

    th,
    td {
        @include table__cell--size__sm;
        padding: q(1) q(2);
    }
}

/// Table size: Large
/// Increases padding and font size for spacious display tables.
@mixin table--size--lg {
    font-size: q(18);

    th,
    td {
        padding: q(3) q(5);
    }
}

// -----------------------------------------------------------------------------
// Cell--smpecific Mixins
// -----------------------------------------------------------------------------

@mixin table__cell__base {
    padding: $table_cell_padding_y $table_cell_padding_x;
    text-align: left;
}

/// Header cell styling.
@mixin table__cell__header {
    @include table__cell__base;
    @include character--bold;
    vertical-align: bottom;
    // text-align: left;
    // background-color: var(--color_fill_tertiary);
    // color: var(--color_text_default);
    // padding: $q * 4;
}

/// Body cell styling.
@mixin table__cell__body {
    @include table__cell__base;
    vertical-align: inherit;
    // padding: $q * 4;
    // color: var(--color_text_default);
    // background-color: var(--color_fill_primary);
}

/// Footer cell styling.
@mixin table__cell__footer {
    @include table__cell__base;
    vertical-align: inherit;
}

// -----------------------------------------------------------------------------

@mixin table__caption--top {
    caption-side: top;
    text-align: left;
    padding-bottom: q(2); // adjust as needed
    font-weight: bold;
}

@mixin table__caption--bottom {
    caption-side: bottom;
    text-align: left;
    padding-top: q(2); // adjust as needed
    font-style: italic;
}

/// Table caption at the top with bold styling.
/// @group Table
@mixin table__caption--top--styled {
    caption {
        @include table__caption--top;
    }
}

/// Table caption at the bottom with italic styling.
/// @group Table
@mixin table__caption--bottom--styled {
    caption {
        @include table__caption--bottom;
    }
}

@mixin table__caption {
    text-align: left;
}

// -----------------------------------------------------------------------------

/// Basic table setup with layout and spacing.
/// Styling for the `table` element to ensure consistency across browsers.
/// Tables are styled with full width, border-collapse, and no spacing between cells.
/// @group Table
@mixin table--base {
    border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
    text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
    width: 100%; /* Ensure table takes up full width of its container */
    max-width: 100%;
    margin: 0;
    padding: 0;

    table-layout: auto;
    font-size: inherit;
    line-height: inherit;

    border-collapse: collapse;
    border-spacing: 0;

    //     margin-bottom: $spacer;
    //     color: var(table-color);
    //     vertical-align: $table-cell-vertical-align;
    //     border-color: var(table-border-color);

    // Target th & td
    // We need the child combinator to prevent styles leaking to nested tables which doesn"t have a `.table` class.
    // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
    // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
    > :not(caption) > * > * {
        // padding: $table_cell_padding_y $table_cell_padding_x;
        // background-color: var(table-bg);
        // border-bottom-width: $table-border-width;
        // box-shadow: inset 0 0 0 999Q (8) var(table-accent-bg);
    }

    > thead {
        @include table__cell__header;
    }

    > tbody {
        @include table__cell__body;
    }

    > tfoot {
        @include table__cell__footer;
    }

    > caption {
        @include table__caption;
    }
    // th,
    // td {
    //     padding-left: q(4);
    //     padding-right: q(4);
    // }
}

// table td,
// table th {
//     padding: q(12) m q(16);
//     border: q(1) solid;
//     border-color: var(--color-14) !important;
// }

// -----------------------------------------------------------------------------
// Bordered Tables
// -----------------------------------------------------------------------------

/// Adds both horizontal and vertical borders.
@mixin table--lined--all {
    @include table--base;
    border: q(1) solid $table_border_color;

    th,
    td {
        border: q(1) solid $table_border_color;
    }
}

/// Only horizontal borders.
@mixin table--lined--horizontal {
    @include table--base;
    th,
    td {
        border-top: q(1) solid $table_border_color;
        border-bottom: q(1) solid $table_border_color;
        border-left: none;
        border-right: none;
    }
    tbody tr:last-child td {
        border-bottom: q(1) solid $table_border_color;
    }
}

/// Horizontal bordered table with consistent row height
/// Ensures uniform padding and vertical alignment across all cells
/// @group Table
@mixin table--lined--horizontal--consistent {
    @include table--lined--horizontal;

    th,
    td {
        padding: q(8) q(12);
        vertical-align: middle;
        height: q(24);
        line-height: 1.5;
    }

    thead th {
        font-weight: 600;
    }

    tbody td {
        font-weight: normal;
    }
}

/// Only vertical borders.
@mixin table--lined--vertical {
    @include table--base;
    th,
    td {
        border-top: 0;
        border-bottom: 0;
        border-left: q(1) solid $table_border_color;
        border-right: q(1) solid $table_border_color;
    }
}

// -----------------------------------------------------------------------------
// Striped Tables
// -----------------------------------------------------------------------------

/// Adds alternating background to table rows.
@mixin table--striped--horizontal {
    @include table--base;
    tbody tr:nth-child(odd) {
        background-color: var(--color_fill_secondary);
    }
}
/// Adds alternating background to table columns.
/// @group Table
@mixin table--striped--vertical {
    @include table--base;

    tbody tr {
        td:nth-child(odd),
        th:nth-child(odd) {
            background-color: var(--color_fill_secondary);
        }
    }
}
// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------

// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------

/// Hover effect on entire table row (horizontal highlight).
/// @group Table
@mixin table--hover--horizontal($color: var(--color_fill_secondary)) {
    tbody tr:hover {
        background-color: $color;
    }
}

/// Hover effect on individual cells (vertical-like highlight).
/// Technically applied on td/th individually.
/// @group Table
@mixin table--hover--vertical($color: var(--color_fill_secondary)) {
    tbody td:hover,
    tbody th:hover {
        background-color: $color;
    }
}

/// Combined hover effect: row + cell.
/// Useful when highlighting both contextually.
/// @group Table
@mixin table--hover--combined($color: var(--color_fill_secondary)) {
    @include table--hover--horizontal($color);
    @include table--hover--vertical($color);
}

// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------

// ============================================================================
// Collapsable Table
// ============================================================================

@mixin collapsible_table--base {
    width: 100%;
    overflow: hidden;

    &--header {
        @include flex;
        @include align--center;
        @include justify--between;
        margin-bottom: q(6);
        cursor: pointer;
        border-bottom: q(1) solid var(--color_text_primary);

        button {
            right: q(12) * 2;
        }
    }

    &--title {
        font-weight: bold;
        font-size: q(20);
    }

    &--content {
        height: 0;
        overflow: hidden;

        &.expanded {
            min-height: fit-content;
            height: 100%;
            max-height: q(10000);
        }
    }
}

// ============================================================================
// Data Table
// ============================================================================

@mixin data_table--base {
    width: 100%;
    overflow: hidden;

    &--header {
        @include flex;
        @include align--center;
        @include justify--between;
        cursor: pointer;
        border-bottom: q(1) solid var(--color_line_primary);
    }

    &--title {
        font-weight: bold;
        font-size: q(20);
    }

    &--form {
        @include flex;
        @include align--center;
    }

    &--button {
        @include reset_bleed;
        width: q(20);
        height: q(20);
        font-size: q(20);
    }

    &--input {
        @include reset_bleed;
    }

    &--pagination {
        margin-top: q(4);
        padding-bottom: q(4);
        border-bottom: q(1) solid var(--color_line_primary);
    }
}