<script lang="ts">
  import { onMount } from 'svelte';

  type TextSize = 'small' | 'medium' | 'large';
  type LineSpacing = 'tight' | 'normal' | 'loose';
  type ContentWidth = 'narrow' | 'medium' | 'wide';

  let textSize = $state<TextSize>('medium');
  let lineSpacing = $state<LineSpacing>('normal');
  let contentWidth = $state<ContentWidth>('medium');
  let showPreferences = $state(false);

  onMount(() => {
    loadPreferences();
    applyPreferences();
  });

  function loadPreferences() {
    if (typeof window === 'undefined') return;

    const savedTextSize = localStorage.getItem('aitherboard_textSize') as TextSize | null;
    const savedLineSpacing = localStorage.getItem('aitherboard_lineSpacing') as LineSpacing | null;
    const savedContentWidth = localStorage.getItem('aitherboard_contentWidth') as ContentWidth | null;

    if (savedTextSize) textSize = savedTextSize;
    if (savedLineSpacing) lineSpacing = savedLineSpacing;
    if (savedContentWidth) contentWidth = savedContentWidth;
  }

  function savePreferences() {
    if (typeof window === 'undefined') return;

    localStorage.setItem('aitherboard_textSize', textSize);
    localStorage.setItem('aitherboard_lineSpacing', lineSpacing);
    localStorage.setItem('aitherboard_contentWidth', contentWidth);

    applyPreferences();
  }

  function applyPreferences() {
    if (typeof document === 'undefined') return;

    const root = document.documentElement;

    // Text size - set both CSS variable and data attribute
    const textSizes = {
      small: '14px',
      medium: '16px',
      large: '18px'
    };
    root.style.setProperty('--text-size', textSizes[textSize]);
    root.setAttribute('data-text-size', textSize);

    // Line spacing - set both CSS variable and data attribute
    const lineSpacings = {
      tight: '1.4',
      normal: '1.6',
      loose: '1.8'
    };
    root.style.setProperty('--line-height', lineSpacings[lineSpacing]);
    root.setAttribute('data-line-spacing', lineSpacing);

    // Content width - set CSS variable and data attribute
    const contentWidths = {
      narrow: '600px',
      medium: '800px',
      wide: '1200px'
    };
    root.style.setProperty('--content-width', contentWidths[contentWidth]);
    root.setAttribute('data-content-width', contentWidth);
  }

  $effect(() => {
    savePreferences();
  });
</script>

<button
  onclick={() => (showPreferences = !showPreferences)}
  class="preferences-toggle"
  title="User Preferences"
  aria-label="User Preferences"
>
  ⚙️ Preferences
</button>

