// Screens: Saved info, Privacy & security, Performance, Appearance, Search engine

function ScreenSaved() {
  return (
    <>
      <PageHeader route={SETTING_ROUTES.saved} title="Your saved info" subtitle="Passwords, passkeys, payment methods, and addresses — all stored locally and encrypted with your device key."/>
      <Stack>
        <SettingRow title="Passwords" subtitle="128 saved · 4 flagged as weak or reused" onClick={() => {}} right={<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}><Chip color="amber">4 weak</Chip><Chevron/></div>}/>
        <SettingRow title="Passkeys"  subtitle="12 passkeys on this device" onClick={() => {}}/>
        <SettingRow title="Payment methods" subtitle="2 cards, 1 bank account" onClick={() => {}}/>
        <SettingRow title="Addresses" subtitle="3 saved addresses" onClick={() => {}}/>
        <SettingRow title="Autofill preferences" subtitle="Control what Ajna offers to fill in." onClick={() => {}}/>
      </Stack>

      <SectionTitle>Security checkup</SectionTitle>
      <div style={{
        padding: 20, background: 'var(--bg-elev)',
        border: '1px solid var(--border-soft)', borderRadius: 12,
        display: 'flex', gap: 16, alignItems: 'center',
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: '50%',
          background: 'oklch(0.75 0.15 70 / 0.18)',
          color: 'oklch(0.82 0.15 70)',
          display: 'grid', placeItems: 'center', flexShrink: 0,
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 500 }}>4 passwords need attention</div>
          <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 2 }}>1 appeared in a data breach · 3 are reused across sites</div>
        </div>
        <TextBtn primary>Review now</TextBtn>
      </div>
    </>
  );
}

function ScreenPrivacy() {
  const [s, setS] = React.useState({
    https: true, blockTrackers: 'strict', preload: false, dnt: false,
    safeBrowsing: 'enhanced', thirdParty: 'blocked', adTopics: false,
    siteSuggested: false, measurement: false,
  });
  const up = (k, v) => setS(x => ({ ...x, [k]: v }));
  return (
    <>
      <PageHeader route={SETTING_ROUTES.privacy} title="Privacy & security" subtitle="Ajna blocks trackers, forces HTTPS, and never collects your browsing data."/>

      <SectionTitle>Privacy guides</SectionTitle>
      <Stack>
        <SettingRow title="Clear browsing data" subtitle="Cookies, history, cache, and more — by time range." onClick={() => {}}/>
        <SettingRow title="Safety check" subtitle="Scan for weak passwords, outdated extensions, and unsafe sites." onClick={() => {}} right={<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}><Chip color="green">All good</Chip><Chevron/></div>}/>
      </Stack>

      <SectionTitle>Core protections</SectionTitle>
      <Stack>
        <SettingCard title="Block trackers" subtitle="Strict blocks known ad, analytics, and fingerprinting trackers."
          right={<Select value={s.blockTrackers} onChange={v => up('blockTrackers', v)} options={[
            { value: 'standard', label: 'Standard' },
            { value: 'strict', label: 'Strict' },
            { value: 'off', label: 'Off' },
          ]}/>}/>
        <SettingCard title="Always use HTTPS" subtitle="Upgrade all connections to HTTPS. Warn before loading unencrypted sites."
          right={<Toggle on={s.https} onChange={v => up('https', v)}/>}/>
        <SettingCard title="Preload pages" subtitle="Faster browsing by preloading likely next pages. Sends data to sites before you visit."
          right={<Toggle on={s.preload} onChange={v => up('preload', v)}/>}/>
        <SettingCard title="Send a “Do Not Track” request" subtitle="Most sites ignore this, but Ajna sends it anyway."
          right={<Toggle on={s.dnt} onChange={v => up('dnt', v)}/>}/>
        <SettingCard title="Safe browsing" subtitle="Enhanced protection warns on suspicious sites and downloads."
          right={<Select value={s.safeBrowsing} onChange={v => up('safeBrowsing', v)} options={[
            { value: 'enhanced', label: 'Enhanced' },
            { value: 'standard', label: 'Standard' },
            { value: 'off', label: 'Off' },
          ]}/>}/>
      </Stack>

      <SectionTitle sub="Ads see less of you. Sites see less of you.">Cookies &amp; ad privacy</SectionTitle>
      <Stack>
        <SettingCard title="Third-party cookies" subtitle="Blocking third-party cookies prevents cross-site tracking."
          right={<Select value={s.thirdParty} onChange={v => up('thirdParty', v)} options={[
            { value: 'blocked', label: 'Blocked' },
            { value: 'incognito', label: 'Block in Incognito' },
            { value: 'allowed', label: 'Allowed' },
          ]}/>}/>
        <SettingCard title="Ad topics" subtitle="Let sites show ads based on topics Ajna thinks you might like."
          right={<Toggle on={s.adTopics} onChange={v => up('adTopics', v)}/>}/>
        <SettingCard title="Site-suggested ads" subtitle="Sites you visit can suggest ads to other sites."
          right={<Toggle on={s.siteSuggested} onChange={v => up('siteSuggested', v)}/>}/>
        <SettingCard title="Ad measurement" subtitle="Sites can measure ad performance without tracking you."
          right={<Toggle on={s.measurement} onChange={v => up('measurement', v)}/>}/>
      </Stack>

      <SectionTitle>Site settings</SectionTitle>
      <Stack>
        <SettingRow title="Permissions" subtitle="Location, camera, microphone, notifications, motion sensors" onClick={() => {}}/>
        <SettingRow title="Content" subtitle="JavaScript, images, pop-ups, PDFs, protected content" onClick={() => {}}/>
        <SettingRow title="Additional permissions" subtitle="Clipboard, payment handlers, serial ports, USB, HID, Bluetooth" onClick={() => {}}/>
      </Stack>
    </>
  );
}

