import { useState } from 'react';

export const SecurityWarnings = () => {
    const [isExpanded, setIsExpanded] = useState(false);

    return (
        <div className="fixed bottom-4 left-4 z-50 max-w-sm">
            <div className="bg-yellow-50 border-2 border-yellow-400 rounded-lg shadow-lg">

                {/* Header */}
                <div
                    className="px-4 py-3 cursor-pointer flex items-center justify-between hover:bg-yellow-100 transition-colors rounded-t-lg"
                    onClick={() => setIsExpanded(!isExpanded)}
                >
                    <div className="flex items-center gap-2">
                        <span className="text-lg">⚠️</span>
                        <span className="font-semibold text-sm text-yellow-900">Security Limitations</span>
                    </div>
                    <span className="text-yellow-600 text-sm">{isExpanded ? '▼' : '▶'}</span>
                </div>

                {/* Expanded Content */}
                {isExpanded && (
                    <div className="px-4 py-3 border-t border-yellow-300 space-y-3 max-h-96 overflow-y-auto">

                        <Warning
                            icon="🧵"
                            title="JavaScript Strings are Immutable"
                            description="Strings cannot be overwritten in memory. Copies persist until garbage collection runs (timing unpredictable)."
                        />

                        <Warning
                            icon="🗑️"
                            title="No Guaranteed Memory Wiping"
                            description="JavaScript has no secure memory clearing. Sensitive data may linger in RAM until GC or browser restart."
                        />

                        <Warning
                            icon="📋"
                            title="Clipboard Exposure"
                            description="Copied data is accessible to other tabs/apps. Browser extensions can read clipboard contents."
                        />

                        <Warning
                            icon="💾"
                            title="Browser Storage Persistence"
                            description="localStorage survives browser restart. sessionStorage survives page refresh. Both readable by any script on this domain."
                        />

                        <Warning
                            icon="🔍"
                            title="DevTools Access"
                            description="All app state, memory, and storage visible in browser DevTools. Never use on untrusted devices."
                        />

                        <Warning
                            icon="🌐"
                            title="Network Risks (When Online)"
                            description="If hosted online: DNS, HTTPS, CDN, and browser can see usage patterns. Use offline/local for maximum security."
                        />

                        <div className="pt-2 border-t border-yellow-300 text-xs text-yellow-800">
                            <strong>Recommendation:</strong> Use this tool on a dedicated offline device.
                            Clear browser data after each use. Never use on shared/public computers.
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};

const Warning = ({ icon, title, description }: { icon: string; title: string; description: string }) => (
    <div className="flex gap-2 text-xs">
        <span className="text-base flex-shrink-0">{icon}</span>
        <div>
            <div className="font-semibold text-yellow-900 mb-0.5">{title}</div>
            <div className="text-yellow-800 leading-relaxed">{description}</div>
        </div>
    </div>
);