import React, { useEffect, useState } from "react";
import {
    FiX,
    FiCheckCircle,
    FiXCircle,
    FiClock,
    FiUser,
    FiCalendar,
    FiFileText,
    FiAlertTriangle,
    FiTruck,
    FiUserCheck,
    FiUserX,
    FiPackage,
    FiMapPin,
    FiEye,
    FiRotateCcw,
    FiSend,
    FiMail,
    FiActivity,
    FiRefreshCw,
    FiLock,
    FiUnlock,
    FiUserPlus,
    FiEdit
} from "react-icons/fi";
import api from "../../config/api";
import { useParams } from "react-router-dom";
import logoRecord from '../../assets/record.svg'
import LoaderUi from "../../helper/LoaderUi";
import { FaRegEyeSlash } from "react-icons/fa";
import { MdAccessTime, MdCancel } from "react-icons/md";

interface AuditModalProps {
    closeModal: () => void;
}

const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
    const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();

    if (!accountId || !transactionId) {
        window.location.href = "/";
        return null;
    }

    let [auditStatus, setAuditStatus] = useState([])
    let [loading, setLoading] = useState(false)
    const getAuditDetails = async () => {
        setLoading(true)
        try {
            let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit`)
            if (res?.status === 200) {
                // console.log(res?.data?.events)
                let auditResponse = res?.data?.events
                setAuditStatus(auditResponse)
            }
        } catch (error) {
            console.log(error)
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        if (accountId && transactionId) {
            getAuditDetails()
        }
    }, [accountId, transactionId])


    const statusHistory = [
        {
            "action": "SENT",
            "message": "Transaction Sent by John Doe <john@email.com>",
            "status": "SENT",
            "eventData": {
                "ip": "192.168.1.1",
                "longitude": "3.3792",
                "latitude": "6.5244",
                "timezone": "WAT"
            },
            "timestamp": "2025-01-15T10:30:00Z",
            "language": "en"
        },
        {
            "action": "INVITED",
            "message": "Invitation Sent to Jane Smith <jane@email.com> to sign documents",
            "status": "SENT",
            "eventData": {
                "ip": "0.0.0.0",
                "longitude": "11",
                "latitude": "12",
                "timezone": ""
            },
            "timestamp": "2025-01-15T11:45:00Z",
            "language": "es"
        },
        {
            "action": "VIEWED",
            "message": "Document viewed by recipient Alice Johnson <alice@email.com>",
            "status": "VIEWED",
            "eventData": {
                "ip": "203.0.113.5",
                "longitude": "-74.0059",
                "latitude": "40.7128",
                "timezone": "EST"
            },
            "timestamp": "2025-01-15T14:20:00Z",
            "language": "en"
        },
        {
            "action": "SIGNED",
            "message": "Document signed by Bob Wilson <bob@email.com>",
            "status": "COMPLETED",
            "eventData": {
                "ip": "198.51.100.10",
                "longitude": "-122.4194",
                "latitude": "37.7749",
                "timezone": "PST"
            },
            "timestamp": "2025-01-15T16:10:00Z",
            "language": "en"
        }
    ];

    const getActionIcon = (action: string) => {
        const icons = {
            'CREATED': <FiFileText className="w-4 h-4 text-sky-500" />,
            'SENT': <FiSend className="w-4 h-4" />,
            'INVITED': <FiMail className="w-4 h-4" />,
            'COMPLETED': <FiCheckCircle className="w-4 h-4" />,
            'RE_SENT_INVITATION': <FiRefreshCw className="w-4 h-4" />,
            'RE_SENT_EXPIRED_INVITATION': <FiRefreshCw className="w-4 h-4" />,
            'VIEWED': <FiEye className="w-4 h-4" />,
            'VIEWED_IN_PERSON': <FaRegEyeSlash className="w-4 h-4" />, // Slightly different eye icon
            'AUTH_FAILED': <FiXCircle className="w-4 h-4 text-red-500" />,
            'ACCESS_CODE_FAILED': <FiLock className="w-4 h-4 text-red-500" />,
            'ACCESS_CODE_VALIDATED': <FiUnlock className="w-4 h-4 text-green-500" />,
            'AUTH_VALIDATED': <FiCheckCircle className="w-4 h-4 text-green-500" />,
            'SIGNED': <FiCheckCircle className="w-4 h-4" />,
            'EXPIRED': <MdAccessTime className="w-4 h-4 text-gray-500" />,
            'CANCELLED': <MdCancel className="w-4 h-4 text-red-500" />,
            'DECLINED': <FiXCircle className="w-4 h-4 text-red-500" />,
            'PENDING': <FiClock className="w-4 h-4" />,
            'ASSIGNED': <FiUserCheck className="w-4 h-4" />,
            'REASSIGNED': <FiUserPlus className="w-4 h-4" />,
            'EDITED': <FiEdit className="w-4 h-4" />,
        };

        return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />;
    };

    const getActionColor = (action: string, status: string) => {
        if (status === 'COMPLETED') return 'text-green-600';
        if (status === 'FAILED' || status === 'REJECTED') return 'text-red-600';
        if (status === 'PENDING') return 'text-yellow-600';

        const colors = {
            'SENT': 'text-blue-600',
            'INVITED': 'text-indigo-600',
            'VIEWED': 'text-purple-600',
            'SIGNED': 'text-green-600',
            'REJECTED': 'text-red-600'
        };
        return colors[action as keyof typeof colors] || 'text-gray-600';
    };

    const getStatusBadge = (status: string) => {
        const statusClasses = {
            'SENT': 'bg-blue-100 text-blue-800',
            'COMPLETED': 'bg-green-100 text-green-800',
            'FAILED': 'bg-red-100 text-red-800',
            'PENDING': 'bg-yellow-100 text-yellow-800',
            'VIEWED': 'bg-purple-100 text-purple-800',
            'REJECTED': 'bg-red-100 text-red-800'
        };
        return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
    };

    const formatTimestamp = (timestamp: string) => {
        try {
            const date = new Date(timestamp);
            if (isNaN(date.getTime())) {
                return timestamp;
            }

            const now = new Date();
            const diffMs = now.getTime() - date.getTime();
            const diffMins = Math.floor(diffMs / (1000 * 60));
            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

            if (diffMins < 60) {
                return `${diffMins}m ago`;
            } else if (diffHours < 24) {
                return `${diffHours}h ago`;
            } else if (diffDays < 7) {
                return `${diffDays}d ago`;
            } else {
                return date.toLocaleDateString('en-US', {
                    month: 'short',
                    day: 'numeric',
                    year: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            }
        } catch (error) {
            return timestamp;
        }
    };

    const extractEmailFromMessage = (message: string) => {
        const emailMatch = message.match(/<([^>]+)>/);
        return emailMatch ? emailMatch[1] : '';
    };

    return (
        <div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50">
            <div className="bg-white rounded-md shadow-md w-full max-w-[75vw] max-h-[95vh] min-h-[85vh] flex flex-col">
                {/* Header */}
                <div className="flex items-center justify-between p-3 border-b border-gray-200 bg-[var(--primary)] rounded-t-md">
                    <div className="flex items-center">
                        <h2 className="text-xl font-semibold text-white">
                            Audit Status
                        </h2>
                    </div>
                    <button
                        onClick={closeModal}
                        className="text-white cursor-pointer transition-colors hover:text-gray-200"
                    >
                        <FiX className="w-5 h-5" />
                    </button>
                </div>

                {/* Content */}
                <div className="flex-1 overflow-y-auto p-4 no-scrollbar">
                    {/* {loading ? <LoaderUi /> :  ""} */}
                    {auditStatus.length ?
                        <div className="space-y-1.5">
                            {/* <div className="text-sm text-gray-500 font-medium mb-2">TODAY</div> */}
                            {auditStatus.map((item, index) => (
                                <div key={index} className="flex items-start space-x-4 pb-3 border-b border-gray-100 last:border-b-0">
                                    <div className={`${getActionColor(item.action)} mt-1`}>
                                        {getActionIcon(item.action)}
                                    </div>
                                    <div className="flex-1">
                                        <p className="text-gray-600 font-medium text-sm mb-1">{item.message}</p>

                                        <div className="flex items-center space-x-2 text-xs text-gray-600 mb-1">
                                            <span>Action: {item.action}</span>
                                            {extractEmailFromMessage(item.message) && (
                                                <>
                                                    <span>•</span>
                                                    <span className="text-blue-600">{extractEmailFromMessage(item.message)}</span>
                                                </>
                                            )}
                                        </div>

                                        <div className="flex items-center space-x-2 mb-2">
                                            <span className="text-xs text-gray-600">Status:</span> <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.status)}`}>
                                                {item.status}
                                            </span>
                                            <span className="text-xs text-gray-500">{formatTimestamp(item.timestamp)}</span>
                                            {item.language && (
                                                <span className="text-xs text-gray-400 uppercase">{item.language}</span>
                                            )}
                                        </div>

                                        {/* Event Data Details */}
                                        {/* <div className="grid grid-cols-2 gap-4 text-xs text-gray-600 bg-gray-50 p-2 rounded">
                                        {item.eventData.ip && (
                                            <div>
                                                <span className="font-medium text-gray-700">IP:</span> {item.eventData.ip}
                                            </div>
                                        )}
                                        {item.eventData.timezone && (
                                            <div>
                                                <span className="font-medium text-gray-700">Timezone:</span> {item.eventData.timezone}
                                            </div>
                                        )}
                                        {item.eventData.latitude && item.eventData.longitude && (
                                            <div className="col-span-2">
                                                <span className="font-medium text-gray-700">Location:</span>
                                                <span className="ml-1">Lat: {item.eventData.latitude}, Lng: {item.eventData.longitude}</span>
                                            </div>
                                        )}
                                    </div> */}
                                    </div>
                                </div>
                            ))}
                        </div> :
                        <div className="flex justify-center items-center">
                            <img
                                src={logoRecord}
                                alt="Record Not Found"
                                className="w-80 h-80 opacity-70" // adjust size and appearance
                            />
                        </div>
                    }
                </div>

                {/* Footer */}
                <div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50">
                    <div className="text-sm text-gray-600">
                        Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''}
                    </div>
                    <button
                        onClick={closeModal}
                        className="cursor-pointer px-4 py-1.5 bg-[var(--sendForSignBgCol)] text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
                    >
                        Close
                    </button>
                </div>
            </div>
        </div>
    );
};

export default AuditModal;