// ─────────────────────────────────────────────────────────
// ChefVerse · Settings page (chef-facing)
// Sections:
//  • Preferences — Language, Email notifications level
//  • App — appearance, accessibility (placeholders)
//  • About — version, support contact
// (Account-detail fields live in Profile; password change opens reset flow.)
// ─────────────────────────────────────────────────────────

const SETTINGS_I18N = {
  en: {
    title: "Settings",
    sub: "Tune ChefVerse to how you actually work.",
    prefsTitle: "Preferences",
    prefsSub: "Language and notification controls.",
    prefLanguage: "Language",
    prefLanguageSub: "Affects every label across the app.",
    prefNotifs: "Email notifications",
    prefNotifsSub: "New modules, briefs, and reward updates.",
    prefNotifsAll: "All updates",
    prefNotifsWeekly: "Weekly digest only",
    prefNotifsOff: "Off",
    appTitle: "App",
    appSub: "Small things that change the everyday feel.",
    appTheme: "Appearance",
    appThemeSystem: "System",
    appThemeLight: "Light",
    appThemeDark: "Dark (coming soon)",
    appReduceMotion: "Reduce motion",
    appReduceMotionSub: "Smaller, calmer transitions across the app.",
    aboutTitle: "About ChefVerse",
    aboutVersion: "Version",
    aboutBuild: "pilot · build 2026.05",
    aboutSupport: "Support",
    aboutSupportSub: "Talk to your UFS chef-success rep, or write to support@ufs.com.",
    saved: "Settings saved",
  },
  de: {
    title: "Einstellungen",
    sub: "Pass ChefVerse an deinen Arbeitsalltag an.",
    prefsTitle: "Einstellungen",
    prefsSub: "Sprache und Benachrichtigungen.",
    prefLanguage: "Sprache",
    prefLanguageSub: "Wirkt sich auf alle Labels in der App aus.",
    prefNotifs: "E-Mail-Benachrichtigungen",
    prefNotifsSub: "Neue Module, Briefings und Belohnungs-Updates.",
    prefNotifsAll: "Alle Updates",
    prefNotifsWeekly: "Nur wöchentliche Übersicht",
    prefNotifsOff: "Aus",
    appTitle: "App",
    appSub: "Kleine Dinge, die das Alltagsgefühl ändern.",
    appTheme: "Erscheinungsbild",
    appThemeSystem: "System",
    appThemeLight: "Hell",
    appThemeDark: "Dunkel (demnächst)",
    appReduceMotion: "Animationen reduzieren",
    appReduceMotionSub: "Kleinere, ruhigere Übergänge in der ganzen App.",
    aboutTitle: "Über ChefVerse",
    aboutVersion: "Version",
    aboutBuild: "Pilot · Build 2026.05",
    aboutSupport: "Support",
    aboutSupportSub: "Sprich mit deinem UFS-Kontakt oder schreib an support@ufs.com.",
    saved: "Einstellungen gespeichert",
  },
  id: {
    title: "Pengaturan",
    sub: "Sesuaikan ChefVerse dengan cara kerjamu.",
    prefsTitle: "Preferensi",
    prefsSub: "Bahasa dan kontrol notifikasi.",
    prefLanguage: "Bahasa",
    prefLanguageSub: "Memengaruhi semua label di seluruh aplikasi.",
    prefNotifs: "Notifikasi email",
    prefNotifsSub: "Modul baru, brief, dan update reward.",
    prefNotifsAll: "Semua update",
    prefNotifsWeekly: "Ringkasan mingguan saja",
    prefNotifsOff: "Mati",
    appTitle: "Aplikasi",
    appSub: "Hal-hal kecil yang mengubah rasa keseharian.",
    appTheme: "Tampilan",
    appThemeSystem: "Sistem",
    appThemeLight: "Terang",
    appThemeDark: "Gelap (segera)",
    appReduceMotion: "Kurangi animasi",
    appReduceMotionSub: "Transisi yang lebih kecil dan tenang di seluruh app.",
    aboutTitle: "Tentang ChefVerse",
    aboutVersion: "Versi",
    aboutBuild: "pilot · build 2026.05",
    aboutSupport: "Bantuan",
    aboutSupportSub: "Hubungi kontak UFS-mu, atau tulis ke support@ufs.com.",
    saved: "Pengaturan disimpan",
  },
};

