
import React from 'react';
import { getUnisphereInstance } from '@unisphere/runtime-js'
import { useEffect } from 'react'
import { useState } from 'react';
import { NotificationsRuntime, NotificationTypes, AlertIconEnum } from '@unisphere/notifications-core';
import { PlaygroundCard } from '@site/src/components/ui-shared/playground-card';

export const NotificationsExperience = ({ preload }: { preload?: boolean }) => {

    const [runtime, setRuntime] = useState<NotificationsRuntime | null>(null);

    useEffect(() => {
        getUnisphereInstance('').then(workspace => {
            const runtime = workspace.getRuntime<NotificationsRuntime>('unisphere.widget.notifications', 'notifications');
            setRuntime(runtime);
        }).catch(e => {
            console.error(e)
        })
    }, [preload])


    return (
        <PlaygroundCard
            title="Playground - Notifications"
        >
            <div style={{ marginBottom: '1rem', color: '#64748b', fontSize: '0.9rem' }}>
                Experience Unisphere's notification system with different types and styles. Each button demonstrates a different notification approach.
            </div>

            <div
                style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                    gap: '12px',
                    marginBottom: '1rem'
                }}
            >
                {/* Toast Notification */}
                <button
                    onClick={() => runtime?.addNotification({
                        type: NotificationTypes.Toast,
                        content: {
                            title: 'Toast Alert! 🍞',
                            message: 'This toast is more reliable than your morning bread. Unlike your code, it actually pops up when expected!',
                        },

                    })}
                    disabled={!runtime}
                    style={{
                        padding: '12px 16px',
                        backgroundColor: runtime ? '#3b82f6' : '#94a3b8',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        fontSize: '14px',
                        fontWeight: '500',
                        cursor: runtime ? 'pointer' : 'not-allowed',
                        transition: 'all 0.2s ease',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '8px'
                    }}
                    onMouseEnter={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#2563eb';
                        }
                    }}
                    onMouseLeave={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#3b82f6';
                        }
                    }}
                >
                    🍞 Toast
                </button>

                {/* Overlay Notification
                <button
                    onClick={() => runtime?.addNotification({
                        type: NotificationTypes.Overlay,
                        content: {
                            title: 'Welcome to Unisphere',
                            message: 'This overlay demonstrates how important announcements can be displayed prominently.',
                            actions: [
                                { label: 'Get Started', action: () => console.log('Get Started clicked') },
                                { label: 'Learn More', action: () => console.log('Learn More clicked') }
                            ]
                        }
                    })}
                    disabled={!runtime}
                    style={{
                        padding: '12px 16px',
                        backgroundColor: runtime ? '#10b981' : '#94a3b8',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        fontSize: '14px',
                        fontWeight: '500',
                        cursor: runtime ? 'pointer' : 'not-allowed',
                        transition: 'all 0.2s ease',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '8px'
                    }}
                    onMouseEnter={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#059669';
                        }
                    }}
                    onMouseLeave={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#10b981';
                        }
                    }}
                >
                    📋 Overlay
                </button> */}

                {/* Custom Toast */}
                <button
                    onClick={() => runtime?.addNotification({
                        type: NotificationTypes.CustomToast,
                        callbacks: {
                            onMounted: (div: HTMLDivElement) => {
                                // Create custom toast content with funny documentation-relevant message
                                div.innerHTML = `
                                    <div style="
                                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                                        color: white;
                                        padding: 16px 20px;
                                        border-radius: 12px;
                                        box-shadow: 0 8px 32px rgba(0,0,0,0.2);
                                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                                        max-width: 350px;
                                        position: relative;
                                        overflow: hidden;
                                    ">
                                        <div style="
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            right: 0;
                                            height: 3px;
                                            background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
                                            animation: shimmer 2s infinite;
                                        "></div>
                                        <div style="display: flex; align-items: center; gap: 12px;">
                                            <div style="font-size: 24px;">🎉</div>
                                            <div>
                                                <div style="font-weight: 600; margin-bottom: 4px;">
                                                    Documentation Ninja Achievement Unlocked!
                                                </div>
                                                <div style="font-size: 14px; opacity: 0.9; line-height: 1.4;">
                                                    You've successfully triggered a custom toast! Your developer skills are 
                                                    <strong>over 9000</strong> 🚀. The docs are proud of you.
                                                </div>
                                            </div>
                                        </div>
                                        <div style="
                                            margin-top: 12px;
                                            padding-top: 12px;
                                            border-top: 1px solid rgba(255,255,255,0.2);
                                            font-size: 12px;
                                            opacity: 0.8;
                                            text-align: center;
                                        ">
                                            💡 Pro tip: Custom toasts can contain any HTML content!
                                        </div>
                                    </div>
                                    <style>
                                        @keyframes shimmer {
                                            0% { transform: translateX(-100%); }
                                            100% { transform: translateX(100%); }
                                        }
                                    </style>
                                `;
                            },
                            onUnmounted: (id: string) => {
                                console.log('🎉 Custom toast with ID', id, 'has been dismissed. Thanks for playing!');
                            }
                        }
                    })}
                    disabled={!runtime}
                    style={{
                        padding: '12px 16px',
                        backgroundColor: runtime ? '#8b5cf6' : '#94a3b8',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        fontSize: '14px',
                        fontWeight: '500',
                        cursor: runtime ? 'pointer' : 'not-allowed',
                        transition: 'all 0.2s ease',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '8px'
                    }}
                    onMouseEnter={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#7c3aed';
                        }
                    }}
                    onMouseLeave={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#8b5cf6';
                        }
                    }}
                >
                    🎨 Custom Toast
                </button>

                {/* Borderless Toast */}
                <button
                    onClick={() => runtime?.addNotification({
                        type: NotificationTypes.BorderlessToast,
                        callbacks: {
                            onMounted: (div: HTMLDivElement) => {
                                // Create a funny borderless toast with coffee theme
                                div.innerHTML = `
                                    <div style="
                                        background: linear-gradient(45deg, #8B4513, #D2691E, #CD853F);
                                        color: white;
                                        padding: 16px 24px;
                                        border-radius: 50px;
                                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                                        box-shadow: 0 4px 20px rgba(139, 69, 19, 0.3);
                                        display: flex;
                                        align-items: center;
                                        gap: 12px;
                                        max-width: 400px;
                                        position: relative;
                                        overflow: hidden;
                                        animation: float 3s ease-in-out infinite;
                                    ">
                                        <div style="
                                            position: absolute;
                                            top: 0;
                                            left: -100%;
                                            width: 100%;
                                            height: 100%;
                                            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
                                            animation: shimmer 2s infinite;
                                        "></div>
                                        <div style="font-size: 24px; z-index: 1;">☕</div>
                                        <div style="z-index: 1;">
                                            <div style="font-weight: 600; font-size: 14px; margin-bottom: 2px;">
                                                Borderless Achievement Unlocked! 🏆
                                            </div>
                                            <div style="font-size: 13px; opacity: 0.9; line-height: 1.3;">
                                                Like your code after 3 cups of coffee - no boundaries, just pure magic! ✨
                                            </div>
                                        </div>
                                        <div style="
                                            font-size: 20px; 
                                            z-index: 1;
                                            animation: bounce 1s ease-in-out infinite alternate;
                                        ">🚀</div>
                                    </div>
                                    <style>
                                        @keyframes float {
                                            0%, 100% { transform: translateY(0px); }
                                            50% { transform: translateY(-5px); }
                                        }
                                        @keyframes shimmer {
                                            0% { left: -100%; }
                                            100% { left: 100%; }
                                        }
                                        @keyframes bounce {
                                            0% { transform: scale(1); }
                                            100% { transform: scale(1.1); }
                                        }
                                    </style>
                                `;
                            },
                            onUnmounted: (id: string) => {
                                console.log('☕ Borderless toast with ID', id, 'has floated away like steam from your coffee cup! Keep coding! 🚀');
                            }
                        }
                    })}
                    disabled={!runtime}
                    style={{
                        padding: '12px 16px',
                        backgroundColor: runtime ? '#f59e0b' : '#94a3b8',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        fontSize: '14px',
                        fontWeight: '500',
                        cursor: runtime ? 'pointer' : 'not-allowed',
                        transition: 'all 0.2s ease',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '8px'
                    }}
                    onMouseEnter={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#d97706';
                        }
                    }}
                    onMouseLeave={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#f59e0b';
                        }
                    }}
                >
                    ✨ Borderless
                </button>

                {/* Custom Overlay */}
                <button
                    onClick={() => runtime?.addNotification({
                        type: NotificationTypes.CustomOverlay,
                        options: {
                            duration: 3000
                        },
                        callbacks: {
                            onMounted: (div: HTMLDivElement) => {
                                // Create a hilarious developer-themed custom overlay (no backdrop since one exists)
                                div.innerHTML = `
<div style="
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    animation: slideInRight 0.3s ease-out;
">

    <div style="
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        max-width: 280px;
      
      
    ">

        <div style="display: flex; align-items: flex-start; gap: 12px;">
            <div style="font-size: 20px; margin-top: 2px;">🤖</div>

            <div style="flex: 1;">
                <div style="
                    font-weight: 600; 
                    font-size: 14px; 
                    color: #f3f4f6;
                    margin-bottom: 4px;
                ">
                    Custom Overlay Active
                </div>

                <div style="
                    font-size: 13px; 
                    color: #d1d5db;
                    line-height: 1.4; 
                    margin-bottom: 12px;
                ">
                    You've unlocked advanced notification powers! ✨
                </div>

                <div style="display: flex; gap: 8px;">
                    <button 
                        style="
                            background: #3b82f6;
                            color: white;
                            border: none;
                            padding: 6px 12px;
                            border-radius: 6px;
                            font-size: 12px;
                            font-weight: 500;
                            cursor: pointer;
                            transition: all 0.2s ease;
                        "
                        onmouseover="this.style.background='#2563eb'"
                        onmouseout="this.style.background='#3b82f6'"
                    >
                        Got it!
                    </button>

                    <button                         
                        style="
                            background: rgba(255,255,255,0.06);
                            color: #e5e7eb;
                            border: 1px solid rgba(255,255,255,0.15);
                            padding: 6px 12px;
                            border-radius: 6px;
                            font-size: 12px;
                            font-weight: 500;
                            cursor: pointer;
                            transition: all 0.2s ease;
                        "
                        onmouseover="this.style.background='rgba(255,255,255,0.12)'"
                        onmouseout="this.style.background='rgba(255,255,255,0.06)'"
                    >
                        ☕ Later
                    </button>
                </div>
            </div>

            <button 
                onclick="this.closest('[style*=fixed]').style.display='none';"
                style="
                    background: transparent;
                    border: none;
                    color: #9ca3af;
                    font-size: 16px;
                    cursor: pointer;
                    padding: 2px;
                    line-height: 1;
                    transition: color 0.2s ease;
                "
                onmouseover="this.style.color='#f3f4f6'"
                onmouseout="this.style.color='#9ca3af'"
            >
                ×
            </button>
        </div>
    </div>
</div>

<style>
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
</style>
`;
                            },
                            onUnmounted: (id: string) => {
                                console.log('🤖 Custom overlay with ID', id, 'has completed its mission! Developer productivity levels: MAXIMUM! 🚀☕');
                            }
                        }
                    })}
                    disabled={!runtime}
                    style={{
                        padding: '12px 16px',
                        backgroundColor: runtime ? '#ef4444' : '#94a3b8',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        fontSize: '14px',
                        fontWeight: '500',
                        cursor: runtime ? 'pointer' : 'not-allowed',
                        transition: 'all 0.2s ease',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '8px'
                    }}
                    onMouseEnter={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#dc2626';
                        }
                    }}
                    onMouseLeave={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#ef4444';
                        }
                    }}
                >
                    🚀 Custom Overlay
                </button>

                {/* Information Alert */}
                <button
                    onClick={() => runtime?.addNotification({
                        type: NotificationTypes.Alert,
                        text: 'Did you know? Unisphere can load experiences faster than you can say "JavaScript framework fatigue"! 🚀',
                        variant: AlertIconEnum.Information,
                        showIcon: true
                    })}
                    disabled={!runtime}
                    style={{
                        padding: '12px 16px',
                        backgroundColor: runtime ? '#3b82f6' : '#94a3b8',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        fontSize: '14px',
                        fontWeight: '500',
                        cursor: runtime ? 'pointer' : 'not-allowed',
                        transition: 'all 0.2s ease',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '8px'
                    }}
                    onMouseEnter={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#2563eb';
                        }
                    }}
                    onMouseLeave={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#3b82f6';
                        }
                    }}
                >
                    ℹ️ Info Alert
                </button>

                {/* Success Alert */}
                <button
                    onClick={() => runtime?.addNotification({
                        type: NotificationTypes.Alert,
                        text: 'Congratulations! You\'ve successfully mastered the art of clicking buttons. Your developer level has increased! 🎉',
                        variant: AlertIconEnum.Success,
                        showIcon: true
                    })}
                    disabled={!runtime}
                    style={{
                        padding: '12px 16px',
                        backgroundColor: runtime ? '#10b981' : '#94a3b8',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        fontSize: '14px',
                        fontWeight: '500',
                        cursor: runtime ? 'pointer' : 'not-allowed',
                        transition: 'all 0.2s ease',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '8px'
                    }}
                    onMouseEnter={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#059669';
                        }
                    }}
                    onMouseLeave={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#10b981';
                        }
                    }}
                >
                    ✅ Success Alert
                </button>

                {/* Warning Alert */}
                <button
                    onClick={() => runtime?.addNotification({
                        type: NotificationTypes.Alert,
                        text: 'Warning: Your coffee levels are dangerously low! Productivity may decrease by 73%. Please refuel immediately! ☕',
                        variant: AlertIconEnum.Warning,
                        showIcon: true
                    })}
                    disabled={!runtime}
                    style={{
                        padding: '12px 16px',
                        backgroundColor: runtime ? '#f59e0b' : '#94a3b8',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        fontSize: '14px',
                        fontWeight: '500',
                        cursor: runtime ? 'pointer' : 'not-allowed',
                        transition: 'all 0.2s ease',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '8px'
                    }}
                    onMouseEnter={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#d97706';
                        }
                    }}
                    onMouseLeave={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#f59e0b';
                        }
                    }}
                >
                    ⚠️ Warning Alert
                </button>

                {/* Error Alert */}
                <button
                    onClick={() => runtime?.addNotification({
                        type: NotificationTypes.Alert,
                        text: 'Error 404: Your motivation not found. Have you tried turning your coffee machine off and on again? 🤖',
                        variant: AlertIconEnum.Error,
                        showIcon: true
                    })}
                    disabled={!runtime}
                    style={{
                        padding: '12px 16px',
                        backgroundColor: runtime ? '#dc2626' : '#94a3b8',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        fontSize: '14px',
                        fontWeight: '500',
                        cursor: runtime ? 'pointer' : 'not-allowed',
                        transition: 'all 0.2s ease',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '8px'
                    }}
                    onMouseEnter={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#b91c1c';
                        }
                    }}
                    onMouseLeave={(e) => {
                        if (runtime) {
                            (e.target as HTMLButtonElement).style.backgroundColor = '#dc2626';
                        }
                    }}
                >
                    ❌ Error Alert
                </button>
            </div>

            {!runtime && (
                <div
                    style={{
                        padding: '12px 16px',
                        backgroundColor: '#fef3c7',
                        border: '1px solid #f59e0b',
                        borderRadius: '8px',
                        fontSize: '14px',
                        color: '#92400e',
                        textAlign: 'center'
                    }}
                >
                    💡 Notifications runtime is loading... Buttons will be enabled once ready.
                </div>
            )}
        </PlaygroundCard>
    );
}