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

export const idpAccent = '#3B82F6';

export const idpTheme = {
  bg: 'var(--idp-bg)',
  fg: 'var(--idp-fg)',
  muted: 'var(--idp-muted)',
  mutedFg: 'var(--idp-muted-fg)',
  border: 'var(--idp-border)',
  card: 'var(--idp-card)',
  primary: 'var(--idp-primary)',
  primaryFg: 'var(--idp-primary-fg)',
  accent: 'var(--idp-accent)',
  accentHover: 'var(--idp-accent-hover)',
  accentSoft: 'var(--idp-accent-soft)',
  info: 'var(--idp-info)',
  destructive: 'var(--idp-destructive)',
  ok: 'var(--idp-ok)',
  warn: 'var(--idp-warn)',
  radius: 'var(--idp-radius)',
};

export const idpBaseStyles = css`
  :host {
    --sh-bg: ${cssManager.bdTheme('#FAFAF9', '#0A0A0A')};
    --sh-bg-2: ${cssManager.bdTheme('#F4F4F2', '#111111')};
    --sh-card: ${cssManager.bdTheme('#FFFFFF', '#121212')};
    --sh-card-2: ${cssManager.bdTheme('#F8F8F7', '#161616')};
    --sh-muted: ${cssManager.bdTheme('#F1F1EF', '#161616')};
    --sh-muted-fg: ${cssManager.bdTheme('#71717A', 'hsl(0 0% 55%)')};
    --sh-fg: ${cssManager.bdTheme('#0A0A0A', '#FAFAFA')};
    --sh-fg-2: ${cssManager.bdTheme('#3F3F46', '#D4D4D8')};
    --sh-fg-3: ${cssManager.bdTheme('#52525B', 'hsl(0 0% 70%)')};
    --sh-fg-4: ${cssManager.bdTheme('#A1A1AA', 'hsl(0 0% 35%)')};
    --sh-border: ${cssManager.bdTheme('#E4E4E7', '#262626')};
    --sh-border-soft: ${cssManager.bdTheme('#EDEDEC', '#1C1C1C')};
    --sh-border-strong: ${cssManager.bdTheme('#D4D4D8', '#333333')};
    --sh-input: ${cssManager.bdTheme('#FFFFFF', '#161616')};
    --sh-input-bg: ${cssManager.bdTheme('#FFFFFF', '#0A0A0A')};
    --sh-hover: ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(255,255,255,0.04)')};
    --sh-primary: ${cssManager.bdTheme('#18181B', '#FAFAFA')};
    --sh-primary-fg: ${cssManager.bdTheme('#FAFAFA', '#18181B')};
    --sh-accent: ${cssManager.bdTheme('#0050B9', '#3B82F6')};
    --sh-accent-h: ${cssManager.bdTheme('#0069F2', '#60A5FA')};
    --sh-accent-fg: #FFFFFF;
    --sh-accent-soft: ${cssManager.bdTheme('#E6EFFB', 'rgba(59,130,246,0.15)')};
    --sh-accent-soft-fg: ${cssManager.bdTheme('#0050B9', '#93BBFD')};
    --sh-accent-ring: ${cssManager.bdTheme('rgba(0,80,185,0.2)', 'rgba(59,130,246,0.35)')};
    --sh-ok: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
    --sh-ok-bg: ${cssManager.bdTheme('#F0FDF4', 'rgba(20,83,45,0.4)')};
    --sh-ok-border: ${cssManager.bdTheme('#BBF7D0', 'rgba(74,222,128,0.25)')};
    --sh-warn: ${cssManager.bdTheme('#B45309', '#FBBF24')};
    --sh-warn-bg: ${cssManager.bdTheme('#FEF9C3', 'rgba(69,26,3,0.6)')};
    --sh-warn-border: ${cssManager.bdTheme('#FDE68A', 'rgba(251,191,36,0.25)')};
    --sh-err: ${cssManager.bdTheme('#DC2626', '#F87171')};
    --sh-err-bg: ${cssManager.bdTheme('#FEF2F2', 'rgba(69,10,10,0.6)')};
    --sh-err-border: ${cssManager.bdTheme('#FECACA', 'rgba(248,113,113,0.25)')};
    --sh-info: ${cssManager.bdTheme('#1E40AF', '#93BBFD')};
    --sh-info-bg: ${cssManager.bdTheme('#EFF6FF', 'rgba(59,130,246,0.15)')};
    --sh-info-border: ${cssManager.bdTheme('#BFDBFE', 'rgba(59,130,246,0.3)')};
    --sh-destructive: #EF4444;
    --sh-ring: ${cssManager.bdTheme('#A1A1AA', '#3B82F6')};
    --sh-radius: 8px;
    --sh-radius-lg: 12px;
    --sh-chart-1: ${cssManager.bdTheme('#0050B9', '#3B82F6')};
    --sh-chart-2: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
    --sh-chart-3: ${cssManager.bdTheme('#DC2626', '#F87171')};
    --sh-chart-4: ${cssManager.bdTheme('#B45309', '#FBBF24')};
    --sh-chart-5: ${cssManager.bdTheme('#6E5BE6', '#A78BFA')};
    --sh-grid: ${cssManager.bdTheme('#E4E4E7', '#262626')};
    --sh-grid-soft: ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(255,255,255,0.04)')};
    --sh-spark-up: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
    --sh-spark-down: ${cssManager.bdTheme('#DC2626', '#F87171')};
    --sh-spark-info: ${cssManager.bdTheme('#0050B9', '#93BBFD')};
    --sh-d1: ${cssManager.bdTheme('#0050B9', '#93BBFD')};
    --sh-d2: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
    --sh-d3: ${cssManager.bdTheme('#B45309', '#FBBF24')};
    --sh-d4: ${cssManager.bdTheme('#DC2626', '#F87171')};
    --sh-d5: ${cssManager.bdTheme('#6E5BE6', '#A78BFA')};
    --sh-d6: ${cssManager.bdTheme('#0891B2', '#22D3EE')};

    --idp-bg: var(--sh-bg);
    --idp-bg-2: var(--sh-bg-2);
    --idp-fg: var(--sh-fg);
    --idp-fg-2: var(--sh-fg-2);
    --idp-fg-3: var(--sh-fg-3);
    --idp-muted: var(--sh-muted);
    --idp-muted-fg: var(--sh-muted-fg);
    --idp-border: var(--sh-border);
    --idp-border-soft: var(--sh-border-soft);
    --idp-border-strong: var(--sh-border-strong);
    --idp-card: var(--sh-card);
    --idp-card-2: var(--sh-card-2);
    --idp-primary: var(--sh-primary);
    --idp-primary-fg: var(--sh-primary-fg);
    --idp-accent: var(--sh-accent);
    --idp-accent-hover: var(--sh-accent-h);
    --idp-accent-fg: var(--sh-accent-fg);
    --idp-accent-soft: var(--sh-accent-soft);
    --idp-destructive: var(--sh-destructive);
    --idp-ok: var(--sh-ok);
    --idp-ok-bg: var(--sh-ok-bg);
    --idp-ok-border: var(--sh-ok-border);
    --idp-warn: var(--sh-warn);
    --idp-warn-bg: var(--sh-warn-bg);
    --idp-warn-border: var(--sh-warn-border);
    --idp-error: var(--sh-err);
    --idp-error-bg: var(--sh-err-bg);
    --idp-error-border: var(--sh-err-border);
    --idp-info: var(--sh-info);
    --idp-info-bg: var(--sh-info-bg);
    --idp-info-border: var(--sh-info-border);
    --idp-chart-1: var(--sh-chart-1);
    --idp-chart-2: var(--sh-chart-2);
    --idp-chart-3: var(--sh-chart-3);
    --idp-chart-4: var(--sh-chart-4);
    --idp-chart-5: var(--sh-chart-5);
    --idp-spark-up: var(--sh-spark-up);
    --idp-spark-down: var(--sh-spark-down);
    --idp-spark-info: var(--sh-spark-info);
    --idp-radius: var(--sh-radius);
    --idp-radius-lg: var(--sh-radius-lg);
    --idp-font: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --idp-display: 'Plus Jakarta Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
    --idp-mono: 'Intel One Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --idp-serif: 'Instrument Serif', Georgia, serif;
    font-family: var(--idp-font);
    font-feature-settings: "cv11", "ss03";
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
  }

  :host([theme="dark"]),
  :host([dark]) {
    --sh-bg: #0A0A0A;
    --sh-bg-2: #111111;
    --sh-card: #121212;
    --sh-card-2: #161616;
    --sh-muted: #161616;
    --sh-muted-fg: hsl(0 0% 55%);
    --sh-fg: #FAFAFA;
    --sh-fg-2: #D4D4D8;
    --sh-fg-3: hsl(0 0% 70%);
    --sh-fg-4: hsl(0 0% 35%);
    --sh-border: #262626;
    --sh-border-soft: #1C1C1C;
    --sh-border-strong: #333333;
    --sh-input: #161616;
    --sh-input-bg: #0A0A0A;
    --sh-hover: rgba(255,255,255,0.04);
    --sh-primary: #FAFAFA;
    --sh-primary-fg: #18181B;
    --sh-accent: #3B82F6;
    --sh-accent-h: #60A5FA;
    --sh-accent-fg: #FFFFFF;
    --sh-accent-soft: rgba(59,130,246,0.15);
    --sh-accent-soft-fg: #93BBFD;
    --sh-accent-ring: rgba(59,130,246,0.35);
    --sh-ok: #4ADE80;
    --sh-ok-bg: rgba(20,83,45,0.4);
    --sh-ok-border: rgba(74,222,128,0.25);
    --sh-warn: #FBBF24;
    --sh-warn-bg: rgba(69,26,3,0.6);
    --sh-warn-border: rgba(251,191,36,0.25);
    --sh-err: #F87171;
    --sh-err-bg: rgba(69,10,10,0.6);
    --sh-err-border: rgba(248,113,113,0.25);
    --sh-info: #93BBFD;
    --sh-info-bg: rgba(59,130,246,0.15);
    --sh-info-border: rgba(59,130,246,0.3);
    --sh-destructive: #EF4444;
    --sh-ring: #3B82F6;
    --sh-chart-1: #3B82F6;
    --sh-chart-2: #4ADE80;
    --sh-chart-3: #F87171;
    --sh-chart-4: #FBBF24;
    --sh-chart-5: #A78BFA;
    --sh-grid: #262626;
    --sh-grid-soft: rgba(255,255,255,0.04);
    --sh-spark-up: #4ADE80;
    --sh-spark-down: #F87171;
    --sh-spark-info: #93BBFD;
    --sh-d1: #93BBFD;
    --sh-d2: #4ADE80;
    --sh-d3: #FBBF24;
    --sh-d4: #F87171;
    --sh-d5: #A78BFA;
    --sh-d6: #22D3EE;
  }
`;

export const idpElementStyles = [cssManager.defaultStyles, idpBaseStyles];