import { css, cssManager, unsafeCSS, type CSSResult } from '@design.estate/dees-element';

// ============================================
// Theme Token Type Definitions
// ============================================

export interface IThemeColors {
  bgPrimary: string;
  bgSecondary: string;
  bgTertiary: string;
  textPrimary: string;
  textSecondary: string;
  textMuted: string;
  textWarm: string;
  borderDefault: string;
  borderSubtle: string;
  borderStrong: string;
  accentPrimary: string;
  accentSuccess: string;
  accentWarning: string;
  accentError: string;
  badgeDefaultBg: string;
  badgeDefaultFg: string;
  badgeSuccessBg: string;
  badgeSuccessFg: string;
  badgeWarningBg: string;
  badgeWarningFg: string;
  badgeErrorBg: string;
  badgeErrorFg: string;
}

export interface IThemeSpacing {
  xs: string;
  sm: string;
  md: string;
  lg: string;
  xl: string;
  '2xl': string;
  '3xl': string;
}

export interface IThemeRadius {
  xs: string;
  sm: string;
  md: string;
  lg: string;
  xl: string;
  full: string;
}

export interface IThemeShadows {
  xs: string;
  sm: string;
  md: string;
  lg: string;
}

export interface IThemeTransitions {
  fast: string;
  default: string;
  slow: string;
  slower: string;
}

export interface IThemeControlHeights {
  sm: string;
  md: string;
  lg: string;
  xl: string;
}

export interface ITheme {
  colors: {
    light: IThemeColors;
    dark: IThemeColors;
  };
  spacing: IThemeSpacing;
  radius: IThemeRadius;
  shadows: IThemeShadows;
  transitions: IThemeTransitions;
  controlHeights: IThemeControlHeights;
}

// ============================================
// Default Theme Values (TypeScript Object)
// ============================================

export const themeDefaults: ITheme = {
  colors: {
    light: {
      bgPrimary: 'hsl(0 0% 100%)',    // #ffffff
      bgSecondary: 'hsl(0 0% 98%)',   // #fafafa
      bgTertiary: 'hsl(0 0% 96%)',    // #f5f5f5
      textPrimary: 'hsl(0 0% 3.9%)',  // #0a0a0a
      textSecondary: 'hsl(0 0% 20%)', // #333333
      textMuted: 'hsl(0 0% 45%)',     // #737373
      textWarm: '#78716c',            // warm stone
      borderDefault: 'hsl(0 0% 89.8%)', // #e5e5e5
      borderSubtle: 'hsl(0 0% 93%)',    // #ededed
      borderStrong: 'hsl(0 0% 80%)',    // #cccccc
      accentPrimary: '#3b82f6',
      accentSuccess: '#22c55e',
      accentWarning: '#f59e0b',
      accentError: '#ef4444',
      badgeDefaultBg: '#f4f4f5',
      badgeDefaultFg: '#3f3f46',
      badgeSuccessBg: '#dcfce7',
      badgeSuccessFg: '#166534',
      badgeWarningBg: '#fef3c7',
      badgeWarningFg: '#92400e',
      badgeErrorBg: '#fee2e2',
      badgeErrorFg: '#991b1b',
    },
    dark: {
      bgPrimary: 'hsl(0 0% 3.9%)',    // #0a0a0a
      bgSecondary: 'hsl(0 0% 3.9%)', // #0a0a0a (matches sidebar/tile in dark)
      bgTertiary: 'hsl(0 0% 7%)',    // #121212
      textPrimary: 'hsl(0 0% 98%)',   // #fafafa
      textSecondary: 'hsl(0 0% 63.9%)', // #a3a3a3
      textMuted: 'hsl(0 0% 55%)',       // #8c8c8c
      textWarm: '#b5a99a',              // warm stone
      borderDefault: 'hsl(0 0% 14.9%)', // #262626
      borderSubtle: 'hsl(0 0% 11%)',     // #1c1c1c
      borderStrong: 'hsl(0 0% 20%)',     // #333333
      accentPrimary: '#3b82f6',
      accentSuccess: '#22c55e',
      accentWarning: '#f59e0b',
      accentError: '#ef4444',
      badgeDefaultBg: '#27272a',
      badgeDefaultFg: '#a1a1aa',
      badgeSuccessBg: '#14532d',
      badgeSuccessFg: '#4ade80',
      badgeWarningBg: '#451a03',
      badgeWarningFg: '#fbbf24',
      badgeErrorBg: '#450a0a',
      badgeErrorFg: '#f87171',
    },
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '12px',
    lg: '16px',
    xl: '24px',
    '2xl': '32px',
    '3xl': '48px',
  },
  radius: {
    xs: '2px',
    sm: '4px',
    md: '6px',
    lg: '8px',
    xl: '12px',
    full: '999px',
  },
  shadows: {
    xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
    sm: '0 1px 3px rgba(0, 0, 0, 0.1)',
    md: '0 2px 8px rgba(0, 0, 0, 0.15)',
    lg: '0 4px 12px rgba(0, 0, 0, 0.15)',
  },
  transitions: {
    fast: '0.1s',
    default: '0.15s',
    slow: '0.2s',
    slower: '0.3s',
  },
  controlHeights: {
    sm: '32px',
    md: '36px',
    lg: '40px',
    xl: '48px',
  },
};