function ScreenPerformance() {
  const [s, setS] = React.useState({
    memorySaver: true, energySaver: 'auto', preloadPages: true, hw: true,
  });
  const up = (k, v) => setS(x => ({ ...x, [k]: v }));
  return (
    <>
      <PageHeader route={SETTING_ROUTES.perf} title="Performance" subtitle="Keep Ajna fast even with dozens of tabs open."/>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        <Stat label="Active tabs" value="12"/>
        <Stat label="Memory" value="1.8 GB" hint="−42% vs Chrome"/>
        <Stat label="Tabs saved" value="8" hint="from dormancy"/>
      </div>

      <SectionTitle>Savers</SectionTitle>
      <Stack>
        <SettingCard title="Memory saver" subtitle="Frees up memory from inactive tabs. Tabs stay visible and reload when you return."
          right={<Toggle on={s.memorySaver} onChange={v => up('memorySaver', v)}/>}/>
        <SettingCard title="Energy saver" subtitle="Limits background activity and animations when battery is low."
          right={<Select value={s.energySaver} onChange={v => up('energySaver', v)} options={[
            { value: 'auto', label: 'Auto (when battery < 20%)' },
            { value: 'always', label: 'Always on' },
            { value: 'off', label: 'Off' },
          ]}/>}/>
      </Stack>

      <SectionTitle>Speed</SectionTitle>
      <Stack>
        <SettingCard title="Preload pages" subtitle="Preload pages Ajna thinks you'll visit next."
          right={<Toggle on={s.preloadPages} onChange={v => up('preloadPages', v)}/>}/>
        <SettingCard title="Hardware acceleration" subtitle="Use GPU when available. Restart required to apply."
          right={<Toggle on={s.hw} onChange={v => up('hw', v)}/>}/>
      </Stack>

      <SectionTitle>Always-active tabs</SectionTitle>
      <div style={{
        padding: 14, background: 'var(--bg-elev)',
        border: '1px solid var(--border-soft)', borderRadius: 12,
        fontSize: 12.5, color: 'var(--fg-muted)',
      }}>
        Sites in this list won't be put to sleep by Memory saver. <a href="#" style={{ color: 'var(--fg)' }}>Add site…</a>
      </div>
    </>
  );
}

function ScreenAppearance() {
  const [s, setS] = React.useState({
    theme: 'dark', showHome: true, showBookmarks: true, showSidebar: 'peek',
    fontSize: 'medium', pageZoom: 100, font: 'default',
  });
  const up = (k, v) => setS(x => ({ ...x, [k]: v }));
  return (
    <>
      <PageHeader route={SETTING_ROUTES.appearance} title="Appearance" subtitle="How Ajna looks and feels."/>

      <SectionTitle>Theme</SectionTitle>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
        {['light','dark','system'].map(t => (
          <button key={t} onClick={() => up('theme', t)} style={{
            padding: 14, borderRadius: 12,
            background: 'var(--bg-elev)',
            border: '1px solid ' + (s.theme === t ? 'oklch(from var(--accent-b) l c h / 0.6)' : 'var(--border-soft)'),
            boxShadow: s.theme === t ? '0 0 0 3px oklch(from var(--accent-b) l c h / 0.15)' : 'none',
            textAlign: 'left', cursor: 'pointer', color: 'var(--fg)', fontFamily: 'inherit',
          }}>
            <div style={{
              height: 56, borderRadius: 6, marginBottom: 10,
              background: t === 'light' ? 'linear-gradient(135deg, #FAFAF8, #F0F0ED)'
                : t === 'dark' ? 'linear-gradient(135deg, #1C1F24, #0F1114)'
                : 'linear-gradient(135deg, #FAFAF8 0%, #FAFAF8 50%, #0F1114 50%, #0F1114 100%)',
              border: '1px solid var(--border-soft)',
            }}/>
            <div style={{ fontSize: 13, fontWeight: 500, textTransform: 'capitalize' }}>{t}</div>
          </button>
        ))}
      </div>

      <SectionTitle>Chrome</SectionTitle>
      <Stack>
        <SettingCard title="Show home button" right={<Toggle on={s.showHome} onChange={v => up('showHome', v)}/>}/>
        <SettingCard title="Show bookmarks bar" right={<Toggle on={s.showBookmarks} onChange={v => up('showBookmarks', v)}/>}/>
        <SettingCard title="Vertical sidebar" subtitle="Peek expands the sidebar on hover; pinned keeps it always open."
          right={<Select value={s.showSidebar} onChange={v => up('showSidebar', v)} options={[
            { value: 'peek', label: 'Peek on hover' },
            { value: 'pinned', label: 'Always pinned' },
            { value: 'hidden', label: 'Hidden' },
          ]}/>}/>
      </Stack>

      <SectionTitle>Typography</SectionTitle>
      <Stack>
        <SettingCard title="Font size"
          right={<Select value={s.fontSize} onChange={v => up('fontSize', v)} options={[
            { value: 'small', label: 'Small' },
            { value: 'medium', label: 'Medium (recommended)' },
            { value: 'large', label: 'Large' },
            { value: 'xl', label: 'Very large' },
          ]}/>}/>
        <SettingCard title="Page zoom" subtitle="Default zoom for all sites."
          right={<Select value={s.pageZoom} onChange={v => up('pageZoom', +v)} options={[80,90,100,110,125,150,175,200].map(v => ({ value: v, label: v + '%' }))}/>}/>
        <SettingRow title="Customize fonts" subtitle="Standard, serif, sans-serif, and monospace fonts" onClick={() => {}}/>
      </Stack>
    </>
  );
}