{#if showPreferences}
  <div 
    class="preferences-modal" 
    onclick={(e) => e.target === e.currentTarget && (showPreferences = false)}
    onkeydown={(e) => {
      if (e.key === 'Escape') {
        e.preventDefault();
        showPreferences = false;
      }
    }}
    role="dialog"
    aria-modal="true"
    aria-labelledby="preferences-title"
    tabindex="-1"
  >
    <div class="preferences-content">
      <div class="preferences-header">
        <h2 id="preferences-title">User Preferences</h2>
        <button onclick={() => (showPreferences = false)} class="close-button" aria-label="Close preferences">×</button>
      </div>

      <div class="preferences-body">
        <fieldset class="preference-group">
          <legend class="preference-label">Text Size</legend>
          <div class="preference-options" role="group" aria-label="Text Size">
            <button
              onclick={() => (textSize = 'small')}
              class="preference-option {textSize === 'small' ? 'active' : ''}"
              aria-pressed={textSize === 'small'}
            >
              Small
            </button>
            <button
              onclick={() => (textSize = 'medium')}
              class="preference-option {textSize === 'medium' ? 'active' : ''}"
              aria-pressed={textSize === 'medium'}
            >
              Medium
            </button>
            <button
              onclick={() => (textSize = 'large')}
              class="preference-option {textSize === 'large' ? 'active' : ''}"
              aria-pressed={textSize === 'large'}
            >
              Large
            </button>
          </div>
        </fieldset>

        <fieldset class="preference-group">
          <legend class="preference-label">Line Spacing</legend>
          <div class="preference-options" role="group" aria-label="Line Spacing">
            <button
              onclick={() => (lineSpacing = 'tight')}
              class="preference-option {lineSpacing === 'tight' ? 'active' : ''}"
              aria-pressed={lineSpacing === 'tight'}
            >
              Tight
            </button>
            <button
              onclick={() => (lineSpacing = 'normal')}
              class="preference-option {lineSpacing === 'normal' ? 'active' : ''}"
              aria-pressed={lineSpacing === 'normal'}
            >
              Normal
            </button>
            <button
              onclick={() => (lineSpacing = 'loose')}
              class="preference-option {lineSpacing === 'loose' ? 'active' : ''}"
              aria-pressed={lineSpacing === 'loose'}
            >
              Loose
            </button>
          </div>
        </fieldset>

        <fieldset class="preference-group">
          <legend class="preference-label">Content Width</legend>
          <div class="preference-options" role="group" aria-label="Content Width">
            <button
              onclick={() => (contentWidth = 'narrow')}
              class="preference-option {contentWidth === 'narrow' ? 'active' : ''}"
              aria-pressed={contentWidth === 'narrow'}
            >
              Narrow
            </button>
            <button
              onclick={() => (contentWidth = 'medium')}
              class="preference-option {contentWidth === 'medium' ? 'active' : ''}"
              aria-pressed={contentWidth === 'medium'}
            >
              Medium
            </button>
            <button
              onclick={() => (contentWidth = 'wide')}
              class="preference-option {contentWidth === 'wide' ? 'active' : ''}"
              aria-pressed={contentWidth === 'wide'}
            >
              Wide
            </button>
          </div>
        </fieldset>
      </div>
    </div>
  </div>
{/if}

<style>
  .preferences-toggle {
    padding: 0.5rem 1rem;
    border: 1px solid var(--fog-border, #e5e7eb);
    border-radius: 0.25rem;
    background: var(--fog-post, #ffffff);
    color: var(--fog-text, #1f2937);
    cursor: pointer;
    font-size: 0.875rem;
  }

  :global(.dark) .preferences-toggle {
    background: var(--fog-dark-post, #1f2937);
    border-color: var(--fog-dark-border, #374151);
    color: var(--fog-dark-text, #f9fafb);
  }

  .preferences-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .preferences-content {
    background: var(--fog-post, #ffffff);
    border: 1px solid var(--fog-border, #e5e7eb);
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }

  :global(.dark) .preferences-content {
    background: var(--fog-dark-post, #1f2937);
    border-color: var(--fog-dark-border, #374151);
  }

  .preferences-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--fog-border, #e5e7eb);
  }

  :global(.dark) .preferences-header {
    border-bottom-color: var(--fog-dark-border, #374151);
  }

  .close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
  }

  .preferences-body {
    padding: 1rem;
  }

  .preference-group {
    margin-bottom: 1.5rem;
    border: none;
    padding: 0;
  }

  .preference-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--fog-text, #1f2937);
    padding: 0;
  }

  :global(.dark) .preference-label {
    color: var(--fog-dark-text, #f9fafb);
  }

  .preference-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  @media (max-width: 768px) {
    .preferences-content {
      width: 95%;
      max-height: 90vh;
    }
    
    .preference-options {
      gap: 0.375rem;
    }
    
    .preference-option {
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
    }
  }

  .preference-option {
    padding: 0.5rem 1rem;
    border: 1px solid var(--fog-border, #e5e7eb);
    border-radius: 0.25rem;
    background: var(--fog-post, #ffffff);
    color: var(--fog-text, #1f2937);
    cursor: pointer;
    transition: all 0.2s;
  }

  :global(.dark) .preference-option {
    background: var(--fog-dark-post, #1f2937);
    border-color: var(--fog-dark-border, #374151);
    color: var(--fog-dark-text, #f9fafb);
  }

  .preference-option:hover {
    background: var(--fog-highlight, #f3f4f6);
    border-color: var(--fog-accent, #64748b);
  }

  :global(.dark) .preference-option:hover {
    background: var(--fog-dark-highlight, #374151);
  }

  .preference-option.active {
    background: var(--fog-accent, #64748b);
    color: var(--fog-text, #475569);
    border-color: var(--fog-accent, #64748b);
  }

  :global(.dark) .preference-option.active {
    background: var(--fog-dark-accent, #64748b);
    color: var(--fog-dark-text, #cbd5e1);
    border-color: var(--fog-dark-accent, #64748b);
  }
</style>