// Shorthand aliases for CSS template usage
const l = themeDefaults.colors.light;
const d = themeDefaults.colors.dark;

// ============================================
// CSS Block for Component Import
// ============================================

/**
 * Default theme styles to be imported into every component's static styles array.
 * Provides CSS custom properties for colors, spacing, radius, shadows, transitions, and control heights.
 *
 * Usage:
 * ```typescript
 * import { themeDefaultStyles } from '../00theme.js';
 *
 * @customElement('my-component')
 * export class MyComponent extends DeesElement {
 *   public static styles = [
 *     themeDefaultStyles,
 *     cssManager.defaultStyles,
 *     css`...`
 *   ];
 * }
 * ```
 */
export const themeDefaultStyles: CSSResult = css`
  :host {
    /* ========================================
     * Colors — Background (from themeDefaults)
     * ======================================== */
    --dees-color-bg-primary: ${cssManager.bdTheme(l.bgPrimary, d.bgPrimary)};
    --dees-color-bg-secondary: ${cssManager.bdTheme(l.bgSecondary, d.bgSecondary)};
    --dees-color-bg-tertiary: ${cssManager.bdTheme(l.bgTertiary, d.bgTertiary)};

    /* ========================================
     * Colors — Text (from themeDefaults)
     * ======================================== */
    --dees-color-text-primary: ${cssManager.bdTheme(l.textPrimary, d.textPrimary)};
    --dees-color-text-secondary: ${cssManager.bdTheme(l.textSecondary, d.textSecondary)};
    --dees-color-text-muted: ${cssManager.bdTheme(l.textMuted, d.textMuted)};

    /* ========================================
     * Colors — Border (from themeDefaults)
     * ======================================== */
    --dees-color-border-default: ${cssManager.bdTheme(l.borderDefault, d.borderDefault)};
    --dees-color-border-subtle: ${cssManager.bdTheme(l.borderSubtle, d.borderSubtle)};
    --dees-color-border-strong: ${cssManager.bdTheme(l.borderStrong, d.borderStrong)};

    /* ========================================
     * Colors — Warm Text (from themeDefaults)
     * ======================================== */
    --dees-color-text-warm: ${cssManager.bdTheme(l.textWarm, d.textWarm)};

    /* ========================================
     * Colors — Accent (from themeDefaults)
     * ======================================== */
    --dees-color-accent-primary: ${cssManager.bdTheme(l.accentPrimary, d.accentPrimary)};
    --dees-color-accent-success: ${cssManager.bdTheme(l.accentSuccess, d.accentSuccess)};
    --dees-color-accent-warning: ${cssManager.bdTheme(l.accentWarning, d.accentWarning)};
    --dees-color-accent-error: ${cssManager.bdTheme(l.accentError, d.accentError)};

    /* ========================================
     * Colors — Badge (from themeDefaults)
     * ======================================== */
    --dees-color-badge-default-bg: ${cssManager.bdTheme(l.badgeDefaultBg, d.badgeDefaultBg)};
    --dees-color-badge-default-fg: ${cssManager.bdTheme(l.badgeDefaultFg, d.badgeDefaultFg)};
    --dees-color-badge-success-bg: ${cssManager.bdTheme(l.badgeSuccessBg, d.badgeSuccessBg)};
    --dees-color-badge-success-fg: ${cssManager.bdTheme(l.badgeSuccessFg, d.badgeSuccessFg)};
    --dees-color-badge-warning-bg: ${cssManager.bdTheme(l.badgeWarningBg, d.badgeWarningBg)};
    --dees-color-badge-warning-fg: ${cssManager.bdTheme(l.badgeWarningFg, d.badgeWarningFg)};
    --dees-color-badge-error-bg: ${cssManager.bdTheme(l.badgeErrorBg, d.badgeErrorBg)};
    --dees-color-badge-error-fg: ${cssManager.bdTheme(l.badgeErrorFg, d.badgeErrorFg)};

    /* ========================================
     * Colors — Interactive States
     * ======================================== */
    --dees-color-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
    --dees-color-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
    --dees-color-pressed: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};

    /* ========================================
     * Colors — Focus Ring
     * ======================================== */
    --dees-color-focus-ring: ${cssManager.bdTheme('rgba(59, 130, 246, 0.4)', 'rgba(59, 130, 246, 0.4)')};

    /* ========================================
     * Colors — Tooltip (inverted contrast)
     * ======================================== */
    --dees-color-tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
    --dees-color-tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};

    /* ========================================
     * Colors — Link
     * ======================================== */
    --dees-color-link: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
    --dees-color-link-hover: ${cssManager.bdTheme('#2563eb', '#93bbfd')};

    /* ========================================
     * Colors — Code
     * ======================================== */
    --dees-color-code-bg: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
    --dees-color-code-block-bg: ${cssManager.bdTheme('#f4f4f5', '#18181b')};

    /* ========================================
     * Colors — Selection
     * ======================================== */
    --dees-color-selection: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.3)')};

    /* ========================================
     * Colors — Scrollbar
     * ======================================== */
    --dees-color-scrollbar-thumb: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
    --dees-color-scrollbar-thumb-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};

    /* ========================================
     * Spacing Scale
     * ======================================== */
    --dees-spacing-xs: 4px;
    --dees-spacing-sm: 8px;
    --dees-spacing-md: 12px;
    --dees-spacing-lg: 16px;
    --dees-spacing-xl: 24px;
    --dees-spacing-2xl: 32px;
    --dees-spacing-3xl: 48px;

    /* ========================================
     * Border Radius Scale
     * ======================================== */
    --dees-radius-xs: 2px;
    --dees-radius-sm: 4px;
    --dees-radius-md: 6px;
    --dees-radius-lg: 8px;
    --dees-radius-xl: 12px;
    --dees-radius-full: 999px;

    /* ========================================
     * Shadow Elevation Scale
     * ======================================== */
    --dees-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dees-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --dees-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
    --dees-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* ========================================
     * Transition Duration Scale
     * ======================================== */
    --dees-transition-fast: 0.1s;
    --dees-transition-default: 0.15s;
    --dees-transition-slow: 0.2s;
    --dees-transition-slower: 0.3s;

    /* ========================================
     * Control Height Scale
     * ======================================== */
    --dees-control-height-sm: 32px;
    --dees-control-height-md: 36px;
    --dees-control-height-lg: 40px;
    --dees-control-height-xl: 48px;
  }
`;