export type ThemeName = "clay" | "sage" | "mist";

export interface ThemeOption {
  name: ThemeName;
  label: string;
  swatch: string;
  tokens: Record<string, string>;
}

export const THEME_STORAGE_KEY = "nanobot.theme";
export const DEFAULT_THEME: ThemeName = "clay";

const cardFonts = {
  "--card-font": '"Iosevka", "SF Mono", ui-monospace, Menlo, Consolas, monospace',
  "--theme-font-title": '"IBM Plex Sans Condensed", "SF Pro Display", "Arial Narrow", sans-serif',
  "--theme-font-mono": '"M-1m Code", "SF Mono", ui-monospace, Menlo, Consolas, monospace',
};

export const THEME_OPTIONS: ThemeOption[] = [
  {
    name: "clay",
    label: "Clay",
    swatch: "linear-gradient(135deg, #b56c3d 0%, #d9b1b8 100%)",
    tokens: {
      ...cardFonts,
      "--theme-root-bg": "radial-gradient(circle at center, #f7d9bf 0%, #f2caa8 100%)",
      "--theme-agent-bg": "#ffffff",
      "--theme-agent-text-bg":
        "radial-gradient(circle at top, rgba(245, 228, 210, 0.54), transparent 34%), linear-gradient(180deg, #fcf7f1 0%, #f6efe7 100%)",
      "--theme-feed-bg": "#e7ddd0",
      "--theme-panel-bg": "rgba(247, 239, 230, 0.9)",
      "--theme-panel-bg-strong": "rgba(250, 244, 237, 0.98)",
      "--theme-panel-bg-soft": "rgba(255, 255, 255, 0.94)",
      "--theme-border": "rgba(141, 104, 75, 0.18)",
      "--theme-border-strong": "rgba(120, 84, 52, 0.22)",
      "--theme-text": "#2f2118",
      "--theme-text-soft": "#5f4634",
      "--theme-text-muted": "#8b654b",
      "--theme-accent": "#b56c3d",
      "--theme-accent-strong": "#99532a",
      "--theme-accent-soft": "rgba(255, 200, 140, 0.2)",
      "--theme-accent-contrast": "#ffffff",
      "--theme-overlay": "rgba(0, 0, 0, 0.42)",
      "--theme-shadow": "0 8px 18px rgba(48, 28, 18, 0.1)",
      "--theme-shadow-strong": "0 18px 36px rgba(48, 28, 18, 0.18)",
      "--theme-status-muted": "#6b7280",
      "--theme-status-live": "#047857",
      "--theme-status-warning": "#b45309",
      "--theme-status-danger": "#b91c1c",
      "--theme-card-neutral-bg": "linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)",
      "--theme-card-neutral-border": "#dbe4ee",
      "--theme-card-neutral-text": "#111827",
      "--theme-card-neutral-muted": "#64748b",
      "--theme-card-neutral-subtle": "#475569",
      "--theme-card-warm-bg": "linear-gradient(180deg, #fffdfb 0%, #f7f1ea 100%)",
      "--theme-card-warm-border": "rgba(168, 120, 86, 0.18)",
      "--theme-card-warm-text": "#23150d",
      "--theme-card-warm-muted": "#78543b",
      "--theme-card-success-bg":
        "linear-gradient(180deg, rgba(234, 244, 229, 0.98), rgba(218, 232, 212, 0.98))",
      "--theme-card-success-border": "rgba(96, 126, 90, 0.18)",
      "--theme-card-success-text": "#2f442a",
      "--theme-card-success-muted": "rgba(52, 82, 45, 0.76)",
      "--theme-task-bg":
        "radial-gradient(circle at top right, rgba(255, 255, 255, 0.72), transparent 32%), linear-gradient(145deg, rgba(253, 245, 235, 0.98), rgba(242, 227, 211, 0.97))",
      "--theme-task-border": "rgba(87, 65, 50, 0.14)",
      "--theme-task-text": "#2f241e",
      "--theme-task-muted": "#7e6659",
      "--theme-task-shadow":
        "inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 18px 36px rgba(79, 56, 43, 0.12)",
      "--theme-task-pattern": "rgba(122, 97, 78, 0.035)",
      "--theme-list-bg":
        "radial-gradient(circle at top right, rgba(255, 252, 233, 0.68), transparent 34%), linear-gradient(145deg, rgba(244, 226, 187, 0.98), rgba(226, 198, 145, 0.97))",
      "--theme-list-text": "#4d392d",
      "--theme-list-muted": "rgba(77, 57, 45, 0.72)",
      "--theme-list-border": "rgba(92, 70, 55, 0.18)",
      "--theme-list-shadow": "inset 0 1px 0 rgba(255, 250, 224, 0.62)",
      "--card-surface": "linear-gradient(180deg, #b56c3d 0%, #8f4f27 100%)",
      "--card-border": "rgba(255, 220, 188, 0.24)",
      "--card-shadow": "0 10px 28px rgba(68, 34, 15, 0.22)",
      "--card-text": "rgba(255, 245, 235, 0.9)",
      "--card-muted": "rgba(255, 233, 214, 0.72)",
      "--helper-card-surface": "linear-gradient(180deg, #d9b1b8 0%, #c78d9a 100%)",
      "--helper-card-border": "rgba(111, 46, 63, 0.18)",
      "--helper-card-shadow": "0 10px 28px rgba(92, 42, 57, 0.16)",
      "--helper-card-text": "rgba(63, 23, 35, 0.94)",
      "--helper-card-muted": "rgba(87, 43, 56, 0.72)",
    },
  },
  {
    name: "sage",
    label: "Sage",
    swatch: "linear-gradient(135deg, #6d8a5d 0%, #d7cfb4 100%)",
    tokens: {
      ...cardFonts,
      "--theme-root-bg": "radial-gradient(circle at center, #dfe8d3 0%, #c8d5bf 100%)",
      "--theme-agent-bg": "#fbfcf8",
      "--theme-agent-text-bg":
        "radial-gradient(circle at top, rgba(232, 242, 223, 0.54), transparent 34%), linear-gradient(180deg, #fbfcf8 0%, #f1f5eb 100%)",
      "--theme-feed-bg": "#dfe6d7",
      "--theme-panel-bg": "rgba(241, 246, 236, 0.92)",
      "--theme-panel-bg-strong": "rgba(247, 250, 243, 0.98)",
      "--theme-panel-bg-soft": "rgba(255, 255, 255, 0.95)",
      "--theme-border": "rgba(107, 129, 95, 0.18)",
      "--theme-border-strong": "rgba(86, 110, 74, 0.24)",
      "--theme-text": "#263126",
      "--theme-text-soft": "#415141",
      "--theme-text-muted": "#677767",
      "--theme-accent": "#6d8a5d",
      "--theme-accent-strong": "#547246",
      "--theme-accent-soft": "rgba(137, 170, 117, 0.18)",
      "--theme-accent-contrast": "#ffffff",
      "--theme-overlay": "rgba(24, 34, 24, 0.34)",
      "--theme-shadow": "0 8px 18px rgba(40, 60, 36, 0.12)",
      "--theme-shadow-strong": "0 18px 36px rgba(40, 60, 36, 0.16)",
      "--theme-status-muted": "#5f6b5f",
      "--theme-status-live": "#2f6b47",
      "--theme-status-warning": "#9a641d",
      "--theme-status-danger": "#a13f35",
      "--theme-card-neutral-bg": "linear-gradient(180deg, #fcfdf9 0%, #eff4e8 100%)",
      "--theme-card-neutral-border": "rgba(122, 145, 109, 0.22)",
      "--theme-card-neutral-text": "#223022",
      "--theme-card-neutral-muted": "#607260",
      "--theme-card-neutral-subtle": "#4b5f4b",
      "--theme-card-warm-bg": "linear-gradient(180deg, #f8f7ef 0%, #ece7d8 100%)",
      "--theme-card-warm-border": "rgba(150, 134, 98, 0.22)",
      "--theme-card-warm-text": "#353024",
      "--theme-card-warm-muted": "#776950",
      "--theme-card-success-bg":
        "linear-gradient(180deg, rgba(229, 241, 220, 0.98), rgba(211, 229, 201, 0.98))",
      "--theme-card-success-border": "rgba(98, 129, 86, 0.2)",
      "--theme-card-success-text": "#29412a",
      "--theme-card-success-muted": "rgba(56, 82, 49, 0.76)",
      "--theme-task-bg":
        "radial-gradient(circle at top right, rgba(255, 255, 255, 0.68), transparent 32%), linear-gradient(145deg, rgba(248, 250, 240, 0.98), rgba(231, 236, 219, 0.97))",
      "--theme-task-border": "rgba(95, 118, 89, 0.14)",
      "--theme-task-text": "#243125",
      "--theme-task-muted": "#647464",
      "--theme-task-shadow":
        "inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 18px 36px rgba(54, 72, 48, 0.12)",
      "--theme-task-pattern": "rgba(98, 118, 90, 0.03)",
      "--theme-list-bg":
        "radial-gradient(circle at top right, rgba(255, 249, 227, 0.68), transparent 34%), linear-gradient(145deg, rgba(238, 232, 190, 0.98), rgba(221, 213, 160, 0.97))",
      "--theme-list-text": "#4f4531",
      "--theme-list-muted": "rgba(79, 69, 49, 0.7)",
      "--theme-list-border": "rgba(105, 93, 67, 0.18)",
      "--theme-list-shadow": "inset 0 1px 0 rgba(255, 251, 232, 0.62)",
      "--card-surface": "linear-gradient(180deg, #7a8f63 0%, #5d714b 100%)",
      "--card-border": "rgba(231, 243, 219, 0.24)",
      "--card-shadow": "0 10px 28px rgba(44, 58, 33, 0.22)",
      "--card-text": "rgba(247, 250, 241, 0.92)",
      "--card-muted": "rgba(226, 236, 210, 0.76)",
      "--helper-card-surface": "linear-gradient(180deg, #d5c3cc 0%, #b898a8 100%)",
      "--helper-card-border": "rgba(100, 72, 84, 0.18)",
      "--helper-card-shadow": "0 10px 28px rgba(76, 54, 64, 0.16)",
      "--helper-card-text": "rgba(49, 36, 41, 0.94)",
      "--helper-card-muted": "rgba(83, 63, 71, 0.72)",
    },
  },
  {
    name: "mist",
    label: "Mist",
    swatch: "linear-gradient(135deg, #5f7884 0%, #c7d2dd 100%)",
    tokens: {
      ...cardFonts,
      "--theme-root-bg": "radial-gradient(circle at center, #d8e0e7 0%, #c1ccd8 100%)",
      "--theme-agent-bg": "#f8fafc",
      "--theme-agent-text-bg":
        "radial-gradient(circle at top, rgba(225, 233, 241, 0.56), transparent 34%), linear-gradient(180deg, #fbfcfe 0%, #eef3f7 100%)",
      "--theme-feed-bg": "#dce3ea",
      "--theme-panel-bg": "rgba(239, 244, 248, 0.92)",
      "--theme-panel-bg-strong": "rgba(247, 250, 252, 0.98)",
      "--theme-panel-bg-soft": "rgba(255, 255, 255, 0.95)",
      "--theme-border": "rgba(96, 117, 131, 0.18)",
      "--theme-border-strong": "rgba(86, 104, 118, 0.24)",
      "--theme-text": "#23303a",
      "--theme-text-soft": "#42515f",
      "--theme-text-muted": "#6a7b88",
      "--theme-accent": "#5f7884",
      "--theme-accent-strong": "#46616d",
      "--theme-accent-soft": "rgba(120, 146, 160, 0.18)",
      "--theme-accent-contrast": "#ffffff",
      "--theme-overlay": "rgba(18, 28, 36, 0.36)",
      "--theme-shadow": "0 8px 18px rgba(34, 48, 58, 0.12)",
      "--theme-shadow-strong": "0 18px 36px rgba(34, 48, 58, 0.18)",
      "--theme-status-muted": "#5f6b75",
      "--theme-status-live": "#16616c",
      "--theme-status-warning": "#9a641d",
      "--theme-status-danger": "#a13f35",
      "--theme-card-neutral-bg": "linear-gradient(180deg, #ffffff 0%, #eef4f8 100%)",
      "--theme-card-neutral-border": "rgba(137, 160, 175, 0.22)",
      "--theme-card-neutral-text": "#1e2934",
      "--theme-card-neutral-muted": "#657786",
      "--theme-card-neutral-subtle": "#506271",
      "--theme-card-warm-bg": "linear-gradient(180deg, #fcfcfb 0%, #eef1ed 100%)",
      "--theme-card-warm-border": "rgba(132, 146, 129, 0.2)",
      "--theme-card-warm-text": "#283127",
      "--theme-card-warm-muted": "#667262",
      "--theme-card-success-bg":
        "linear-gradient(180deg, rgba(231, 240, 236, 0.98), rgba(213, 227, 220, 0.98))",
      "--theme-card-success-border": "rgba(102, 132, 118, 0.2)",
      "--theme-card-success-text": "#274036",
      "--theme-card-success-muted": "rgba(56, 82, 71, 0.76)",
      "--theme-task-bg":
        "radial-gradient(circle at top right, rgba(255, 255, 255, 0.72), transparent 32%), linear-gradient(145deg, rgba(244, 248, 250, 0.98), rgba(226, 233, 238, 0.97))",
      "--theme-task-border": "rgba(98, 117, 130, 0.14)",
      "--theme-task-text": "#23303a",
      "--theme-task-muted": "#657684",
      "--theme-task-shadow":
        "inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 18px 36px rgba(56, 72, 84, 0.12)",
      "--theme-task-pattern": "rgba(102, 122, 136, 0.03)",
      "--theme-list-bg":
        "radial-gradient(circle at top right, rgba(249, 248, 233, 0.68), transparent 34%), linear-gradient(145deg, rgba(236, 230, 198, 0.98), rgba(221, 214, 173, 0.97))",
      "--theme-list-text": "#4b4334",
      "--theme-list-muted": "rgba(75, 67, 52, 0.72)",
      "--theme-list-border": "rgba(100, 92, 73, 0.18)",
      "--theme-list-shadow": "inset 0 1px 0 rgba(255, 250, 234, 0.62)",
      "--card-surface": "linear-gradient(180deg, #6d8391 0%, #526774 100%)",
      "--card-border": "rgba(228, 236, 241, 0.24)",
      "--card-shadow": "0 10px 28px rgba(35, 49, 58, 0.22)",
      "--card-text": "rgba(244, 248, 250, 0.92)",
      "--card-muted": "rgba(220, 229, 234, 0.76)",
      "--helper-card-surface": "linear-gradient(180deg, #d0bfd0 0%, #b49cb6 100%)",
      "--helper-card-border": "rgba(91, 73, 96, 0.18)",
      "--helper-card-shadow": "0 10px 28px rgba(71, 55, 76, 0.16)",
      "--helper-card-text": "rgba(43, 35, 47, 0.94)",
      "--helper-card-muted": "rgba(77, 63, 83, 0.72)",
    },
  },
];

export function getTheme(themeName: string | null | undefined): ThemeOption {
  return THEME_OPTIONS.find((theme) => theme.name === themeName) || THEME_OPTIONS[0];
}

export function getStoredThemeName(): ThemeName {
  if (typeof window === "undefined") return DEFAULT_THEME;
  const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
  const theme = getTheme(stored);
  return theme.name;
}

export function applyThemeToDocument(themeName: ThemeName): ThemeOption {
  const theme = getTheme(themeName);
  if (typeof document === "undefined") return theme;
  const root = document.documentElement;
  root.dataset.theme = theme.name;
  for (const [key, value] of Object.entries(theme.tokens)) {
    root.style.setProperty(key, value);
  }
  return theme;
}
