// Screens: Default browser, On startup, Languages, Downloads, Accessibility, System, Reset, About

function ScreenDefault() {
  const [isDefault, setIsDefault] = React.useState(false);
  return (
    <>
      <PageHeader route={SETTING_ROUTES.default} title="Default browser" subtitle="Open links from other apps in Ajna."/>
      <div style={{
        padding: 22, background: 'var(--bg-elev)',
        border: '1px solid var(--border-soft)', borderRadius: 14,
        display: 'flex', gap: 18, alignItems: 'center', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: isDefault
            ? 'radial-gradient(500px 150px at 0% 0%, oklch(0.72 0.15 155 / 0.08), transparent 60%)'
            : 'radial-gradient(500px 150px at 0% 0%, oklch(from var(--accent-b) l c h / 0.08), transparent 60%)',
          pointerEvents: 'none',
        }}/>
        <div style={{
          width: 56, height: 56, borderRadius: 14,
          background: 'var(--accent-grad)', display: 'grid', placeItems: 'center',
          color: '#0F1114', fontWeight: 700, fontSize: 22,
          fontFamily: 'Geist, Inter, sans-serif', flexShrink: 0,
          boxShadow: '0 4px 20px oklch(from var(--accent-b) l c h / 0.35)', position: 'relative',
        }}>A</div>
        <div style={{ flex: 1, position: 'relative' }}>
          <div style={{ fontSize: 16, fontWeight: 500 }}>
            {isDefault ? 'Ajna is your default browser' : 'Make Ajna your default browser'}
          </div>
          <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 3, maxWidth: 440 }}>
            {isDefault
              ? 'Links from Mail, Messages, Slack, and other apps will open in Ajna.'
              : 'Currently Safari is handling web links on this Mac.'}
          </div>
        </div>
        {isDefault
          ? <Chip color="green">Default</Chip>
          : <TextBtn primary onClick={() => setIsDefault(true)}>Make default</TextBtn>}
      </div>

      <SectionTitle>Link handling</SectionTitle>
      <Stack>
        <SettingCard title="Ask before opening supported links in the Ajna app" subtitle="Some links (mailto:, tel:, did:) can open external apps instead."
          right={<Toggle on={true}/>}/>
        <SettingRow title="Protocol handlers" subtitle="Let sites register handlers for specific protocols (mailto, mms, ical, webcal, did)." onClick={() => {}}/>
      </Stack>
    </>
  );
}

function ScreenStartup() {
  const [mode, setMode] = React.useState('continue');
  const [urls, setUrls] = React.useState([
    { label: 'New Tab',             url: 'ajna://newtab' },
    { label: 'Mail',                url: 'mail.ajna.inc' },
    { label: 'Linear — Inbox',      url: 'linear.app/ajna/inbox' },
  ]);
  return (
    <>
      <PageHeader route={SETTING_ROUTES.startup} title="On startup" subtitle="What Ajna shows when it opens."/>

      <Stack>
        {[
          { id: 'newtab',   title: 'Open the New Tab page' },
          { id: 'continue', title: 'Continue where you left off' },
          { id: 'specific', title: 'Open a specific page or set of pages' },
        ].map(opt => (
          <button key={opt.id} onClick={() => setMode(opt.id)} style={{
            display: 'flex', alignItems: 'center', gap: 14, width: '100%',
            padding: '14px 16px', borderRadius: 12, textAlign: 'left',
            background: 'var(--bg-elev)',
            border: '1px solid ' + (mode === opt.id ? 'oklch(from var(--accent-b) l c h / 0.45)' : 'var(--border-soft)'),
            boxShadow: mode === opt.id ? '0 0 0 3px oklch(from var(--accent-b) l c h / 0.12)' : 'none',
            color: 'var(--fg)', cursor: 'pointer', fontFamily: 'inherit',
          }}>
            <span style={{
              width: 16, height: 16, borderRadius: '50%',
              border: '2px solid ' + (mode === opt.id ? 'var(--accent-b)' : 'var(--border)'),
              display: 'grid', placeItems: 'center', flexShrink: 0,
            }}>
              {mode === opt.id && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent-b)' }}/>}
            </span>
            <span style={{ fontSize: 13.5, fontWeight: 500 }}>{opt.title}</span>
          </button>
        ))}
      </Stack>

      {mode === 'specific' && (
        <>
          <SectionTitle>Pages to open</SectionTitle>
          <Stack>
            {urls.map((u, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 14px',
                background: 'var(--bg-elev)',
                border: '1px solid var(--border-soft)',
                borderRadius: 10,
              }}>
                <div style={{
                  width: 18, height: 18, borderRadius: 4,
                  background: 'var(--bg-elev-2)', flexShrink: 0,
                }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{u.label}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-muted)', fontFamily: 'JetBrains Mono, monospace' }}>{u.url}</div>
                </div>
                <button style={{ background: 'transparent', border: 0, color: 'var(--fg-dim)', cursor: 'pointer' }}>✕</button>
              </div>
            ))}
            <div style={{ display: 'flex', gap: 8 }}>
              <TextBtn>+ Add a new page</TextBtn>
              <TextBtn>Use current pages</TextBtn>
            </div>
          </Stack>
        </>
      )}
    </>
  );
}

