import { useState, useEffect } from "react"; import { Button } from "@/components/ui/button"; import { InputWithContext } from "@/components/ui/input-with-context"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { FolderOpen, Save, RotateCcw, Info } from "lucide-react"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { Switch } from "@/components/ui/switch"; import { getSettings, getSettingsWithDefaults, saveSettings, resetToDefaultSettings, applyThemeMode, applyFont, FONT_OPTIONS, FOLDER_PRESETS, FILENAME_PRESETS, TEMPLATE_VARIABLES, type Settings as SettingsType, type FontFamily, type FolderPreset, type FilenamePreset } from "@/lib/settings"; import { themes, applyTheme } from "@/lib/themes"; import { SelectFolder } from "../../wailsjs/go/main/App"; import { toastWithSound as toast } from "@/lib/toast-with-sound"; // Service Icons const TidalIcon = () => ( ); const QobuzIcon = () => ( ); const AmazonIcon = () => ( ); export function SettingsPage() { const [savedSettings, setSavedSettings] = useState(getSettings()); const [tempSettings, setTempSettings] = useState(savedSettings); const [isDark, setIsDark] = useState(document.documentElement.classList.contains('dark')); const [showResetConfirm, setShowResetConfirm] = useState(false); useEffect(() => { applyThemeMode(savedSettings.themeMode); applyTheme(savedSettings.theme); const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); const handleChange = () => { if (savedSettings.themeMode === "auto") { applyThemeMode("auto"); applyTheme(savedSettings.theme); } }; mediaQuery.addEventListener("change", handleChange); return () => mediaQuery.removeEventListener("change", handleChange); }, [savedSettings.themeMode, savedSettings.theme]); useEffect(() => { applyThemeMode(tempSettings.themeMode); applyTheme(tempSettings.theme); applyFont(tempSettings.fontFamily); setTimeout(() => { setIsDark(document.documentElement.classList.contains('dark')); }, 0); }, [tempSettings.themeMode, tempSettings.theme, tempSettings.fontFamily]); useEffect(() => { const loadDefaults = async () => { if (!savedSettings.downloadPath) { const settingsWithDefaults = await getSettingsWithDefaults(); setSavedSettings(settingsWithDefaults); setTempSettings(settingsWithDefaults); } }; loadDefaults(); }, []); const handleSave = () => { saveSettings(tempSettings); setSavedSettings(tempSettings); toast.success("Settings saved"); }; const handleReset = async () => { const defaultSettings = await resetToDefaultSettings(); setTempSettings(defaultSettings); setSavedSettings(defaultSettings); applyThemeMode(defaultSettings.themeMode); applyTheme(defaultSettings.theme); applyFont(defaultSettings.fontFamily); setShowResetConfirm(false); toast.success("Settings reset to default"); }; const handleBrowseFolder = async () => { try { const selectedPath = await SelectFolder(tempSettings.downloadPath || ""); if (selectedPath && selectedPath.trim() !== "") { setTempSettings((prev) => ({ ...prev, downloadPath: selectedPath })); } } catch (error) { console.error("Error selecting folder:", error); toast.error(`Error selecting folder: ${error}`); } }; return (

Settings

{/* Left Column */}
{/* Download Path */}
setTempSettings((prev) => ({ ...prev, downloadPath: e.target.value }))} placeholder="C:\Users\YourUsername\Music" />
{/* Theme Mode */}
{/* Accent */}
{/* Font */}
{/* Sound Effects */}
setTempSettings(prev => ({ ...prev, sfxEnabled: checked }))} />
{/* Right Column */}
{/* Source Selection */}
{/* Quality dropdown for Tidal */} {tempSettings.downloader === "tidal" && ( )} {/* Quality dropdown for Qobuz */} {tempSettings.downloader === "qobuz" && ( )}
{/* Embed Lyrics & Embed Max Quality Cover */}
setTempSettings(prev => ({ ...prev, embedLyrics: checked }))} />
setTempSettings(prev => ({ ...prev, embedMaxQualityCover: checked }))} />
{/* Folder Structure */}

Variables: {TEMPLATE_VARIABLES.map(v => v.key).join(", ")}
{tempSettings.folderPreset === "custom" && ( setTempSettings(prev => ({ ...prev, folderTemplate: e.target.value }))} placeholder="{artist}/{album}" className="h-9 text-sm flex-1" /> )}
{tempSettings.folderTemplate && (

Preview: {tempSettings.folderTemplate.replace(/\{artist\}/g, "Kendrick Lamar, SZA").replace(/\{album\}/g, "Black Panther").replace(/\{album_artist\}/g, "Kendrick Lamar").replace(/\{year\}/g, "2018")}/

)}
{/* Filename Format */}

Variables: {TEMPLATE_VARIABLES.map(v => v.key).join(", ")}
{tempSettings.filenamePreset === "custom" && ( setTempSettings(prev => ({ ...prev, filenameTemplate: e.target.value }))} placeholder="{track}. {title}" className="h-9 text-sm flex-1" /> )}
{tempSettings.filenameTemplate && (

Preview: {tempSettings.filenameTemplate.replace(/\{artist\}/g, "Kendrick Lamar, SZA").replace(/\{album_artist\}/g, "Kendrick Lamar").replace(/\{title\}/g, "All The Stars").replace(/\{track\}/g, "01").replace(/\{disc\}/g, "1").replace(/\{year\}/g, "2018")}.flac

)}
{/* Actions */}
{/* Reset Confirmation Dialog */} Reset to Default? This will reset all settings to their default values. Your custom configurations will be lost.
); }