function ScreenSearch() {
  const [def, setDef] = React.useState('duckduckgo');
  const engines = [
    { id: 'duckduckgo', name: 'DuckDuckGo', url: 'duckduckgo.com', keyword: ':d' },
    { id: 'google',     name: 'Google',     url: 'google.com',     keyword: ':g' },
    { id: 'kagi',       name: 'Kagi',       url: 'kagi.com',       keyword: ':k' },
    { id: 'brave',      name: 'Brave',      url: 'search.brave.com', keyword: ':b' },
    { id: 'ajna',       name: 'Ajna Ask',   url: 'ask.ajna.inc',   keyword: ':ai' },
  ];
  return (
    <>
      <PageHeader route={SETTING_ROUTES.search} title="Search engine" subtitle="The engine used when you search from the address bar."/>

      <SectionTitle>Default</SectionTitle>
      <Stack>
        <SettingCard title="Search engine used in the address bar"
          right={<Select value={def} onChange={setDef} options={engines.map(e => ({ value: e.id, label: e.name }))} width={180}/>}/>
      </Stack>

      <SectionTitle>Manage search engines and site search</SectionTitle>
      <div style={{
        background: 'var(--bg-elev)',
        border: '1px solid var(--border-soft)',
        borderRadius: 12, overflow: 'hidden',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 3fr 1fr auto',
          padding: '10px 14px', gap: 12, fontSize: 10, fontWeight: 600,
          color: 'var(--fg-muted)', letterSpacing: '0.08em', textTransform: 'uppercase',
          borderBottom: '1px solid var(--border-soft)',
        }}>
          <span>Name</span><span>URL</span><span>Shortcut</span><span></span>
        </div>
        {engines.map((e, i) => (
          <div key={e.id} style={{
            display: 'grid', gridTemplateColumns: '2fr 3fr 1fr auto',
            padding: '12px 14px', gap: 12, fontSize: 13, alignItems: 'center',
            borderBottom: i === engines.length - 1 ? 'none' : '1px solid var(--border-soft)',
          }}>
            <span style={{ fontWeight: 500 }}>{e.name}{def === e.id && <Chip color="blue">Default</Chip>}</span>
            <span style={{ color: 'var(--fg-muted)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>{e.url}</span>
            <span style={{ color: 'var(--fg-muted)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>{e.keyword}</span>
            <button style={{ background: 'transparent', border: 0, color: 'var(--fg-dim)', cursor: 'pointer' }}>⋯</button>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 10 }}><TextBtn>+ Add engine</TextBtn></div>
    </>
  );
}

// Shared Stat helper (re-used from old design)
function Stat({ label, value, hint }) {
  return (
    <div style={{
      padding: '14px 16px',
      background: 'var(--bg-elev)',
      border: '1px solid var(--border-soft)',
      borderRadius: 10,
    }}>
      <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', color: 'var(--fg-dim)', textTransform: 'uppercase' }}>{label}</div>
      <div style={{ fontSize: 22, fontFamily: 'Geist, Inter, sans-serif', fontWeight: 600, marginTop: 4, color: 'var(--fg)', letterSpacing: '-0.02em' }}>{value}</div>
      {hint && <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>{hint}</div>}
    </div>
  );
}

Object.assign(window, {
  ScreenSaved, ScreenPrivacy, ScreenPerformance, ScreenAppearance, ScreenSearch, Stat,
});