function ScreenLanguages() {
  const [spellcheck, setSpellcheck] = React.useState(true);
  return (
    <>
      <PageHeader route={SETTING_ROUTES.lang} title="Languages" subtitle="Order by preference. Sites show in the first supported language."/>

      <SectionTitle>Preferred languages</SectionTitle>
      <Stack>
        {[
          { code: 'en-US', name: 'English (United States)', badge: 'Ajna UI' },
          { code: 'en',    name: 'English' },
          { code: 'es',    name: 'Spanish' },
          { code: 'ja',    name: 'Japanese' },
        ].map((l, i) => (
          <div key={l.code} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '12px 14px',
            background: 'var(--bg-elev)',
            border: '1px solid var(--border-soft)',
            borderRadius: 10,
          }}>
            <span style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              color: 'var(--fg-dim)', width: 40,
            }}>{l.code}</span>
            <span style={{ flex: 1, fontSize: 13 }}>{l.name}</span>
            {l.badge && <Chip color="blue">{l.badge}</Chip>}
            <button style={{ background: 'transparent', border: 0, color: 'var(--fg-dim)', cursor: 'pointer', fontSize: 14 }}>⋯</button>
          </div>
        ))}
      </Stack>
      <div style={{ marginTop: 10 }}><TextBtn>+ Add language</TextBtn></div>

      <SectionTitle>Translation</SectionTitle>
      <Stack>
        <SettingCard title="Offer to translate pages that aren't in a language you read" right={<Toggle on={true}/>}/>
        <SettingRow title="Never translate these languages" onClick={() => {}}/>
        <SettingRow title="Never translate these sites" onClick={() => {}}/>
      </Stack>

      <SectionTitle>Spell check</SectionTitle>
      <Stack>
        <SettingCard title="Check spelling while typing" right={<Toggle on={spellcheck} onChange={setSpellcheck}/>}/>
        <SettingRow title="Custom dictionary" subtitle="12 words" onClick={() => {}}/>
      </Stack>
    </>
  );
}

function ScreenDownloads() {
  const [ask, setAsk] = React.useState(true);
  const [location, setLocation] = React.useState('~/Downloads');
  return (
    <>
      <PageHeader route={SETTING_ROUTES.downloads} title="Downloads" subtitle="Where files go and how Ajna handles them."/>
      <Stack>
        <SettingCard title="Location" subtitle={location}
          right={<TextBtn>Change</TextBtn>}/>
        <SettingCard title="Ask where to save each file before downloading"
          right={<Toggle on={ask} onChange={setAsk}/>}/>
        <SettingCard title="Show downloads while in progress"
          subtitle="A small chip appears in the toolbar during downloads."
          right={<Toggle on={true}/>}/>
      </Stack>

      <SectionTitle>Recent</SectionTitle>
      <Stack>
        {[
          { name: 'design-system.zip',      size: '18.4 MB', when: '3 min ago' },
          { name: 'invoice-0284.pdf',       size: '124 KB',  when: '2 hours ago' },
          { name: 'build-0.4.2-mac.dmg',    size: '204 MB',  when: 'Yesterday' },
        ].map((f, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '12px 14px',
            background: 'var(--bg-elev)',
            border: '1px solid var(--border-soft)',
            borderRadius: 10,
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 6,
              background: 'var(--bg-elev-2)', display: 'grid', placeItems: 'center',
              color: 'var(--fg-dim)', flexShrink: 0,
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{f.name}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{f.size} · {f.when}</div>
            </div>
            <button style={{ background: 'transparent', border: 0, color: 'var(--fg-dim)', cursor: 'pointer' }}>⋯</button>
          </div>
        ))}
      </Stack>
    </>
  );
}