function SettingsPage({ locale, onLocaleChange }) {
  const tl = SETTINGS_I18N[locale] || SETTINGS_I18N.en;
  const [savedToast, setSavedToast] = React.useState(false);
  const [notifLevel, setNotifLevel] = React.useState(() => {
    try { return localStorage.getItem("chefverse_notif_level") || "all"; } catch (e) { return "all"; }
  });
  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem("chefverse_theme") || "system"; } catch (e) { return "system"; }
  });
  const [reduceMotion, setReduceMotion] = React.useState(() => {
    try { return localStorage.getItem("chefverse_reduce_motion") === "1"; } catch (e) { return false; }
  });
  
  const setNotif = (v) => {
    setNotifLevel(v);
    try { localStorage.setItem("chefverse_notif_level", v); } catch (e) {}
    flashSaved();
  };
  const setThemeVal = (v) => {
    setTheme(v);
    try { localStorage.setItem("chefverse_theme", v); } catch (e) {}
    flashSaved();
  };
  const toggleMotion = () => {
    const v = !reduceMotion;
    setReduceMotion(v);
    try { localStorage.setItem("chefverse_reduce_motion", v ? "1" : "0"); } catch (e) {}
    flashSaved();
  };
  const setLang = (v) => {
    onLocaleChange(v);
    flashSaved();
  };
  
  const flashSaved = () => {
    setSavedToast(true);
    setTimeout(() => setSavedToast(false), 1600);
  };
  
  // Pull from central I18N for consistent format (just flag + language name)
  const langs = ["en", "de", "id"].map(k => {
    const o = window.I18N[k];
    return { c: k, flag: o.flag, lab: o.locale.replace(/\s*\(.*\)$/, "") };
  });
  
  return (
    <div className="page settings-page">
      <div className="settings-head">
        <h1 className="settings-title">{tl.title}</h1>
        <p className="settings-lead">{tl.sub}</p>
      </div>
      
      {/* Preferences */}
      <section className="profile-section">
        <div className="profile-section-head">
          <h2>{tl.prefsTitle}</h2>
          <p className="profile-section-sub">{tl.prefsSub}</p>
        </div>
        <div className="settings-prefs">
          <div className="settings-pref">
            <div className="settings-pref-l">
              <div className="settings-pref-lab">{tl.prefLanguage}</div>
              <div className="settings-pref-sub">{tl.prefLanguageSub}</div>
            </div>
            <div className="settings-pref-r settings-pref-r-dd">
              <UFSLocaleDropdown
                value={locale}
                onChange={setLang}
                ariaLabel="Select language"
                options={langs.map(l => ({ value: l.c, flag: l.flag, label: l.lab }))}
              />
            </div>
          </div>
          
          <div className="settings-pref">
            <div className="settings-pref-l">
              <div className="settings-pref-lab">{tl.prefNotifs}</div>
              <div className="settings-pref-sub">{tl.prefNotifsSub}</div>
            </div>
            <div className="settings-pref-r">
              <div className="settings-segs">
                <button className={"settings-seg " + (notifLevel === "all" ? "on" : "")} onClick={() => setNotif("all")}>{tl.prefNotifsAll}</button>
                <button className={"settings-seg " + (notifLevel === "off" ? "on" : "")} onClick={() => setNotif("off")}>{tl.prefNotifsOff}</button>
              </div>
            </div>
          </div>
        </div>
      </section>
      
{savedToast && (
        <div className="profile-toast">
          <Icon name="check" size={14} /> {tl.saved}
        </div>
      )}
    </div>
  );
}

window.SettingsPage = SettingsPage;
window.SETTINGS_I18N = SETTINGS_I18N;