// ResumeForge — main app shell

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "carbon",
  "template": "modern"
}/*EDITMODE-END*/;

const PALETTES = {
  carbon: {
    name: "Carbon",
    paper: "#111210",
    paper2: "#0B0C0A",
    paper3: "#181915",
    ink: "#F2EFE3",
    muted: "rgba(242,239,227,0.58)",
    border: "rgba(242,239,227,0.10)",
    accent: "#CDEC4F",
  },
  ochre: {
    name: "Ochre",
    paper: "#F4EEE3",
    paper2: "#EDE5D5",
    paper3: "#E6DCC6",
    ink: "#1B1814",
    muted: "#6B5E48",
    border: "#E2D7C2",
    accent: "#B07C2C",
  },
  forest: {
    name: "Forest",
    paper: "#F2EFE7",
    paper2: "#E9E5D8",
    paper3: "#DFDAC7",
    ink: "#15201A",
    muted: "#586155",
    border: "#D8D3C0",
    accent: "#3F6B4A",
  },
  ink: {
    name: "Ink",
    paper: "#F5F2EC",
    paper2: "#EBE7DE",
    paper3: "#E0DBCF",
    ink: "#15110D",
    muted: "#605849",
    border: "#DDD6C5",
    accent: "#15110D",
  },
  brick: {
    name: "Brick",
    paper: "#F5EEE6",
    paper2: "#ECE3D7",
    paper3: "#E1D5C5",
    ink: "#1F1612",
    muted: "#695648",
    border: "#E0D2BF",
    accent: "#B04A2C",
  },
};

