/**
 * DataTable — the shared listing table for every admin screen (core and add-ons).
 *
 * Gives each list the same chrome: a toolbar with the item count, search and filters,
 * bulk selection with a bulk-actions bar, sortable columns, pagination and an optional
 * grid view. Rows are plain objects; columns describe how to render them.
 *
 * Exposed to add-ons as window.StreamSeraAdminApi.ui.DataTable.
 */
import { __, sprintf } from '@wordpress/i18n';
import { useEffect, useMemo, useState } from '@wordpress/element';
import { Button, SearchControl, SelectControl } from '@wordpress/components';
import type { ReactNode } from 'react';
import { I } from '../ui';

export interface DataTableColumn< R = any > {
	id: string;
	label: ReactNode;
	/** Cell renderer. */
	render: ( row: R, index: number ) => ReactNode;
	/** Sort accessor; omit to make the column unsortable. */
	sortValue?: ( row: R ) => string | number | null | undefined;
	width?: number | string;
	align?: 'left' | 'right' | 'center';
	/** Hide below 782px (phones). */
	hideOnMobile?: boolean;
	/** Hidden at tablet widths (≤ 960px) and below. */
	hideOnTablet?: boolean;
	className?: string;
}

export interface DataTableBulkAction< R = any > {
	id: string;
	label: string;
	icon?: string;
	destructive?: boolean;
	/** Called with the selected rows. Return a promise to show a busy state. */
	onApply: ( rows: R[] ) => void | Promise< void >;
	/** Hide the action unless every selected row passes. */
	when?: ( row: R ) => boolean;
}

export interface DataTableFilter {
	id: string;
	label: string;
	value: string;
	options: Array< { label: string; value: string } >;
	onChange: ( value: string ) => void;
}

export interface DataTablePagination {
	/** Server mode: total number of rows across all pages. Client mode when omitted. */
	total?: number;
	page?: number;
	perPage?: number;
	onPageChange?: ( page: number ) => void;
	onPerPageChange?: ( perPage: number ) => void;
	perPageOptions?: number[];
}

export interface DataTableProps< R = any > {
	columns: DataTableColumn< R >[];
	rows: R[];
	rowKey: ( row: R ) => string | number;
	/** Singular / plural noun for the count ("station", "stations"). */
	noun?: [ string, string ];
	loading?: boolean;
	empty?: ReactNode;
	/** Row selection + bulk actions bar. */
	selectable?: boolean;
	bulkActions?: DataTableBulkAction< R >[];
	/** Toolbar bits. */
	search?: {
		value: string;
		onChange: ( v: string ) => void;
		placeholder?: string;
	};
	/** Client-side search haystack for a row (used with or without a controlled `search`). */
	searchText?: ( row: R ) => string;
	filters?: DataTableFilter[];
	toolbarEnd?: ReactNode;
	toolbarStart?: ReactNode;
	/** Per-row action buttons (rendered in the last column). */
	rowActions?: ( row: R ) => ReactNode;
	/** Row click target (e.g. navigate). */
	onRowClick?: ( row: R ) => void;
	pagination?: DataTablePagination | false;
	/** 'list' (table) or 'grid' (cards via renderCard). */
	view?: 'list' | 'grid';
	onViewChange?: ( view: 'list' | 'grid' ) => void;
	renderCard?: (
		row: R,
		helpers: { selected: boolean; toggle: () => void }
	) => ReactNode;
	/** Initial sort. */
	defaultSort?: { column: string; direction: 'asc' | 'desc' };
	/** Rendered inside the panel, below the table, e.g. a legend. */
	footer?: ReactNode;
	className?: string;
	/** Row class names. */
	rowClassName?: ( row: R ) => string;
	/** Remember per-page in localStorage under this key. */
	storageKey?: string;
}

const PER_PAGE_DEFAULT = 10;
const PER_PAGE_OPTIONS = [ 10, 25, 50 ];

