import type { PiWebPlugin, ThemeTokens } from "../types";

const classicTokens = {
  "--pi-bg": "#0d1117",
  "--pi-surface": "#161b22",
  "--pi-surface-hover": "#21262d",
  "--pi-terminal-bg": "#05070a",
  "--pi-terminal-text": "#e6edf3",
  "--pi-border": "#30363d",
  "--pi-border-muted": "#21262d",
  "--pi-text": "#e6edf3",
  "--pi-text-secondary": "#c9d1d9",
  "--pi-text-bright": "#f0f6fc",
  "--pi-muted": "#8b949e",
  "--pi-dim": "#6e7681",
  "--pi-accent": "#58a6ff",
  "--pi-accent-border": "#2f81f7",
  "--pi-selection-bg": "#0d2847",
  "--pi-success": "#3fb950",
  "--pi-success-border": "#238636",
  "--pi-success-bg": "#0f1b12",
  "--pi-success-surface": "#0f2a16",
  "--pi-success-ring": "#3fb95055",
  "--pi-warning": "#d29922",
  "--pi-warning-border": "#6e5200",
  "--pi-warning-surface": "#1f1a10",
  "--pi-danger": "#ff7b72",
  "--pi-purple": "#d2a8ff",
  "--pi-purple-border": "#a371f7",
  "--pi-purple-surface": "#21132f",
  "--pi-overlay": "#0008",
  "--pi-shadow-soft": "#0006",
  "--pi-shadow": "#0008",
  "--pi-shadow-strong": "#000b",
  "--pi-bg-overlay-soft": "#0d1117dd",
  "--pi-bg-overlay": "#0d1117e6",
  "--pi-success-bg-overlay": "#0f1b12ee",
  "--pi-terminal-selection": "#264f78",
} satisfies ThemeTokens;

const piWebDarkTokens = {
  "--pi-bg": "#070912",
  "--pi-surface": "#101527",
  "--pi-surface-hover": "#151b31",
  "--pi-terminal-bg": "#050710",
  "--pi-terminal-text": "#f7f4ff",
  "--pi-border": "#26304f",
  "--pi-border-muted": "#26304f",
  "--pi-text": "#f7f4ff",
  "--pi-text-secondary": "#aaa4bd",
  "--pi-text-bright": "#ffffff",
  "--pi-muted": "#aaa4bd",
  "--pi-dim": "#817a99",
  "--pi-accent": "#7c3cff",
  "--pi-accent-border": "#3d4a78",
  "--pi-selection-bg": "#151b31",
  "--pi-success": "#00f0d8",
  "--pi-success-border": "#00f0d8",
  "--pi-success-bg": "#071e22",
  "--pi-success-surface": "#092d31",
  "--pi-success-ring": "#00f0d855",
  "--pi-warning": "#ffb000",
  "--pi-warning-border": "#ffb000",
  "--pi-warning-surface": "#16140d",
  "--pi-danger": "#ff4f7b",
  "--pi-purple": "#b7a2ff",
  "--pi-purple-border": "#7c3cff",
  "--pi-purple-surface": "#181026",
  "--pi-overlay": "#0008",
  "--pi-shadow-soft": "#0006",
  "--pi-shadow": "#0008",
  "--pi-shadow-strong": "#000b",
  "--pi-bg-overlay-soft": "#070912dd",
  "--pi-bg-overlay": "#070912e6",
  "--pi-success-bg-overlay": "#071e22ee",
  "--pi-terminal-selection": "#3d4a78",
} satisfies ThemeTokens;

const piWebLightTokens = {
  "--pi-bg": "#f7f1e6",
  "--pi-surface": "#fff9ee",
  "--pi-surface-hover": "#f0e6d6",
  "--pi-terminal-bg": "#15131b",
  "--pi-terminal-text": "#fff9ee",
  "--pi-border": "#c9bca8",
  "--pi-border-muted": "#d8cdbc",
  "--pi-text": "#15131b",
  "--pi-text-secondary": "#15131b",
  "--pi-text-bright": "#15131b",
  "--pi-muted": "#5f586a",
  "--pi-dim": "#766f7e",
  "--pi-accent": "#6430d8",
  "--pi-accent-border": "#6430d8",
  "--pi-selection-bg": "#eadff8",
  "--pi-success": "#008c82",
  "--pi-success-border": "#008c82",
  "--pi-success-bg": "#e1f4ef",
  "--pi-success-surface": "#d7f0ec",
  "--pi-success-ring": "#008c8255",
  "--pi-warning": "#b05f00",
  "--pi-warning-border": "#b05f00",
  "--pi-warning-surface": "#fff2d2",
  "--pi-danger": "#b51d49",
  "--pi-purple": "#6430d8",
  "--pi-purple-border": "#6430d8",
  "--pi-purple-surface": "#eadff8",
  "--pi-overlay": "#15131b66",
  "--pi-shadow-soft": "#15131b22",
  "--pi-shadow": "#15131b33",
  "--pi-shadow-strong": "#15131b44",
  "--pi-bg-overlay-soft": "#f7f1e6dd",
  "--pi-bg-overlay": "#f7f1e6e6",
  "--pi-success-bg-overlay": "#e1f4efee",
  "--pi-terminal-selection": "#8d7b64",
} satisfies ThemeTokens;

export const themePackPlugin: PiWebPlugin = {
  apiVersion: 1,
  name: "PI WEB Themes",
  activate: () => ({
    contributions: {
      themes: [
        {
          id: "pi-web-dark",
          name: "PI WEB Dark",
          description: "Dark PI WEB palette.",
          order: 10,
          colorScheme: "dark",
          tokens: piWebDarkTokens,
        },
        {
          id: "pi-web-light",
          name: "PI WEB Light",
          description: "Light PI WEB palette.",
          order: 20,
          colorScheme: "light",
          tokens: piWebLightTokens,
        },
        {
          id: "classic",
          name: "PI WEB Classic",
          description: "The original PI WEB dark palette.",
          order: 30,
          colorScheme: "dark",
          tokens: classicTokens,
        },
      ],
      themePairs: [
        {
          id: "pi-web",
          name: "PI WEB",
          description: "Follow the system light/dark preference with PI WEB themes.",
          order: 10,
          light: "pi-web-light",
          dark: "pi-web-dark",
        },
      ],
    },
  }),
};
