---
import { CloudSun, Monitor, Moon, Minus, Plus, Sun, Type } from '@lucide/astro';

interface Props { placement?: 'down' | 'up'; }
const { placement = 'down' } = Astro.props;

const themes = [
  { value: 'auto', label: '自动', icon: Monitor },
  { value: 'light', label: '日间', icon: Sun },
  { value: 'sunset', label: '日落', icon: CloudSun },
  { value: 'dark', label: '夜间', icon: Moon }
] as const;
---

<details class:list={[placement === 'down' ? 'relative' : 'static', { 'placement-up': placement === 'up' }]} data-reading-settings>
   <summary class="grid size-[2.5rem] cursor-pointer list-none place-items-center text-current/80 hover:bg-current/10 hover:text-current [&::-webkit-details-marker]:hidden" aria-label="打开阅读设置" aria-expanded="false" title="阅读设置">
     <Type aria-hidden="true" size="1em" />
  </summary>
   <div class:list={['reading-settings-panel absolute z-[80] border border-line bg-raised p-[0.75rem] shadow-mirages', placement === 'up' ? 'bottom-[calc(100%+0.5rem)] left-0 w-[min(17.5rem,84vw)] max-w-[calc(100vw-1.75rem)] max-h-[calc(100svh-1.75rem)] overflow-y-auto' : 'top-[calc(100%+0.5rem)] right-0 w-[min(17.875rem,calc(100vw-1.75rem))]']} role="dialog" aria-label="阅读设置">
      <div class="m-0">
        <div class="mb-[0.25rem] flex items-center gap-[0.5rem]">
          <h3 class="m-0 shrink-0 text-xs font-normal leading-5 text-subtle">颜色主题</h3>
          <span class="h-px min-w-0 flex-1 bg-line" aria-hidden="true"></span>
        </div>
       <div class="grid grid-cols-4 gap-1" role="radiogroup" aria-label="颜色主题">
         {themes.map(({ value, label, icon: Icon }) => (
           <button class="grid min-h-[3.5rem] cursor-pointer place-items-center gap-[0.125rem] border border-transparent bg-transparent px-[0.25rem] py-[0.25rem] text-xs text-foreground hover:border-line hover:bg-mirages-accent/10" type="button" role="radio" aria-checked="false" data-theme-value={value}>
             <Icon aria-hidden="true" size="1.0625rem" />
            <span>{label}</span>
          </button>
        ))}
       </div>
     </div>
        <div class="mt-[0.375rem]">
          <div class="mb-[0.25rem] flex items-center gap-[0.5rem]">
            <h3 class="m-0 shrink-0 text-xs font-normal leading-5 text-subtle">字号</h3>
            <span class="h-px min-w-0 flex-1 bg-line" aria-hidden="true"></span>
          </div>
         <div class="flex items-center gap-[0.5rem]">
           <button class="grid h-[2rem] min-w-0 flex-[2] cursor-pointer place-items-center border border-line bg-transparent text-foreground hover:bg-mirages-accent/10" type="button" aria-label="减小字号" data-scale-step="-5"><Minus aria-hidden="true" size="1em" /></button>
          <output class="min-w-0 flex-1 text-center text-xs font-semibold" data-scale-output>100%</output>
           <button class="grid h-[2rem] min-w-0 flex-[2] cursor-pointer place-items-center border border-line bg-transparent text-foreground hover:bg-mirages-accent/10" type="button" aria-label="增大字号" data-scale-step="5"><Plus aria-hidden="true" size="1em" /></button>
        </div>
     </div>
        <div class="mt-[0.375rem]">
         <div class="mb-[0.25rem] flex items-center gap-[0.5rem]">
           <h3 class="m-0 shrink-0 text-xs font-normal leading-5 text-subtle">字体</h3>
           <span class="h-px min-w-0 flex-1 bg-line" aria-hidden="true"></span>
         </div>
        <div class="grid grid-cols-2 gap-1" role="radiogroup" aria-label="字体">
          <button class="cursor-pointer border border-line bg-transparent px-[0.5rem] py-[0.375rem] text-xs text-foreground hover:bg-mirages-accent/10 [font-family:var(--mirages-font-serif)]" type="button" role="radio" aria-checked="false" data-font-value="serif">宋体</button>
          <button class="cursor-pointer border border-line bg-transparent px-[0.5rem] py-[0.375rem] text-xs text-foreground hover:bg-mirages-accent/10 [font-family:var(--mirages-font-sans)]" type="button" role="radio" aria-checked="false" data-font-value="sans">黑体</button>
       </div>
     </div>
  </div>
</details>