function readStored( key?: string, fallback = PER_PAGE_DEFAULT ) {
	if ( ! key ) {
		return fallback;
	}
	try {
		const v = parseInt(
			window.localStorage.getItem( `streamsera:perpage:${ key }` ) || '',
			10
		);
		return v && PER_PAGE_OPTIONS.includes( v ) ? v : fallback;
	} catch ( e ) {
		return fallback;
	}
}

/**
 * Compact native checkbox (CheckboxControl is too tall for 48px rows and lacks a visually-hidden label).
 * @param root0
 * @param root0.checked
 * @param root0.indeterminate
 * @param root0.onChange
 * @param root0.label
 */
function Check( {
	checked,
	indeterminate = false,
	onChange,
	label,
}: {
	checked: boolean;
	indeterminate?: boolean;
	onChange: () => void;
	label: string;
} ) {
	return (
		<input
			type="checkbox"
			className="ss-dt__checkbox"
			checked={ checked }
			ref={ ( el ) => {
				if ( el ) {
					el.indeterminate = indeterminate;
				}
			} }
			onChange={ onChange }
			aria-label={ label }
		/>
	);
}

/**
 * Letter-initial fallback tile when a row has no image.
 * @param root0
 * @param root0.src
 * @param root0.label
 * @param root0.size
 * @param root0.round
 * @param root0.className
 */
export function Thumb( {
	src,
	label,
	size = 36,
	round = false,
	className = '',
}: {
	src?: string | null;
	label?: string;
	size?: number;
	round?: boolean;
	className?: string;
} ) {
	const [ broken, setBroken ] = useState( false );
	useEffect( () => setBroken( false ), [ src ] );
	const initial = ( label || '?' ).trim().charAt( 0 ).toUpperCase() || '?';
	const hue = useMemo( () => {
		let h = 0;
		for ( const ch of label || '' ) {
			h = ( h * 31 + ch.charCodeAt( 0 ) ) % 360;
		}
		return h;
	}, [ label ] );
	const style = {
		width: size,
		height: size,
		'--ss-thumb-h': hue,
	} as React.CSSProperties;
	if ( src && ! broken ) {
		return (
			<span
				className={ `ss-avatar ${
					round ? 'ss-avatar--round' : ''
				} ${ className }` }
				style={ style }
			>
				<img
					src={ src }
					alt=""
					loading="lazy"
					onError={ () => setBroken( true ) }
				/>
			</span>
		);
	}
	return (
		<span
			className={ `ss-avatar ss-avatar--initial ${
				round ? 'ss-avatar--round' : ''
			} ${ className }` }
			style={ style }
			aria-hidden="true"
		>
			{ initial }
		</span>
	);
}

export const Avatar = ( props: Parameters< typeof Thumb >[ 0 ] ) => (
	<Thumb { ...props } round />
);

