@use 'sass:map';

// ─────────────────────────────────────────────────────────────────────────────
// Form Builder Theme
// ─────────────────────────────────────────────────────────────────────────────

$form-builder-config: (
  bg: #ffffff,
  border-color: #E5E7EB,
  header-bg: #F9FAFB,
  accent-color: #3B82F6,
  
  // Step Indicator
  step-bubble-size: 32px,
  step-bubble-active-bg: #3B82F6,
  step-bubble-active-color: #ffffff,
  step-bubble-inactive-bg: #E5E7EB,
  step-bubble-inactive-color: #6B7280,
  
  // Sidebar / Tree
  sidebar-width: 320px,
  node-hover-bg: #F3F4F6,
  node-selected-bg: #EFF6FF,
  node-selected-border: #3B82F6,
  
  // Config Panel (Premium Card Style)
  config-panel-padding: 32px,
  config-card-bg: #ffffff,
  config-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
  config-section-gap: 24px,
);

@mixin form-builder-theme($user-config: ()) {
  $config: map.merge($form-builder-config, $user-config);

  // Variables
  --fb-bg: #{map.get($config, bg)};
  --fb-border-color: #{map.get($config, border-color)};
  --fb-accent: #{map.get($config, accent-color)};
  --fb-font-family: 'Inter', sans-serif;

  background: var(--fb-bg);
  font-family: var(--fb-font-family);

  // Premium Stepper (Lifecycle)
  .fb-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;

    .fb-step {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;
      padding: 0.5rem 1rem;
      border-radius: 0.75rem;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover { background: #F3F4F6; }

      &.active {
        background: #EFF6FF;
        .fb-step__icon {
          background: var(--fb-accent);
          color: #ffffff;
          border-color: var(--fb-accent);
          transform: scale(1.1);
        }
        .fb-step__label {
          color: #111827;
          font-weight: 700;
        }
      }

      &.completed .fb-step__icon {
        background: #10B981;
        color: #ffffff;
        border-color: #10B981;
      }

      &__icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid #D1D5DB;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        color: #6B7280;
        background: #ffffff;
        transition: all 0.3s;
        flex-shrink: 0;
      }

      &__label {
        font-size: 14px;
        font-weight: 600;
        color: #6B7280;
        white-space: nowrap;
      }

      &__line {
        width: 60px;
        height: 2px;
        background: #E5E7EB;
        margin: 0 1rem;
        flex-shrink: 0;
      }
    }
  }

  // ── Field Selection Component ───────────────────────────────────────────────
  --fb-fs-padding: 16px;
  --fb-fs-group-gap: 16px;
  --fb-fs-group-bg: #ffffff;
  --fb-fs-group-border: #e5e7eb;
  --fb-fs-group-radius: 12px;
  --fb-fs-header-padding: 14px 16px;
  --fb-fs-header-gap: 10px;
  --fb-fs-header-hover-bg: #f9fafb;
  --fb-fs-chevron-color: #9ca3af;
  --fb-fs-group-label-size: 14px;
  --fb-fs-group-label-color: #111827;
  --fb-fs-body-padding: 0 16px 16px 28px;
  --fb-fs-section-gap: 12px;
  --fb-fs-section-border: #e5e7eb;
  --fb-fs-section-radius: 10px;
  --fb-fs-section-bg: #ffffff;
  --fb-fs-section-nested-border: #f3f4f6;
  --fb-fs-section-nested-bg: #fafafa;
  --fb-fs-section-header-padding: 10px 14px;
  --fb-fs-section-header-hover: #f9fafb;
  --fb-fs-section-label-size: 13px;
  --fb-fs-section-label-color: #111827;
  --fb-fs-section-body-padding: 4px 14px 14px 28px;
  --fb-fs-field-gap: 6px;
  --fb-fs-field-padding: 8px 12px;
  --fb-fs-field-radius: 6px;
  --fb-fs-field-bg: #ffffff;
  --fb-fs-field-border: #e5e7eb;
  --fb-fs-field-hover-border: #3b82f6;
  --fb-fs-field-hover-bg: #f8fafc;
  --fb-fs-field-selected-bg: #eff6ff;
  --fb-fs-field-selected-border: #bfdbfe;
  --fb-fs-field-locked-bg: #f3f4f6;
  --fb-fs-field-locked-color: #6b7280;
  --fb-fs-field-label-size: 13px;
  --fb-fs-field-label-color: #111827;
  --fb-fs-toggle-width: 36px;
  --fb-fs-toggle-height: 20px;
  --fb-fs-toggle-off-bg: #d1d5db;
  --fb-fs-toggle-on-bg: #f5a623;
  --fb-fs-toggle-thumb: #ffffff;
  --fb-fs-checkbox-border: #d1d5db;
  --fb-fs-checkbox-checked-bg: #3b82f6;
  --fb-fs-lock-color: #9ca3af;
  --fb-fs-empty-color: #9ca3af;

  // ── Field Configurator Component ──────────────────────────────────────────
  --fb-fc-bg: #ffffff;
  --fb-fc-sidebar-width: 400px;
  --fb-fc-sidebar-bg: #f9fafb;
  --fb-fc-main-bg: #ffffff;
  --fb-fc-border: #e5e7eb;
  --fb-fc-tree-header-bg: #ffffff;
  --fb-fc-tree-title-color: #111827;
  --fb-fc-tree-subtitle-color: #6b7280;
  --fb-fc-section-divider: #f3f4f6;
  --fb-fc-section-hover: #f9fafb;
  --fb-fc-chevron-color: #9ca3af;
  --fb-fc-section-label-color: #111827;
  --fb-fc-item-bg: #ffffff;
  --fb-fc-item-border: #e5e7eb;
  --fb-fc-item-hover-border: #3b82f6;
  --fb-fc-item-active-border: #3b82f6;
  --fb-fc-item-active-bg: #f0f7ff;
  --fb-fc-drag-color: #d1d5db;
  --fb-fc-item-label-color: #111827;
  --fb-fc-item-type-color: #6b7280;
  --fb-fc-panel-bg: #f9fafb;
  --fb-fc-header-bg: #ffffff;
  --fb-fc-title-color: #111827;
  --fb-fc-badge-bg: #eff6ff;
  --fb-fc-badge-color: #3b82f6;
  --fb-fc-badge-border: #dbeafe;
  --fb-fc-card-bg: #ffffff;
  --fb-fc-card-border: #e5e7eb;
  --fb-fc-accent: #3b82f6;
  --fb-fc-empty-color: #9ca3af;
  // ── Type Switcher (Standalone header select) ─────────────────────────────
  --fb-fc-type-label-color: #6b7280;
  --fb-fc-type-label-size: 0.75rem;
  --fb-fc-type-select-height: 36px;
  --fb-fc-type-select-border: #d1d5db;
  --fb-fc-type-select-radius: 8px;
  --fb-fc-type-select-bg: #ffffff;
  --fb-fc-type-select-color: #111827;
  --fb-fc-type-select-hover-border: #9ca3af;

  // Shared Components Overrides
  ::ng-deep lib-button button {
    font-family: var(--fb-font-family) !important;
  }
}