twimg-frontend/app/main/page.tsx

'use client';

import { useState, useEffect } from 'react';
import { useAuth } from '@/lib/auth';
import { apiRequest } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea';

const VotingPage = () => {
    const [video, setVideo] = useState<any>(null);
    const [videoUrl, setVideoUrl] = useState<string | null>(null); // State for the blob URL
    const [reason, setReason] = useState('');
    const [message, setMessage] = useState('');
    const [error, setError] = useState('');
    const auth = useAuth();

    // This effect runs when the `video` metadata is fetched
    useEffect(() => {
        // If there's no video metadata, do nothing.
        if (!video) {
            return;
        }

        let objectUrl: string; // To keep track of the URL for cleanup

        const fetchVideoBlob = async () => {
            try {
                // Fetch the video stream as a raw response, not JSON
                const response = await apiRequest(`/videos/${video.id}/stream`, { 
                    token: auth.token,
                    wantsJson: false // We expect a blob, not JSON
                });
                
                const blob = await response.blob();
                objectUrl = URL.createObjectURL(blob);
                setVideoUrl(objectUrl);

            } catch (err: any) {
                setError(`Failed to load video: ${err.message}`);
            }
        };

        fetchVideoBlob();

        // Cleanup function: revoke the object URL to free up memory
        return () => {
            if (objectUrl) {
                URL.revokeObjectURL(objectUrl);
            }
        };
    }, [video, auth.token]);


    const fetchNextVideo = async () => {
        // Reset all states for the new video
        setError('');
        setMessage('');
        setVideo(null);
        setVideoUrl(null); 
        setReason('');
        try {
            // This just gets the video metadata (id, person, game)
            const data = await apiRequest('/videos/vote-next', { token: auth.token });
            setVideo(data);
        } catch (err: any) {
            setError(err.message);
        }
    };

    const submitVote = async (decision: string) => {
        if (!video) return;
        setError('');
        setMessage('');
        try {
            const body = { decision, reason, recommended_game: '' };
            await apiRequest(`/videos/${video.id}/vote`, {
                method: 'POST',
                body,
                token: auth.token
            });
            setMessage(`Vote '${decision}' submitted successfully!`);
            // Reset state to prepare for the next video
            setVideo(null);
            setVideoUrl(null);
            setReason('');
        } catch (err: any) {
            setError(err.message);
        }
    };

    return (
        <div className="max-w-4xl mx-auto">
            <Card>
                <CardHeader>
                    <CardTitle>Vote on a Video</CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                    {!video && (
                        <div className="text-center">
                            <Button onClick={fetchNextVideo}>Get Next Video to Vote On</Button>
                        </div>
                    )}
                    
                    {error && <p className="text-center text-red-500">{error}</p>}
                    {message && <p className="text-center text-green-500">{message}</p>}

                    {/* The video player now uses the local blob URL */}
                    {video && videoUrl && (
                        <div className="space-y-4">
                            <div>
                                <video 
                                    key={video.id}
                                    className="w-full rounded-lg bg-black" 
                                    controls 
                                    src={videoUrl} // Use the state variable for the src
                                >
                                    Your browser does not support the video tag.
                                </video>
                            </div>
                            <div className="text-sm text-gray-600">
                                <p><strong>Person:</strong> {video.person}</p>
                                <p><strong>Game:</strong> {video.game || 'N/A'}</p>
                            </div>
                            <div className="space-y-2">
                                <label htmlFor="reason">Reason (Optional)</label>
                                <Textarea id="reason" value={reason} onChange={(e) => setReason(e.target.value)} />
                            </div>
                            <div className="flex space-x-4">
                                <Button className="w-full bg-green-600 hover:bg-green-700" onClick={() => submitVote('approve')}>Approve</Button>
                                <Button className="w-full bg-red-600 hover:bg-red-700" onClick={() => submitVote('reject')}>Reject</Button>
                            </div>
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    );
};

export default VotingPage;