/**
 * Analytics Overview component.
 *
 * @package Schema_AI
 */

import { useState, useEffect } from '@wordpress/element';
import { Card, CardBody, CardHeader, Spinner } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import { useUserContext } from '../../context/UserContext';

function Overview() {
	const [ stats, setStats ] = useState( null );
	const [ loading, setLoading ] = useState( true );
	const { isPremium } = useUserContext();

	useEffect( () => {
		apiFetch( { path: '/schema-ai/v1/stats' } )
			.then( setStats )
			.catch( () => {} )
			.finally( () => setLoading( false ) );
	}, [] );

	if ( ! isPremium ) {
		return (
			<Card>
				<CardBody>
					<h2>{ __( 'Analytics', 'schema-ai' ) }</h2>
					<p>{ __( 'Analytics is available on Premium and Agency plans.', 'schema-ai' ) }</p>
					<a href={ ( window.schemaAiData?.adminUrl || '' ) + 'admin.php?page=schema-ai-settings#upgrade' } className="button button-primary">
						{ __( 'Upgrade', 'schema-ai' ) }
					</a>
				</CardBody>
			</Card>
		);
	}

	if ( loading ) return <Spinner />;

	return (
		<div className="schema-ai-analytics">
			<h2>{ __( 'Schema Analytics', 'schema-ai' ) }</h2>
			<div className="schema-ai-stats-grid">
				<Card><CardBody><div className="schema-ai-stat-value">{ stats?.total_schemas || 0 }</div><div className="schema-ai-stat-label">{ __( 'Total Schemas', 'schema-ai' ) }</div></CardBody></Card>
				<Card><CardBody><div className="schema-ai-stat-value">{ stats?.by_status?.valid || 0 }</div><div className="schema-ai-stat-label">{ __( 'Valid', 'schema-ai' ) }</div></CardBody></Card>
				<Card><CardBody><div className="schema-ai-stat-value">{ stats?.by_status?.invalid || 0 }</div><div className="schema-ai-stat-label">{ __( 'Errors', 'schema-ai' ) }</div></CardBody></Card>
				<Card><CardBody><div className="schema-ai-stat-value">{ stats?.today_generations || 0 }</div><div className="schema-ai-stat-label">{ __( 'Generations Today', 'schema-ai' ) }</div></CardBody></Card>
			</div>
		</div>
	);
}

export default Overview;