import { Card, CardContent, CardHeader } from '@/components/ui/Card';
import type { Company } from '@/types/Company';
import type { User } from '@/types/User';
import { Loader } from '@/components/ui/Loader';
import { Building } from "lucide-react";

interface InformationWidgetProps {
    user: User | null;
    company: Company | null;
    isLoading: boolean;
    error: string | null;
}

function setVipBadge(vip_level: string | undefined) {
    switch (vip_level?.toLowerCase()) {
        case "platinum":
            return <span className="px-2 py-1 bg-amber-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
        case "premium":
            return <span className="px-2 py-1 bg-violet-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
        default:
            return <span className="px-2 py-1 bg-blue-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
    }
}

export const InformationWidget: React.FC<InformationWidgetProps> = ({
    user,
    company,
    isLoading,
    error,
}) => {
    return (
        <Card>
            <CardHeader className="p-6 border-slate-100">
                <h2 className="text-lg font-semibold text-slate-900 border-slate-100 flex items-center">
                    <Building className="w-5 h-5 mr-2 text-slate-400" />
                    Profil de l'Organisation
                </h2>
            </CardHeader>

            {isLoading && !error && <Loader />}
            {!isLoading && !error && (
                <CardContent>
                    <dl className="space-y-4 text-sm">
                        <div>
                            <dt className="text-slate-500 font-medium">Entité Légale</dt>
                            <dd className="mt-1 font-semibold text-slate-900">{company?.name}</dd>
                        </div>
                        <div>
                            <dt className="text-slate-500 font-medium">Administrateur du compte</dt>
                            <dd className="mt-1 text-slate-900">{user?.role} {user?.name}</dd>
                            <dd className="mt-1 text-slate-500">Email : {user?.emailVisibility && user?.email}{!user?.emailVisibility && "caché"}</dd>
                        </div>
                        <div>
                            <dt className="text-slate-500 font-medium">Niveau d'Infogérance (SLA)</dt>
                            <dd className="mt-1 flex items-center">
                                {setVipBadge(company?.vip_level)}
                                <span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
                            </dd>
                        </div>
                    </dl>
                </CardContent>
            )}
        </Card>
    );
}

export default InformationWidget;