// Settings
const Settings = ({ onNav, prefs, setPrefs }) => {
  return (
    <div className="screen wood-grain" style={{ width: "100%", height: "100%", position: "relative", display: "flex", flexDirection: "column" }}>
      <div className="noise"/>
      <StatusBar/>
      <TopBar title="Settings" subtitle="Preferences" onBack={() => onNav("home")}/>

      <div style={{ flex: 1, overflowY: "auto", padding: "0 20px 110px" }}>
        <Group label="Rune Skin">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8, padding: "0 12px" }}>
            {[{k:"stone",l:"Stone"},{k:"wood",l:"Wood"},{k:"gold",l:"Gold"},{k:"ice",l:"Ice"},{k:"fire",l:"Fire"}].map(s => (
              <div key={s.k} onClick={() => setPrefs({...prefs, skin: s.k})} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, cursor: "pointer", padding: "8px 4px", border: `1px solid ${prefs.skin === s.k ? "var(--gold)" : "transparent"}`, background: prefs.skin === s.k ? "rgba(201,168,76,0.06)" : "transparent" }}>
                <div className={`rune-${s.k}`} style={{ width: 36, height: 46, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 3 }}>
                  <span className="rune-glyph" style={{ fontSize: 20 }}>ᚠ</span>
                </div>
                <div style={{ fontSize: 9, color: prefs.skin === s.k ? "var(--gold)" : "var(--ash)", letterSpacing: "0.1em", textTransform: "uppercase", fontFamily: "Cinzel, serif" }}>{s.l}</div>
              </div>
            ))}
          </div>
        </Group>

        <Group label="Experience">
          <Toggle label="Norse ambient sound" sub="Wind, fire, and distant thunder" on={prefs.sound} onToggle={() => setPrefs({...prefs, sound: !prefs.sound})}/>
          <Toggle label="Haptic feedback" sub="A light pulse when you draw a rune" on={prefs.haptic} onToggle={() => setPrefs({...prefs, haptic: !prefs.haptic})}/>
          <Toggle label="Enhanced effects" sub="Particles, glow, and animations" on={prefs.fx} onToggle={() => setPrefs({...prefs, fx: !prefs.fx})}/>
        </Group>

        <Group label="Daily Rune">
          <Toggle label="Morning reminder" sub="One rune to open the day" on={prefs.notify} onToggle={() => setPrefs({...prefs, notify: !prefs.notify})}/>
          <Row label="Reminder time" value={prefs.notifyTime || "07:00"}/>
        </Group>

        <Group label="Interface">
          <Row label="Theme" value="Dark"/>
          <Row label="Language" value="English"/>
        </Group>

        <Group label="About">
          <Row label="Version" value="1.0.0 - Yggdrasil"/>
          <Row label="Rate App" value=">"/>
          <Row label="Inspired By" value="Havamal"/>
        </Group>

        <div style={{ textAlign: "center", padding: "20px 0", color: "var(--ash-dim)", fontSize: 10, fontStyle: "italic", letterSpacing: "0.15em" }}>
          ᛉ &nbsp; ᚠᛟᚱ ᚦᛖ ᚹᛁᛊᛖ &nbsp; ᛉ
        </div>
      </div>

      <BottomNav active="settings" onNav={onNav}/>
    </div>
  );
};

const Group = ({ label, children }) => (
  <div style={{ marginTop: 20 }}>
    <div className="font-display" style={{ fontSize: 9, letterSpacing: "0.25em", color: "var(--gold)", textTransform: "uppercase", marginBottom: 8, paddingLeft: 4 }}>{label}</div>
    <div style={{ background: "rgba(26,22,18,0.4)", border: "1px solid rgba(201,168,76,0.1)" }}>{children}</div>
  </div>
);
const Row = ({ label, value }) => (
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 16px", borderBottom: "1px solid rgba(201,168,76,0.06)" }}>
    <div style={{ fontSize: 14, color: "var(--ivory)" }}>{label}</div>
    <div style={{ fontSize: 13, color: "var(--ash)", fontStyle: "italic" }}>{value}</div>
  </div>
);
const Toggle = ({ label, sub, on, onToggle }) => (
  <div onClick={onToggle} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 16px", borderBottom: "1px solid rgba(201,168,76,0.06)", cursor: "pointer" }}>
    <div>
      <div style={{ fontSize: 14, color: "var(--ivory)" }}>{label}</div>
      {sub && <div style={{ fontSize: 11, color: "var(--ash)", fontStyle: "italic", marginTop: 2 }}>{sub}</div>}
    </div>
    <div style={{ width: 36, height: 20, borderRadius: 12, background: on ? "var(--gold)" : "rgba(107,101,96,0.4)", position: "relative", transition: "background 0.2s", flexShrink: 0 }}>
      <div style={{ position: "absolute", top: 2, left: on ? 18 : 2, width: 16, height: 16, borderRadius: "50%", background: on ? "#1A1612" : "var(--ivory)", transition: "left 0.2s" }}/>
    </div>
  </div>
);

window.Settings = Settings;