import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@admin/components/ui/card';
import { Badge } from '@admin/components/ui/badge';
import { AlertCircle, CheckCircle, AlertTriangle } from 'lucide-react';

interface TenantHealthData {
    healthy: number;
    warning: number;
    critical: number;
    total: number;
}

interface TenantHealthProps {
    data: TenantHealthData;
}

export function TenantHealthCard({ data }: TenantHealthProps) {
    const healthyPercentage = (data.healthy / data.total) * 100;
    const warningPercentage = (data.warning / data.total) * 100;
    const criticalPercentage = (data.critical / data.total) * 100;

    const segments = [
        {
            label: 'Healthy',
            count: data.healthy,
            percentage: healthyPercentage,
            color: 'bg-green-500',
            icon: CheckCircle,
            iconColor: 'text-green-600',
            badgeVariant: 'default' as const,
        },
        {
            label: 'Warning',
            count: data.warning,
            percentage: warningPercentage,
            color: 'bg-yellow-500',
            icon: AlertTriangle,
            iconColor: 'text-yellow-600',
            badgeVariant: 'secondary' as const,
        },
        {
            label: 'Critical',
            count: data.critical,
            percentage: criticalPercentage,
            color: 'bg-red-500',
            icon: AlertCircle,
            iconColor: 'text-red-600',
            badgeVariant: 'destructive' as const,
        },
    ];

    return (
        <Card className="border-0 shadow-sm hover:shadow-md transition-shadow">
            <CardHeader className="pb-4">
                <CardTitle className="text-xl font-bold">Tenant Health Overview</CardTitle>
                <p className="text-sm text-gray-500 mt-1">Status distribution across {data.total} tenants</p>
            </CardHeader>
            <CardContent>
                {/* Visual bar */}
                <div className="relative h-3 bg-gray-100 rounded-full overflow-hidden mb-6">
                    <div
                        className="absolute left-0 top-0 h-full bg-green-500"
                        style={{ width: `${healthyPercentage}%` }}
                    />
                    <div
                        className="absolute top-0 h-full bg-yellow-500"
                        style={{
                            left: `${healthyPercentage}%`,
                            width: `${warningPercentage}%`,
                        }}
                    />
                    <div
                        className="absolute top-0 h-full bg-red-500"
                        style={{
                            left: `${healthyPercentage + warningPercentage}%`,
                            width: `${criticalPercentage}%`,
                        }}
                    />
                </div>

                {/* Stats */}
                <div className="space-y-4">
                    {segments.map((segment, idx) => {
                        const Icon = segment.icon;
                        return (
                            <div
                                key={idx}
                                className="flex items-center justify-between p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
                            >
                                <div className="flex items-center gap-3">
                                    <div className={`p-2 rounded-lg bg-white`}>
                                        <Icon className={`h-4 w-4 ${segment.iconColor}`} />
                                    </div>
                                    <div>
                                        <p className="font-medium text-gray-900">{segment.label}</p>
                                        <p className="text-xs text-gray-500">
                                            {segment.percentage.toFixed(1)}% of total
                                        </p>
                                    </div>
                                </div>
                                <Badge variant={segment.badgeVariant} className="text-lg font-bold px-3 py-1">
                                    {segment.count}
                                </Badge>
                            </div>
                        );
                    })}
                </div>

                {/* Action items */}
                {data.critical > 0 && (
                    <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
                        <p className="text-sm font-medium text-red-900">
                            <AlertCircle className="h-4 w-4 inline mr-1" />
                            {data.critical} tenant{data.critical > 1 ? 's' : ''} require immediate attention
                        </p>
                    </div>
                )}
            </CardContent>
        </Card>
    );
}