/**
 * Analytics tab — GA4/GSC metrics with YoY delta arrows.
 */
import { useState, useEffect } from '@wordpress/element';
import { repivotFetchCached } from './api';
import { MetricCard } from './components/MetricCard';
import { SignalBadge } from './components/SignalBadge';
import { LoadingSkeleton } from './components/LoadingSkeleton';
import { ErrorMessage } from './components/ErrorMessage';

export function AnalyticsTab( { 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_analytics',
				{ post_id: postId, range: '365d', ...(force ? { force: '1' } : {}) },
				force
			);
			setData( result );
		} catch ( err ) {
			setError( err );
		} finally {
			setLoading( false );
		}
	};

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

	if ( loading ) return <LoadingSkeleton rows={ 6 } />;
	if ( error ) return <ErrorMessage error={ error } />;
	if ( ! data ) return <ErrorMessage error={ { code: 'NO_DATA', message: 'No analytics data available.' } } />;

	return (
		<div className="repivot-analytics-tab">
			{ data.signal && (
				<div className="repivot-analytics-signal">
					<SignalBadge signal={ data.signal } />
				</div>
			) }

			<div className="repivot-metrics-grid repivot-metrics-grid--2x3">
				<MetricCard label="Pageviews"   value={ data.ga4?.pageviews }       delta={ data.yoy?.delta_percent } />
				<MetricCard label="Clicks"      value={ data.gsc?.clicks }          />
				<MetricCard label="Impressions"  value={ data.gsc?.impressions }     />
				<MetricCard label="CTR"          value={ data.gsc?.ctr }             format="percent" />
				<MetricCard label="Avg Position" value={ data.gsc?.position }        format="decimal" invert />
				<MetricCard label="Bounce Rate"  value={ data.ga4?.bounce_rate }     format="percent_raw" invert />
			</div>

			{ data.sources?.data?.length > 0 && (
				<div className="repivot-analytics-section">
					<h4 className="repivot-section-subtitle">Top Sources</h4>
					<ul className="repivot-mini-list">
						{ data.sources.data.slice( 0, 3 ).map( ( s, i ) => (
							<li key={ i }>
								<span className="repivot-mini-label">{ s.source || s.name }</span>
								<span className="repivot-mini-value">{ ( s.sessions || s.count || 0 ).toLocaleString() }</span>
							</li>
						) ) }
					</ul>
				</div>
			) }

			{ data.countries?.data?.length > 0 && (
				<div className="repivot-analytics-section">
					<h4 className="repivot-section-subtitle">Top Countries</h4>
					<ul className="repivot-mini-list">
						{ data.countries.data.slice( 0, 3 ).map( ( c, i ) => (
							<li key={ i }>
								<span className="repivot-mini-label">{ c.country || c.name }</span>
								<span className="repivot-mini-value">{ ( c.sessions || c.count || 0 ).toLocaleString() }</span>
							</li>
						) ) }
					</ul>
				</div>
			) }

			{ data.dashboard_url && (
				<a
					href={ data.dashboard_url }
					target="_blank"
					rel="noopener noreferrer"
					className="repivot-view-full-link"
				>
					View full analytics &rarr;
				</a>
			) }
		</div>
	);
}