<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	import MediaPlayer from './MediaPlayer.svelte';
	import SoundCloudPlayer from './SoundCloudPlayer.svelte';
	import SpotifyPlayer from './SpotifyPlayer.svelte';
	import { onDownloadProgress, type ContentPayload, type DownloadProgress } from '$lib/socket';

	interface Props {
		content: ContentPayload | null;
		isLoading?: boolean;
		hideIdle?: boolean;
		blocked?: boolean;
		queuePosition?: number;
		queueTotal?: number;
	}

	let { content, isLoading = false, hideIdle = false, blocked = false, queuePosition = -1, queueTotal = 0 }: Props = $props();

	// Video dimension tracking for vertical video detection
	let videoWidth = $state(0);
	let videoHeight = $state(0);
	let isVertical = $derived(videoHeight > videoWidth * 1.2 && videoWidth > 0);

	// Playback progress tracking
	let currentTime = $state(0);
	let duration = $state(0);
	let progress = $derived(duration > 0 ? (currentTime / duration) * 100 : 0);

	// Format time as M:SS
	function formatTime(seconds: number): string {
		if (!seconds || !isFinite(seconds)) return '0:00';
		const mins = Math.floor(seconds / 60);
		const secs = Math.floor(seconds % 60);
		return `${mins}:${secs.toString().padStart(2, '0')}`;
	}

	// Callbacks for MediaPlayer
	function handleVideoMeta(width: number, height: number) {
		videoWidth = width;
		videoHeight = height;
	}

	function handleTimeUpdate(time: number, dur: number) {
		currentTime = time;
		duration = dur;
	}

	// Reset video state when content changes
	$effect(() => {
		if (content) {
			videoWidth = 0;
			videoHeight = 0;
			currentTime = 0;
			duration = 0;
		}
	});

	// Download progress state
	let downloadProgress = $state<DownloadProgress | null>(null);
	let unsubProgress: (() => void) | null = null;

	// Clock state
	let time = $state('');
	let date = $state('');
	let greeting = $state('');

	onMount(() => {
		function updateTime() {
			const now = new Date();
			time = now.toLocaleTimeString('en-US', {
				hour: 'numeric',
				minute: '2-digit',
				hour12: true
			}).replace(' ', '');
			date = now.toLocaleDateString('en-US', {
				weekday: 'long',
				month: 'long',
				day: 'numeric'
			});
			const hour = now.getHours();
			if (hour < 12) greeting = 'Good morning';
			else if (hour < 17) greeting = 'Good afternoon';
			else greeting = 'Good evening';
		}

		updateTime();
		const interval = setInterval(updateTime, 1000);

		// Subscribe to download progress
		unsubProgress = onDownloadProgress((progress) => {
			downloadProgress = progress;
			// Clear progress when content starts playing or on error
			if (progress.status === 'ready' || progress.status === 'error') {
				setTimeout(() => {
					downloadProgress = null;
				}, 500);
			}
		});

		return () => clearInterval(interval);
	});

	onDestroy(() => {
		unsubProgress?.();
	});

	// Clear download progress when content arrives
	$effect(() => {
		if (content) {
			downloadProgress = null;
		}
	});

	// Platform header auto-hide logic
	let platformHeaderVisible = $state(true);
	let hideHeaderTimeout: ReturnType<typeof setTimeout> | null = null;

	function showPlatformHeader() {
		platformHeaderVisible = true;
		// Clear existing timeout
		if (hideHeaderTimeout) {
			clearTimeout(hideHeaderTimeout);
		}
		// Set new timeout to hide after 4 seconds
		hideHeaderTimeout = setTimeout(() => {
			platformHeaderVisible = false;
		}, 4000);
	}

	// Show header when content changes, then auto-hide
	$effect(() => {
		if (content && (content.type === 'instagram' || content.type === 'twitter' || content.type === 'tiktok' ||
			content.type === 'reddit' || content.type === 'facebook' || content.type === 'twitch' ||
			content.type === 'tumblr' || content.type === 'pinterest' || content.type === 'streamable' ||
			content.type === 'dailymotion' || content.type === 'bilibili')) {
			showPlatformHeader();
		}
	});

	// Clean up timeout on destroy
	onDestroy(() => {
		if (hideHeaderTimeout) {
			clearTimeout(hideHeaderTimeout);
		}
	});
