import React from 'react';

interface StorageItem {
    key: string;
    value: string;
    size: number;
    isSensitive: boolean;
}

interface StorageDetailsProps {
  localItems: StorageItem[];
  sessionItems: StorageItem[];
}

export const StorageDetails: React.FC<StorageDetailsProps> = ({ localItems, sessionItems }) => {
    const totalItems = localItems.length + sessionItems.length;
    const sensitiveCount = [...localItems, ...sessionItems].filter(i => i.isSensitive).length;

    return (
        <div>
            {sensitiveCount > 0 && (
                <div className="mb-3 bg-yellow-50 border border-yellow-300 rounded-md p-3 text-xs">
                    <div className="flex items-start gap-2">
                        <span className="text-yellow-600 mt-0.5">⚠️</span>
                        <div className="text-yellow-800">
                            <strong>Security Notice:</strong> Sensitive data persists in browser storage
                            (survives refresh/restart). Clear manually if on shared device.
                        </div>
                    </div>
                </div>
            )}

            <div className="space-y-3">
                <StorageSection title="localStorage" items={localItems} icon="💾" />
                <StorageSection title="sessionStorage" items={sessionItems} icon="⏱️" />
            </div>

            {totalItems === 0 && (
                <div className="text-center py-6">
                    <div className="text-4xl mb-2">✅</div>
                    <p className="text-sm text-gray-500">No data in browser storage</p>
                </div>
            )}
        </div>
    );
};

const StorageSection = ({ title, items, icon }: { title: string; items: StorageItem[]; icon: string }) => {
    if (items.length === 0) return null;

    return (
        <div>
            <h4 className="text-xs font-bold text-gray-500 mb-2 flex items-center gap-1">
                <span>{icon}</span>
                <span className="uppercase">{title}</span>
                <span className="ml-auto text-gray-400 font-normal">({items.length})</span>
            </h4>
            <div className="space-y-2">
                {items.map((item) => (
                    <div
                        key={item.key}
                        className={`text-xs rounded-md border p-2 ${item.isSensitive
                                ? 'bg-red-50 border-red-300'
                                : 'bg-gray-50 border-gray-200'
                            }`}
                    >
                        <div className="flex justify-between items-start gap-2 mb-1">
                            <span className={`font-mono font-semibold text-[11px] break-all ${item.isSensitive ? 'text-red-700' : 'text-gray-700'
                                }`}>
                                {item.isSensitive && '🔴 '}{item.key}
                            </span>
                            <span className="text-gray-400 text-[10px] whitespace-nowrap">{item.size}B</span>
                        </div>
                        <div className="text-gray-500 font-mono text-[10px] break-all leading-relaxed opacity-70">
                            {item.value}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};
