// tweaks-app.jsx — 报告主题预览面板(仅设计/演示用,默认隐藏)
// 演示「通用模板一键换客户主题」能力。

const REPORT_THEMES = {
  "昆山农商银行": { brand: "#36508a", clientEn: "KUNSHAN RURAL COMMERCIAL BANK", char: "昆", watermark: "练" },
  "启明科技集团": { brand: "#1f6b5b", clientEn: "QIMING TECHNOLOGY GROUP",       char: "启", watermark: "练" },
  "华盛零售集团": { brand: "#8a3a48", clientEn: "HUASHENG RETAIL GROUP",          char: "华", watermark: "练" },
  "恒邦律师事务所": { brand: "#3c4250", clientEn: "HENGBANG LAW FIRM",            char: "恒", watermark: "练" },
};
const THEME_LABELS = Object.keys(REPORT_THEMES);
const BRAND_SWATCHES = THEME_LABELS.map(k => REPORT_THEMES[k].brand);

const TWEAK_DEFAULTS = {
  client: "昆山农商银行",
  brand: "#36508a",
  studentName: "李翔",
};

function ReportTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const preset = REPORT_THEMES[t.client] || REPORT_THEMES["昆山农商银行"];
    if (window.applyReportTheme) {
      window.applyReportTheme({
        brand: t.brand,
        client: t.client,
        clientEn: preset.clientEn,
        clientChar: preset.char,
        watermark: preset.watermark,
        name: t.studentName,
      });
    }
  }, [t.client, t.brand, t.studentName]);

  return (
    <TweaksPanel>
      <TweakSection label="客户主题" />
      <TweakSelect
        label="预设客户"
        value={t.client}
        options={THEME_LABELS}
        onChange={(v) => setTweak({ client: v, brand: REPORT_THEMES[v].brand })}
      />
      <TweakColor
        label="品牌主色"
        value={t.brand}
        options={BRAND_SWATCHES}
        onChange={(v) => setTweak("brand", v)}
      />
      <TweakSection label="学员" />
      <TweakText
        label="学员姓名"
        value={t.studentName}
        onChange={(v) => setTweak("studentName", v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<ReportTweaks />);