import { useCallback, useEffect, useRef, useState } from 'react';
import { fetchMedia } from './api';
import type { InsertPayload, MediaItem, VoltaxModalConfig } from './types';
import { VideoThumbPreview } from './VideoThumbPreview';
import { PlaylistThumb } from './PlaylistThumb';
import { formatDate, formatDuration, getVideoPreviewUrl } from './utils';

type MediaLibraryTabProps = {
	mode: 'video' | 'playlist';
	onSelect: ( payload: InsertPayload | null ) => void;
};

const SCROLL_THRESHOLD = 120;

function getItemId( item: MediaItem ): string {
	return String( item.payload_id || item.id || '' ).trim();
}

function groupCategoryOptions( options: VoltaxModalConfig['categories'] ) {
	const groups = new Map<string, typeof options>();
	const ungrouped: typeof options = [];

	for ( const option of options ) {
		if ( option.group ) {
			const existing = groups.get( option.group ) ?? [];
			existing.push( option );
			groups.set( option.group, existing );
			continue;
		}

		ungrouped.push( option );
	}

	return { groups, ungrouped };
}

export function MediaLibraryTab( { mode, onSelect }: MediaLibraryTabProps ) {
	const config = window.voltaxModalConfig!;
	const [ query, setQuery ] = useState( '' );
	const [ language, setLanguage ] = useState( '' );
	const [ category, setCategory ] = useState( '' );
	const [ playlistType, setPlaylistType ] = useState( '' );
	const [ results, setResults ] = useState<MediaItem[]>( [] );
	const [ loading, setLoading ] = useState( true );
	const [ loadingMore, setLoadingMore ] = useState( false );
	const [ hasMore, setHasMore ] = useState( true );
	const [ selectedId, setSelectedId ] = useState( '' );
	const [ refreshKey, setRefreshKey ] = useState( 0 );
	const scrollRef = useRef<HTMLDivElement>( null );
	const requestIdRef = useRef( 0 );
	const abortRef = useRef<AbortController | null>( null );

	const loadPage = useCallback(
		async ( offset: number, replace: boolean ) => {
			abortRef.current?.abort();
			const controller = new AbortController();
			abortRef.current = controller;
			const requestId = ++requestIdRef.current;

			if ( replace ) {
				setLoading( true );
				setLoadingMore( false );
			} else {
				setLoadingMore( true );
			}

			try {
				const { items, hasMore: pageHasMore } = await fetchMedia( {
					type: mode,
					query,
					language: mode === 'video' ? language : '',
					category: mode === 'video' ? category : '',
					playlistType: mode === 'playlist' ? playlistType : '',
					offset,
					signal: controller.signal,
				} );

				if ( requestId !== requestIdRef.current ) {
					return;
				}

				setResults( ( current ) => {
					if ( replace ) {
						return items;
					}

					const existingIds = new Set( current.map( ( item ) => getItemId( item ) ) );
					const nextItems = items.filter( ( item ) => ! existingIds.has( getItemId( item ) ) );
					return [ ...current, ...nextItems ];
				} );
				setHasMore( pageHasMore );
			} catch {
				if ( controller.signal.aborted || requestId !== requestIdRef.current ) {
					return;
				}

				if ( replace ) {
					setResults( [
						{
							payload_id: 'error',
							error: 'Unable to load results. Please try again.',
						},
					] );
					setHasMore( false );
				}
			} finally {
				if ( requestId === requestIdRef.current ) {
					setLoading( false );
					setLoadingMore( false );
				}
			}
		},
		[ mode, query, language, category, playlistType ]
	);

	useEffect( () => {
		setResults( [] );
		setHasMore( true );
		setSelectedId( '' );
		void loadPage( 0, true );

		return () => {
			abortRef.current?.abort();
		};
	}, [ mode, query, language, category, playlistType, refreshKey, loadPage ] );

	const handleRefresh = () => {
		setRefreshKey( ( current ) => current + 1 );
	};

	const handleScroll = useCallback( () => {
		const container = scrollRef.current;
		if ( ! container || loading || loadingMore || ! hasMore ) {
			return;
		}

		const nearBottom =
			container.scrollTop + container.clientHeight >= container.scrollHeight - SCROLL_THRESHOLD;

		if ( nearBottom ) {
			void loadPage( results.length, false );
		}
	}, [ loading, loadingMore, hasMore, loadPage, results.length ] );

	useEffect( () => {
		if ( ! selectedId ) {
			onSelect( null );
			return;
		}

		const selectedItem = results.find( ( item ) => getItemId( item ) === selectedId );
		if ( ! selectedItem || getItemId( selectedItem ) === 'error' ) {
			onSelect( null );
			return;
		}

		const itemId = getItemId( selectedItem );
		onSelect( {
			type: mode,
			id: itemId,
			title: selectedItem.title || itemId,
			image: selectedItem.image,
			preview_url: mode === 'video' ? getVideoPreviewUrl( selectedItem.sources ) || undefined : undefined,
			description: selectedItem.description || undefined,
			duration: selectedItem.duration || undefined,
			updated_at: selectedItem.updated_at ?? undefined,
		} );
	}, [ selectedId, results, mode, onSelect ] );

	const handleSelect = ( item: MediaItem ) => {
		const itemId = getItemId( item );
		if ( ! itemId || itemId === 'error' ) {
			return;
		}
		setSelectedId( ( current ) => ( current === itemId ? '' : itemId ) );
	};

	const categoryOptions = config.categories?.length ? config.categories : [];
	const { groups: categoryGroups, ungrouped: ungroupedCategories } = groupCategoryOptions( categoryOptions );

	return (
		<>
			<div className="voltax-modal-toolbar">
				<div className="voltax-modal-toolbar-row">
					<input
						type="search"
						value={ query }
						onChange={ ( event ) => setQuery( event.target.value ) }
						placeholder={ config.i18n.search }
					/>
					{ mode === 'playlist' && ( config.playlistTypes?.length ?? 0 ) ? (
						<label className="voltax-modal-category voltax-modal-playlist-type">
							<span className="screen-reader-text">{ config.i18n.playlistType }</span>
							<select
								value={ playlistType }
								onChange={ ( event ) => setPlaylistType( event.target.value ) }
								aria-label={ config.i18n.playlistType }
							>
								{ ( config.playlistTypes ?? [] ).map( ( option ) => (
									<option key={ option.value || 'all' } value={ option.value }>
										{ option.label }
									</option>
								) ) }
							</select>
						</label>
					) : null }
					{ mode === 'video' && categoryOptions.length ? (
						<label className="voltax-modal-category">
							<span className="screen-reader-text">{ config.i18n.category }</span>
							<select
								value={ category }
								onChange={ ( event ) => setCategory( event.target.value ) }
								aria-label={ config.i18n.category }
							>
								{ ungroupedCategories.map( ( option ) => (
									<option key={ option.value || 'all' } value={ option.value }>
										{ option.label }
									</option>
								) ) }
								{ Array.from( categoryGroups.entries() ).map( ( [ groupLabel, options ] ) => (
									<optgroup key={ groupLabel } label={ groupLabel }>
										{ options.map( ( option ) => (
											<option key={ `${ groupLabel }-${ option.value || 'all' }` } value={ option.value }>
												{ option.label }
											</option>
										) ) }
									</optgroup>
								) ) }
							</select>
						</label>
					) : null }
					{ mode === 'video' && config.languages?.length ? (
						<label className="voltax-modal-language">
							<span className="screen-reader-text">{ config.i18n.language }</span>
							<select
								value={ language }
								onChange={ ( event ) => setLanguage( event.target.value ) }
								aria-label={ config.i18n.language }
							>
								{ config.languages.map( ( option ) => (
									<option key={ option.value || 'all' } value={ option.value }>
										{ option.label }
									</option>
								) ) }
							</select>
						</label>
					) : null }
					<button
						type="button"
						className={ `button voltax-modal-refresh${ loading ? ' is-spinning' : '' }` }
						onClick={ handleRefresh }
						disabled={ loading }
						aria-label={ config.i18n.refresh }
						title={ config.i18n.refresh }
					>
						<span className="dashicons dashicons-update" aria-hidden="true" />
					</button>
				</div>
			</div>
			<div className="voltax-modal-content" ref={ scrollRef } onScroll={ handleScroll }>
				{ loading && ! results.length ? (
					<div className="voltax-modal-message">{ config.i18n.searching }</div>
				) : (
					<>
						<ul className="voltax-media-list">
							{ results.map( ( item, index ) => {
								const itemId = getItemId( item );
								const isError = itemId === 'error';
								if ( isError ) {
									return (
										<li key="error" className="voltax-modal-error">
											{ item.error }
										</li>
									);
								}

								const isSelected = !! selectedId && selectedId === itemId;
								const thumb = item.image;
								const dateLabel = formatDate( item.updated_at );
								const durationLabel = mode === 'video' ? formatDuration( item.duration ) : '';
								const playlistCount =
									item.items !== undefined && item.items !== null && item.items !== ''
										? `${ item.items } ${
											item.playlist_type === 5
												? config.i18n.playlistsCount
												: config.i18n.videosCount
										}`
										: '';

								return (
									<li key={ itemId || `item-${ index }` } className={ `voltax-media-item${ isSelected ? ' is-selected' : '' }` }>
										<button type="button" className="voltax-media-summary" onClick={ () => handleSelect( item ) } disabled={ ! itemId }>
											<div className="voltax-media-thumb">
												{ mode === 'video' ? (
													<VideoThumbPreview
														item={ item }
														fallbackImage={ thumb }
														durationLabel={ durationLabel }
														isActive={ isSelected }
													/>
												) : (
													<PlaylistThumb placeholderUrl={ config.playlistPlaceholderUrl } />
												) }
											</div>
											<div className="voltax-media-meta">
												<h3>{ item.title || itemId }</h3>
												{ mode === 'video' && item.description ? (
													<p className="voltax-media-description">{ item.description }</p>
												) : null }
												{ mode === 'playlist' && item.type ? (
													<p className="voltax-media-type">{ item.type }</p>
												) : null }
												{ mode === 'playlist' && playlistCount ? (
													<p className="voltax-media-count">{ playlistCount }</p>
												) : null }
												{ mode === 'video' && dateLabel ? (
													<p className="voltax-media-date">{ dateLabel }</p>
												) : null }
											</div>
										</button>
									</li>
								);
							} ) }
						</ul>
						{ loadingMore ? (
							<div className="voltax-modal-message voltax-modal-loading-more">{ config.i18n.loadingMore }</div>
						) : null }
					</>
				) }
			</div>
		</>
	);
}