import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Badge } from '@/components/ui/badge';

interface ModuleUsage {
    name: string;
    tenants: number;
    percentage: number;
}

interface ModuleUsageProps {
    data: ModuleUsage[];
    totalTenants: number;
}

export function ModuleUsageCard({ data, totalTenants }: ModuleUsageProps) {
    const sortedData = [...data].sort((a, b) => b.percentage - a.percentage);

    const getColorClass = (percentage: number) => {
        if (percentage >= 75) return 'bg-green-500';
        if (percentage >= 50) return 'bg-blue-500';
        if (percentage >= 25) return 'bg-yellow-500';
        return 'bg-red-500';
    };

    const getTextColorClass = (percentage: number) => {
        if (percentage >= 75) return 'text-green-700';
        if (percentage >= 50) return 'text-blue-700';
        if (percentage >= 25) return 'text-yellow-700';
        return 'text-red-700';
    };

    return (
        <Card className="border-0 shadow-sm hover:shadow-md transition-shadow">
            <CardHeader className="pb-4">
                <CardTitle className="text-xl font-bold">Module Adoption</CardTitle>
                <p className="text-sm text-gray-500 mt-1">Usage across {totalTenants} active tenants</p>
            </CardHeader>
            <CardContent>
                <div className="space-y-4">
                    {sortedData.map((module, idx) => (
                        <div key={idx} className="space-y-2">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2">
                                    <span className="font-medium text-gray-900">{module.name}</span>
                                    <Badge variant="outline" className="text-xs">
                                        {module.tenants} tenants
                                    </Badge>
                                </div>
                                <span className={`text-sm font-bold ${getTextColorClass(module.percentage)}`}>
                                    {module.percentage}%
                                </span>
                            </div>
                            <div className="relative">
                                <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
                                    <div 
                                        className={`h-full ${getColorClass(module.percentage)} transition-all duration-300`}
                                        style={{ width: `${module.percentage}%` }}
                                    />
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Summary */}
                <div className="mt-6 pt-6 border-t">
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <p className="text-xs text-gray-600">Most Popular</p>
                            <p className="text-lg font-bold text-gray-900 mt-1">
                                {sortedData[0]?.name || 'N/A'}
                            </p>
                        </div>
                        <div>
                            <p className="text-xs text-gray-600">Average Adoption</p>
                            <p className="text-lg font-bold text-gray-900 mt-1">
                                {(data.reduce((sum, m) => sum + m.percentage, 0) / data.length).toFixed(1)}%
                            </p>
                        </div>
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}