import React, { useState, useEffect, useMemo } from 'react'; import { Home, Library, Settings, Play, Search, Bell, MoreVertical, X, Maximize, SkipForward, Volume2, Monitor, Check, Clock, List, Filter, User, Download, Server } from 'lucide-react'; // --- Mock Data --- const MOCK_ANIME = [ { id: 1, title: "Cyberpunk: Neon Future", cover: "https://dummyimage.com/300x450/1a1a2e/e94560&text=Cyberpunk", banner: "https://dummyimage.com/1200x400/1a1a2e/e94560&text=Banner", status: "Watching", progress: 4, totalEpisodes: 12, score: 8.5, studio: "Trigger", season: "FALL 2024", synopsis: "In a dystopic future where technology reigns supreme, a young hacker discovers a conspiracy that threatens to rewrite reality itself.", episodes: Array.from({ length: 12 }, (_, i) => ({ id: i + 1, title: `Episode ${i + 1}`, duration: "24m", image: `https://dummyimage.com/300x170/1a1a2e/e94560&text=Ep+${i + 1}` })) }, { id: 2, title: "Celestial Blade", cover: "https://dummyimage.com/300x450/16213e/0f3460&text=Blade", banner: "https://dummyimage.com/1200x400/16213e/0f3460&text=Banner", status: "Completed", progress: 24, totalEpisodes: 24, score: 9.2, studio: "Ufotable", season: "WINTER 2023", synopsis: "A young swordsman must master the arts of the celestial blade to defeat the demons encroaching upon the human realm.", episodes: Array.from({ length: 24 }, (_, i) => ({ id: i + 1, title: `Chapter ${i + 1}`, duration: "23m", image: `https://dummyimage.com/300x170/16213e/0f3460&text=Ch+${i + 1}` })) }, { id: 3, title: "Slice of Coffee", cover: "https://dummyimage.com/300x450/4e342e/d7ccc8&text=Coffee", banner: "https://dummyimage.com/1200x400/4e342e/d7ccc8&text=Banner", status: "Plan to Watch", progress: 0, totalEpisodes: 13, score: null, studio: "Kyoto Animation", season: "SPRING 2024", synopsis: "A relaxing tale of a barista who solves the minor problems of her customers while brewing the perfect cup of coffee.", episodes: Array.from({ length: 13 }, (_, i) => ({ id: i + 1, title: `Order ${i + 1}`, duration: "24m", image: `https://dummyimage.com/300x170/4e342e/d7ccc8&text=Order+${i + 1}` })) }, { id: 4, title: "Mecha Horizon", cover: "https://dummyimage.com/300x450/212121/00e5ff&text=Mecha", banner: "https://dummyimage.com/1200x400/212121/00e5ff&text=Banner", status: "Watching", progress: 8, totalEpisodes: 25, score: 7.8, studio: "Sunrise", season: "SUMMER 2024", synopsis: "Humanity has migrated to the stars, but war follows them. Pilots link with giant mechs to defend their new home.", episodes: Array.from({ length: 25 }, (_, i) => ({ id: i + 1, title: `Sortie ${i + 1}`, duration: "24m", image: `https://dummyimage.com/300x170/212121/00e5ff&text=Sortie+${i + 1}` })) }, { id: 5, title: "Dungeon Chef", cover: "https://dummyimage.com/300x450/1b5e20/a5d6a7&text=Chef", banner: "https://dummyimage.com/1200x400/1b5e20/a5d6a7&text=Banner", status: "Paused", progress: 3, totalEpisodes: 12, score: 7.0, studio: "MAPPA", season: "WINTER 2024", synopsis: "Cooking monsters has never been this dangerous—or delicious. A party of adventurers eats their way through a dungeon.", episodes: Array.from({ length: 12 }, (_, i) => ({ id: i + 1, title: `Dish ${i + 1}`, duration: "24m", image: `https://dummyimage.com/300x170/1b5e20/a5d6a7&text=Dish+${i + 1}` })) } ]; // --- Components --- const Badge = ({ children, color = "blue" }) => { const colors = { blue: "bg-blue-500/10 text-blue-400 border-blue-500/20", green: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20", purple: "bg-purple-500/10 text-purple-400 border-purple-500/20", orange: "bg-orange-500/10 text-orange-400 border-orange-500/20", gray: "bg-gray-700/50 text-gray-400 border-gray-600/50" }; return ( {children} ); }; const AnimeCard = ({ anime, onClick }) => (

onClick(anime)} className="group relative flex flex-col cursor-pointer transition-transform duration-200 hover:-translate-y-1" >