export default function DataTable< R = any >( props: DataTableProps< R > ) {
	const {
		columns,
		rows,
		rowKey,
		noun,
		loading,
		empty,
		selectable = false,
		bulkActions = [],
		search,
		searchText,
		filters = [],
		toolbarEnd,
		toolbarStart,
		rowActions,
		onRowClick,
		pagination,
		view = 'list',
		onViewChange,
		renderCard,
		defaultSort,
		footer,
		className = '',
		rowClassName,
		storageKey,
	} = props;

	const [ localQ, setLocalQ ] = useState( '' );
	const [ selected, setSelected ] = useState< Set< string | number > >(
		new Set()
	);
	const [ sort, setSort ] = useState( defaultSort || null );
	const [ busy, setBusy ] = useState< string | null >( null );
	const server = !! ( pagination && pagination.total !== undefined );
	const [ localPage, setLocalPage ] = useState( 1 );
	const [ localPerPage, setLocalPerPage ] = useState( () =>
		readStored(
			storageKey,
			( pagination && pagination.perPage ) || PER_PAGE_DEFAULT
		)
	);

	const q = search ? search.value : localQ;
	const setQ = search ? search.onChange : setLocalQ;

	// Client-side search + sort.
	const filtered = useMemo( () => {
		let out = rows;
		// Filter client-side whenever a haystack is given (controlled search box or not);
		// only a server-paginated table is expected to have filtered already.
		if ( ! server && q && searchText ) {
			const needle = q.toLowerCase();
			out = out.filter( ( r ) =>
				searchText( r ).toLowerCase().includes( needle )
			);
		}
		if ( sort ) {
			const col = columns.find( ( c ) => c.id === sort.column );
			if ( col && col.sortValue ) {
				const dir = sort.direction === 'asc' ? 1 : -1;
				out = [ ...out ].sort( ( a, b ) => {
					const va = col.sortValue!( a ) ?? '';
					const vb = col.sortValue!( b ) ?? '';
					if ( typeof va === 'number' && typeof vb === 'number' ) {
						return ( va - vb ) * dir;
					}
					return (
						String( va ).localeCompare( String( vb ), undefined, {
							numeric: true,
						} ) * dir
					);
				} );
			}
		}
		return out;
	}, [ rows, q, server, searchText, sort, columns ] );

	// Pagination.
	const paginate = pagination !== false;
	const perPage = server
		? pagination!.perPage || PER_PAGE_DEFAULT
		: localPerPage;
	const page = server ? pagination!.page || 1 : localPage;
	const total = server ? pagination!.total! : filtered.length;
	const pages = Math.max( 1, Math.ceil( total / perPage ) );
	useEffect( () => {
		if ( ! server && localPage > pages ) {
			setLocalPage( pages );
		}
	}, [ pages, localPage, server ] );
	const visible = useMemo( () => {
		if ( ! paginate || server ) {
			return filtered;
		}
		const start = ( page - 1 ) * perPage;
		return filtered.slice( start, start + perPage );
	}, [ filtered, paginate, server, page, perPage ] );

	const goTo = ( p: number ) => {
		const next = Math.min( pages, Math.max( 1, p ) );
		if ( server ) {
			pagination!.onPageChange?.( next );
		} else {
			setLocalPage( next );
		}
	};
	const changePerPage = ( n: number ) => {
		if ( server ) {
			pagination!.onPerPageChange?.( n );
		} else {
			setLocalPerPage( n );
			setLocalPage( 1 );
		}
		if ( storageKey ) {
			try {
				window.localStorage.setItem(
					`streamsera:perpage:${ storageKey }`,
					String( n )
				);
			} catch ( e ) {
				/* ignore */
			}
		}
	};

	// Selection.
	const keys = visible.map( rowKey );
	const allVisibleSelected =
		keys.length > 0 && keys.every( ( k ) => selected.has( k ) );
	const someVisibleSelected = keys.some( ( k ) => selected.has( k ) );
	const toggleAll = () => {
		setSelected( ( prev ) => {
			const next = new Set( prev );
			if ( allVisibleSelected ) {
				keys.forEach( ( k ) => next.delete( k ) );
			} else {
				keys.forEach( ( k ) => next.add( k ) );
			}
			return next;
		} );
	};
	const toggle = ( k: string | number ) =>
		setSelected( ( prev ) => {
			const next = new Set( prev );
			if ( next.has( k ) ) {
				next.delete( k );
			} else {
				next.add( k );
			}
			return next;
		} );
	useEffect( () => {
		// Drop selections that no longer exist (after delete / reload).
		const present = new Set( rows.map( rowKey ) );
		setSelected( ( prev ) => {
			const next = new Set(
				[ ...prev ].filter( ( k ) => present.has( k ) )
			);
			return next.size === prev.size ? prev : next;
		} );
	}, [ rows ] ); // eslint-disable-line react-hooks/exhaustive-deps
	const selectedRows = rows.filter( ( r ) => selected.has( rowKey( r ) ) );
	const selectAllEverywhere = () =>
		setSelected( new Set( filtered.map( rowKey ) ) );

	const runBulk = async ( action: DataTableBulkAction< R > ) => {
		setBusy( action.id );
		try {
			await action.onApply( selectedRows );
		} finally {
			setBusy( null );
			setSelected( new Set() );
		}
	};

	const genericCount = sprintf(
		// translators: %s: number of rows
		__( '%s items', 'streamsera' ),
		String( total )
	);
	const countLabel = noun
		? `${ total } ${ total === 1 ? noun[ 0 ] : noun[ 1 ] }`
		: genericCount;

	const start = total ? ( page - 1 ) * perPage + 1 : 0;
	const end = Math.min( total, page * perPage );

	const onSort = ( col: DataTableColumn< R > ) => {
		if ( ! col.sortValue ) {
			return;
		}
		setSort( ( prev ) =>
			prev && prev.column === col.id
				? {
						column: col.id,
						direction: prev.direction === 'asc' ? 'desc' : 'asc',
				  }
				: { column: col.id, direction: 'asc' }
		);
	};

	const colCount =
		columns.length + ( selectable ? 1 : 0 ) + ( rowActions ? 1 : 0 );

	return (
		<div
			className={ `ss-dt ${
				view === 'grid' ? 'ss-dt--grid' : ''
			} ${ className }` }
		>
			<div className="ss-dt__toolbar">
				<div className="ss-dt__toolbar-start">
					<span className="ss-dt__count">{ countLabel }</span>
					{ toolbarStart }
				</div>
				<div className="ss-dt__toolbar-end">
					{ filters.map( ( f ) => (
						<SelectControl
							key={ f.id }
							className="ss-dt__filter"
							label={ f.label }
							hideLabelFromVision
							value={ f.value }
							options={ f.options }
							onChange={ ( v ) => {
								f.onChange( v );
								goTo( 1 );
							} }
							__nextHasNoMarginBottom
						/>
					) ) }
					{ ( search || searchText ) && (
						<SearchControl
							className="ss-dt__search"
							value={ q }
							onChange={ ( v ) => {
								setQ( v );
								goTo( 1 );
							} }
							placeholder={
								( search && search.placeholder ) ||
								__( 'Search', 'streamsera' )
							}
							__nextHasNoMarginBottom
						/>
					) }
					{ onViewChange && (
						<div
							className="ss-viewswitch"
							role="group"
							aria-label={ __( 'View', 'streamsera' ) }
						>
							<button
								type="button"
								className={ view === 'list' ? 'is-active' : '' }
								onClick={ () => onViewChange( 'list' ) }
								aria-pressed={ view === 'list' }
								aria-label={ __( 'List view', 'streamsera' ) }
							>
								<I name="list" size={ 18 } />
							</button>
							<button
								type="button"
								className={ view === 'grid' ? 'is-active' : '' }
								onClick={ () => onViewChange( 'grid' ) }
								aria-pressed={ view === 'grid' }
								aria-label={ __( 'Grid view', 'streamsera' ) }
							>
								<I name="grid" size={ 18 } />
							</button>
						</div>
					) }
					{ toolbarEnd }
				</div>
			</div>

			{ selectable && selected.size > 0 && (
				<div className="ss-dt__bulk" role="region" aria-live="polite">
					<label className="ss-dt__bulk-check">
						<Check
							checked={ allVisibleSelected }
							indeterminate={
								! allVisibleSelected && someVisibleSelected
							}
							onChange={ toggleAll }
							label={ __(
								'Select all on this page',
								'streamsera'
							) }
						/>
						<span>
							{ sprintf(
								// translators: %s: number of selected rows
								__( '%s selected', 'streamsera' ),
								String( selected.size )
							) }
						</span>
					</label>
					{ selected.size < filtered.length &&
						filtered.length > visible.length && (
							<Button
								variant="link"
								size="small"
								onClick={ selectAllEverywhere }
							>
								{ sprintf(
									// translators: %s: total number of rows
									__( 'Select all %s', 'streamsera' ),
									String( filtered.length )
								) }
							</Button>
						) }
					<span className="ss-dt__bulk-actions">
						{ bulkActions
							.filter(
								( a ) =>
									! a.when || selectedRows.every( a.when )
							)
							.map( ( a ) => (
								<Button
									key={ a.id }
									size="small"
									variant="secondary"
									isDestructive={ a.destructive }
									isBusy={ busy === a.id }
									disabled={ !! busy }
									icon={
										a.icon ? (
											<I name={ a.icon } size={ 16 } />
										) : undefined
									}
									onClick={ () => runBulk( a ) }
								>
									{ a.label }
								</Button>
							) ) }
					</span>
					<Button
						className="ss-dt__bulk-clear"
						size="small"
						variant="tertiary"
						icon={ <I name="x" size={ 16 } /> }
						label={ __( 'Clear selection', 'streamsera' ) }
						onClick={ () => setSelected( new Set() ) }
					/>
				</div>
			) }

			{ loading && (
				<div className="ss-dt__loading">
					<span className="ss-dt__bar" />
				</div>
			) }

			{ ! visible.length ? (
				<div className="ss-dt__empty">
					{ empty || (
						<div className="ss-empty ss-empty--compact">
							<I name="search" size={ 28 } />
							<h3>{ __( 'Nothing matches', 'streamsera' ) }</h3>
							<p>
								{ __(
									'Try a different search or clear the filters.',
									'streamsera'
								) }
							</p>
						</div>
					) }
				</div>
			) : view === 'grid' && renderCard ? (
				<div className="ss-dt__grid">
					{ visible.map( ( r ) => {
						const k = rowKey( r );
						const isSel = selected.has( k );
						return (
							<div
								key={ k }
								className={ `ss-dt__card ${
									isSel ? 'is-selected' : ''
								}` }
							>
								{ selectable && (
									<span className="ss-dt__card-check">
										<Check
											checked={ isSel }
											onChange={ () => toggle( k ) }
											label={ __(
												'Select',
												'streamsera'
											) }
										/>
									</span>
								) }
								{ renderCard( r, {
									selected: isSel,
									toggle: () => toggle( k ),
								} ) }
							</div>
						);
					} ) }
				</div>
			) : (
				<div className="ss-dt__scroll">
					<table className="ss-table ss-dt__table">
						<thead>
							<tr>
								{ selectable && (
									<th className="ss-dt__check-col">
										<Check
											checked={ allVisibleSelected }
											indeterminate={
												! allVisibleSelected &&
												someVisibleSelected
											}
											onChange={ toggleAll }
											label={ __(
												'Select all',
												'streamsera'
											) }
										/>
									</th>
								) }
								{ columns.map( ( c ) => {
									const active = sort && sort.column === c.id;
									return (
										<th
											key={ c.id }
											style={ {
												width: c.width,
												textAlign: c.align,
											} }
											className={ `${
												c.hideOnMobile
													? 'ss-dt__hide-mobile'
													: ''
											} ${
												c.hideOnTablet
													? 'ss-dt__hide-tablet'
													: ''
											} ${
												c.sortValue ? 'is-sortable' : ''
											} ${
												active
													? `is-sorted is-${
															sort!.direction
													  }`
													: ''
											} ${ c.className || '' }` }
											aria-sort={
												active
													? sort!.direction === 'asc'
														? 'ascending'
														: 'descending'
													: undefined
											}
										>
											{ c.sortValue ? (
												<button
													type="button"
													className="ss-dt__sort"
													onClick={ () =>
														onSort( c )
													}
												>
													{ c.label }
													<span
														className="ss-dt__sort-icon"
														aria-hidden="true"
													>
														<I
															name="chevronDown"
															size={ 14 }
														/>
													</span>
												</button>
											) : (
												c.label
											) }
										</th>
									);
								} ) }
								{ rowActions && (
									<th className="ss-table__actions-head" />
								) }
							</tr>
						</thead>
						<tbody>
							{ visible.map( ( r, i ) => {
								const k = rowKey( r );
								const isSel = selected.has( k );
								return (
									<tr
										key={ k }
										className={ `${
											isSel ? 'is-selected' : ''
										} ${
											onRowClick ? 'is-clickable' : ''
										} ${
											rowClassName
												? rowClassName( r )
												: ''
										}` }
										onClick={
											onRowClick
												? ( e ) => {
														const t =
															e.target as HTMLElement;
														if (
															t.closest(
																'a, button, input, label, .ss-table__actions, .ss-dt__check-col'
															)
														) {
															return;
														}
														onRowClick( r );
												  }
												: undefined
										}
									>
										{ selectable && (
											<td className="ss-dt__check-col">
												<Check
													checked={ isSel }
													onChange={ () =>
														toggle( k )
													}
													label={ __(
														'Select row',
														'streamsera'
													) }
												/>
											</td>
										) }
										{ columns.map( ( c ) => (
											<td
												key={ c.id }
												style={ { textAlign: c.align } }
												className={ `${
													c.hideOnMobile
														? 'ss-dt__hide-mobile'
														: ''
												} ${
													c.hideOnTablet
														? 'ss-dt__hide-tablet'
														: ''
												} ${ c.className || '' }` }
											>
												{ c.render( r, i ) }
											</td>
										) ) }
										{ rowActions && (
											<td className="ss-table__actions">
												{ rowActions( r ) }
											</td>
										) }
									</tr>
								);
							} ) }
						</tbody>
						{ footer && (
							<tfoot>
								<tr>
									<td colSpan={ colCount }>{ footer }</td>
								</tr>
							</tfoot>
						) }
					</table>
				</div>
			) }

			{ paginate && total > 0 && (
				<div className="ss-dt__pager">
					<div className="ss-dt__pager-size">
						<label>
							<span>{ __( 'Rows per page', 'streamsera' ) }</span>
							<select
								value={ perPage }
								onChange={ ( e ) =>
									changePerPage(
										parseInt( e.target.value, 10 )
									)
								}
							>
								{ (
									( pagination &&
										pagination.perPageOptions ) ||
									PER_PAGE_OPTIONS
								).map( ( n ) => (
									<option key={ n } value={ n }>
										{ n }
									</option>
								) ) }
							</select>
						</label>
					</div>
					<div className="ss-dt__pager-range">
						{ sprintf(
							// translators: %1$s: first row number, %2$s: last row number, %3$s: total rows
							__( '%1$s–%2$s of %3$s', 'streamsera' ),
							String( start ),
							String( end ),
							String( total )
						) }
					</div>
					<div className="ss-dt__pager-nav">
						<Button
							size="small"
							variant="tertiary"
							icon={ <I name="chevronLeft" size={ 18 } /> }
							label={ __( 'Previous page', 'streamsera' ) }
							disabled={ page <= 1 }
							onClick={ () => goTo( page - 1 ) }
						/>
						<span className="ss-dt__pager-page">
							{ sprintf(
								// translators: %1$s: current page, %2$s: total pages
								__( 'Page %1$s of %2$s', 'streamsera' ),
								String( page ),
								String( pages )
							) }
						</span>
						<Button
							size="small"
							variant="tertiary"
							icon={ <I name="chevronRight" size={ 18 } /> }
							label={ __( 'Next page', 'streamsera' ) }
							disabled={ page >= pages }
							onClick={ () => goTo( page + 1 ) }
						/>
					</div>
				</div>
			) }
		</div>
	);
}