function ScreenAccessibility() {
  const [s, setS] = React.useState({
    live: true, captions: false, image: true, focusRing: true, reduce: 'auto',
  });
  const up = (k, v) => setS(x => ({ ...x, [k]: v }));
  return (
    <>
      <PageHeader route={SETTING_ROUTES.access} title="Accessibility" subtitle="Make Ajna work for you."/>
      <SectionTitle>Visual</SectionTitle>
      <Stack>
        <SettingCard title="High-contrast focus ring" right={<Toggle on={s.focusRing} onChange={v => up('focusRing', v)}/>}/>
        <SettingCard title="Reduced motion" subtitle="Disable non-essential animations and transitions."
          right={<Select value={s.reduce} onChange={v => up('reduce', v)} options={[
            { value: 'auto', label: 'Match system' },
            { value: 'on', label: 'Always on' },
            { value: 'off', label: 'Off' },
          ]}/>}/>
        <SettingCard title="Get image descriptions" subtitle="Describe images for screen readers when they lack alt text." right={<Toggle on={s.image} onChange={v => up('image', v)}/>}/>
      </Stack>

      <SectionTitle>Captions</SectionTitle>
      <Stack>
        <SettingCard title="Live Caption" subtitle="Automatically caption audio and video played in Ajna." right={<Toggle on={s.live} onChange={v => up('live', v)}/>}/>
        <SettingRow title="Captions appearance" subtitle="Font, size, color, and background" onClick={() => {}}/>
      </Stack>

      <SectionTitle>Navigation</SectionTitle>
      <Stack>
        <SettingCard title="Swipe between pages" subtitle="Two-finger horizontal swipe to go back or forward." right={<Toggle on={true}/>}/>
        <SettingRow title="Keyboard shortcuts" onClick={() => {}}/>
      </Stack>
    </>
  );
}

function ScreenSystem() {
  const [s, setS] = React.useState({ background: true, hw: true });
  const up = (k, v) => setS(x => ({ ...x, [k]: v }));
  return (
    <>
      <PageHeader route={SETTING_ROUTES.system} title="System" subtitle="Low-level browser behavior."/>
      <Stack>
        <SettingCard title="Continue running background apps when Ajna is closed" right={<Toggle on={s.background} onChange={v => up('background', v)}/>}/>
        <SettingCard title="Use hardware acceleration when available" right={<Toggle on={s.hw} onChange={v => up('hw', v)}/>}/>
        <SettingRow title="Open your computer's proxy settings" right={<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M8 7h9v9"/></svg>} onClick={() => {}}/>
      </Stack>
    </>
  );
}

function ScreenReset() {
  return (
    <>
      <PageHeader route={SETTING_ROUTES.reset} title="Reset settings" subtitle="Roll back Ajna to factory defaults. Your bookmarks, history, and passwords are preserved."/>
      <div style={{
        padding: 20, background: 'var(--bg-elev)',
        border: '1px solid oklch(0.7 0.18 25 / 0.3)',
        borderRadius: 14, display: 'flex', gap: 16, alignItems: 'center',
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: '50%',
          background: 'oklch(0.7 0.18 25 / 0.15)', color: 'oklch(0.8 0.16 25)',
          display: 'grid', placeItems: 'center', flexShrink: 0,
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 500 }}>Restore settings to their original defaults</div>
          <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 3 }}>Resets your startup page, search engine, pinned tabs, content settings, cookies, and extensions.</div>
        </div>
        <TextBtn danger>Reset settings</TextBtn>
      </div>

      <SectionTitle>Also available</SectionTitle>
      <Stack>
        <SettingRow title="Clean up computer" subtitle="Find and remove harmful software that may have installed extensions." onClick={() => {}}/>
        <SettingRow title="Clear all browsing data" subtitle="History, cookies, cache, site data, downloads, saved passwords." onClick={() => {}}/>
      </Stack>
    </>
  );
}

function ScreenAbout() {
  return (
    <>
      <PageHeader route={SETTING_ROUTES.about} title="About Ajna" subtitle="A privacy-first browser with peer-to-peer sync."/>
      <div style={{
        padding: 24, background: 'var(--bg-elev)',
        border: '1px solid var(--border-soft)', borderRadius: 14,
        display: 'flex', gap: 18, alignItems: 'center',
      }}>
        <AjnaMark size={56}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontFamily: 'Geist, Inter, sans-serif', fontWeight: 600, letterSpacing: '-0.01em' }}>Ajna</div>
          <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 4, fontFamily: 'JetBrains Mono, monospace' }}>
            v0.4.2 (build 2026.04) · Chromium 128 · arm64
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
            <Chip color="green">Up to date</Chip>
            <Chip>Stable channel</Chip>
          </div>
        </div>
        <TextBtn primary>Check for updates</TextBtn>
      </div>

      <SectionTitle>Resources</SectionTitle>
      <Stack>
        <SettingRow title="Release notes" onClick={() => {}}/>
        <SettingRow title="Help center" onClick={() => {}}/>
        <SettingRow title="Report an issue" onClick={() => {}}/>
        <SettingRow title="Terms of service" onClick={() => {}}/>
        <SettingRow title="Privacy policy" onClick={() => {}}/>
      </Stack>

      <div style={{
        marginTop: 32, padding: '12px 16px', textAlign: 'center',
        color: 'var(--fg-dim)', fontSize: 11, fontFamily: 'JetBrains Mono, monospace',
      }}>
        Made with care by Ajna Inc. · Copyright © 2026
      </div>
    </>
  );
}

Object.assign(window, {
  ScreenDefault, ScreenStartup, ScreenLanguages, ScreenDownloads,
  ScreenAccessibility, ScreenSystem, ScreenReset, ScreenAbout,
});