Typography Persistence System

// ✅ Clean Content (Semantic HTML)
const storyContent = `<p>Chapter 1 content...</p><p>More content...</p>`
 
// ✅ Separate Typography Settings (Applied via CSS)
const typography = {
  fontFamily: 'times',
  fontSize: 12,
  lineHeight: 1.5,
  letterSpacing: 0
}

-- Typography Settings Table
CREATE TABLE story_typography_settings (
  story_id UUID → Links to specific story
  user_id UUID → Story owner
  
  -- Basic Typography
  font_family TEXT DEFAULT 'times'
  font_size INTEGER DEFAULT 11
  line_height DECIMAL(3,2) DEFAULT 1.2
  letter_spacing DECIMAL(4,2) DEFAULT 0
  text_indent INTEGER DEFAULT 0
  
  -- Advanced Typography  
  drop_cap_enabled BOOLEAN DEFAULT FALSE
  drop_cap_lines INTEGER DEFAULT 3
  orphan_control INTEGER DEFAULT 2
  widow_control INTEGER DEFAULT 2
  
  theme TEXT DEFAULT 'serif'
)

const useTypographyPersistence = ({
  storyId,
  enabled = true,
  autoSaveDelay = 1000 // 1 second debounce
}) => {
  const [settings, setSettings] = useState<TypographySettings>(defaults)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
 
  // Auto-save with debouncing
  const debouncedSave = useMemo(
    () => debounce(saveTypography, autoSaveDelay),
    [autoSaveDelay]
  )
 
  // Load settings on mount
  useEffect(() => {
    if (enabled && storyId) {
      loadTypographySettings(storyId)
    }
  }, [storyId, enabled])
 
  // Auto-save when settings change
  useEffect(() => {
    if (enabled && storyId && !loading) {
      debouncedSave(settings)
    }
  }, [settings, enabled, storyId, loading])
 
  return {
    settings,
    updateSettings: setSettings,
    loading,
    error,
    save: () => saveTypography(settings),
    reset: resetToDefaults
  }
}

.ProseMirror {
  font-family: var(--story-font-family);
  font-size: var(--story-font-size);
  line-height: var(--story-line-height);
  letter-spacing: var(--story-letter-spacing);
}

// Apply settings instantly
const applyTypographySettings = (settings: TypographySettings) => {
  document.documentElement.style.setProperty('--story-font-family', settings.fontFamily)
  document.documentElement.style.setProperty('--story-font-size', `${settings.fontSize}pt`)
  document.documentElement.style.setProperty('--story-line-height', settings.lineHeight.toString())
  document.documentElement.style.setProperty('--story-letter-spacing', `${settings.letterSpacing}px`)
}

// First paragraph gets decorative initial letter
const applyDropCap = (enabled: boolean, lines: number) => {
  const firstParagraph = document.querySelector('.ProseMirror p:first-of-type')
  if (enabled && firstParagraph) {
    firstParagraph.classList.add('drop-cap')
    firstParagraph.style.setProperty('--drop-cap-lines', lines.toString())
  }
}

.drop-cap::first-letter {
  float: left;
  font-size: calc(var(--drop-cap-lines, 3) * 1.2em);
  line-height: calc(var(--drop-cap-lines, 3) * 0.8em);
  font-weight: bold;
  margin-right: 4px;
}

// Professional typography controls
const applyOrphanWidowControl = (orphans: number, widows: number) => {
  const style = document.createElement('style')
  style.textContent = `
    .ProseMirror p {
      orphans: ${orphans} !important;
      widows: ${widows} !important;
    }
  `
  document.head.appendChild(style)
}

const typographyThemes = {
  manuscript: {
    fontFamily: 'times',
    fontSize: 12,
    lineHeight: 1.5,
    letterSpacing: 0,
    textIndent: 18
  },
  modern: {
    fontFamily: 'helvetica',
    fontSize: 11,
    lineHeight: 1.3,
    letterSpacing: 0.5,
    textIndent: 0
  },
  classic: {
    fontFamily: 'garamond',
    fontSize: 11,
    lineHeight: 1.4,
    letterSpacing: 0,
    textIndent: 12,
    dropCapEnabled: true
  }
}

const useTypographyPersistence = () => {
  const fallbackToLocalStorage = (settings: TypographySettings) => {
    try {
      localStorage.setItem(`typography-${storyId}`, JSON.stringify(settings))
    } catch (error) {
      console.warn('Failed to save to localStorage:', error)
    }
  }
 
  const saveTypography = async (settings: TypographySettings) => {
    try {
      await fetch(`/api/stories/${storyId}/typography`, {
        method: 'PUT',
        body: JSON.stringify(settings)
      })
    } catch (error) {
      // Fallback to local storage
      fallbackToLocalStorage(settings)
      setError('Settings saved locally. Will sync when connection restored.')
    }
  }
}

// Check API calls in browser DevTools
// Should see successful PUT requests:
PUT /api/stories/[storyId]/typography 200 OK
 
// No error messages should appear:
// ❌ 500 Internal Server Error  
// ❌ Failed to save typography settings

-- Copy this into Supabase SQL Editor
CREATE TABLE IF NOT EXISTS story_typography_settings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  story_id UUID NOT NULL REFERENCES stories(id) ON DELETE CASCADE,
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  
  font_family TEXT DEFAULT 'times' NOT NULL,
  font_size INTEGER DEFAULT 11 NOT NULL,
  line_height DECIMAL(3,2) DEFAULT 1.2 NOT NULL,
  letter_spacing DECIMAL(4,2) DEFAULT 0 NOT NULL,
  text_indent INTEGER DEFAULT 0 NOT NULL,
  
  drop_cap_enabled BOOLEAN DEFAULT FALSE NOT NULL,
  drop_cap_lines INTEGER DEFAULT 3 NOT NULL,
  orphan_control INTEGER DEFAULT 2 NOT NULL,
  widow_control INTEGER DEFAULT 2 NOT NULL,
  
  theme TEXT DEFAULT 'serif',
  
  created_at TIMESTAMPTZ DEFAULT NOW() NOT NULL,
  updated_at TIMESTAMPTZ DEFAULT NOW() NOT NULL,
  
  UNIQUE(story_id, user_id)
);
 
-- Enable security
ALTER TABLE story_typography_settings ENABLE ROW LEVEL SECURITY;
 
-- Add permissions
CREATE POLICY "Users can manage their own story typography" ON story_typography_settings
  FOR ALL USING (auth.uid() = user_id);