import React, { useState } from 'react';

export default function AttachmentGallery() {
  const [taskId, setTaskId] = useState('');
  const [attachments, setAttachments] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  const loadAttachments = async () => {
    if (!taskId) return;
    setLoading(true);
    try {
      const result = await window.mcp.callTool('wrike_list_attachments', { taskId });
      setAttachments(result.attachments || []);
    } catch (error) {
      console.error('Failed to load attachments:', error);
    } finally {
      setLoading(false);
    }
  };

  const formatSize = (bytes: number) => {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KB';
    return (bytes / 1048576).toFixed(2) + ' MB';
  };

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Attachment Gallery</h1>
      
      <div style={{ marginBottom: '24px', display: 'flex', gap: '12px' }}>
        <input
          type="text"
          placeholder="Enter Task ID"
          value={taskId}
          onChange={(e) => setTaskId(e.target.value)}
          style={{
            flex: 1,
            background: '#1f2937',
            color: '#f3f4f6',
            padding: '8px 12px',
            borderRadius: '6px',
            border: '1px solid #374151',
          }}
        />
        <button
          onClick={loadAttachments}
          style={{
            background: '#3b82f6',
            color: 'white',
            padding: '8px 16px',
            borderRadius: '6px',
            border: 'none',
            cursor: 'pointer',
          }}
        >
          Load Attachments
        </button>
      </div>

      {loading ? (
        <div>Loading...</div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '16px' }}>
          {attachments.map(attachment => (
            <div
              key={attachment.id}
              style={{
                background: '#1f2937',
                padding: '16px',
                borderRadius: '8px',
                border: '1px solid #374151',
              }}
            >
              {attachment.previewUrl && (
                <img
                  src={attachment.previewUrl}
                  alt={attachment.name}
                  style={{
                    width: '100%',
                    height: '150px',
                    objectFit: 'cover',
                    borderRadius: '6px',
                    marginBottom: '12px',
                  }}
                />
              )}
              <div style={{ fontWeight: '600', marginBottom: '4px', wordBreak: 'break-word' }}>
                {attachment.name}
              </div>
              <div style={{ fontSize: '12px', color: '#9ca3af' }}>
                <div>{formatSize(attachment.size)}</div>
                <div>v{attachment.version}</div>
                <div>{new Date(attachment.createdDate).toLocaleDateString()}</div>
              </div>
            </div>
          ))}
          {attachments.length === 0 && taskId && (
            <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '48px', color: '#6b7280' }}>
              No attachments found
            </div>
          )}
        </div>
      )}
    </div>
  );
}
