import React, { useState, useEffect } from 'react'; import PageHeader from '../components/PageHeader'; import ContentGrid, { ContentItem } from '../components/ContentGrid'; import { Button } from '@/components/ui/button'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { useToast } from '@/hooks/use-toast'; import { Trash2, DownloadCloud, Upload } from 'lucide-react'; import { getAllFromMyList } from '../lib/storage'; interface WatchHistoryItem { type: 'movie' | 'tvshow'; title: string; lastWatched: string; progress: number; completed: boolean; } const ProfilePage = () => { const [watchHistory, setWatchHistory] = useState([]); const [myListItems, setMyListItems] = useState([]); const [activeTab, setActiveTab] = useState('history'); const { toast } = useToast(); // Load watch history from localStorage useEffect(() => { const loadWatchHistory = () => { try { const history: WatchHistoryItem[] = []; // Scan localStorage for movie progress for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); if (key?.startsWith('movie-progress-')) { const title = key.replace('movie-progress-', ''); const data = JSON.parse(localStorage.getItem(key) || '{}'); if (data && data.lastPlayed) { history.push({ type: 'movie', title, lastWatched: data.lastPlayed, progress: Math.round((data.currentTime / data.duration) * 100) || 0, completed: data.completed || false }); } } // Scan for TV show progress if (key?.startsWith('playback-')) { const showTitle = key.replace('playback-', ''); const showData = JSON.parse(localStorage.getItem(key) || '{}'); let lastEpisodeDate = ''; let lastEpisodeProgress = 0; let anyEpisodeCompleted = false; // Find the most recently watched episode Object.entries(showData).forEach(([_, value]) => { const episodeData = value as { lastPlayed: string; currentTime: number; duration: number; completed: boolean; }; if (!lastEpisodeDate || new Date(episodeData.lastPlayed) > new Date(lastEpisodeDate)) { lastEpisodeDate = episodeData.lastPlayed; lastEpisodeProgress = Math.round((episodeData.currentTime / episodeData.duration) * 100) || 0; if (episodeData.completed) anyEpisodeCompleted = true; } }); if (lastEpisodeDate) { history.push({ type: 'tvshow', title: showTitle, lastWatched: lastEpisodeDate, progress: lastEpisodeProgress, completed: anyEpisodeCompleted }); } } } // Sort by most recently watched history.sort((a, b) => new Date(b.lastWatched).getTime() - new Date(a.lastWatched).getTime() ); setWatchHistory(history); } catch (error) { console.error('Error loading watch history:', error); } }; loadWatchHistory(); }, []); // Load My List items useEffect(() => { const loadMyList = async () => { try { const items = await getAllFromMyList(); const contentItems: ContentItem[] = items.map(item => ({ type: item.type, title: item.title, image: undefined // ContentCard component will fetch the image })); setMyListItems(contentItems); } catch (error) { console.error('Error loading my list:', error); } }; loadMyList(); }, []); const clearWatchHistory = () => { // Filter localStorage keys related to watch history const keysToRemove: string[] = []; for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); if (key && (key.startsWith('movie-progress-') || key.startsWith('playback-'))) { keysToRemove.push(key); } } // Remove the keys keysToRemove.forEach(key => localStorage.removeItem(key)); // Update state setWatchHistory([]); toast({ title: "Watch History Cleared", description: "Your watch history has been successfully cleared.", }); }; const exportUserData = () => { try { const userData = { watchHistory: {}, myList: {} }; // Export all localStorage data for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); if (!key) continue; if (key.startsWith('movie-progress-') || key.startsWith('playback-')) { userData.watchHistory[key] = JSON.parse(localStorage.getItem(key) || '{}'); } if (key === 'myList') { userData.myList = JSON.parse(localStorage.getItem(key) || '[]'); } } // Create downloadable JSON const dataStr = JSON.stringify(userData, null, 2); const blob = new Blob([dataStr], { type: 'application/json' }); const url = URL.createObjectURL(blob); // Create temporary link and trigger download const a = document.createElement('a'); a.href = url; a.download = `streamflix-user-data-${new Date().toISOString().slice(0, 10)}.json`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); toast({ title: "Export Successful", description: "Your data has been exported successfully.", }); } catch (error) { console.error('Error exporting user data:', error); toast({ title: "Export Failed", description: "There was an error exporting your data.", variant: "destructive" }); } }; const renderWatchHistoryItems = (): ContentItem[] => { return watchHistory.map(item => ({ type: item.type, title: item.title, image: undefined // ContentCard will fetch the image })); }; return (
Watch History My List Settings

Watch History

{watchHistory.length > 0 && ( )}
{watchHistory.length === 0 ? (

You have no watch history yet.

Start watching movies and shows to build your history.

) : ( )}

My List

{myListItems.length === 0 ? (

You haven't added anything to your list yet.

Browse content and click the "+" icon to add titles to your list.

) : ( )}

Data Management

Export Your Data

Download your watch history and list data as a JSON file.

Import Your Data

Restore previously exported data (coming soon)

Account Settings

Account management features coming soon.

); }; export default ProfilePage;