<script>
  const root = document.documentElement;
  const getStoredFont = () => {
    const font = localStorage.getItem('mirages-font-family');
    return font === 'serif' || font === 'sans' ? font : 'sans';
  };
  const getStoredTheme = () => {
    const theme = localStorage.getItem('mirages-theme');
    return theme === 'auto' || theme === 'light' || theme === 'sunset' || theme === 'dark' ? theme : null;
  };

  const syncSwitchers = (theme: string) => {
    const switchers = document.querySelectorAll<HTMLElement>('[data-reading-settings]');
    switchers.forEach((switcher) => {
      switcher.querySelectorAll<HTMLButtonElement>('[data-theme-value]').forEach((button) => {
        button.setAttribute('aria-checked', String(button.dataset.themeValue === theme));
      });
      switcher.querySelectorAll<HTMLButtonElement>('[data-font-value]').forEach((button) => {
        button.setAttribute('aria-checked', String(button.dataset.fontValue === (root.dataset.font ?? 'sans')));
      });
    });
  };

  const getScale = () => {
    const storedScale = Number(localStorage.getItem('mirages-font-scale'));
    return Math.min(150, Math.max(80, Math.round((storedScale >= 0.8 && storedScale <= 1.5 ? storedScale * 100 : storedScale >= 80 && storedScale <= 150 ? storedScale : 100) / 5) * 5));
  };
  const syncScale = (value: number, persist = true) => {
    const scale = Math.min(150, Math.max(80, Math.round(value / 5) * 5));
    root.style.fontSize = `${scale}%`;
    document.querySelectorAll<HTMLOutputElement>('[data-scale-output]').forEach((output) => {
      output.value = `${scale}%`;
      output.textContent = `${scale}%`;
    });
    if (persist) localStorage.setItem('mirages-font-scale', String(scale / 100));
  };
  root.dataset.font = getStoredFont();
  syncSwitchers(root.dataset.theme ?? 'auto');
  syncScale(getScale(), false);
  document.addEventListener('click', (event) => {
    if (!(event.target instanceof Element)) return;
    const target = event.target;
    const switcher = target.closest<HTMLElement>('[data-reading-settings]');
    if (!switcher) return;
    const theme = target.closest<HTMLButtonElement>('[data-theme-value]')?.dataset.themeValue;
    if (theme) {
      root.dataset.theme = theme;
      localStorage.setItem('mirages-theme', theme);
      syncSwitchers(theme);
      return;
    }
    const step = target.closest<HTMLButtonElement>('[data-scale-step]')?.dataset.scaleStep;
    if (step) {
      syncScale((Number.parseFloat(root.style.fontSize) || getScale()) + Number(step));
      return;
    }
    const font = target.closest<HTMLButtonElement>('[data-font-value]')?.dataset.fontValue;
    if (font) {
      root.dataset.font = font;
      localStorage.setItem('mirages-font-family', font);
      syncSwitchers(root.dataset.theme ?? 'auto');
    }
  });
  document.addEventListener('toggle', (event) => {
    const switcher = event.target as HTMLElement;
    if (!switcher.matches('[data-reading-settings]')) return;
    const trigger = switcher.querySelector<HTMLElement>('summary');
    const open = switcher.hasAttribute('open');
    trigger?.setAttribute('aria-expanded', String(open));
    if (open) {
      document.querySelectorAll<HTMLElement>('[data-reading-settings]').forEach((other) => { if (other !== switcher) other.removeAttribute('open'); });
      switcher.querySelector<HTMLButtonElement>('[data-theme-value]')?.focus();
    }
  }, true);
  document.addEventListener('keydown', (event) => {
    if (event.key !== 'Escape' || !(event.target instanceof Element)) return;
    const switcher = event.target.closest<HTMLElement>('[data-reading-settings]');
    if (!switcher) return;
    event.preventDefault();
    event.stopPropagation();
    switcher.removeAttribute('open');
    switcher.querySelector<HTMLElement>('summary')?.focus();
  });
  document.addEventListener('pointerdown', (event) => {
    document.querySelectorAll<HTMLElement>('[data-reading-settings]').forEach((switcher) => {
      if (!switcher.contains(event.target as Node)) switcher.removeAttribute('open');
    });
  });
  document.addEventListener('astro:before-swap', (event) => {
    const theme = getStoredTheme();
    if (theme) event.newDocument.documentElement.dataset.theme = theme;
  });
  document.addEventListener('astro:page-load', () => {
    root.dataset.theme = getStoredTheme() ?? root.dataset.theme ?? 'auto';
    root.dataset.font = getStoredFont();
    syncSwitchers(root.dataset.theme ?? 'auto');
    syncScale(getScale(), false);
  });
</script>

<style>
  button[aria-checked='true'] { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
  [data-reading-settings] > summary { border-radius: var(--radius-sm); }
  .reading-settings-panel,
  .reading-settings-panel button { font-family: var(--reading-font-family); }
  .reading-settings-panel button[data-font-value='serif'] { font-family: var(--mirages-font-serif) !important; }
  .reading-settings-panel button[data-font-value='sans'] { font-family: var(--mirages-font-sans) !important; }
</style>