import { useState, useEffect, useCallback } from 'react'; import type { Settings } from '../types'; interface UseContextPreviewResult { preview: string; isLoading: boolean; error: string | null; refresh: () => Promise; projects: string[]; selectedProject: string | null; setSelectedProject: (project: string) => void; } export function useContextPreview(settings: Settings): UseContextPreviewResult { const [preview, setPreview] = useState(''); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [projects, setProjects] = useState([]); const [selectedProject, setSelectedProject] = useState(null); // Fetch projects on mount useEffect(() => { async function fetchProjects() { try { const response = await fetch('/api/projects'); const data = await response.json(); if (data.projects && data.projects.length > 0) { setProjects(data.projects); setSelectedProject(data.projects[0]); // Default to first project } } catch (err) { console.error('Failed to fetch projects:', err); } } fetchProjects(); }, []); const refresh = useCallback(async () => { if (!selectedProject) { setPreview('No project selected'); return; } setIsLoading(true); setError(null); try { const params = new URLSearchParams({ project: selectedProject }); const response = await fetch(`/api/context/preview?${params}`); const text = await response.text(); if (response.ok) { setPreview(text); } else { setError('Failed to load preview'); } } catch (err) { console.warn('Failed to load context preview:', err); setError((err as Error).message); } finally { setIsLoading(false); } }, [selectedProject]); // Debounced refresh when settings or selectedProject change useEffect(() => { const timeout = setTimeout(() => { refresh(); }, 300); return () => clearTimeout(timeout); }, [settings, refresh]); return { preview, isLoading, error, refresh, projects, selectedProject, setSelectedProject }; }