<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Storage Interface</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        #file-list {
            list-style-type: none;
            padding: 0;
        }
        #file-list li {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }
        #file-list button {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <h1>File Storage Interface</h1>
    <input type="file" id="file-input">
    <button onclick="uploadFile()">Upload</button>
    <h2>File List</h2>
    <ul id="file-list"></ul>

    <script>
        class FileStorage {
            constructor() {
                this.storage = localStorage;
            }

            upload(file) {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        const fileData = event.target.result;
                        const fileInfo = {
                            name: file.name,
                            size: file.size,
                            type: file.type,
                            data: fileData
                        };
                        this.storage.setItem(file.name, JSON.stringify(fileInfo));
                        resolve(fileInfo);
                    };
                    reader.onerror = (error) => reject(error);
                    reader.readAsDataURL(file);
                });
            }

            download(fileName) {
                const fileInfo = this.getFileInfo(fileName);
                if (!fileInfo) {
                    throw new Error('File not found');
                }
                const link = document.createElement('a');
                link.href = fileInfo.data;
                link.download = fileInfo.name;
                link.click();
            }

            delete(fileName) {
                this.storage.removeItem(fileName);
            }

            list() {
                return Object.keys(this.storage)
                    .map(key => this.getFileInfo(key))
                    .filter(fileInfo => fileInfo !== null)
                    .map(fileInfo => ({
                        name: fileInfo.name,
                        size: fileInfo.size
                    }));
            }

            stat(fileName) {
                const fileInfo = this.getFileInfo(fileName);
                if (!fileInfo) {
                    throw new Error('File not found');
                }
                return {
                    name: fileInfo.name,
                    size: fileInfo.size
                };
            }

            getFileInfo(fileName) {
                try {
                    const fileInfo = JSON.parse(this.storage.getItem(fileName));
                    if (fileInfo && fileInfo.name && fileInfo.size) {
                        return fileInfo;
                    }
                } catch (error) {
                    console.warn(`Invalid file info for ${fileName}:`, error);
                }
                return null;
            }
        }

        const fileStorage = new FileStorage();

        function uploadFile() {
            const fileInput = document.getElementById('file-input');
            const file = fileInput.files[0];
            if (file) {
                fileStorage.upload(file).then(() => {
                    updateFileList();
                    fileInput.value = '';
                });
            }
        }

        function downloadFile(fileName) {
            fileStorage.download(fileName);
        }

        function deleteFile(fileName) {
            fileStorage.delete(fileName);
            updateFileList();
        }

        function updateFileList() {
            const fileList = document.getElementById('file-list');
            fileList.innerHTML = '';
            const files = fileStorage.list();
            files.forEach(file => {
                const li = document.createElement('li');
                li.textContent = `${file.name} (${formatSize(file.size)})`;
                const downloadBtn = document.createElement('button');
                downloadBtn.textContent = 'Download';
                downloadBtn.onclick = () => downloadFile(file.name);
                const deleteBtn = document.createElement('button');
                deleteBtn.textContent = 'Delete';
                deleteBtn.onclick = () => deleteFile(file.name);
                li.appendChild(downloadBtn);
                li.appendChild(deleteBtn);
                fileList.appendChild(li);
            });
        }

        function formatSize(bytes) {
            const units = ['B', 'KB', 'MB', 'GB', 'TB'];
            let size = bytes;
            let unitIndex = 0;
            while (size >= 1024 && unitIndex < units.length - 1) {
                size /= 1024;
                unitIndex++;
            }
            return `${size.toFixed(2)} ${units[unitIndex]}`;
        }

        updateFileList();
    </script>
</body>
</html>