{anime.status === 'Watching' && (

)}

{anime.status === 'Watching' && EP {anime.progress + 1}}

{anime.title}

{anime.season} • {anime.studio}

); const PlayerOverlay = ({ anime, episode, onClose }) => { const [playing, setPlaying] = useState(false); const [progress, setProgress] = useState(0); useEffect(() => { // Simulate playback progress let interval; if (playing) { interval = setInterval(() => { setProgress(p => (p >= 100 ? 100 : p + 0.5)); }, 1000); } return () => clearInterval(interval); }, [playing]); return (

{/* Player Header */}

{anime.title}

{episode.title}

{/* Video Mockup */}

{/* Fake video noise/gradient */}

{/* Controls Overlay */}

{/* Progress Bar */}

{Math.floor(progress * 0.24)}:00 / 24:00

); }; const AnimeDetail = ({ anime, onClose, onPlay }) => { if (!anime) return null; return (

{/* Header Image */}

{anime.season} {anime.studio} {anime.score && ★ {anime.score}}

{anime.title}

{/* Content */}

{/* Main Info */}

{/* Synopsis */}

{anime.synopsis}

{/* Actions */}

{/* Episodes */}

Episodes

{anime.episodes.map((ep) => (

onPlay(anime, ep)} className="group flex items-center gap-4 p-3 rounded-lg hover:bg-gray-800/50 cursor-pointer transition-colors border border-transparent hover:border-gray-700" >

{anime.status === 'Watching' && ep.id <= anime.progress && (

WATCHED

)}

{ep.title}

{ep.duration}

))}

{/* Sidebar Stats */}

Details

Format TV

Episodes {anime.totalEpisodes}

Status {anime.status}

Source Original

); }; // --- Main Layout Components --- const Sidebar = ({ activeTab, onTabChange }) => { const tabs = [ { id: 'home', icon: Home, label: 'Home' }, { id: 'library', icon: Library, label: 'Library' }, { id: 'schedule', icon: Clock, label: 'Schedule' }, { id: 'settings', icon: Settings, label: 'Settings' }, ]; return (

{/* Logo Area */}

Seanime

{/* Nav */}

{tabs.map((tab) => { const Icon = tab.icon; const isActive = activeTab === tab.id; return ( ); })}

{/* Server Status - Desktop Footer */}

Server Online

v2.4.0 • Local

); }; const TopBar = () => (

5rahim

Admin

); // --- Pages --- const Dashboard = ({ onSelectAnime }) => { const watching = MOCK_ANIME.filter(a => a.status === 'Watching'); return (

{/* Continue Watching Section */}

Continue Watching

{watching.map(anime => (

onSelectAnime(anime)} className="group relative h-48 rounded-xl overflow-hidden cursor-pointer border border-gray-800 hover:border-purple-500/50 transition-all" >

Next: Episode {anime.progress + 1}

{anime.title}

))}

{/* Recently Added Section */}

Recently Added

{MOCK_ANIME.slice(0, 5).map(anime => ( ))}

); }; const LibraryPage = ({ onSelectAnime }) => { const [filter, setFilter] = useState('All'); const filters = ['All', 'Watching', 'Completed', 'Plan to Watch', 'Paused']; const filteredAnime = filter === 'All' ? MOCK_ANIME : MOCK_ANIME.filter(a => a.status === filter); return (

Library

{filters.map(f => ( ))}

{filteredAnime.map(anime => ( ))}

); }; const SettingsPage = () => (

Settings

Server Configuration

Local Server Port

The port used by the Seanime backend

Auto-Scan Library

Scan for new files on startup

Player Preferences

Default Player

Choose playback engine

Auto-Play Next Episode

); // --- App Root --- export default function SeanimeApp() { const [activeTab, setActiveTab] = useState('home'); const [selectedAnime, setSelectedAnime] = useState(null); const [playingEpisode, setPlayingEpisode] = useState(null); const handlePlay = (anime, episode) => { // If no specific episode, find first unwatched or first const ep = episode || anime.episodes[0]; setPlayingEpisode({ anime, episode: ep }); }; return (

{/* Layout */}

{activeTab === 'home' && } {activeTab === 'library' && } {activeTab === 'settings' && } {activeTab === 'schedule' && (

Schedule View Placeholder

)}

{/* Modals & Overlays */} {selectedAnime && ( setSelectedAnime(null)} onPlay={handlePlay} /> )} {playingEpisode && ( setPlayingEpisode(null)} /> )}

); }

Seanime Web Interface