@use 'sass:map';
@use '../confirmation-modal/confirmation-modal.theme' as confirmation-modal;

// Default Smart Table Theme
$smart-table-theme-defaults: (
  // Font & General
  font-family: ('Roboto', sans-serif),
  font-size: 14px,
  text-color: #333333,
  border-radius: 8px,
  box-shadow: 0 2px 4px rgba(0,0,0,0.05),

  // Table Structure
  table-bg: #ffffff,
  table-padding: 1rem,
  cell-padding: 1rem,
  
  // Borders
  table-border: 1px solid #e0e0e0,
  row-border: 1px solid #f0f0f0,
  header-border: 1px solid #e0e0e0,

  // Row Colors
  row-bg: #ffffff,
  row-hover-bg: #f9f9f9,
  cell-hover-bg: #f0f0f0,
  row-selected-bg: #f3e5f5,



  // Header Styling
  header-bg: #f5f5f5,
  header-color: #333333,
  header-font-weight: 500,
  header-font-size: 14px,
  header-transform: none, // uppercase, capitalize, etc.

  // Toolbar
  toolbar-bg: #ffffff,
  toolbar-padding: 1rem,
  toolbar-border-bottom: 1px solid #e0e0e0,
  toolbar-gap: 1rem,
  
  // Search Input
  search-bg: #f5f5f5,
  search-border: none,
  search-radius: 8px,
  search-padding: 0.5rem 0.5rem 0.5rem 2rem,
  search-wrapper-padding: 0 0.875rem,
  search-height: 36px,
  search-min-width: 200px,
  search-width: auto,
  search-icon-color: #888,
  search-placeholder-color: #999,

  // Filter Dropdowns (custom dropdown, not native select)
  filter-bg: #ffffff,
  filter-border: 1px solid #e0e0e0,
  filter-radius: 8px,
  filter-padding: 0.5rem,
  filter-trigger-padding: 0 0.75rem,
  filter-height: 36px,
  filter-font-size: 14px,
  filter-color: #555,
  filter-hover-bg: #fafafa,
  filter-hover-border-color: #bbb,
  filter-active-border-color: #999,
  filter-selected-color: #222,
  filter-selected-border-color: #333,
  filter-chevron-color: #999,
  // Filter panel (dropdown drawer)
  filter-panel-bg: #ffffff,
  filter-panel-border: 1px solid #ebebeb,
  filter-panel-radius: 12px,
  filter-panel-shadow: (0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06)),
  filter-panel-min-width: 180px,
  filter-panel-padding: 6px,
  filter-option-padding: 8px 12px,
  filter-option-radius: 7px,
  filter-option-hover-bg: #f5f5f5,
  filter-option-selected-bg: #f0f0f0,
  filter-option-selected-color: #111,

  // Checkbox
  checkbox-color: #e63e30,
  checkbox-size: 18px,

  // Badges (Status)
  badge-radius: 12px,
  badge-padding: 4px 12px,
  badge-font-size: 12px,
  badge-font-weight: 500,
  
  // Badge Variants (Backgrounds)
  badge-success-bg: #e8f5e9,
  badge-success-color: #2e7d32,
  badge-warning-bg: #fff3e0,
  badge-warning-color: #ef6c00,
  badge-danger-bg: #ffebee,
  badge-danger-color: #c62828,
  badge-info-bg: #e3f2fd,
  badge-info-color: #1565c0,
  badge-neutral-bg: #f5f5f5,
  badge-neutral-color: #616161,

  // Pagination Container
  pagination-padding: 1rem,
  pagination-border-top: none,

  // Frozen columns (checkbox col, first-data col, actions col)
  frozen-col-bg: #f9f9f9,

  // Actions column shadow (right-side pinned column)
  actions-col-shadow: -4px 0 8px rgba(0, 0, 0, 0.06),

  // Action circle (three-dot button)
  action-circle-size: 32px,

  // Row action dropdown menu
  dropdown-min-width: 150px,
  dropdown-bg: #ffffff,
  dropdown-border: 1px solid #e0e0e0,
  dropdown-radius: 8px,
  dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
  dropdown-padding: 4px,
  dropdown-item-padding: 8px 12px,
  dropdown-item-radius: 6px,
  dropdown-item-hover-bg: #f5f5f5,

  // Selection count strip
  selection-strip-bg: #fafafa,
  selection-strip-border: 1px solid rgba(0, 0, 0, 0.08),
  selection-strip-padding: 0.45rem 1rem,
  selection-count-color: #444,
  selection-count-font-size: 13px,
  selection-count-font-weight: 500,

  // Action Menu (Kebab - optional implementation detail)
  action-menu-bg: #ffffff,
  action-menu-shadow: 0 4px 6px rgba(0,0,0,0.1),

  // Loader
  loader-color: #6200EE,
  // Scrollbar
  scrollbar-width: 8px,
  scrollbar-height: 8px,
  scrollbar-track-bg: #f1f1f1,
  scrollbar-track-radius: 4px,
  scrollbar-thumb-bg: #c1c1c1,
  scrollbar-thumb-radius: 4px,
  scrollbar-thumb-hover-bg: #a8a8a8,

  // Sticky Columns
  sticky-shadow: 2px 0 5px -2px rgba(0,0,0,0.1),
  sticky-border-right: 1px solid rgba(0,0,0,0.05),

  // Spinner
  spinner-border-color: rgba(0, 0, 0, 0.1),
  
  // No Data
  no-data-color: #888888,
  
  // Sort Icon
  sort-icon-size: 0.8em,

  // Inline inputs theme values
  cell-input-border: 1px solid #dee2e6,
  cell-input-focus-outline-color: #00bcd4,
  cell-input-bg: #fcfcfc,
  cell-select-bg: #fcfcfc
);

