import type { CSSProperties } from "react";
import type { PCOStyle } from "./types";

/** Default palette — used when no override is set in content JSON. */
export const PCO_THEME_DEFAULTS = {
  navy: "#12395b",
  teal: "#0d7c86",
  sky: "#e9f6f8",
  gold: "#d9872b",
  ink: "#1f2933",
  muted: "#64748b",
  line: "#d8e3ea",
  paper: "#ffffff",
  bg: "#f4f7fb",
  soft: "#f8fbfd",
  heroGradStart: "#12395b",
  heroGradMid: "#1d5d78",
  heroGradEnd: "#0d7c86",
  heroText: "#ffffff",
  tableHeaderBg: "#12395b",
  tableHeaderText: "#ffffff",
  tableRowAlt: "#fbfdff",
  footerBg: "#f0f6f8",
} as const;

function pick(...values: (string | undefined)[]): string | undefined {
  for (const v of values) {
    const t = (v ?? "").trim();
    if (t) return t;
  }
  return undefined;
}

function setVar(vars: Record<string, string>, key: string, value: string | undefined) {
  if (value) vars[key] = value;
}

/** Map a style object to CSS custom properties (partial theme). */
export function pcoStyleToCssVars(s?: PCOStyle): Record<string, string> {
  if (!s) return {};
  const vars: Record<string, string> = {};
  const d = PCO_THEME_DEFAULTS;

  setVar(vars, "--pco-navy", pick(s.themeNavy));
  setVar(vars, "--pco-teal", pick(s.themeTeal));
  setVar(vars, "--pco-sky", pick(s.themeSky));
  setVar(vars, "--pco-gold", pick(s.themeGold));
  setVar(vars, "--pco-ink", pick(s.themeInk, s.textColor));
  setVar(vars, "--pco-muted", pick(s.mutedTextColor, s.themeMuted));
  setVar(vars, "--pco-line", pick(s.themeLine, s.borderColor, s.tableBorderColor));
  setVar(vars, "--pco-paper", pick(s.docBackgroundColor, s.themePaper));
  setVar(vars, "--pco-bg", pick(s.themeBg));
  setVar(vars, "--pco-soft", pick(s.cardBackgroundColor, s.themeSoft));

  setVar(vars, "--pco-card-bg", pick(s.cardBackgroundColor));
  setVar(vars, "--pco-card-border", pick(s.cardBorderColor));
  setVar(vars, "--pco-card-text", pick(s.cardTextColor));

  setVar(vars, "--pco-section-title", pick(s.titleColor, s.themeNavy));
  setVar(vars, "--pco-section-num", pick(s.sectionNumberColor, s.themeGold));
  setVar(vars, "--pco-section-title-border", pick(s.sectionTitleBorderColor, s.themeSky));
  setVar(vars, "--pco-body-text", pick(s.textColor, s.subtitleColor));
  setVar(vars, "--pco-subtitle", pick(s.subtitleColor, s.textColor));

  setVar(vars, "--pco-table-header-bg", pick(s.tableHeaderBackgroundColor, s.themeNavy));
  setVar(vars, "--pco-table-header-text", pick(s.tableHeaderTextColor));
  setVar(vars, "--pco-table-row-alt", pick(s.tableRowAltBackgroundColor));
  setVar(vars, "--pco-table-cell-text", pick(s.tableCellTextColor, s.textColor));
  setVar(vars, "--pco-table-border", pick(s.tableBorderColor, s.borderColor, s.themeLine));

  setVar(vars, "--pco-pill-bg", pick(s.pillBackgroundColor, s.themeSky));
  setVar(vars, "--pco-pill-text", pick(s.pillTextColor, s.themeNavy));

  setVar(vars, "--pco-learner-bg", pick(s.learnerItemBackgroundColor));
  setVar(vars, "--pco-learner-text", pick(s.learnerItemTextColor));
  setVar(vars, "--pco-learner-detail", pick(s.learnerItemDetailColor, s.mutedTextColor));
  setVar(vars, "--pco-learner-accent", pick(s.learnerItemAccentColor, s.themeTeal));
  setVar(vars, "--pco-learner-border", pick(s.learnerItemBorderColor, s.themeLine));

  setVar(vars, "--pco-chart-grid", pick(s.chartGridColor, s.themeLine));
  setVar(vars, "--pco-chart-axis", pick(s.chartAxisColor, s.themeLine));
  setVar(vars, "--pco-chart-fill", pick(s.chartFillColor));
  setVar(vars, "--pco-chart-stroke", pick(s.chartStrokeColor, s.themeTeal));
  setVar(vars, "--pco-chart-label", pick(s.chartLabelColor, s.themeNavy));
  setVar(vars, "--pco-chart-point", pick(s.chartPointColor, s.themeGold));

  setVar(vars, "--pco-footer-bg", pick(s.backgroundColor));
  setVar(vars, "--pco-footer-text", pick(s.textColor, s.mutedTextColor));

  setVar(vars, "--pco-doc-border", pick(s.docBorderColor, s.borderColor, s.themeLine));

  return vars;
}

