// settings/Settings.jsx — Settings root + Account/Server/Timezone/Theme/About.

function SetRow({ ic, color, ti, de, badge, chevron = true, danger = false }) {
  return (
    <div className="set-row">
      {ic && <div className="ic" style={{ background: color || 'var(--io-label-tertiary)' }}>
        <Icon name={ic} size={16} stroke={2.2}/>
      </div>}
      <div className="ti" style={{ color: danger ? 'var(--io-red)' : 'var(--io-label)' }}>{ti}</div>
      {badge && <span className="badge">{badge}</span>}
      {de && <div className="de" data-num>{de}</div>}
      {chevron && !danger && <div className="ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>}
    </div>
  );
}
window.SetRow = SetRow;

function SettingsRoot({ dark = false, isAdmin = true }) {
  return (
    <FrameScreen dark={dark}>
      <BigTitle title="Settings"
        leading={<div style={{ paddingLeft: 4, fontSize: 15, fontWeight: 600, color: 'var(--io-label-secondary)' }}>v0.9.3</div>}
        trailing={<Avatar initial="L"/>}/>

      {/* User card */}
      <div style={{ padding: '8px 16px 0' }}>
        <div className="card padded" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            width: 52, height: 52, borderRadius: 50,
            background: 'linear-gradient(135deg,#5E5CE6,#AF52DE)',
            color: '#fff', display: 'grid', placeItems: 'center',
            fontSize: 20, fontWeight: 600,
          }}>L</div>
          <div style={{ flex: 1 }}>
            <div className="hd" style={{ fontSize: 17 }}>Lukas Park</div>
            <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>lukas · admin · since Feb 2025</div>
          </div>
          <Icon name="chevron-right" size={16} stroke={2.4} style={{ color: 'var(--io-label-tertiary)' }}/>
        </div>
      </div>

      <div className="set-section-hd">Server</div>
      <div className="set-group">
        <SetRow ic="share" color="var(--io-indigo)" ti="Server"   de="portal.lukas.dev"/>
        <SetRow ic="lock"  color="var(--io-green)"  ti="Session"  de="29 days left"/>
        <SetRow ic="refresh" color="var(--io-orange)" ti="Sync interval" de="15 min"/>
      </div>

      <div className="set-section-hd">Apple Health</div>
      <div className="set-group">
        <SetRow ic="heart" color="var(--io-red)" ti="Apple Health" de="4 categories"/>
        <SetRow ic="bed"   color="var(--io-purple)" ti="HealthKit permissions" de="Manage"/>
      </div>

      <div className="set-section-hd">Appearance</div>
      <div className="set-group">
        <SetRow ic="moon" color="var(--io-label-tertiary)" ti="Theme"    de="System"/>
        <SetRow ic="clock" color="var(--io-teal)" ti="Time zone" de="Europe/London"/>
        <SetRow ic="sparkles" color="var(--io-yellow)" ti="Week starts on" de="Monday"/>
      </div>

      <div className="set-section-hd">Notifications</div>
      <div className="set-group">
        <SetRow ic="alert" color="var(--io-red)" ti="Reminders" de="On"/>
        <SetRow ic="moon" color="var(--io-purple)" ti="Bedtime nudge" de="60 min before"/>
      </div>

      {isAdmin && (
        <>
          <div className="set-section-hd">Administration</div>
          <div className="set-group">
            <SetRow ic="settings" color="var(--io-orange)" ti="Admin console" de="Stats, users, deploy" badge="3"/>
          </div>
        </>
      )}

      <div className="set-section-hd">About</div>
      <div className="set-group">
        <SetRow ic="calendar" color="var(--io-blue)" ti="About Ordentus"/>
        <SetRow ic="share"    color="var(--io-blue)" ti="Send feedback"/>
        <SetRow ic="lock"     color="var(--io-green)" ti="Privacy & data"/>
      </div>

      <div style={{ padding: '20px 16px 0' }}>
        <div className="set-group">
          <SetRow ti="Sign out" danger chevron={false}/>
        </div>
      </div>

      <div style={{ padding: '14px 24px 0' }}>
        <div className="fn" style={{ color: 'var(--io-label-tertiary)', lineHeight: 1.4 }}>
          Ordentus iOS · v0.9.3 (build 142) · 13 May 2026<br/>
          Server <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }}>portal.lukas.dev</span> · v2.4.1
        </div>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="settings"/>
    </FrameScreen>
  );
}
window.SettingsRoot = SettingsRoot;

function SettingsAccount({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Settings" title="Account"/>

      <div className="set-section-hd">Profile</div>
      <div className="set-group">
        <SetRow ti="Display name" de="Lukas Park"/>
        <SetRow ti="Username"     de="lukas" chevron={false}/>
        <SetRow ti="Email"        de="lukas@…"/>
      </div>

      <div className="set-section-hd">Security</div>
      <div className="set-group">
        <SetRow ic="lock"  color="var(--io-green)" ti="Change password"/>
        <SetRow ic="alert" color="var(--io-orange)" ti="Active sessions" de="3 devices"/>
        <SetRow ic="check" color="var(--io-blue)" ti="Trusted devices" de="2"/>
      </div>

      <div className="set-section-hd">This device</div>
      <div className="set-group">
        <SetRow ti="Device name"       de="iPhone 15 Pro"/>
        <SetRow ti="Cookie expires"    de="29 days" chevron={false}/>
        <SetRow ti="Last sign-in"      de="Feb 12 · 9:14 AM" chevron={false}/>
      </div>

      <div style={{ padding: '20px 16px 0' }}>
        <div className="set-group">
          <SetRow ti="Sign out of this device" danger chevron={false}/>
          <SetRow ti="Sign out everywhere"     danger chevron={false}/>
        </div>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="settings"/>
    </FrameScreen>
  );
}
window.SettingsAccount = SettingsAccount;