@mixin smart-table-theme($theme: ()) {
  $theme: map.merge($smart-table-theme-defaults, $theme);

  // --- General ---
  --st-font-family: #{map.get($theme, font-family)};
  --st-font-size: #{map.get($theme, font-size)};
  --st-text-color: #{map.get($theme, text-color)};
  --st-border-radius: #{map.get($theme, border-radius)};
  --st-box-shadow: #{map.get($theme, box-shadow)};

  // --- Table Layout ---
  --st-table-bg: #{map.get($theme, table-bg)};
  --st-table-padding: #{map.get($theme, table-padding)};
  --st-cell-padding: #{map.get($theme, cell-padding)};
  
  // --- Borders ---
  --st-table-border: #{map.get($theme, table-border)};
  --st-row-border: #{map.get($theme, row-border)};
  
  // --- Rows ---
  --st-row-bg: #{map.get($theme, row-bg)};
  --st-row-hover-bg: #{map.get($theme, row-hover-bg)};
  --st-cell-hover-bg: #{map.get($theme, cell-hover-bg)};
  --st-row-selected-bg: #{map.get($theme, row-selected-bg)};

  // --- Header ---
  --st-header-bg: #{map.get($theme, header-bg)};
  --st-header-color: #{map.get($theme, header-color)};
  --st-header-weight: #{map.get($theme, header-font-weight)};
  --st-header-size: #{map.get($theme, header-font-size)};
  --st-header-transform: #{map.get($theme, header-transform)};
  --st-header-border: #{map.get($theme, header-border)};

  // --- Toolbar ---
  --st-toolbar-bg: #{map.get($theme, toolbar-bg)};
  --st-toolbar-padding: #{map.get($theme, toolbar-padding)};
  --st-toolbar-border-bottom: #{map.get($theme, toolbar-border-bottom)};
  --st-toolbar-gap: #{map.get($theme, toolbar-gap)};

  // --- Search ---
  --st-search-bg: #{map.get($theme, search-bg)};
  --st-search-border: #{map.get($theme, search-border)};
  --st-search-radius: #{map.get($theme, search-radius)};
  --st-search-padding: #{map.get($theme, search-padding)};
  --st-search-wrapper-padding: #{map.get($theme, search-wrapper-padding)};
  --st-search-height: #{map.get($theme, search-height)};
  --st-search-min-width: #{map.get($theme, search-min-width)};
  --st-search-width: #{map.get($theme, search-width)};
  --st-search-icon-color: #{map.get($theme, search-icon-color)};
  --st-search-placeholder-color: #{map.get($theme, search-placeholder-color)};

  // --- Filter ---
  --st-filter-bg: #{map.get($theme, filter-bg)};
  --st-filter-border: #{map.get($theme, filter-border)};
  --st-filter-radius: #{map.get($theme, filter-radius)};
  --st-filter-padding: #{map.get($theme, filter-padding)};
  --st-filter-trigger-padding: #{map.get($theme, filter-trigger-padding)};
  --st-filter-height: #{map.get($theme, filter-height)};
  --st-filter-font-size: #{map.get($theme, filter-font-size)};
  --st-filter-color: #{map.get($theme, filter-color)};
  --st-filter-hover-bg: #{map.get($theme, filter-hover-bg)};
  --st-filter-hover-border-color: #{map.get($theme, filter-hover-border-color)};
  --st-filter-active-border-color: #{map.get($theme, filter-active-border-color)};
  --st-filter-selected-color: #{map.get($theme, filter-selected-color)};
  --st-filter-selected-border-color: #{map.get($theme, filter-selected-border-color)};
  --st-filter-chevron-color: #{map.get($theme, filter-chevron-color)};
  --st-filter-panel-bg: #{map.get($theme, filter-panel-bg)};
  --st-filter-panel-border: #{map.get($theme, filter-panel-border)};
  --st-filter-panel-radius: #{map.get($theme, filter-panel-radius)};
  --st-filter-panel-shadow: #{map.get($theme, filter-panel-shadow)};
  --st-filter-panel-min-width: #{map.get($theme, filter-panel-min-width)};
  --st-filter-panel-padding: #{map.get($theme, filter-panel-padding)};
  --st-filter-option-padding: #{map.get($theme, filter-option-padding)};
  --st-filter-option-radius: #{map.get($theme, filter-option-radius)};
  --st-filter-option-hover-bg: #{map.get($theme, filter-option-hover-bg)};
  --st-filter-option-selected-bg: #{map.get($theme, filter-option-selected-bg)};
  --st-filter-option-selected-color: #{map.get($theme, filter-option-selected-color)};

  // --- Checkbox ---
  --st-checkbox-color: #{map.get($theme, checkbox-color)};
  --st-checkbox-size: #{map.get($theme, checkbox-size)};

  // --- Badges ---
  --st-badge-radius: #{map.get($theme, badge-radius)};
  --st-badge-padding: #{map.get($theme, badge-padding)};
  --st-badge-font-size: #{map.get($theme, badge-font-size)};
  --st-badge-font-weight: #{map.get($theme, badge-font-weight)};

  --st-badge-success-bg: #{map.get($theme, badge-success-bg)};
  --st-badge-success-color: #{map.get($theme, badge-success-color)};
  --st-badge-warning-bg: #{map.get($theme, badge-warning-bg)};
  --st-badge-warning-color: #{map.get($theme, badge-warning-color)};
  --st-badge-danger-bg: #{map.get($theme, badge-danger-bg)};
  --st-badge-danger-color: #{map.get($theme, badge-danger-color)};
  --st-badge-info-bg: #{map.get($theme, badge-info-bg)};
  --st-badge-info-color: #{map.get($theme, badge-info-color)};
  --st-badge-neutral-bg: #{map.get($theme, badge-neutral-bg)};
  --st-badge-neutral-color: #{map.get($theme, badge-neutral-color)};
  
  // --- Pagination ---
  --st-pagination-padding: #{map.get($theme, pagination-padding)};
  --st-pagination-border-top: #{map.get($theme, pagination-border-top)};

  // --- Loader ---
  --st-loader-color: #{map.get($theme, loader-color)};

  // --- Scrollbar ---
  --st-scrollbar-width: #{map.get($theme, scrollbar-width)};
  --st-scrollbar-height: #{map.get($theme, scrollbar-height)};
  --st-scrollbar-track-bg: #{map.get($theme, scrollbar-track-bg)};
  --st-scrollbar-track-radius: #{map.get($theme, scrollbar-track-radius)};
  --st-scrollbar-thumb-bg: #{map.get($theme, scrollbar-thumb-bg)};
  --st-scrollbar-thumb-radius: #{map.get($theme, scrollbar-thumb-radius)};
  --st-scrollbar-thumb-hover-bg: #{map.get($theme, scrollbar-thumb-hover-bg)};

  // --- Sticky Columns ---
  --st-sticky-shadow: #{map.get($theme, sticky-shadow)};
  --st-sticky-border-right: #{map.get($theme, sticky-border-right)};

  // --- Spinner ---
  --st-spinner-border-color: #{map.get($theme, spinner-border-color)};

  // --- No Data ---
  --st-no-data-color: #{map.get($theme, no-data-color)};

  // --- Misc ---
  --st-sort-icon-size: #{map.get($theme, sort-icon-size)};

  // --- Frozen Columns ---
  --st-frozen-col-bg: #{map.get($theme, frozen-col-bg)};
  --st-actions-col-shadow: #{map.get($theme, actions-col-shadow)};

  // --- Action Circle ---
  --st-action-circle-size: #{map.get($theme, action-circle-size)};

  // --- Row Action Dropdown ---
  --st-dropdown-min-width: #{map.get($theme, dropdown-min-width)};
  --st-dropdown-bg: #{map.get($theme, dropdown-bg)};
  --st-dropdown-border: #{map.get($theme, dropdown-border)};
  --st-dropdown-radius: #{map.get($theme, dropdown-radius)};
  --st-dropdown-shadow: #{map.get($theme, dropdown-shadow)};
  --st-dropdown-padding: #{map.get($theme, dropdown-padding)};
  --st-dropdown-item-padding: #{map.get($theme, dropdown-item-padding)};
  --st-dropdown-item-radius: #{map.get($theme, dropdown-item-radius)};
  --st-dropdown-item-hover-bg: #{map.get($theme, dropdown-item-hover-bg)};

  // --- Selection Strip ---
  --st-selection-strip-bg: #{map.get($theme, selection-strip-bg)};
  --st-selection-strip-border: #{map.get($theme, selection-strip-border)};
  --st-selection-strip-padding: #{map.get($theme, selection-strip-padding)};
  --st-selection-count-color: #{map.get($theme, selection-count-color)};
  --st-selection-count-font-size: #{map.get($theme, selection-count-font-size)};
  --st-selection-count-font-weight: #{map.get($theme, selection-count-font-weight)};

  // --- Inline Edit Controls ---
  --st-cell-input-border: #{map.get($theme, cell-input-border)};
  --st-cell-input-focus-outline-color: #{map.get($theme, cell-input-focus-outline-color)};
  --st-cell-input-bg: #{map.get($theme, cell-input-bg)};
  --st-cell-select-bg: #{map.get($theme, cell-select-bg)};

  // --- Confirmation Modal (bundled so delete modal renders correctly) ---
  @include confirmation-modal.confirmation-modal-theme();
}