import fs from 'fs';

let css = fs.readFileSync('src/index.css', 'utf-8');

const darkThemeBlock = `
[data-theme="dark"] {
  --bp-paper: #0c1322;
  --bp-paper-2: #1a2740;
  --bp-paper-3: #243453;
  --bp-navy: #e6edf7;
  --bp-navy-2: #d5dde9;
  --bp-muted: #7a8aa8;
  --bp-muted-2: #4a5b80;
}
`;

css = css.replace(':root {', darkThemeBlock + '\n:root {');
fs.writeFileSync('src/index.css', css);

let app = fs.readFileSync('src/App.tsx', 'utf-8');
// Check if Sun/Moon imports exist
app = app.replace(
  'import { Cmd, Home, Layers, History as HistoryIcon, Pulse, Refresh, Branch, Cog, User } from "./components/icons";',
  'import { Cmd, Home, Layers, History as HistoryIcon, Pulse, Refresh, Branch, Cog, User, Sun, Moon } from "./components/icons";'
);

const themeToggle = `
            <button
              className="link-btn"
              onClick={() => useApp.getState().setTheme(useApp.getState().theme === "dark" ? "light" : "dark")}
              title="Toggle theme"
            >
              {useApp.getState().theme === "dark" ? <Sun size={13} /> : <Moon size={13} />}
            </button>
`;

app = app.replace(
  '{apiLogCount > 0 && <span className="badge mono">{apiLogCount}</span>}\n            </button>',
  '{apiLogCount > 0 && <span className="badge mono">{apiLogCount}</span>}\n            </button>\n            <button className="link-btn" onClick={() => useApp.getState().setTheme(useApp.getState().theme === "dark" ? "light" : "dark")} title="Toggle theme">\n              {useApp.getState().theme === "dark" ? <Sun size={13} /> : <Moon size={13} />}\n            </button>'
);

fs.writeFileSync('src/App.tsx', app);