function SettingsTheme({ dark = false }) {
  // Three big preview cards: Light · Dark · System (auto)
  const Card = ({ name, sel, mode }) => (
    <div style={{
      flex: 1,
      borderRadius: 16, padding: 8, gap: 10,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      border: sel ? '3px solid var(--io-blue)' : '3px solid transparent',
    }}>
      <div style={{
        width: '100%', height: 110, borderRadius: 12,
        background: mode === 'dark' ? '#000' : mode === 'system'
          ? 'linear-gradient(110deg, #FFFFFF 0%, #FFFFFF 50%, #000 50%, #000 100%)'
          : '#FFFFFF',
        border: '1px solid var(--io-separator)',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* tiny mock UI */}
        <div style={{
          position: 'absolute', left: 8, right: 8, top: 8,
          padding: 4, borderRadius: 6,
          background: mode === 'dark' ? '#1C1C1E' : '#F2F2F7',
        }}>
          <div style={{ width: '60%', height: 4, borderRadius: 2, background: mode === 'dark' ? '#fff' : '#1D1D1F' }}/>
        </div>
        <div style={{
          position: 'absolute', left: 8, right: 8, top: 36, bottom: 8,
          padding: 6,
          background: 'var(--io-grad-bedtime-deep)',
          borderRadius: 6,
        }}>
          <div style={{ width: 30, height: 4, borderRadius: 2, background: 'rgba(255,255,255,.6)' }}/>
          <div style={{ width: 56, height: 10, borderRadius: 2, background: '#fff', marginTop: 6 }}/>
        </div>
      </div>
      <div className="ca" style={{ fontWeight: sel ? 600 : 500, color: sel ? 'var(--io-blue)' : 'var(--io-label)' }}>{name}</div>
    </div>
  );
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Settings" title="Theme"/>

      <div style={{ padding: '4px 20px 0' }}>
        <div className="bd" style={{ color: 'var(--io-label-secondary)', lineHeight: 1.4 }}>
          The bedtime gradient stays the same in both modes. Surfaces and text adapt.
        </div>
      </div>

      <div style={{ padding: '16px 12px 0', display: 'flex', gap: 6 }}>
        <Card name="Light"  mode="light"/>
        <Card name="Dark"   mode="dark"  sel/>
        <Card name="System" mode="system"/>
      </div>

      <div className="set-section-hd" style={{ marginTop: 4 }}>Schedule</div>
      <div className="set-group">
        <SetRow ti="Match Apple system" de="On" chevron={false}/>
        <SetRow ti="Dark from"          de="9:30 PM"/>
        <SetRow ti="Light from"         de="6:15 AM"/>
      </div>

      <div className="set-section-hd">Accessibility</div>
      <div className="set-group">
        <SetRow ti="Reduce motion" de="Off"/>
        <SetRow ti="Increase contrast" de="Off"/>
        <SetRow ti="Text size" de="Default"/>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="settings"/>
    </FrameScreen>
  );
}
window.SettingsTheme = SettingsTheme;

function SettingsTimezone({ dark = false }) {
  const zones = [
    { z: 'Europe/London',     local: '10:26', sel: true },
    { z: 'Europe/Paris',      local: '11:26' },
    { z: 'America/New_York',  local: '06:26' },
    { z: 'America/Los_Angeles', local: '03:26' },
    { z: 'Asia/Tokyo',        local: '19:26' },
    { z: 'Asia/Seoul',        local: '19:26' },
    { z: 'Australia/Sydney',  local: '21:26' },
  ];
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Settings" title="Time zone"/>

      <div style={{ padding: '8px 16px 0' }}>
        <div style={{
          background: 'var(--io-fill-tertiary)', borderRadius: 10,
          padding: '7px 10px', display: 'flex', alignItems: 'center', gap: 8,
          color: 'var(--io-label-tertiary)', fontSize: 17, letterSpacing: -0.4,
        }}>
          <Icon name="search" size={16} stroke={2.2}/>
          <span style={{ flex: 1 }}>Search</span>
        </div>
      </div>

      <div className="set-section-hd">Detected</div>
      <div className="set-group">
        <SetRow ic="alert" color="var(--io-blue)" ti="Set automatically" de="On" chevron={false}/>
      </div>

      <div className="set-section-hd">Common</div>
      <div className="set-group">
        {zones.map((r, i) => (
          <div key={r.z} className="set-row">
            <div style={{ flex: 1 }}>
              <div className="ti" style={{ color: r.sel ? 'var(--io-blue)' : 'var(--io-label)' }}>{r.z}</div>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>UTC {r.z.startsWith('Europe') ? '+0' : r.z.includes('New') ? '−5' : r.z.includes('Los') ? '−8' : r.z.includes('Tokyo') ? '+9' : r.z.includes('Seoul') ? '+9' : '+11'}</div>
            </div>
            <div className="de" data-num>{r.local}</div>
            {r.sel && <div style={{ color: 'var(--io-blue)' }}><Icon name="check" size={16} stroke={2.6}/></div>}
          </div>
        ))}
      </div>

      <div style={{ padding: '14px 24px 0' }}>
        <div className="fn" style={{ color: 'var(--io-label-tertiary)', lineHeight: 1.4 }}>
          IANA time-zone identifiers. Calendar feeds carry their own zone — Ordentus renders each event in the right local time.
        </div>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="settings"/>
    </FrameScreen>
  );
}
window.SettingsTimezone = SettingsTimezone;