function applyPalette(key) {
  const p = PALETTES[key] || PALETTES.ochre;
  const root = document.documentElement;
  root.style.setProperty("--paper", p.paper);
  root.style.setProperty("--paper-2", p.paper2);
  root.style.setProperty("--paper-3", p.paper3);
  root.style.setProperty("--ink", p.ink);
  root.style.setProperty("--muted", p.muted);
  root.style.setProperty("--border", p.border);
  root.style.setProperty("--accent", p.accent);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useStateApp("library"); // library | resume | tailor | review | export
  const [settingsOpen, setSettingsOpen] = useStateApp(false);
  const [openedResumeId, setOpenedResumeId] = useStateApp(null);
  const [context, setContext] = useStateApp({ decisions: {}, template: TWEAK_DEFAULTS.template });

  useEffectApp(() => {
    applyPalette(t.palette);
  }, [t.palette]);

  useEffectApp(() => {
    setContext((c) => ({ ...c, template: t.template }));
  }, [t.template]);

  const nav = (v) => {
    if (v === "tailor" && view !== "tailor") {
      setContext({ decisions: {}, template: t.template });
    }
    setView(v);
  };

  const openResume = (id) => {
    setOpenedResumeId(id);
    setView("resume");
  };

  const startTailorFrom = (resumeId, fromVersion) => {
    setContext({ decisions: {}, template: t.template, baseResumeId: resumeId, fromVersion });
    setView("tailor");
  };

  return (
    <div style={{ background: "var(--paper-2)", minHeight: "100vh" }}>
      <TopBar view={view} onNav={nav} onSettings={() => setSettingsOpen(true)} />

      <div data-screen-label={
        view === "library" ? "01 Library"
        : view === "resume" ? "02 Resume Detail"
        : view === "tailor" ? "03 New Tailoring"
        : view === "review" ? "04 Review Suggestions"
        : "05 Export"
      }>
        {view === "library" && (
          <LibraryScreen
            onStartTailor={(resumeId) => startTailorFrom(resumeId)}
            onOpenResume={openResume}
            onOpenVersion={(row) => {
              // Restore a saved tailoring straight into the Review screen
              // without re-calling the LLM.
              window.SUGGESTIONS = row.suggestions || [];
              setContext({
                versionId: row.id,
                resumeId: row.master_id,
                jd: row.job_description || "",
                targetCompany: row.target_company || null,
                targetRole: row.target_role || null,
                label: row.label || null,
                decisions: row.decisions || {},
              });
              nav("review");
            }}
            template={t.template}
          />
        )}
        {view === "resume" && (
          <ResumeDetailScreen
            resumeId={openedResumeId}
            onBack={() => nav("library")}
            onStartTailor={startTailorFrom}
            template={t.template}
          />
        )}
        {view === "tailor" && (
          <TailorScreen
            initialResumeId={context && context.baseResumeId}
            onBack={() => nav("library")}
            onAnalyze={(payload) => {
              setContext((c) => ({ ...c, ...payload, decisions: {} }));
              nav("review");
            }}
          />
        )}
        {view === "review" && (
          <ReviewScreen
            context={context}
            onBack={() => nav(context.versionId ? "library" : "tailor")}
            onContinue={(payload) => {
              setContext((c) => ({ ...c, ...payload }));
              if (window.ForgeDB && window.ForgeDB.isEnabled() && window.ForgeAuth.getUser()) {
                const decisions = payload.decisions || {};
                const total = Object.keys(decisions).length;
                const accepted = Object.values(decisions).filter((d) => d === "accepted").length;
                if (context.versionId) {
                  // Re-opened a saved version → update in place.
                  window.ForgeDB.updateVersion(context.versionId, {
                    decisions,
                    accepted_count: accepted,
                    total_count: total,
                  }).catch((e) => console.error("[forge] updateVersion failed:", e));
                } else {
                  window.ForgeDB.saveVersion({
                    master_id: context.resumeId || "pm",
                    label: context.label || null,
                    target_company: context.targetCompany || null,
                    target_role: context.targetRole || null,
                    job_description: context.jd || "",
                    suggestions: window.SUGGESTIONS || [],
                    decisions,
                    accepted_count: accepted,
                    total_count: total,
                  }).catch((e) => console.error("[forge] saveVersion failed:", e));
                }
              }
              nav("export");
            }}
          />
        )}
        {view === "export" && (
          <ExportScreen
            context={context}
            onBack={() => nav("review")}
            onDone={() => nav("library")}
          />
        )}
      </div>

      <SettingsDrawer open={settingsOpen} onClose={() => setSettingsOpen(false)} />

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <div style={{ padding: "0 0 2px", display: "flex", flexDirection: "column", gap: 6 }}>
            <div
              style={{
                fontFamily: "Inter, sans-serif",
                fontSize: 11,
                color: "rgba(41,38,27,0.72)",
                fontWeight: 500,
              }}
            >
              Palette
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
              {Object.entries(PALETTES).map(([key, p]) => {
                const active = t.palette === key;
                return (
                  <button
                    key={key}
                    onClick={() => setTweak("palette", key)}
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 8,
                      padding: "7px 9px",
                      background: active ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.5)",
                      border: `0.5px solid ${active ? "rgba(0,0,0,0.35)" : "rgba(0,0,0,0.1)"}`,
                      borderRadius: 7,
                      cursor: "pointer",
                      fontFamily: "Inter, sans-serif",
                      fontSize: 12,
                      fontWeight: 500,
                      color: "#29261b",
                      textAlign: "left",
                      boxShadow: active ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
                    }}
                  >
                    <span
                      style={{
                        width: 14,
                        height: 14,
                        borderRadius: 4,
                        background: p.accent,
                        border: `2px solid ${p.paper}`,
                        boxShadow: "0 0 0 0.5px rgba(0,0,0,0.15)",
                        flexShrink: 0,
                      }}
                    />
                    {p.name}
                  </button>
                );
              })}
            </div>
          </div>
        </TweakSection>
        <TweakSection label="Resume template">
          <TweakRadio
            label="Style"
            value={t.template}
            onChange={(v) => setTweak("template", v)}
            options={[
              { label: "Modern", value: "modern" },
              { label: "Classic", value: "classic" },
              { label: "Minimal", value: "minimal" },
            ]}
          />
          <div
            style={{
              padding: "6px 2px 0",
              fontFamily: "Inter, sans-serif",
              fontSize: 11,
              color: "rgba(41,38,27,0.55)",
              lineHeight: 1.5,
            }}
          >
            Visible on the export step.
          </div>
        </TweakSection>
        <TweakSection label="Jump to step">
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {[
              { v: "library", l: "Library" },
              { v: "resume", l: "Resume detail · versions" },
              { v: "tailor", l: "New tailoring" },
              { v: "review", l: "Review suggestions" },
              { v: "export", l: "Export" },
            ].map((s) => (
              <button
                key={s.v}
                onClick={() => {
                  if (s.v === "resume" && !openedResumeId) setOpenedResumeId("pm");
                  setView(s.v);
                }}
                style={{
                  textAlign: "left",
                  padding: "6px 10px",
                  background: view === s.v ? "var(--ink)" : "transparent",
                  color: view === s.v ? "var(--paper)" : "var(--ink)",
                  border: `1px solid ${view === s.v ? "var(--ink)" : "var(--border)"}`,
                  borderRadius: 4,
                  fontFamily: "Inter, sans-serif",
                  fontSize: 12,
                  cursor: "pointer",
                }}
              >
                {s.l}
              </button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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