import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export function StatsCards({ stats = [], className = "" }) {
    return (
        <div className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 ${className}`}>
            {stats.map((stat, index) => (
                <Card key={index} className="bg-white border border-gray-200">
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm font-medium text-gray-600 font-sans">
                            {stat.title}
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="pt-0">
                        <div className="text-center flex flex-col justify-center items-center">
                            <p className="text-2xl font-bold text-black mb-1 font-sans">
                                {stat.value}
                            </p>
                            {stat.percentageChange !== undefined && (
                                <div className={`text-xs flex justify-center items-center gap-1 ${
                                    stat.percentageChange >= 0 ? 'text-green-600' : 'text-red-600'
                                } font-sans`}>
                                    <span>{stat.percentageChange >= 0 ? '↗' : '↘'}</span>
                                    <span>{Math.abs(stat.percentageChange)}%</span>
                                    <span className="text-gray-500">vs last month</span>
                                </div>
                            )}
                        </div>
                    </CardContent>
                </Card>
            ))}
        </div>
    );
}

// Predefined stat configurations for common use cases
export const statConfigs = {
    // Violations overview stats
    violationsOverview: [
        {
            title: "Violations",
            value: 0,
            percentageChange: 0
        },
        {
            title: "New",
            value: 0,
            percentageChange: 0
        },
        {
            title: "Raised",
            value: 0,
            percentageChange: 0
        },
        {
            title: "Rejected",
            value: 0,
            percentageChange: 0
        }
    ],

    // Constables overview stats
    constablesOverview: [
        {
            title: "Total Constables",
            value: 0,
            percentageChange: 0
        },
        {
            title: "Active",
            value: 0,
            percentageChange: 0
        },
        {
            title: "Inactive",
            value: 0,
            percentageChange: 0
        },
        {
            title: "On Duty",
            value: 0,
            percentageChange: 0
        }
    ]
};

// Helper function to calculate stats from data
export const calculateStats = (data, config) => {
    if (!data || !Array.isArray(data)) return config;

    return config.map(stat => {
        let value = 0;
        
        switch (stat.title.toLowerCase()) {
            case 'violations':
            case 'total':
                value = data.length;
                break;
            case 'new':
                value = data.filter(item => item.status?.toLowerCase() === 'new').length;
                break;
            case 'raised':
                value = data.filter(item => item.status?.toLowerCase() === 'raised').length;
                break;
            case 'rejected':
                value = data.filter(item => item.status?.toLowerCase() === 'rejected').length;
                break;
            case 'active':
                value = data.filter(item => item.status?.toLowerCase() === 'active').length;
                break;
            case 'inactive':
                value = data.filter(item => item.status?.toLowerCase() === 'inactive').length;
                break;
            case 'on duty':
                value = data.filter(item => item.status?.toLowerCase() === 'active').length;
                break;
            default:
                value = 0;
        }

        return {
            ...stat,
            value: value.toLocaleString()
        };
    });
};
