import { cssManager, css, type CSSResult } from '@design.estate/dees-element';
import { cssGeistFontFamily } from '../../00fonts.js';
import { themeDefaultStyles } from '../../00theme.js';

export const tableStyles: CSSResult[] = [
  themeDefaultStyles,
  cssManager.defaultStyles,
  css`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
        width: 100%;
      }

      dees-tile {
        color: var(--dees-color-text-primary);
        font-family: ${cssGeistFontFamily};
        font-weight: 400;
        font-size: 14px;
        cursor: default;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        height: 40px;
      }

      .headingContainer {
        flex: 1;
        display: flex;
        align-items: baseline;
      }

      .heading {
        line-height: 1;
      }

      .heading1 {
        font-size: 14px;
        font-weight: 500;
        color: var(--dees-color-text-secondary);
        letter-spacing: -0.01em;
      }

      .heading2 {
        font-size: 12px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
        margin-left: 8px;
      }

      .headingSeparation {
        display: none;
      }

      .headerActions {
        user-select: none;
        display: flex;
        flex-direction: row;
        gap: 8px;
      }
      
      .headerAction {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
        color: var(--dees-color-text-muted);
        background: transparent;
        border: 1px solid var(--dees-color-border-default);
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .headerAction:hover {
        color: var(--dees-color-text-primary);
        background: var(--dees-color-hover);
        border-color: var(--dees-color-border-strong);
      }

      .headerAction dees-icon {
        width: 14px;
        height: 14px;
      }

      .searchGrid {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: 1fr max-content;
        padding: 16px 24px;
        background: var(--dees-color-bg-secondary);
        border-bottom: 1px solid var(--dees-color-border-default);
        transition: all 0.2s ease;
      }

      @media (max-width: 900px) {
        .searchGrid {
          grid-template-columns: 1fr;
        }
      }

      /* let search mode size to content (no forced width) */

      .searchGrid.hidden {
        height: 0px;
        opacity: 0;
        overflow: hidden;
        padding: 0px 24px;
        border-bottom-width: 0px;
      }

      /* Default mode (Mode B, page sticky): horizontal scroll lives on
         .tableScroll (so wide tables don't get clipped by an ancestor
         overflow:hidden such as dees-tile). Vertical sticky is handled by
         a JS-managed floating header (.floatingHeader, position:fixed),
         which is unaffected by ancestor overflow. */
      .tableScroll {
        position: relative;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-gutter: stable;
      }
      /* Mode A, internal scroll: opt-in via fixed-height attribute.
         The table scrolls inside its own box and the header sticks via plain CSS sticky. */
      :host([fixed-height]) .tableScroll {
        max-height: var(--table-max-height, 360px);
        overflow: auto;
        scrollbar-gutter: stable both-edges;
      }
      :host([fixed-height]) .tableScroll::-webkit-scrollbar:horizontal {
        height: 0px;
      }

      /* Floating header overlay (Mode B). Position is managed by JS so it
         escapes any ancestor overflow:hidden (position:fixed is not clipped
         by overflow ancestors). */
      .floatingHeader {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        visibility: hidden;
        overflow: hidden;
        pointer-events: none;
      }
      .floatingHeader.active {
        visibility: visible;
      }
      .floatingHeader table {
        margin: 0;
      }
      .floatingHeader th {
        pointer-events: auto;
      }

      table {
        /* allow table to grow wider than container so actions column can stick */
        width: max-content;
        min-width: 100%;
        caption-side: bottom;
        font-size: 14px;
        border-collapse: separate;
        border-spacing: 0;
      }
      
      .noDataSet {
        padding: 48px 24px;
        text-align: center;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
      }
      
      thead {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
        border-bottom: 1px solid var(--dees-color-border-strong);
      }
      /* th needs its own background so sticky cells paint over scrolled rows
         (browsers don't paint the <thead> box behind a sticky <th>). */
      th {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
      }
      /* Mode A — internal scroll sticky */
      :host([fixed-height]) thead th {
        position: sticky;
        top: 0;
        z-index: 2;
      }
      :host([fixed-height]) thead tr.filtersRow th {
        top: 36px; /* matches th { height: 36px } below */
      }
      
      tbody tr {
        transition: background-color 0.15s ease;
        position: relative;
        user-select: none;
      }
      
      /* Default horizontal lines (bottom border only) */
      tbody tr {
        border-bottom: 1px solid var(--dees-color-border-default);
      }
      
      tbody tr:last-child {
        border-bottom: none;
      }
      
      /* Full horizontal lines when enabled */
      :host([show-horizontal-lines]) tbody tr {
        border-top: 1px solid var(--dees-color-border-default);
        border-bottom: 1px solid var(--dees-color-border-default);
      }
      
      :host([show-horizontal-lines]) tbody tr:first-child {
        border-top: none;
      }
      
      :host([show-horizontal-lines]) tbody tr:last-child {
        border-bottom: 1px solid var(--dees-color-border-default);
      }
      
      tbody tr:hover {
        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.06)', 'hsl(217.2 91.2% 59.8% / 0.08)')};
      }
      
      /* Column hover effect for better traceability */
      td {
        position: relative;
      }
      
      td::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.04)', 'hsl(217.2 91.2% 59.8% / 0.05)')};
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: -1;
      }
      
      td:hover::after {
        opacity: 1;
      }
      
      /* Grid mode - shows both vertical and horizontal lines */
      :host([show-grid]) th {
        border: 1px solid var(--dees-color-border-default);
        border-left: none;
        border-top: none;
      }
      
      :host([show-grid]) td {
        border: 1px solid var(--dees-color-border-default);
        border-left: none;
        border-top: none;
      }
      
      :host([show-grid]) tbody tr:first-child td {
        border-top: none;
      }

      /* Remove edge borders that would double with tile frame */
      :host([show-grid]) th:last-child,
      :host([show-grid]) td:last-child {
        border-right: none;
      }
      :host([show-grid]) tbody tr:last-child td {
        border-bottom: none;
      }

      /* Sticky Actions column (right pinned) */
      thead th.actionsCol,
      tbody td.actionsCol {
        position: sticky;
        right: 0;
        background: var(--dees-color-bg-primary);
      }
      thead th.actionsCol { z-index: 3; }
      tbody td.actionsCol {
        z-index: 1;
        box-shadow: -1px 0 0 0 var(--dees-color-border-default);
      }
      
      tbody tr.selected {
        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.12)')};
      }

      tbody tr.hasAttachment {
        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 76.2% 36.3% / 0.1)')};
      }

      th {
        height: 36px;
        padding: 8px 16px;
        text-align: left;
        font-weight: 500;
        font-size: 12px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        letter-spacing: -0.01em;
      }

      th[role='columnheader']:hover {
        color: var(--dees-color-text-primary);
      }

      th .sortArrow {
        display: inline-block;
        margin-left: 6px;
        font-size: 10px;
        line-height: 1;
        opacity: 0.7;
        vertical-align: middle;
      }

      th .sortBadge {
        display: inline-block;
        margin-left: 3px;
        padding: 1px 5px;
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        color: ${cssManager.bdTheme('hsl(222.2 47.4% 30%)', 'hsl(217.2 91.2% 75%)')};
        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.12)', 'hsl(217.2 91.2% 59.8% / 0.18)')};
        border-radius: 999px;
        vertical-align: middle;
      }
      
      :host([show-vertical-lines]) th {
        border-right: 1px solid var(--dees-color-border-default);
      }
      
      td {
        padding: 8px 16px;
        vertical-align: middle;
        font-size: 13px;
        color: var(--dees-color-text-primary);
      }
      
      :host([show-vertical-lines]) td {
        border-right: 1px solid var(--dees-color-border-default);
      }
      
      th:first-child,
      td:first-child {
        padding-left: 16px;
      }
      
      th:last-child,
      td:last-child {
        padding-right: 16px;
      }
      
      :host([show-vertical-lines]) th:last-child,
      :host([show-vertical-lines]) td:last-child {
        border-right: none;
      }

      /* Default bottom border on last row removed — tile frame handles it */
      :host(:not([show-horizontal-lines])) tbody tr:last-child {
        border-bottom: none;
      }
      
      .innerCellContainer {
        position: relative;
        min-height: 24px;
        line-height: 24px;
      }

      /* Editable cell affordances */
      td.editable {
        cursor: text;
      }
      td.focused {
        outline: 2px solid ${cssManager.bdTheme(
          'hsl(222.2 47.4% 51.2% / 0.6)',
          'hsl(217.2 91.2% 59.8% / 0.6)'
        )};
        outline-offset: -2px;
      }
      td.editingCell {
        padding: 0;
        outline: 2px solid ${cssManager.bdTheme(
          'hsl(222.2 47.4% 51.2% / 0.6)',
          'hsl(217.2 91.2% 59.8% / 0.6)'
        )};
        outline-offset: -2px;
      }
      td.editingCell .innerCellContainer {
        padding: 0;
        line-height: normal;
      }
      td.editingCell dees-input-text,
      td.editingCell dees-input-checkbox,
      td.editingCell dees-input-dropdown,
      td.editingCell dees-input-datepicker,
      td.editingCell dees-input-tags {
        display: block;
        width: 100%;
      }

      /* filter row */
      thead tr.filtersRow th {
        padding: 8px 12px 12px 12px;
      }
      thead tr.filtersRow th input[type='text'] {
        width: 100%;
        box-sizing: border-box;
        padding: 6px 8px;
        font-size: 13px;
        border-radius: 6px;
        border: 1px solid var(--dees-color-border-default);
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
        color: var(--dees-color-text-primary);
      }
      .actionsContainer {
        display: flex;
        flex-direction: row;
        gap: 4px;
      }
      
      .action {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .action:hover {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
      }

      .action:active {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 11.8%)')};
      }
      
      .action dees-icon {
        width: 16px;
        height: 16px;
      }

      .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
        padding: 0 16px;
        font-size: 11px;
        color: var(--dees-color-text-muted);
        width: 100%;
        box-sizing: border-box;
      }

      .tableStatistics {
        font-weight: 500;
      }

      .footerActions {
        display: flex;
        gap: 8px;
      }

      .footerActions .footerAction {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        font-weight: 500;
        font-size: 11px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        border-radius: 6px;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
      }

      .footerActions .footerAction:hover {
        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
      }

      .footerActions .footerAction dees-icon {
        width: 14px;
        height: 14px;
      }
  `,
];