/** Hero banner: solid background overrides gradient when backgroundColor is set. */
export function pcoHeroToCssVars(s?: PCOStyle): CSSProperties {
  const vars: Record<string, string> = { ...pcoStyleToCssVars(s) };
  const d = PCO_THEME_DEFAULTS;

  const gradStart = pick(s?.heroGradientStart, s?.themeNavy) ?? d.heroGradStart;
  const gradMid = pick(s?.heroGradientMid) ?? d.heroGradMid;
  const gradEnd = pick(s?.heroGradientEnd, s?.themeTeal) ?? d.heroGradEnd;

  vars["--pco-hero-grad-start"] = gradStart;
  vars["--pco-hero-grad-mid"] = gradMid;
  vars["--pco-hero-grad-end"] = gradEnd;

  if (pick(s?.backgroundColor)) {
    vars["--pco-hero-bg-solid"] = s!.backgroundColor!.trim();
    vars["--pco-hero-bg-image"] = "none";
  } else {
    vars["--pco-hero-bg-solid"] = "transparent";
    vars["--pco-hero-bg-image"] = `linear-gradient(135deg, ${gradStart}, ${gradMid} 55%, ${gradEnd})`;
  }

  setVar(vars, "--pco-hero-text", pick(s?.textColor) ?? d.heroText);
  setVar(vars, "--pco-hero-title", pick(s?.titleColor));
  setVar(vars, "--pco-hero-eyebrow", pick(s?.eyebrowColor, s?.textColor));
  setVar(vars, "--pco-hero-subtitle", pick(s?.subtitleColor, s?.textColor));

  return vars as CSSProperties;
}

export function pcoSectionToCssVars(s?: PCOStyle): CSSProperties {
  const vars = pcoStyleToCssVars(s);
  if (s?.backgroundColor) vars["--pco-section-bg"] = s.backgroundColor;
  if (s?.textColor) vars["--pco-section-text"] = s.textColor;
  return vars as CSSProperties;
}

export function pcoTableToCssVars(s?: PCOStyle, inherit?: PCOStyle): CSSProperties {
  const merged: PCOStyle = { ...inherit, ...s };
  return pcoStyleToCssVars(merged) as CSSProperties;
}

export function pcoRootToCssVars(opts: {
  cardColor?: string;
  cardBorderColor?: string;
  globalStyle?: PCOStyle;
}): CSSProperties {
  const vars: Record<string, string> = {
    "--pco-navy": PCO_THEME_DEFAULTS.navy,
    "--pco-teal": PCO_THEME_DEFAULTS.teal,
    "--pco-sky": PCO_THEME_DEFAULTS.sky,
    "--pco-gold": PCO_THEME_DEFAULTS.gold,
    "--pco-ink": PCO_THEME_DEFAULTS.ink,
    "--pco-muted": PCO_THEME_DEFAULTS.muted,
    "--pco-line": PCO_THEME_DEFAULTS.line,
    "--pco-paper": PCO_THEME_DEFAULTS.paper,
    "--pco-bg": PCO_THEME_DEFAULTS.bg,
    "--pco-soft": PCO_THEME_DEFAULTS.soft,
    "--pco-card-bg": opts.cardColor ?? PCO_THEME_DEFAULTS.soft,
    "--pco-card-border": opts.cardBorderColor ?? PCO_THEME_DEFAULTS.line,
    ...pcoStyleToCssVars(opts.globalStyle),
  };
  if (opts.cardColor) vars["--pco-card-bg"] = opts.cardColor;
  if (opts.cardBorderColor) vars["--pco-card-border"] = opts.cardBorderColor;
  return vars as CSSProperties;
}

const PCO_STYLE_KEYS: (keyof PCOStyle)[] = [
  "backgroundColor", "textColor", "borderColor", "titleColor", "subtitleColor", "mutedTextColor",
  "cardBackgroundColor", "cardBorderColor", "cardTextColor", "padding", "icon", "imageUrl",
  "heroGradientStart", "heroGradientMid", "heroGradientEnd", "eyebrowColor",
  "tableHeaderBackgroundColor", "tableHeaderTextColor", "tableRowAltBackgroundColor",
  "tableCellTextColor", "tableBorderColor",
  "sectionNumberColor", "sectionTitleBorderColor",
  "pillBackgroundColor", "pillTextColor",
  "learnerItemBackgroundColor", "learnerItemTextColor", "learnerItemDetailColor",
  "learnerItemAccentColor", "learnerItemBorderColor",
  "docBackgroundColor", "docBorderColor",
  "themeNavy", "themeTeal", "themeSky", "themeGold", "themeInk", "themeMuted", "themeLine", "themePaper", "themeBg", "themeSoft",
  "chartGridColor", "chartAxisColor", "chartFillColor", "chartStrokeColor", "chartLabelColor", "chartPointColor",
];

export function parsePcoStyle(raw: unknown): PCOStyle {
  if (!raw || typeof raw !== "object") return {};
  const o = raw as Record<string, unknown>;
  const out: PCOStyle = {};
  PCO_STYLE_KEYS.forEach((k) => {
    const v = o[k];
    if (typeof v === "string" && v.trim()) out[k] = v.trim();
  });
  return out;
}