/**
 * File Manager App - Manage uploaded files
 */

import React, { useState } from 'react';

export function FileManager({ vaultId }: { vaultId?: number }) {
  const [files] = useState([
    { id: 1, filename: 'logo-draft-v3.png', filesize: 245000, content_type: 'image/png', created_at: '2024-01-15', creator: 'Alice' },
    { id: 2, filename: 'wireframes.pdf', filesize: 1240000, content_type: 'application/pdf', created_at: '2024-01-12', creator: 'Bob' },
    { id: 3, filename: 'screenshot-2024-01-10.jpg', filesize: 567000, content_type: 'image/jpeg', created_at: '2024-01-10', creator: 'Charlie' },
  ]);

  const formatFileSize = (bytes: number) => {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
  };

  const getFileIcon = (contentType: string) => {
    if (contentType.startsWith('image/')) return '🖼️';
    if (contentType.includes('pdf')) return '📄';
    return '📎';
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
        <h1 style={{ fontSize: '24px', margin: 0 }}>Files</h1>
        <button style={{ padding: '10px 20px', background: '#1d8cf8', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          Upload File
        </button>
      </div>

      <div style={{ display: 'grid', gap: '12px' }}>
        {files.map(file => (
          <div key={file.id} style={{ 
            display: 'flex', 
            alignItems: 'center', 
            padding: '16px', 
            border: '1px solid #ddd', 
            borderRadius: '6px', 
            background: 'white'
          }}>
            <div style={{ fontSize: '32px', marginRight: '16px' }}>{getFileIcon(file.content_type)}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>{file.filename}</div>
              <div style={{ fontSize: '12px', color: '#999' }}>
                {formatFileSize(file.filesize)} • Uploaded {file.created_at} by {file.creator}
              </div>
            </div>
            <button style={{ padding: '8px 16px', background: '#f5f5f5', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer' }}>
              Download
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}
