import type { CSSProperties } from "react";

/**
 * Turbopack's Tailwind v4 (Lightning CSS) pipeline silently strips hand-authored
 * `backdrop-filter`/`-webkit-backdrop-filter` declarations from globals.css classes
 * in this project (confirmed via computed-style + compiled-stylesheet inspection —
 * the class survives with every other declaration except backdrop-filter).
 * Inline styles bypass that pipeline entirely, so every glass-* class gets its
 * matching blur/saturate re-applied here as a companion inline style.
 */
export const GLASS_BACKDROP: Record<string, CSSProperties> = {
  "glass-panel": { backdropFilter: "blur(20px) saturate(180%)", WebkitBackdropFilter: "blur(20px) saturate(180%)" },
  "chat-header-glass": { backdropFilter: "blur(20px) saturate(180%)", WebkitBackdropFilter: "blur(20px) saturate(180%)" },
  "chat-timer-glass": { backdropFilter: "blur(20px) saturate(180%)", WebkitBackdropFilter: "blur(20px) saturate(180%)" },
  "chat-timer-badge-glass": { backdropFilter: "blur(10px) saturate(160%)", WebkitBackdropFilter: "blur(10px) saturate(160%)" },
  "glass-chat-input": { backdropFilter: "blur(24px) saturate(200%)", WebkitBackdropFilter: "blur(24px) saturate(200%)" },
  "glass-panel-strong": { backdropFilter: "blur(24px) saturate(1.4)", WebkitBackdropFilter: "blur(24px) saturate(1.4)" },
  "comments-modal-glass": { backdropFilter: "blur(28px) saturate(1.5)", WebkitBackdropFilter: "blur(28px) saturate(1.5)" },
  "tab-active-glass": { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
  "glass-modal-overlay": { backdropFilter: "blur(20px) saturate(120%)", WebkitBackdropFilter: "blur(20px) saturate(120%)" },
  "glass-modal-overlay--dark": { backdropFilter: "blur(24px) saturate(110%)", WebkitBackdropFilter: "blur(24px) saturate(110%)" },
  "glass-modal-panel": { backdropFilter: "blur(28px) saturate(180%)", WebkitBackdropFilter: "blur(28px) saturate(180%)" },
};

/** Returns the inline backdrop-filter style for a known glass-* class name, merged if multiple apply. */
export function glassBackdropStyle(...classNames: string[]): CSSProperties {
  return Object.assign({}, ...classNames.map((c) => GLASS_BACKDROP[c]).filter(Boolean));
}
