export type CanvasColorTheme = "light" | "dark";
export type CanvasBackgroundMode = "dots" | "lines" | "blank";

export const canvasThemes = {
    light: {
        canvas: {
            background: "#ffffff",
            dot: "rgba(15,23,42,.20)",
            line: "rgba(15,23,42,.15)",
            selectionFill: "rgba(17,17,17,.10)",
        },
        node: {
            label: "#4b5563",
            fill: "#ffffff",
            panel: "#ffffff",
            stroke: "#e2e4e8",
            edge: "rgba(15,23,42,.16)",
            shadow: "0 6px 18px rgba(15,23,42,.08)",
            hoverShadow: "0 10px 24px rgba(15,23,42,.12)",
            activeStroke: "#111827",
            placeholder: "#9ca3af",
            text: "#111827",
            muted: "#6b7280",
            faint: "#9ca3af",
        },
        frame: {
            fill: "rgba(17,24,39,.025)",
            stroke: "rgba(17,24,39,.18)",
            activeFill: "rgba(17,17,17,.05)",
            activeStroke: "#171717",
            preview: "rgba(255,255,255,.82)",
        },
        toolbar: {
            panel: "rgba(255,255,255,.94)",
            border: "rgba(17,24,39,.10)",
            item: "#4b5563",
            itemHover: "rgba(17,24,39,.06)",
            activeBg: "rgba(17,24,39,.10)",
            activeText: "#111827",
        },
        spatial: {
            surface: "rgba(255,255,255,.72)",
            elevated: "rgba(255,255,255,.94)",
            dropzone: "rgba(248,250,252,.78)",
            glow: "rgba(17,17,17,.14)",
            glowStrong: "rgba(17,17,17,.42)",
            shadow: "rgba(15,23,42,.18)",
        },
        // 时间线/字幕组件语义色：轨道底、按类型区分的片段、标尺与播放头、字幕列表条目态。
        timeline: {
            trackFill: "#f6f8fb",
            trackBorder: "rgba(17,24,39,.08)",
            clipVideo: "rgba(79,110,232,.16)",
            clipAudio: "rgba(16,185,129,.14)",
            clipSubtitle: "rgba(245,158,11,.16)",
            clipSelectedBorder: "#171717",
            handle: "rgba(255,255,255,.72)",
            rulerTick: "rgba(17,24,39,.28)",
            rulerLabel: "#6b7280",
            playhead: "#171717",
            entryActive: "rgba(17,17,17,.10)",
            entryHover: "rgba(17,24,39,.05)",
        },
        accent: {
            primary: "#171717",
            primarySoft: "rgba(17,17,17,.10)",
            onPrimary: "#ffffff",
            danger: "#f87171",
        },
    },
    dark: {
        canvas: {
            background: "#0b0b0b",
            dot: "rgba(178,178,178,.18)",
            line: "rgba(178,178,178,.14)",
            selectionFill: "rgba(255,255,255,.12)",
        },
        node: {
            label: "#a3a3a3",
            fill: "#181818",
            panel: "#141414",
            stroke: "rgba(255,255,255,.12)",
            edge: "rgba(255,255,255,.18)",
            shadow: "0 8px 24px rgba(0,0,0,.34)",
            hoverShadow: "0 12px 30px rgba(0,0,0,.46)",
            activeStroke: "#f1f1f1",
            placeholder: "#737373",
            text: "#ededed",
            muted: "#a3a3a3",
            faint: "#666666",
        },
        frame: {
            fill: "rgba(255,255,255,.025)",
            stroke: "rgba(190,198,210,.15)",
            activeFill: "rgba(255,255,255,.08)",
            activeStroke: "#f5f5f5",
            preview: "rgba(20,20,20,.94)",
        },
        toolbar: {
            panel: "rgba(20,20,20,.97)",
            border: "rgba(255,255,255,.1)",
            item: "#d4d4d4",
            itemHover: "rgba(255,255,255,.07)",
            activeBg: "rgba(255,255,255,.10)",
            activeText: "#f5f6f8",
        },
        spatial: {
            surface: "rgba(22,22,22,.82)",
            elevated: "rgba(15,15,15,.97)",
            dropzone: "rgba(8,8,8,.9)",
            glow: "rgba(255,255,255,.12)",
            glowStrong: "rgba(255,255,255,.36)",
            shadow: "rgba(0,0,0,.6)",
        },
        timeline: {
            trackFill: "#101114",
            trackBorder: "rgba(255,255,255,.08)",
            clipVideo: "rgba(96,126,234,.22)",
            clipAudio: "rgba(16,185,129,.20)",
            clipSubtitle: "rgba(245,158,11,.20)",
            clipSelectedBorder: "#f5f5f5",
            handle: "rgba(255,255,255,.5)",
            rulerTick: "rgba(255,255,255,.26)",
            rulerLabel: "#a3a3a3",
            playhead: "#f5f5f5",
            entryActive: "rgba(255,255,255,.10)",
            entryHover: "rgba(255,255,255,.06)",
        },
        accent: {
            primary: "#f5f5f5",
            primarySoft: "rgba(255,255,255,.11)",
            onPrimary: "#131313",
            danger: "#fb7185",
        },
    },
} as const;

export type CanvasTheme = (typeof canvasThemes)[CanvasColorTheme];