import type { MonitoringTheme } from "@/types/monitoringSettings";

interface ThemeClasses {
  root: string;
  card: string;
  cardBorder: string;
  header: string;
  headerText: string;
  text: string;
  mutedText: string;
  divider: string;
  tableHeader: string;
  tableRow: string;
  tableRowHover: string;
  /** CSS 변수 인라인 오버라이드 (--color-* Tailwind 테마 변수 직접 지정) */
  cssVars?: React.CSSProperties;
}

// --color-* 변수를 직접 오버라이드하여 bg-background, bg-card 등이 즉시 반영되도록 함
const DARK_CSS_VARS: React.CSSProperties = {
  "--color-background": "hsl(222 47% 6%)",
  "--color-foreground": "hsl(210 20% 95%)",
  "--color-card": "hsl(220 40% 9%)",
  "--color-card-foreground": "hsl(210 20% 95%)",
  "--color-popover": "hsl(220 40% 9%)",
  "--color-popover-foreground": "hsl(210 20% 95%)",
  "--color-primary": "hsl(217 91% 65%)",
  "--color-primary-foreground": "hsl(0 0% 100%)",
  "--color-secondary": "hsl(220 25% 14%)",
  "--color-secondary-foreground": "hsl(210 20% 90%)",
  "--color-muted": "hsl(220 20% 13%)",
  "--color-muted-foreground": "hsl(215 15% 58%)",
  "--color-accent": "hsl(220 25% 16%)",
  "--color-accent-foreground": "hsl(210 20% 90%)",
  "--color-border": "hsl(220 20% 18%)",
  "--color-input": "hsl(220 20% 18%)",
  "--color-ring": "hsl(217 91% 65%)",
  "--color-destructive": "hsl(0 72% 51%)",
  "--color-destructive-foreground": "hsl(0 0% 100%)",
} as React.CSSProperties;

const BLUE_CSS_VARS: React.CSSProperties = {
  "--color-background": "hsl(215 50% 8%)",
  "--color-foreground": "hsl(210 20% 95%)",
  "--color-card": "hsl(215 45% 12%)",
  "--color-card-foreground": "hsl(210 20% 95%)",
  "--color-popover": "hsl(215 45% 12%)",
  "--color-popover-foreground": "hsl(210 20% 95%)",
  "--color-primary": "hsl(217 91% 65%)",
  "--color-primary-foreground": "hsl(0 0% 100%)",
  "--color-secondary": "hsl(215 30% 14%)",
  "--color-secondary-foreground": "hsl(210 20% 90%)",
  "--color-muted": "hsl(215 35% 16%)",
  "--color-muted-foreground": "hsl(215 15% 58%)",
  "--color-accent": "hsl(215 35% 18%)",
  "--color-accent-foreground": "hsl(210 20% 90%)",
  "--color-border": "hsl(215 30% 20%)",
  "--color-input": "hsl(215 30% 20%)",
  "--color-ring": "hsl(217 91% 65%)",
  "--color-destructive": "hsl(0 72% 51%)",
  "--color-destructive-foreground": "hsl(0 0% 100%)",
} as React.CSSProperties;

const SHARED_CLASSES = {
  card: "bg-card",
  cardBorder: "border-border",
  header: "bg-card",
  headerText: "text-foreground",
  text: "text-foreground",
  mutedText: "text-muted-foreground",
  divider: "border-border",
  tableHeader: "bg-muted text-muted-foreground",
  tableRow: "bg-card text-card-foreground",
  tableRowHover: "hover:bg-muted/50",
};

const THEME_MAP: Record<MonitoringTheme, ThemeClasses> = {
  dark: {
    root: "bg-background text-foreground",
    ...SHARED_CLASSES,
    cssVars: DARK_CSS_VARS,
  },
  blue: {
    root: "bg-background text-foreground",
    ...SHARED_CLASSES,
    cssVars: BLUE_CSS_VARS,
  },
  light: {
    root: "bg-background text-foreground",
    ...SHARED_CLASSES,
    // cssVars 없음 → 시스템 기본 라이트 변수 사용
  },
};

export function getMonitoringTheme(theme: MonitoringTheme): ThemeClasses {
  return THEME_MAP[theme] ?? THEME_MAP.dark;
}