Refactor questions/[id].tsx - 527-line monolith combining 8 responsibilities

Issue

src/pages/questions/[id].tsx is 527 lines of JSX + TypeScript combining:

• Data fetching (Firestore getDoc for problem)
• Code execution (API call to execute code)
• Codeforces submission verification
• AI Hint generation and display
• Comment section
• Streak tracking
• State management for 15+ useState hooks

Problems

1. Hard to test - This component cannot be unit tested in isolation
2. Performance - Every state change re-renders the entire page
3. Maintainability - Adding a new feature (like hints) required touching 400+ lines of existing code

Suggestion

Extract into composable hooks and components:

• useProblem(questionId) - Fetches and caches problem data
• useCodeExecution(language, code, testCases) - handles run/submit
• useAiHints(questionId) - handles hint fetching and coin deduction
• <ProblemDescription> - Left panel with problem text
• <CodeEditor> - IDE-like component
• <SubmissionHistory> - Past submissions list
• <CommentsSection> - Threaded discussion