// 메인 앱 + Tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "amber",
  "density": "comfortable",
  "fontPair": "pretendard"
}/*EDITMODE-END*/;

// Accent palette.
const ACCENTS = {
  amber:   { primary: "#0D6EB4", start: "#0D6EB4", end: "#119144", deep: "#0A568D", bright: "#119144", accent: "#0D6EB4" },
  forest:  { primary: "#147257", deep: "#0B4E3B", bright: "#1F9774" },
  rust:    { primary: "#B5482A", deep: "#7A2E18", bright: "#D26345" },
  cobalt:  { primary: "#23478C", deep: "#15305F", bright: "#3866B5" },
  ochre:   { primary: "#B98927", deep: "#825E16", bright: "#D8A547" },
  plum:    { primary: "#603860", deep: "#3E223E", bright: "#7E527E" }
};

const FONT_PAIRS = {
  manrope:    { display: '"Pretendard", "맑은고딕", sans-serif', body: '"Pretendard", "맑은고딕", sans-serif', mono: '"JetBrains Mono", monospace' },
  pretendard: { display: '"Pretendard", "맑은고딕", sans-serif', body: '"Pretendard", "맑은고딕", sans-serif', mono: '"JetBrains Mono", monospace' },
  serif:      { display: '"Pretendard", "맑은고딕", sans-serif', body: '"Pretendard", "맑은고딕", sans-serif', mono: '"JetBrains Mono", monospace' }
};

function applyTheme(tweaks) {
  const a = ACCENTS[tweaks.accent] || ACCENTS.amber;
  const f = FONT_PAIRS[tweaks.fontPair] || FONT_PAIRS.manrope;
  const root = document.documentElement;
  root.style.setProperty("--accent", a.accent || a.primary);
  root.style.setProperty("--primary", a.primary);
  root.style.setProperty("--primary-start", a.start || a.primary);
  root.style.setProperty("--primary-deep", a.deep);
  root.style.setProperty("--primary-bright", a.bright);
  root.style.setProperty("--primary-gradient", `linear-gradient(135deg, ${a.start || a.primary} 0%, ${a.end || a.primary} 100%)`);
  root.style.setProperty("--font-display", f.display);
  root.style.setProperty("--font-body", f.body);
  root.style.setProperty("--font-mono", f.mono);
  document.body.dataset.density = tweaks.density;
}

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [printMode, setPrintMode] = React.useState(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get("print") !== "1") return null;
    return params.get("projects") === "closed" ? "collapsed" : "expanded";
  });
  const isPrintExport = printMode !== null;

  React.useEffect(() => {
    applyTheme(tweaks);
  }, [tweaks]);

  const printAfterLayout = React.useCallback(() => {
    const runPrint = () => {
      window.requestAnimationFrame(() => {
        window.requestAnimationFrame(() => {
          window.setTimeout(() => window.print(), 900);
        });
      });
    };

    if (document.fonts?.ready) {
      document.fonts.ready.then(runPrint);
    } else {
      runPrint();
    }
  }, []);

  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get("print") !== "1") return undefined;

    printAfterLayout();
    return undefined;
  }, [printAfterLayout]);

  React.useEffect(() => {
    document.body.classList.toggle("is-print-export", isPrintExport);
    document.body.dataset.printMode = printMode || "";

    const resetPrintMode = () => {
      if (new URLSearchParams(window.location.search).get("print") !== "1") {
        setPrintMode(null);
      }
    };

    window.addEventListener("afterprint", resetPrintMode);
    return () => {
      window.removeEventListener("afterprint", resetPrintMode);
      document.body.classList.remove("is-print-export");
      delete document.body.dataset.printMode;
    };
  }, [isPrintExport, printMode]);

  return (
    <React.Fragment>
      <Hero />
      <main>
        <About />
        <Skills />
        <Projects density={tweaks.density} printMode={printMode} />
        <Career />
        <Credentials />
        <Contact />
      </main>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Accent">
          <window.TweakColor
            label="Color"
            value={ACCENTS[tweaks.accent].primary}
            options={["amber", "forest", "rust", "cobalt", "ochre", "plum"].map(k => ACCENTS[k].primary)}
            onChange={(v) => {
              const key = Object.entries(ACCENTS).find(([,col]) => col.primary === v)?.[0] || "amber";
              setTweak("accent", key);
            }}
          />
        </window.TweakSection>

        <window.TweakSection label="Typography">
          <window.TweakRadio
            label="Family"
            value={tweaks.fontPair}
            options={[
              { value: "manrope", label: "Pretendard" },
              { value: "pretendard", label: "Pretendard" },
              { value: "serif", label: "Pretendard" }
            ]}
            onChange={(v) => setTweak("fontPair", v)}
          />
        </window.TweakSection>

        <window.TweakSection label="Layout">
          <window.TweakRadio
            label="Density"
            value={tweaks.density}
            options={[
              { value: "comfortable", label: "Comfort" },
              { value: "compact", label: "Compact" }
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);