Add collapsible Daily Puzzles management table to admin area

app/admin/page.tsx

@@ -97,6 +97,11 @@ export default function AdminPage() {
     const [playingSongId, setPlayingSongId] = useState<number | null>(null);
     const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
 
+    // Daily Puzzles state
+    const [dailyPuzzles, setDailyPuzzles] = useState<any[]>([]);
+    const [playingPuzzleId, setPlayingPuzzleId] = useState<number | null>(null);
+    const [showDailyPuzzles, setShowDailyPuzzles] = useState(false);
+
     // Check for existing auth on mount
     useEffect(() => {
         const authToken = localStorage.getItem('hoerdle_admin_auth');
@@ -104,6 +109,7 @@ export default function AdminPage() {
             setIsAuthenticated(true);
             fetchSongs();
             fetchGenres();
+            fetchDailyPuzzles();
         }
     }, []);
 
@@ -117,6 +123,7 @@ export default function AdminPage() {
             setIsAuthenticated(true);
             fetchSongs();
             fetchGenres();
+            fetchDailyPuzzles();
         } else {
             alert('Wrong password');
         }
@@ -193,6 +200,63 @@ export default function AdminPage() {
         else alert('Failed to delete special');
     };
 
+    // Daily Puzzles functions
+    const fetchDailyPuzzles = async () => {
+        const res = await fetch('/api/admin/daily-puzzles');
+        if (res.ok) {
+            const data = await res.json();
+            setDailyPuzzles(data);
+        }
+    };
+
+    const handleDeletePuzzle = async (puzzleId: number) => {
+        if (!confirm('Delete this daily puzzle? A new one will be generated automatically.')) return;
+        const res = await fetch('/api/admin/daily-puzzles', {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ puzzleId }),
+        });
+        if (res.ok) {
+            fetchDailyPuzzles();
+            alert('Puzzle deleted and regenerated successfully');
+        } else {
+            alert('Failed to delete puzzle');
+        }
+    };
+
+    const handlePlayPuzzle = (puzzle: any) => {
+        if (playingPuzzleId === puzzle.id) {
+            // Pause
+            audioElement?.pause();
+            setPlayingPuzzleId(null);
+            setAudioElement(null);
+        } else {
+            // Stop any currently playing audio
+            if (audioElement) {
+                audioElement.pause();
+                setAudioElement(null);
+            }
+
+            const audio = new Audio(puzzle.song.audioUrl);
+            audio.play()
+                .then(() => {
+                    setAudioElement(audio);
+                    setPlayingPuzzleId(puzzle.id);
+                })
+                .catch((error) => {
+                    console.error('Playback error:', error);
+                    alert(`Failed to play audio: ${error.message}`);
+                    setPlayingPuzzleId(null);
+                    setAudioElement(null);
+                });
+
+            audio.onended = () => {
+                setPlayingPuzzleId(null);
+                setAudioElement(null);
+            };
+        }
+    };
+
     const startEditSpecial = (special: Special) => {
         setEditingSpecialId(special.id);
         setEditSpecialName(special.name);
@@ -839,13 +903,10 @@ export default function AdminPage() {
                     {message && (
                         <div style={{
                             marginTop: '1rem',
-                            padding: '1rem',
+                            padding: '0.75rem',
-                            background: message.includes('❌') ? '#fee2e2' : '#d4edda',
+                            background: '#d1fae5',
-                            border: `1px solid ${message.includes('❌') ? '#ef4444' : '#28a745'}`,
+                            color: '#065f46',
-                            borderRadius: '0.25rem',
+                            borderRadius: '0.25rem'
-                            whiteSpace: 'pre-line',
-                            fontSize: '0.875rem',
-                            fontFamily: 'monospace'
                         }}>
                             {message}
                         </div>
@@ -853,6 +914,93 @@ export default function AdminPage() {
                 </form>
             </div>
 
+            {/* Today's Daily Puzzles */}
+            <div className="admin-card">
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+                    <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0 }}>
+                        Today's Daily Puzzles
+                    </h2>
+                    <button
+                        onClick={() => setShowDailyPuzzles(!showDailyPuzzles)}
+                        style={{
+                            padding: '0.5rem 1rem',
+                            background: '#f3f4f6',
+                            border: '1px solid #d1d5db',
+                            borderRadius: '0.25rem',
+                            cursor: 'pointer',
+                            fontSize: '0.875rem'
+                        }}
+                    >
+                        {showDailyPuzzles ? '▼ Hide' : '▶ Show'}
+                    </button>
+                </div>
+                {showDailyPuzzles && (dailyPuzzles.length === 0 ? (
+                    <p style={{ color: '#6b7280' }}>No daily puzzles found for today.</p>
+                ) : (
+                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                        <thead>
+                            <tr style={{ borderBottom: '2px solid #e5e7eb' }}>
+                                <th style={{ padding: '0.75rem', textAlign: 'left', fontWeight: 'bold' }}>Category</th>
+                                <th style={{ padding: '0.75rem', textAlign: 'left', fontWeight: 'bold' }}>Song</th>
+                                <th style={{ padding: '0.75rem', textAlign: 'left', fontWeight: 'bold' }}>Artist</th>
+                                <th style={{ padding: '0.75rem', textAlign: 'center', fontWeight: 'bold' }}>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {dailyPuzzles.map(puzzle => (
+                                <tr key={puzzle.id} style={{ borderBottom: '1px solid #e5e7eb' }}>
+                                    <td style={{ padding: '0.75rem' }}>
+                                        <span style={{
+                                            background: puzzle.categoryType === 'global' ? '#dbeafe' : puzzle.categoryType === 'special' ? '#fce7f3' : '#f3f4f6',
+                                            color: puzzle.categoryType === 'global' ? '#1e40af' : puzzle.categoryType === 'special' ? '#be185d' : '#374151',
+                                            padding: '0.25rem 0.5rem',
+                                            borderRadius: '0.25rem',
+                                            fontSize: '0.875rem',
+                                            fontWeight: '500'
+                                        }}>
+                                            {puzzle.category}
+                                        </span>
+                                    </td>
+                                    <td style={{ padding: '0.75rem', fontWeight: 'bold' }}>{puzzle.song.title}</td>
+                                    <td style={{ padding: '0.75rem' }}>{puzzle.song.artist}</td>
+                                    <td style={{ padding: '0.75rem', textAlign: 'center' }}>
+                                        <button
+                                            onClick={() => handlePlayPuzzle(puzzle)}
+                                            style={{
+                                                padding: '0.5rem 1rem',
+                                                marginRight: '0.5rem',
+                                                background: playingPuzzleId === puzzle.id ? '#ef4444' : '#3b82f6',
+                                                color: 'white',
+                                                border: 'none',
+                                                borderRadius: '0.25rem',
+                                                cursor: 'pointer',
+                                                fontSize: '0.875rem'
+                                            }}
+                                        >
+                                            {playingPuzzleId === puzzle.id ? '⏸ Pause' : '▶ Play'}
+                                        </button>
+                                        <button
+                                            onClick={() => handleDeletePuzzle(puzzle.id)}
+                                            style={{
+                                                padding: '0.5rem 1rem',
+                                                background: '#ef4444',
+                                                color: 'white',
+                                                border: 'none',
+                                                borderRadius: '0.25rem',
+                                                cursor: 'pointer',
+                                                fontSize: '0.875rem'
+                                            }}
+                                        >
+                                            🗑️ Delete
+                                        </button>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                ))}
+            </div>
+
             <div className="admin-card">
                 <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
                     Song Library ({songs.length} songs)

app/api/admin/daily-puzzles/route.ts

@@ -0,0 +1,105 @@
+import { NextResponse } from 'next/server';
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+export async function GET() {
+    try {
+        const today = new Date().toISOString().split('T')[0];
+
+        const dailyPuzzles = await prisma.dailyPuzzle.findMany({
+            where: {
+                date: today
+            },
+            include: {
+                song: true,
+                genre: true,
+                special: true
+            },
+            orderBy: [
+                { genreId: 'asc' },
+                { specialId: 'asc' }
+            ]
+        });
+
+        const formattedPuzzles = dailyPuzzles.map(puzzle => ({
+            id: puzzle.id,
+            date: puzzle.date,
+            category: puzzle.specialId
+                ? `★ ${puzzle.special?.name}`
+                : puzzle.genreId
+                    ? `🏷️ ${puzzle.genre?.name}`
+                    : '🌍 Global',
+            categoryType: puzzle.specialId ? 'special' : puzzle.genreId ? 'genre' : 'global',
+            genreId: puzzle.genreId,
+            specialId: puzzle.specialId,
+            song: {
+                id: puzzle.song.id,
+                title: puzzle.song.title,
+                artist: puzzle.song.artist,
+                filename: puzzle.song.filename,
+                audioUrl: `/uploads/${puzzle.song.filename}`
+            }
+        }));
+
+        return NextResponse.json(formattedPuzzles);
+    } catch (error) {
+        console.error('Error fetching daily puzzles:', error);
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    }
+}
+
+export async function DELETE(request: Request) {
+    try {
+        const { puzzleId } = await request.json();
+
+        if (!puzzleId) {
+            return NextResponse.json({ error: 'Missing puzzleId' }, { status: 400 });
+        }
+
+        // Get puzzle details before deletion
+        const puzzle = await prisma.dailyPuzzle.findUnique({
+            where: { id: Number(puzzleId) }
+        });
+
+        if (!puzzle) {
+            return NextResponse.json({ error: 'Puzzle not found' }, { status: 404 });
+        }
+
+        // Delete the puzzle
+        await prisma.dailyPuzzle.delete({
+            where: { id: Number(puzzleId) }
+        });
+
+        // Regenerate puzzle based on type
+        const { getOrCreateDailyPuzzle, getOrCreateSpecialPuzzle } = await import('@/lib/dailyPuzzle');
+
+        let newPuzzle;
+        if (puzzle.specialId) {
+            const special = await prisma.special.findUnique({
+                where: { id: puzzle.specialId }
+            });
+            if (special) {
+                newPuzzle = await getOrCreateSpecialPuzzle(special.name);
+            }
+        } else if (puzzle.genreId) {
+            const genre = await prisma.genre.findUnique({
+                where: { id: puzzle.genreId }
+            });
+            if (genre) {
+                newPuzzle = await getOrCreateDailyPuzzle(genre.name);
+            }
+        } else {
+            newPuzzle = await getOrCreateDailyPuzzle(null);
+        }
+
+        return NextResponse.json({
+            success: true,
+            message: 'Puzzle deleted and regenerated',
+            newPuzzle
+        });
+    } catch (error) {
+        console.error('Error deleting puzzle:', error);
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    }
+}