/**
 * Queries tab — top search queries table.
 */
import { useState, useEffect } from '@wordpress/element';
import { repivotFetchCached } from './api';
import { LoadingSkeleton } from './components/LoadingSkeleton';
import { ErrorMessage } from './components/ErrorMessage';

export function QueriesTab( { postId } ) {
	const [ data, setData ] = useState( null );
	const [ loading, setLoading ] = useState( true );
	const [ error, setError ] = useState( null );

	const fetchData = async ( force = false ) => {
		setLoading( true );
		setError( null );
		try {
			const result = await repivotFetchCached(
				'repivot_post_queries',
				{ post_id: postId, limit: 25, ...(force ? { force: '1' } : {}) },
				force
			);
			setData( result );
		} catch ( err ) {
			setError( err );
		} finally {
			setLoading( false );
		}
	};

	useEffect( () => { fetchData(); }, [ postId ] );

	if ( loading ) return <LoadingSkeleton rows={ 8 } />;
	if ( error ) return <ErrorMessage error={ error } />;

	const queries = Array.isArray( data ) ? data : ( data?.queries || [] );

	if ( queries.length === 0 ) {
		return (
			<div className="repivot-empty-tab">
				<p>No search query data available yet.</p>
			</div>
		);
	}

	return (
		<div className="repivot-queries-tab">
			{ queries.map( ( q, i ) => (
				<div key={ i } className="repivot-query-card">
					<div className="repivot-query-card__term">{ q.query }</div>
					<div className="repivot-query-card__metrics">
						<div className="repivot-query-card__metric">
							<span className="repivot-query-card__label">Clicks</span>
							<span className="repivot-query-card__value">{ ( q.clicks || 0 ).toLocaleString() }</span>
						</div>
						<div className="repivot-query-card__metric">
							<span className="repivot-query-card__label">Impressions</span>
							<span className="repivot-query-card__value">{ ( q.impressions || 0 ).toLocaleString() }</span>
						</div>
						<div className="repivot-query-card__metric">
							<span className="repivot-query-card__label">CTR</span>
							<span className="repivot-query-card__value">{ typeof q.ctr === 'number' ? ( q.ctr * 100 ).toFixed( 1 ) + '%' : '\u2014' }</span>
						</div>
						<div className="repivot-query-card__metric">
							<span className="repivot-query-card__label">Position</span>
							<span className={ `repivot-query-card__value ${ positionClass( q.position ) }` }>
								{ typeof q.position === 'number' ? q.position.toFixed( 1 ) : '\u2014' }
							</span>
						</div>
					</div>
				</div>
			) ) }
		</div>
	);
}

function positionClass( pos ) {
	if ( typeof pos !== 'number' ) return '';
	if ( pos <= 10 ) return 'repivot-position--good';
	if ( pos <= 20 ) return 'repivot-position--mid';
	return 'repivot-position--low';
}