deckhearth/components/CollaborationManager.js

import { useState, useEffect } from 'react';
import BulkInviteModal from './BulkInviteModal';

export default function CollaborationManager({ collectionId, isOwner }) {
  const [permissions, setPermissions] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showInviteModal, setShowInviteModal] = useState(false);
  const [showBulkInviteModal, setShowBulkInviteModal] = useState(false);
  const [inviteForm, setInviteForm] = useState({
    email: '',
    role: 'editor',
    message: ''
  });
  const [inviting, setInviting] = useState(false);

  useEffect(() => {
    if (collectionId) {
      fetchPermissions();
    }
  }, [collectionId]);

  const fetchPermissions = async () => {
    try {
      const response = await fetch(`/api/collections/${collectionId}/permissions`);
      if (response.ok) {
        const data = await response.json();
        setPermissions(data);
      }
    } catch (error) {
      console.error('Error fetching permissions:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleInviteUser = async (e) => {
    e.preventDefault();
    setInviting(true);

    try {
      const response = await fetch(`/api/collections/${collectionId}/permissions`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(inviteForm)
      });

      if (response.ok) {
        setShowInviteModal(false);
        setInviteForm({ email: '', role: 'editor', message: '' });
        fetchPermissions(); // Refresh the list
      } else {
        const error = await response.json();
        alert(error.error || 'Failed to send invitation');
      }
    } catch (error) {
      alert('Network error. Please try again.');
    } finally {
      setInviting(false);
    }
  };

  const handleUpdatePermission = async (userId, newRole) => {
    try {
      const response = await fetch(`/api/collections/${collectionId}/permissions`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ userId, role: newRole })
      });

      if (response.ok) {
        fetchPermissions(); // Refresh the list
      } else {
        alert('Failed to update permission');
      }
    } catch (error) {
      alert('Network error. Please try again.');
    }
  };

  const handleRemoveUser = async (userId) => {
    if (!confirm('Are you sure you want to remove this user from the collection?')) {
      return;
    }

    try {
      const response = await fetch(`/api/collections/${collectionId}/permissions`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ userId })
      });

      if (response.ok) {
        fetchPermissions(); // Refresh the list
      } else {
        alert('Failed to remove user');
      }
    } catch (error) {
      alert('Network error. Please try again.');
    }
  };

  const getRoleIcon = (role) => {
    switch (role) {
      case 'owner': return '👑';
      case 'editor': return '✏️';
      case 'viewer': return '👁️';
      default: return '👤';
    }
  };

  const getStatusBadge = (status) => {
    const styles = {
      active: { backgroundColor: '#10b981', color: 'white' },
      pending: { backgroundColor: '#f59e0b', color: 'white' },
      declined: { backgroundColor: '#ef4444', color: 'white' }
    };

    return (
      <span 
        className="px-2 py-1 rounded-full text-xs font-medium"
        style={styles[status] || styles.active}
      >
        {status}
      </span>
    );
  };

  if (loading) {
    return (
      <div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
        <div className="animate-pulse">
          <div className="h-4 bg-gray-300 rounded w-1/4 mb-4"></div>
          <div className="space-y-3">
            <div className="h-12 bg-gray-300 rounded"></div>
            <div className="h-12 bg-gray-300 rounded"></div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
      <div className="flex items-center justify-between mb-6">
        <h3 className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>
          Collaboration ({permissions.length})
        </h3>
        {isOwner && (
          <div className="flex space-x-2">
                          <button
                onClick={() => setShowInviteModal(true)}
                className="flex items-center space-x-2 px-4 py-2 rounded-lg font-medium gradient-bg-purple text-white hover:shadow-lg transform hover:scale-105 transition-all duration-200"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                <span>Invite Collaborator</span>
              </button>
            <button
              onClick={() => setShowBulkInviteModal(true)}
              className="flex items-center space-x-2 px-4 py-2 rounded-lg font-medium border transition-all duration-200 hover:shadow-md"
              style={{
                backgroundColor: 'var(--bg-primary)',
                borderColor: 'var(--border)',
                color: 'var(--text-primary)'
              }}
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
              <span>Bulk Invite</span>
            </button>
          </div>
        )}
      </div>

      <div className="space-y-3">
        {permissions.map((permission) => (
          <div 
            key={permission.id}
            className="flex items-center justify-between p-4 rounded-lg border"
            style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border)' }}
          >
            <div className="flex items-center space-x-3">
              <div className="text-2xl">{getRoleIcon(permission.role)}</div>
              <div>
                <div className="font-medium" style={{ color: 'var(--text-primary)' }}>
                  {permission.email}
                  {permission.is_pending && (
                    <span className="ml-2 text-xs" style={{ color: 'var(--text-secondary)' }}>
                      (Pending Registration)
                    </span>
                  )}
                </div>
                <div className="flex items-center space-x-2">
                  <span className="text-sm capitalize" style={{ color: 'var(--text-secondary)' }}>
                    {permission.role}
                  </span>
                  {getStatusBadge(permission.status)}
                </div>
              </div>
            </div>

            {isOwner && permission.role !== 'owner' && (
              <div className="flex items-center space-x-2">
                <select
                  value={permission.role}
                  onChange={(e) => handleUpdatePermission(permission.user_id, e.target.value)}
                  className="px-3 py-1 rounded border text-sm"
                  style={{
                    backgroundColor: 'var(--bg-secondary)',
                    borderColor: 'var(--border)',
                    color: 'var(--text-primary)'
                  }}
                >
                  <option value="viewer">Viewer</option>
                  <option value="editor">Editor</option>
                  <option value="owner">Owner</option>
                </select>
                <button
                  onClick={() => handleRemoveUser(permission.user_id)}
                  className="p-2 rounded text-red-500 hover:bg-red-50 transition-colors"
                  title="Remove user"
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                </button>
              </div>
            )}
          </div>
        ))}

        {permissions.length === 0 && (
          <div className="text-center py-8">
            <div className="text-4xl mb-4">👥</div>
            <p style={{ color: 'var(--text-secondary)' }}>
              No collaborators yet. Invite others to work on this collection together!
            </p>
          </div>
        )}
      </div>

      {/* Invite Modal */}
      {showInviteModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="p-6 rounded-2xl shadow-lg max-w-md w-full mx-4" style={{ backgroundColor: 'var(--bg-secondary)' }}>
            <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
              Invite Collaborator
            </h2>
            <p className="text-sm mb-6" style={{ color: 'var(--text-secondary)' }}>
              Invite someone to help manage and add cards to this collection
            </p>
            
            <form onSubmit={handleInviteUser} className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                  Email Address
                </label>
                <input
                  type="email"
                  required
                  value={inviteForm.email}
                  onChange={(e) => setInviteForm({ ...inviteForm, email: e.target.value })}
                  className="w-full px-4 py-3 rounded-lg border transition-all duration-200"
                  style={{
                    backgroundColor: 'var(--bg-primary)',
                    borderColor: 'var(--border)',
                    color: 'var(--text-primary)'
                  }}
                  placeholder="Enter email address"
                />
              </div>

              <div>
                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                  Permission Level
                </label>
                <select
                  value={inviteForm.role}
                  onChange={(e) => setInviteForm({ ...inviteForm, role: e.target.value })}
                  className="w-full px-4 py-3 rounded-lg border transition-all duration-200"
                  style={{
                    backgroundColor: 'var(--bg-primary)',
                    borderColor: 'var(--border)',
                    color: 'var(--text-primary)'
                  }}
                >
                  <option value="editor">Collaborator - Can add/remove cards and edit collection details</option>
                  <option value="viewer">Viewer - Can only view the collection</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                  Personal Message (Optional)
                </label>
                <textarea
                  value={inviteForm.message}
                  onChange={(e) => setInviteForm({ ...inviteForm, message: e.target.value })}
                  className="w-full px-4 py-3 rounded-lg border transition-all duration-200"
                  style={{
                    backgroundColor: 'var(--bg-primary)',
                    borderColor: 'var(--border)',
                    color: 'var(--text-primary)'
                  }}
                  rows="3"
                  placeholder="Add a personal message to the invitation..."
                />
              </div>

              <div className="flex space-x-3 mt-6">
                <button
                  type="button"
                  onClick={() => setShowInviteModal(false)}
                  className="flex-1 py-2 px-4 rounded-xl border transition-colors"
                  style={{ 
                    borderColor: 'var(--border)', 
                    color: 'var(--text-secondary)' 
                  }}
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={inviting || !inviteForm.email}
                  className="flex-1 px-4 py-2 rounded-xl font-medium gradient-bg-purple text-white hover:shadow-lg transition-all duration-200 disabled:opacity-50"
                >
                  {inviting ? 'Sending...' : 'Send Invitation'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Bulk Invite Modal */}
      <BulkInviteModal
        collectionId={collectionId}
        isOpen={showBulkInviteModal}
        onClose={() => setShowBulkInviteModal(false)}
        onSuccess={() => {
          fetchPermissions(); // Refresh permissions list
          setShowBulkInviteModal(false);
        }}
      />
    </div>
  );
}