import Modal from '../components/common/Modal'
import Button from '../components/common/Button'

const ViewLogModal = ({ isOpen, log, onClose }) => {
    if (!log) return null

    const InfoGroup = ({ title, children, icon, colorClass = "bg-[#409CA4]" }) => (
        <div className="mb-8 last:mb-0">
            <div className="flex items-center gap-3 mb-5 pb-3 border-b-4 border-gray-100">
                <div className={`w-8 h-8 ${colorClass} rounded-lg flex items-center justify-center text-white shadow-md`}>
                    <span className="text-lg">{icon}</span>
                </div>
                <h3 className="text-lg font-black text-[#111827] uppercase tracking-wider">
                    {title}
                </h3>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-12 px-2">
                {children}
            </div>
        </div>
    )

    const DetailItem = ({ label, value, fullWidth = false }) => (
        <div className={`${fullWidth ? 'md:col-span-2' : ''} space-y-1 group`}>
            <p className="text-xs text-gray-400 font-black uppercase tracking-widest group-hover:text-[#409CA4] transition-colors">{label}</p>
            <p className="text-base text-[#111827] font-bold break-all bg-gray-50/50 p-3 rounded-xl border border-transparent hover:border-gray-200 transition-all">
                {value || '-'}
            </p>
        </div>
    )

    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            title="System Activity Log Detail"
            size="3xl"
        >
            <div className="max-h-[75vh] overflow-y-auto px-2 custom-scrollbar space-y-4">

                {/* ── HEADER SUMMARY ── */}
                <div className="bg-gradient-to-br from-gray-50 to-white rounded-3xl p-6 mb-8 border-2 border-gray-100 flex flex-col md:flex-row justify-between items-center gap-6">
                    <div className="flex items-center gap-5">
                        <div className="w-16 h-16 rounded-2xl bg-white shadow-xl flex items-center justify-center text-3xl border border-gray-100">
                            🔍
                        </div>
                        <div>
                            <p className="text-xs font-black text-gray-400 uppercase">Event Reference</p>
                            <h2 className="text-2xl font-black text-[#111827] ring-offset-2">#{log.id} — {log.log_type}</h2>
                        </div>
                    </div>
                    <div className="text-right">
                        <p className="text-xs font-black text-gray-400 uppercase">Timestamp</p>
                        <p className="text-lg font-black text-[#409CA4]">{new Date(log.created).toLocaleString()}</p>
                    </div>
                </div>

                <div className="px-2">
                    <InfoGroup title="Originating Identity" icon="👤">
                        <DetailItem label="Full Legal Name" value={`${log.first_name || ''} ${log.last_name || ''}`} />
                        <DetailItem label="Authenticated Email" value={log.email} />
                        <DetailItem label="Unique User ID" value={log.user_id} />
                        <DetailItem label="Originating IP / Host" value={log.ip_address} />
                    </InfoGroup>

                    <InfoGroup title="Event Description" icon="📝" colorClass="bg-[#e8713a]">
                        <DetailItem label="Action Summary" value={log.description} fullWidth />
                        <DetailItem label="Developer Log Output" value={log.logmessage} fullWidth />
                        <DetailItem label="Raw System Context" value={log.system_details} fullWidth />
                    </InfoGroup>

                    {(log.device_type || log.os || log.browser) && (
                        <InfoGroup title="Environment Context" icon="💻" colorClass="bg-[#5cb85c]">
                            <DetailItem label="Hardware Profile" value={log.device_type} />
                            <DetailItem label="Operating System" value={log.os} />
                            <DetailItem label="Browser Client" value={log.browser} />
                        </InfoGroup>
                    )}

                    {(log.plan_id || log.paymentlog_id || log.cart_id || log.numerologyreport_id || log.notification_id) && (
                        <InfoGroup title="Relational Mappings" icon="🔗" colorClass="bg-[#409CA4]">
                            <DetailItem label="Subscription Plan ID" value={log.plan_id} />
                            <DetailItem label="Transaction ID" value={log.paymentlog_id} />
                            <DetailItem label="Checkout Session" value={log.cart_id} />
                            <DetailItem label="Product ID" value={log.numerologyreport_id} />
                            <DetailItem label="Internal Ref" value={log.notification_id} />
                        </InfoGroup>
                    )}
                </div>
            </div>

            <div className="flex justify-end pt-6 border-t-4 border-gray-100 mt-6 pb-2">
                <Button onClick={onClose} variant="secondary" size="lg" className="px-12">Close Explorer</Button>
            </div>
        </Modal>
    )
}

export default ViewLogModal
