import React from 'react';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "./ui/dialog";

interface ChatStatisticsModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    contactInfo: any;
    isFetching?: boolean;
}

export default function ChatStatisticsModal({ open, onOpenChange, contactInfo, isFetching }: ChatStatisticsModalProps) {
    if (!contactInfo) return null;

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <DialogTitle>Statistik</DialogTitle>
                </DialogHeader>
                
                <div className="flex flex-col gap-6 py-4 relative">
                    {isFetching && (
                        <div className="absolute inset-0 bg-white/50 dark:bg-zinc-900/50 z-10 flex items-center justify-center rounded-md">
                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white"></div>
                        </div>
                    )}
                    <div>
                        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Kategori Pesan</h3>
                        <div className="grid grid-cols-2 gap-x-8 gap-y-3 text-sm text-gray-600 dark:text-gray-400">
                            <div className="flex justify-between items-center bg-gray-50 dark:bg-zinc-800/50 p-2 rounded-md">
                                <span>Reels</span>
                                <span className="font-medium text-gray-900 dark:text-gray-100">{contactInfo.template_reels_count || '-'}</span>
                            </div>
                            <div className="flex justify-between items-center bg-gray-50 dark:bg-zinc-800/50 p-2 rounded-md">
                                <span>Surat Penawaran</span>
                                <span className="font-medium text-gray-900 dark:text-gray-100">{contactInfo.template_sp_count || '-'}</span>
                            </div>
                            <div className="flex justify-between items-center bg-gray-50 dark:bg-zinc-800/50 p-2 rounded-md">
                                <span>Free Survey</span>
                                <span className="font-medium text-gray-900 dark:text-gray-100">{contactInfo.template_free_survey_count || '-'}</span>
                            </div>
                            <div className="flex justify-between items-center bg-gray-50 dark:bg-zinc-800/50 p-2 rounded-md">
                                <span>Security</span>
                                <span className="font-medium text-gray-900 dark:text-gray-100">{contactInfo.template_security_count || '-'}</span>
                            </div>
                            <div className="flex justify-between items-center bg-gray-50 dark:bg-zinc-800/50 p-2 rounded-md">
                                <span>Cabang</span>
                                <span className="font-medium text-gray-900 dark:text-gray-100">{contactInfo.template_cabang_count || '-'}</span>
                            </div>
                            <div className="flex justify-between items-center bg-gray-50 dark:bg-zinc-800/50 p-2 rounded-md">
                                <span>Garansi</span>
                                <span className="font-medium text-gray-900 dark:text-gray-100">{contactInfo.template_garansi_count || '-'}</span>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Pesan Template</h3>
                        <div className="grid grid-cols-2 gap-x-8 gap-y-3 text-sm text-gray-600 dark:text-gray-400">
                            <div className="flex justify-between items-center bg-gray-50 dark:bg-zinc-800/50 p-2 rounded-md">
                                <span>Terkirim</span>
                                <span className="font-medium text-gray-900 dark:text-gray-100">{contactInfo.template_sent_count || '-'}</span>
                            </div>
                            <div className="flex justify-between items-center bg-gray-50 dark:bg-zinc-800/50 p-2 rounded-md">
                                <span>Gagal</span>
                                <span className="font-medium text-gray-900 dark:text-gray-100">{contactInfo.template_failed_count || '-'}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}