// 메인 앱 + Tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "cream",
  "accent": "amber",
  "density": "comfortable",
  "fontPair": "manrope",
  "showStats": true
}/*EDITMODE-END*/;

// v1 (editorial) tokens
const THEMES = {
  cream:   { bg: "#F4EFE6", surface: "#EBE5D8", ink: "#1A1A18", inkSoft: "#5B574D", line: "#C9C1B0", muted: "#8F887A" },
  paper:   { bg: "#FAFAF7", surface: "#F1EFE9", ink: "#141414", inkSoft: "#52524C", line: "#D6D3CA", muted: "#888578" },
  graphite:{ bg: "#16171A", surface: "#1F2126", ink: "#F2EFE8", inkSoft: "#B5B0A5", line: "#33363D", muted: "#8A8678" },
  ink:     { bg: "#0E0E10", surface: "#191A1D", ink: "#EDE7DA", inkSoft: "#A5A095", line: "#2A2B2F", muted: "#6F6B62" }
};

// Accent palette — applied to both --accent (v1) and --primary (v2)
const ACCENTS = {
  amber:   { primary: "#F17E22", deep: "#C45D10", bright: "#F89E55" },
  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: '"Manrope", "Pretendard", system-ui', body: '"Pretendard", "Manrope", system-ui', mono: '"JetBrains Mono", monospace' },
  pretendard: { display: '"Pretendard Variable", "Pretendard", system-ui', body: '"Pretendard", system-ui', mono: '"JetBrains Mono", monospace' },
  serif:      { display: '"Noto Serif KR", serif', body: '"Pretendard", system-ui', mono: '"JetBrains Mono", monospace' }
};

function applyTheme(tweaks) {
  const t = THEMES[tweaks.theme] || THEMES.cream;
  const a = ACCENTS[tweaks.accent] || ACCENTS.amber;
  const f = FONT_PAIRS[tweaks.fontPair] || FONT_PAIRS.manrope;
  const root = document.documentElement;
  // v1 vars (editorial)
  root.style.setProperty("--bg", t.bg);
  root.style.setProperty("--surface", t.surface);
  root.style.setProperty("--ink-soft", t.inkSoft);
  root.style.setProperty("--line", t.line);
  root.style.setProperty("--muted", t.muted);
  root.style.setProperty("--accent", a.primary);
  // v2 vars (commercial)
  root.style.setProperty("--primary", a.primary);
  root.style.setProperty("--primary-deep", a.deep);
  root.style.setProperty("--primary-bright", a.bright);
  // Fonts (both)
  root.style.setProperty("--font-display", f.display);
  root.style.setProperty("--font-body", f.body);
  root.style.setProperty("--font-mono", f.mono);
  document.body.dataset.theme = tweaks.theme;
  document.body.dataset.density = tweaks.density;
}

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

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

  // detect version (v2 = index.html with styles.css ; v1 = Portfolio - Editorial v1.html)
  const isV2 = !document.querySelector('link[href="styles-v1.css"]');

  return (
    <React.Fragment>
      <Hero />
      <main>
        <About />
        <Skills />
        <Projects density={tweaks.density} />
        <Career />
        <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: "Manrope" },
              { value: "pretendard", label: "Sans" },
              { value: "serif", label: "Serif" }
            ]}
            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>

        {!isV2 && (
          <window.TweakSection label="v1 Theme">
            <window.TweakSelect
              label="Mode"
              value={tweaks.theme}
              options={[
                { value: "cream", label: "Cream" },
                { value: "paper", label: "Paper" },
                { value: "graphite", label: "Graphite" },
                { value: "ink", label: "Ink" }
              ]}
              onChange={(v) => setTweak("theme", v)}
            />
          </window.TweakSection>
        )}
      </window.TweaksPanel>
    </React.Fragment>
  );
}

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