</script>

<!-- Platform icon snippet for reuse -->
{#snippet platformIcon(type: string)}
	{#if type === 'instagram'}
		<svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
	{:else if type === 'twitter'}
		<svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
	{:else if type === 'tiktok'}
		<svg viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64 2.93 2.93 0 01.88.13V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005 20.1a6.34 6.34 0 0010.86-4.43v-7a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1-.1z"/></svg>
	{:else if type === 'reddit'}
		<svg viewBox="0 0 24 24"><path d="M12 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 01-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 01.042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 014.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 01.14-.197.35.35 0 01.238-.042l2.906.617a1.214 1.214 0 011.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 00-.231.094.33.33 0 000 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 00.029-.463.33.33 0 00-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 00-.232-.095z"/></svg>
	{:else if type === 'twitch'}
		<svg viewBox="0 0 24 24"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>
	{:else if type === 'facebook'}
		<svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
	{:else if type === 'tumblr'}
		<svg viewBox="0 0 24 24"><path d="M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178z"/></svg>
	{:else if type === 'pinterest'}
		<svg viewBox="0 0 24 24"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026z"/></svg>
	{:else if type === 'streamable'}
		<svg viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-2 16.5v-9l7 4.5-7 4.5z"/></svg>
	{:else if type === 'dailymotion'}
		<svg viewBox="0 0 24 24"><path d="M12.3 0H24v12.4c0 3.8-1 6.7-3 8.8-2 2.2-4.7 3.2-8.1 3.2-2.1 0-4-.4-5.7-1.3-1.7-.9-3-2.1-3.9-3.7-.9-1.6-1.3-3.4-1.3-5.5 0-2.2.5-4.1 1.5-5.8 1-1.7 2.3-2.9 4-3.8 1.7-.9 3.5-1.3 5.5-1.3 2.3 0 4.3.7 5.9 2v-2c0-2-.5-3.4-1.5-4.2s-2.6-1.2-4.8-1.2h-1.3V0h1zm-.6 20.4c1.8 0 3.2-.6 4.2-1.8 1-1.2 1.5-2.7 1.5-4.5 0-1.9-.5-3.4-1.5-4.6-1-1.2-2.4-1.8-4.2-1.8-1.8 0-3.2.6-4.2 1.8-1 1.2-1.5 2.7-1.5 4.6 0 1.8.5 3.3 1.5 4.5 1 1.2 2.4 1.8 4.2 1.8z"/></svg>
	{:else if type === 'bilibili'}
		<svg viewBox="0 0 24 24"><path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.659.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373z"/></svg>
	{:else}
		<svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
	{/if}
{/snippet}

<div class="theater" class:blocked>
	<!-- Blurred backdrop from content thumbnail -->
	{#if content?.thumbnail}
		<div class="theater-backdrop" style="background-image: url({content.thumbnail})"></div>
	{/if}
	<div class="theater-gradient"></div>
	<div class="theater-noise"></div>

	<div class="content-area">
		{#if !content && downloadProgress}
			<!-- Download progress with thumbnail preview (only when nothing is playing) -->
			<div class="download-progress">
				<img src={downloadProgress.thumbnail} alt="" class="download-thumbnail" />
				<div class="download-info">
					<h2 class="download-title">{downloadProgress.title}</h2>
					<div class="progress-bar-container">
						<div class="progress-bar" style="width: {downloadProgress.percent}%"></div>
					</div>
					<p class="download-status">
						{#if downloadProgress.status === 'downloading'}
							Downloading... {downloadProgress.percent}%
						{:else if downloadProgress.status === 'processing'}
							Processing video...
						{:else}
							Ready
						{/if}
					</p>
				</div>
			</div>
		{:else if !content && isLoading}
			<!-- Loading spinner only when nothing is playing -->
			<div class="loading-state">
				<div class="loading-spinner"></div>
				<p class="loading-text">Loading...</p>
			</div>
		{:else if !content && !hideIdle}
			<div class="ambient-idle">
				<!-- Animated gradient orbs -->
				<div class="orb orb-1"></div>
				<div class="orb orb-2"></div>
				<div class="orb orb-3"></div>

				<!-- Main content -->
				<div class="idle-content">
					<p class="idle-greeting">{greeting}</p>
					<h1 class="idle-time">{time}</h1>
					<p class="idle-date">{date}</p>
				</div>

				<!-- Subtle branding -->
				<div class="idle-brand">
					<svg viewBox="0 0 24 24">
						<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
					</svg>
					<span>Droppy</span>
				</div>
			</div>
		{:else if !content}
			<!-- Hidden idle state - render nothing -->
		{:else if content.type === 'error'}
			<div class="error-state">
				<div class="error-icon">!</div>
				<h2 class="error-title">Failed to load</h2>
				<p class="error-message">{content.error || 'Unknown error'}</p>
			</div>
		{:else if content.type === 'image'}
			<div class="image-display">
				<img src={content.url} alt={content.title || 'Image'} />
			</div>
		{:else if content.type === 'video'}
			<MediaPlayer src={content.url} type="video" mimeType={content.mimeType} sponsorSegments={content.sponsorSegments} />
		{:else if content.type === 'audio'}
			<div class="now-playing audio-theme">
				<div class="album-container">
					{#if content.thumbnail}
						<div class="album-glow" style="background-image: url({content.thumbnail})"></div>
						<img src={content.thumbnail} alt="Album art" class="album-art" />
					{:else}
						<div class="album-placeholder">
							<svg viewBox="0 0 24 24">
								<path d="M9 18V5l12-2v13"/>
								<circle cx="6" cy="18" r="3"/>
								<circle cx="18" cy="16" r="3"/>
							</svg>
						</div>
					{/if}
				</div>
				<div class="track-info">
					<h1 class="track-title">{content.title || 'Now Playing'}</h1>
					{#if content.artistName}
						<p class="track-artist">{content.artistName}</p>
					{/if}
				</div>
				<div class="audio-player-wrapper">
					<MediaPlayer src={content.url} type="audio" mimeType={content.mimeType} />
				</div>
			</div>
		{:else if content.type === 'youtube'}
			<iframe
				src={content.url}
				title={content.title || 'YouTube'}
				frameborder="0"
				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
				allowfullscreen
				class="youtube-embed"
			></iframe>
		{:else if content.type === 'spotify'}
			{#key content.url}
				<SpotifyPlayer
					embedUrl={content.embedUrl}
					audioUrl={content.audioUrl}
					title={content.title || 'Unknown Track'}
					artistName={content.artistName}
					thumbnail={content.thumbnail}
				/>
			{/key}
		{:else if content.type === 'soundcloud'}
			{#key content.url}
				<SoundCloudPlayer
					src={content.url}
					title={content.title || 'Unknown Track'}
					artistName={content.artistName}
					thumbnail={content.thumbnail}
					duration={content.duration}
				/>
			{/key}
		{:else if content.type === 'instagram' || content.type === 'twitter' || content.type === 'tiktok' || content.type === 'reddit' || content.type === 'facebook' || content.type === 'twitch' || content.type === 'tumblr' || content.type === 'pinterest' || content.type === 'streamable' || content.type === 'dailymotion' || content.type === 'bilibili'}
			<!-- Cobalt-powered platforms - TV native display with vertical video support -->
			<!-- svelte-ignore a11y_no_static_element_interactions -->
			{#key content?.url}
			<div
				class="platform-theater {content.type}"
				class:vertical={isVertical && content.mediaType === 'video'}
				onmousemove={showPlatformHeader}
				ontouchstart={showPlatformHeader}
			>
				<!-- Video section -->
				<div class="video-section">
					<!-- Platform header - only show on horizontal videos -->
					{#if !isVertical || content.mediaType !== 'video'}
						<div class="platform-header" class:hidden={!platformHeaderVisible}>
							<div class="platform-badge {content.type}">
								{@render platformIcon(content.type)}
							</div>
							<div class="platform-title-area">
								<h1 class="platform-title">{content.title || 'Media'}</h1>
								<p class="platform-label">{content.platform || content.type}</p>
							</div>
						</div>
					{/if}

					<!-- Video or Image content -->
					<div class="platform-media">
						{#if content.mediaType === 'video'}
							<MediaPlayer
								src={content.url}
								type="video"
								mimeType={content.mimeType}
								onmeta={handleVideoMeta}
								ontimeupdate={handleTimeUpdate}
							/>
						{:else}
							<img src={content.url} alt={content.title || 'Image'} class="platform-image-full" />
						{/if}
					</div>

					<!-- Bottom progress bar for horizontal videos -->
					{#if !isVertical && content.mediaType === 'video' && duration > 0}
						<div class="bottom-progress-bar">
							<div class="progress-fill" style="width: {progress}%"></div>
						</div>
					{/if}
				</div>

				<!-- Info panel for vertical videos -->
				{#if isVertical && content.mediaType === 'video'}
					<div class="info-panel">
						<!-- Large platform badge -->
						<div class="info-badge {content.type}">
							{@render platformIcon(content.type)}
						</div>

						<!-- Platform name -->
						<p class="info-platform">{content.platform || content.type}</p>

						<!-- Creator handle -->
						{#if content.artistName || content.title}
							<h2 class="info-creator">
								{#if content.artistName}
									@{content.artistName.replace(/^@/, '')}
								{:else if content.title?.includes('@')}
									{content.title.match(/@[\w.]+/)?.[0] || content.title}
								{:else}
									{content.title}
								{/if}
							</h2>
						{/if}

						<!-- Progress bar -->
						{#if duration > 0}
							<div class="info-progress">
								<div class="info-progress-bar">
									<div class="info-progress-fill" style="width: {progress}%"></div>
								</div>
								<div class="info-time">
									<span class="info-time-current">{formatTime(currentTime)}</span>
									<span class="info-time-separator">/</span>
									<span class="info-time-duration">{formatTime(duration)}</span>
								</div>
							</div>
						{/if}

						<!-- Queue position -->
						{#if queueTotal > 1}
							<div class="info-queue">
								<span class="info-queue-text">{queuePosition + 1} of {queueTotal}</span>
								<div class="info-queue-dots">
									{#each Array(Math.min(queueTotal, 10)) as _, i}
										<span
											class="queue-dot"
											class:current={i === queuePosition}
											class:played={i < queuePosition}
										></span>
									{/each}
									{#if queueTotal > 10}
										<span class="queue-more">+{queueTotal - 10}</span>
									{/if}
								</div>
							</div>
						{/if}
					</div>
				{/if}
			</div>
			{/key}
		{:else if content.type === 'embed'}
			<iframe
				src={content.url}
				title="Embedded content"
				frameborder="0"
				allow="autoplay; fullscreen"
				allowfullscreen
				class="generic-embed"
			></iframe>
		{/if}
	</div>

</div>

<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Outfit:wght@400;600;700;800&display=swap');

	.theater {
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		color: #fff;
	}

	.theater.blocked {
		pointer-events: none;
	}

	/* Blurred background layer */
	.theater-backdrop {
		position: absolute;
		inset: -100px;
		background-size: cover;
		background-position: center;
		filter: blur(80px) saturate(1.4) brightness(0.4);
		transform: scale(1.2);
		animation: breathe 8s ease-in-out infinite;
	}

	@keyframes breathe {
		0%, 100% { transform: scale(1.2); opacity: 0.8; }
		50% { transform: scale(1.25); opacity: 0.9; }
	}

	/* Gradient overlay */
	.theater-gradient {
		position: absolute;
		inset: 0;
		background:
			radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 100%),
			linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.5) 100%);
	}

	/* Noise texture */
	.theater-noise {
		position: absolute;
		inset: 0;
		opacity: 0.03;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
		pointer-events: none;
	}

	.content-area {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Loading state */
	.loading-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
	}

	.loading-spinner {
		width: 48px;
		height: 48px;
		border: 3px solid rgba(255,255,255,0.1);
		border-top-color: #FF6B35;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		to { transform: rotate(360deg); }
	}

	.loading-text {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: 1rem;
		color: rgba(255,255,255,0.4);
	}

	/* Download Progress */
	.download-progress {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
		padding: 3rem;
		text-align: center;
	}

	.download-thumbnail {
		width: min(400px, 60vw);
		aspect-ratio: 16/9;
		object-fit: cover;
		border-radius: 16px;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	}

	.download-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		max-width: 500px;
	}

	.download-title {
		font-size: clamp(1.5rem, 4vw, 2.5rem);
		font-weight: 600;
		line-height: 1.2;
		margin: 0;
		color: #fff;
	}

	.progress-bar-container {
		width: 100%;
		max-width: 400px;
		height: 6px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 3px;
		overflow: hidden;
	}

	.progress-bar {
		height: 100%;
		background: linear-gradient(90deg, #FF6B35, #ff8f5a);
		border-radius: 3px;
		transition: width 0.3s ease;
	}

	.download-status {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: 1.1rem;
		color: rgba(255, 255, 255, 0.6);
		margin: 0;
	}

	/* Ambient Idle Screen */
	.ambient-idle {
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		background: linear-gradient(135deg, #0a0a0f 0%, #0d1117 50%, #0a0f14 100%);
	}

	/* Floating gradient orbs */
	.orb {
		position: absolute;
		border-radius: 50%;
		filter: blur(80px);
		opacity: 0.4;
		will-change: transform;
	}

	.orb-1 {
		width: 60vmax;
		height: 60vmax;
		background: radial-gradient(circle, #ff6b3520 0%, #ff3d0010 50%, transparent 70%);
		top: -20%;
		left: -10%;
		animation: drift1 25s ease-in-out infinite;
	}

	.orb-2 {
		width: 50vmax;
		height: 50vmax;
		background: radial-gradient(circle, #6366f118 0%, #4f46e510 50%, transparent 70%);
		bottom: -15%;
		right: -10%;
		animation: drift2 30s ease-in-out infinite;
	}

	.orb-3 {
		width: 40vmax;
		height: 40vmax;
		background: radial-gradient(circle, #0ea5e915 0%, #06b6d410 50%, transparent 70%);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		animation: drift3 20s ease-in-out infinite;
	}

	@keyframes drift1 {
		0%, 100% { transform: translate(0, 0) scale(1); }
		25% { transform: translate(5%, 10%) scale(1.05); }
		50% { transform: translate(10%, 5%) scale(1); }
		75% { transform: translate(3%, -5%) scale(0.95); }
	}

	@keyframes drift2 {
		0%, 100% { transform: translate(0, 0) scale(1); }
		25% { transform: translate(-8%, -5%) scale(0.95); }
		50% { transform: translate(-5%, 8%) scale(1.05); }
		75% { transform: translate(5%, 3%) scale(1); }
	}

	@keyframes drift3 {
		0%, 100% { transform: translate(-50%, -50%) scale(1); }
		33% { transform: translate(-45%, -55%) scale(1.1); }
		66% { transform: translate(-55%, -45%) scale(0.9); }
	}

	/* Main idle content */
	.idle-content {
		position: relative;
		z-index: 1;
		text-align: center;
		animation: fadeIn 1s ease-out;
	}

	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(20px); }
		to { opacity: 1; transform: translateY(0); }
	}

	.idle-greeting {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: clamp(1rem, 2.5vmin, 1.5rem);
		font-weight: 300;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: rgba(255,255,255,0.35);
		margin: 0 0 1rem;
	}

	.idle-time {
		font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: clamp(6rem, 18vmin, 14rem);
		font-weight: 200;
		letter-spacing: -0.04em;
		line-height: 1;
		margin: 0;
		color: rgba(255,255,255,0.9);
		text-shadow: 0 0 80px rgba(255,255,255,0.1);
	}

	.idle-date {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: clamp(1.2rem, 3vmin, 2rem);
		font-weight: 400;
		color: rgba(255,255,255,0.4);
		margin: 1.5rem 0 0;
		letter-spacing: 0.02em;
	}

	/* Subtle branding */
	.idle-brand {
		position: fixed;
		bottom: 3rem;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		gap: 0.75rem;
		opacity: 0.15;
		transition: opacity 0.3s ease;
		z-index: 1;
	}

	.idle-brand:hover {
		opacity: 0.3;
	}

	.idle-brand svg {
		width: 24px;
		height: 24px;
		fill: #FF6B35;
	}

	.idle-brand span {
		font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: 1rem;
		font-weight: 600;
		color: #fff;
		letter-spacing: 0.05em;
	}

	/* Error state */
	.error-state {
		text-align: center;
		padding: 2rem;
	}

	.error-icon {
		width: 64px;
		height: 64px;
		margin: 0 auto 1.5rem;
		background: #ef4444;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2rem;
		font-weight: 700;
	}

	.error-title {
		font-size: 1.5rem;
		margin: 0 0 0.5rem;
	}

	.error-message {
		color: rgba(255,255,255,0.5);
		max-width: 400px;
	}

	/* Image display */
	.image-display {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-display img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	/* Now Playing (Spotify/SoundCloud/Audio) */
	.now-playing {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 3rem;
		max-width: 100vw;
	}

	/* Album artwork */
	.album-container {
		position: relative;
		margin-bottom: 3rem;
		animation: float 6s ease-in-out infinite;
	}

	@keyframes float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-10px); }
	}

	.album-art {
		width: clamp(280px, 35vmin, 420px);
		height: clamp(280px, 35vmin, 420px);
		border-radius: 8px;
		box-shadow:
			0 8px 32px rgba(0,0,0,0.5),
			0 32px 64px rgba(0,0,0,0.4),
			0 0 0 1px rgba(255,255,255,0.05);
		object-fit: cover;
	}

	/* Glow effect behind album */
	.album-glow {
		position: absolute;
		inset: -20%;
		background: inherit;
		filter: blur(60px) saturate(2);
		opacity: 0.5;
		z-index: -1;
		border-radius: 50%;
	}

	/* Platform badge */
	.platform-badge {
		position: absolute;
		bottom: -16px;
		right: -16px;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: pulse-badge 2s ease-in-out infinite;
	}

	.platform-badge.spotify {
		background: #1DB954;
		box-shadow: 0 4px 20px rgba(29, 185, 84, 0.4);
	}

	.platform-badge.soundcloud {
		background: #FF5500;
		box-shadow: 0 4px 20px rgba(255, 85, 0, 0.4);
	}

	@keyframes pulse-badge {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.05); }
	}

	.platform-badge svg {
		width: 32px;
		height: 32px;
		fill: #000;
	}

	.platform-badge.soundcloud svg {
		fill: #fff;
	}

	/* Track info - TV readable sizes */
	.track-info {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		margin-bottom: 2.5rem;
	}

	.track-title {
		font-size: clamp(2.5rem, 6vmin, 4.5rem);
		font-weight: 800;
		letter-spacing: -0.02em;
		line-height: 1.1;
		text-shadow: 0 4px 30px rgba(0,0,0,0.5);
		margin: 0;
	}

	.track-artist {
		font-size: clamp(1.5rem, 3.5vmin, 2.5rem);
		font-weight: 400;
		color: rgba(255,255,255,0.7);
		letter-spacing: 0.02em;
		margin: 0;
	}

	.track-album {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: clamp(0.9rem, 2vmin, 1.25rem);
		font-weight: 300;
		color: rgba(255,255,255,0.4);
		text-transform: uppercase;
		letter-spacing: 0.15em;
		margin-top: 0.5rem;
	}

	/* Embedded player */
	.player-container {
		width: min(90vw, 400px);
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 8px 32px rgba(0,0,0,0.3);
	}

	.player-container iframe {
		display: block;
		width: 100%;
		height: 152px;
		border: none;
	}

	/* Audio theme */
	.audio-theme {
		background: linear-gradient(135deg, rgba(255,107,53,0.1) 0%, transparent 50%);
	}

	.album-placeholder {
		width: clamp(280px, 35vmin, 420px);
		height: clamp(280px, 35vmin, 420px);
		border-radius: 8px;
		background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow:
			0 8px 32px rgba(0,0,0,0.5),
			0 32px 64px rgba(0,0,0,0.4),
			0 0 0 1px rgba(255,255,255,0.05);
	}

	.album-placeholder svg {
		width: 40%;
		height: 40%;
		stroke: #FF6B35;
		fill: none;
		stroke-width: 1.5;
		opacity: 0.6;
	}

	.audio-player-wrapper {
		width: min(90vw, 500px);
		margin-top: 1rem;
	}

	/* YouTube embed */
	.youtube-embed {
		width: 100%;
		height: 100%;
		border: none;
	}

	/* Generic embed */
	.generic-embed {
		width: 100%;
		height: 100%;
		border: none;
		background: #fff;
	}

	/* Platform Theater - TV native layout */
	.platform-theater {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	/* Platform header - top bar with badge and title */
	.platform-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		gap: clamp(1rem, 2vw, 1.5rem);
		padding: clamp(1.5rem, 3vw, 2.5rem);
		background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
		animation: slideDown 0.5s ease-out;
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.platform-header.hidden {
		opacity: 0;
		transform: translateY(-20px);
		pointer-events: none;
	}

	@keyframes slideDown {
		from { opacity: 0; transform: translateY(-20px); }
		to { opacity: 1; transform: translateY(0); }
	}

	/* Platform badge */
	.platform-badge {
		width: clamp(48px, 6vmin, 64px);
		height: clamp(48px, 6vmin, 64px);
		border-radius: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.platform-badge svg {
		width: 60%;
		height: 60%;
		fill: #fff;
	}

	/* Platform-specific badge colors */
	.platform-badge.instagram {
		background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
		box-shadow: 0 4px 24px rgba(225, 48, 108, 0.5);
	}

	.platform-badge.twitter {
		background: #000;
		box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2);
	}

	.platform-badge.tiktok {
		background: #000;
		box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2);
	}

	.platform-badge.reddit {
		background: #FF4500;
		box-shadow: 0 4px 24px rgba(255, 69, 0, 0.5);
	}

	.platform-badge.twitch {
		background: #9146FF;
		box-shadow: 0 4px 24px rgba(145, 70, 255, 0.5);
	}

	.platform-badge.facebook {
		background: #1877F2;
		box-shadow: 0 4px 24px rgba(24, 119, 242, 0.5);
	}

	.platform-badge.tumblr {
		background: #36465D;
		box-shadow: 0 4px 24px rgba(54, 70, 93, 0.5);
	}

	.platform-badge.pinterest {
		background: #E60023;
		box-shadow: 0 4px 24px rgba(230, 0, 35, 0.5);
	}

	.platform-badge.streamable {
		background: #0A66C2;
		box-shadow: 0 4px 24px rgba(10, 102, 194, 0.5);
	}

	.platform-badge.dailymotion {
		background: #00AAFF;
		box-shadow: 0 4px 24px rgba(0, 170, 255, 0.5);
	}

	.platform-badge.bilibili {
		background: #00A1D6;
		box-shadow: 0 4px 24px rgba(0, 161, 214, 0.5);
	}

	/* Platform title area */
	.platform-title-area {
		min-width: 0;
		flex: 1;
	}

	.platform-title {
		font-size: clamp(1.5rem, 4vmin, 2.5rem);
		font-weight: 700;
		color: #fff;
		margin: 0;
		line-height: 1.2;
		text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.platform-label {
		font-size: clamp(0.9rem, 2vmin, 1.25rem);
		font-weight: 500;
		color: rgba(255, 255, 255, 0.6);
		margin: 0.25rem 0 0;
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}

	/* Platform media container */
	.platform-media {
		width: 100%;
		height: 100%;
	}

	.platform-image-full {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* Video section wrapper */
	.video-section {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	/* Split layout for vertical videos */
	.platform-theater.vertical {
		display: grid;
		grid-template-columns: 1fr minmax(280px, 38%);
	}

	.platform-theater.vertical .video-section {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #000;
	}

	.platform-theater.vertical .platform-media {
		height: auto;
		max-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Info panel for vertical videos */
	.info-panel {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
		padding: clamp(2rem, 4vw, 4rem);
		background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, #0C0C0C 25%);
		text-align: center;
		animation: fadeInRight 0.5s ease-out;
	}

	@keyframes fadeInRight {
		from {
			opacity: 0;
			transform: translateX(20px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* Large platform badge in info panel */
	.info-badge {
		width: clamp(72px, 12vmin, 100px);
		height: clamp(72px, 12vmin, 100px);
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	}

	.info-badge svg {
		width: 55%;
		height: 55%;
		fill: #fff;
	}

	/* Apply platform colors to info badge */
	.info-badge.instagram {
		background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	}

	.info-badge.twitter {
		background: #000;
		border: 1px solid rgba(255, 255, 255, 0.2);
	}

	.info-badge.tiktok {
		background: #000;
		border: 1px solid rgba(255, 255, 255, 0.2);
	}

	.info-badge.reddit {
		background: #FF4500;
	}

	.info-badge.twitch {
		background: #9146FF;
	}

	.info-badge.facebook {
		background: #1877F2;
	}

	.info-badge.tumblr {
		background: #36465D;
	}

	.info-badge.pinterest {
		background: #E60023;
	}

	.info-badge.streamable {
		background: #0A66C2;
	}

	.info-badge.dailymotion {
		background: #00AAFF;
	}

	.info-badge.bilibili {
		background: #00A1D6;
	}

	/* Platform name in info panel */
	.info-platform {
		font-size: clamp(1rem, 2vmin, 1.25rem);
		font-weight: 500;
		color: rgba(255, 255, 255, 0.5);
		text-transform: uppercase;
		letter-spacing: 0.15em;
		margin: 0;
	}

	/* Creator handle */
	.info-creator {
		font-size: clamp(1.75rem, 4vmin, 2.5rem);
		font-weight: 700;
		color: #fff;
		margin: 0;
		line-height: 1.2;
		word-break: break-word;
	}

	/* Progress bar in info panel */
	.info-progress {
		width: 100%;
		max-width: 280px;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.info-progress-bar {
		width: 100%;
		height: 5px;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 3px;
		overflow: hidden;
	}

	.info-progress-fill {
		height: 100%;
		background: #FF6B35;
		border-radius: 3px;
		transition: width 0.3s ease;
	}

	.info-time {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		font-family: 'JetBrains Mono', 'Fira Code', monospace;
		font-size: clamp(1rem, 2vmin, 1.25rem);
	}

	.info-time-current {
		color: #FF6B35;
		font-weight: 500;
	}

	.info-time-separator {
		color: rgba(255, 255, 255, 0.3);
	}

	.info-time-duration {
		color: rgba(255, 255, 255, 0.5);
	}

	/* Queue indicator */
	.info-queue {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		margin-top: 1rem;
	}

	.info-queue-text {
		font-size: clamp(1rem, 2vmin, 1.25rem);
		font-weight: 500;
		color: rgba(255, 255, 255, 0.6);
	}

	.info-queue-dots {
		display: flex;
		gap: 0.5rem;
		align-items: center;
	}

	.queue-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		transition: all 0.3s ease;
	}

	.queue-dot.current {
		background: #FF6B35;
		transform: scale(1.2);
	}

	.queue-dot.played {
		background: rgba(255, 107, 53, 0.4);
	}

	.queue-more {
		font-size: 0.85rem;
		color: rgba(255, 255, 255, 0.4);
		margin-left: 0.25rem;
	}

	/* Bottom progress bar for horizontal videos */
	.bottom-progress-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: rgba(255, 255, 255, 0.1);
		z-index: 15;
	}

	.bottom-progress-bar .progress-fill {
		height: 100%;
		background: #FF6B35;
		transition: width 0.3s ease;
	}
</style>
