// src/pages/AdminStatsPage.tsx
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { getApplicationStats, AppStats } from '../services/apiClient';
import { logger } from '../services/logger';
import { LoadingSpinner } from '../components/LoadingSpinner';
import { ChartBarIcon } from '../components/icons/ChartBarIcon';
import { UsersIcon } from '../components/icons/UsersIcon';
import { DocumentDuplicateIcon } from '../components/icons/DocumentDuplicateIcon';
import { BuildingStorefrontIcon } from '../components/icons/BuildingStorefrontIcon';
import { BellAlertIcon } from '../components/icons/BellAlertIcon';

const StatCard: React.FC<{ title: string; value: number | string; icon: React.ReactNode }> = ({ title, value, icon }) => (
    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 flex items-center">
        <div className="mr-4 text-brand-primary bg-brand-primary/10 p-3 rounded-lg">
            {icon}
        </div>
        <div>
            <p className="text-sm font-medium text-gray-500 dark:text-gray-400">{title}</p>
            <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
        </div>
    </div>
);

export const AdminStatsPage: React.FC = () => {
    const [stats, setStats] = useState<AppStats | null>(null);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        const fetchStats = async () => {
            setIsLoading(true);
            setError(null);
            try {
                const data = await getApplicationStats();
                setStats(data);
            } catch (err) {
                const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';
                logger.error('Failed to fetch application stats', { error: err });
                setError(errorMessage);
            } finally {
                setIsLoading(false);
            }
        };

        fetchStats();
    }, []);

    return (
        <div className="max-w-5xl mx-auto py-8 px-4">
            <div className="mb-8">
                <Link to="/admin" className="text-brand-primary hover:underline">&larr; Back to Admin Dashboard</Link>
                <h1 className="text-3xl font-bold text-gray-800 dark:text-white mt-2">Application Statistics</h1>
                <p className="text-gray-500 dark:text-gray-400">A high-level overview of key application metrics.</p>
            </div>

            {isLoading && <div className="flex justify-center items-center h-64"><LoadingSpinner /></div>}
            {error && <div className="text-red-500 bg-red-100 dark:bg-red-900/20 p-4 rounded-lg">{error}</div>}

            {stats && !isLoading && !error && (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <StatCard title="Total Users" value={stats.userCount.toLocaleString()} icon={<UsersIcon className="w-6 h-6" />} />
                    <StatCard title="Flyers Processed" value={stats.flyerCount.toLocaleString()} icon={<DocumentDuplicateIcon className="w-6 h-6" />} />
                    <StatCard title="Total Flyer Items" value={stats.flyerItemCount.toLocaleString()} icon={<ChartBarIcon className="w-6 h-6" />} />
                    <StatCard title="Stores Tracked" value={stats.storeCount.toLocaleString()} icon={<BuildingStorefrontIcon className="w-6 h-6" />} />
                    <StatCard title="Pending Corrections" value={stats.pendingCorrectionCount.toLocaleString()} icon={<BellAlertIcon className="w-6 h-6" />} />
                </div>
            )}
        </div>
    );
};