Todo/components/CollaboratorList.tsx

'use client'

import { useState } from 'react'
import { UserMinus, ChevronDown } from 'lucide-react'
import PermissionBadge from './PermissionBadge'
import { updateCollaboratorPermission, removeCollaborator } from '@/lib/sharing-actions'
import { useRouter } from 'next/navigation'

interface Collaborator {
  id: string
  permission: 'editor' | 'viewer'
  user: {
    id: string
    name: string | null
    email: string
  }
}

interface CollaboratorListProps {
  listId: string
  collaborators: Collaborator[]
  isOwner: boolean
  ownerId: string
  ownerName: string | null
  ownerEmail: string
}

export default function CollaboratorList({
  listId,
  collaborators,
  isOwner,
  ownerId,
  ownerName,
  ownerEmail,
}: CollaboratorListProps) {
  const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({})
  const [error, setError] = useState<string | null>(null)
  const router = useRouter()

  const handlePermissionChange = async (collaboratorId: string, newPermission: 'editor' | 'viewer') => {
    setLoadingStates(prev => ({ ...prev, [collaboratorId]: true }))
    setError(null)

    try {
      await updateCollaboratorPermission(listId, collaboratorId, newPermission)
      router.refresh()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to update permission')
    } finally {
      setLoadingStates(prev => ({ ...prev, [collaboratorId]: false }))
    }
  }

  const handleRemove = async (collaboratorId: string) => {
    if (!confirm('Are you sure you want to remove this collaborator?')) {
      return
    }

    setLoadingStates(prev => ({ ...prev, [collaboratorId]: true }))
    setError(null)

    try {
      await removeCollaborator(listId, collaboratorId)
      router.refresh()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to remove collaborator')
      setLoadingStates(prev => ({ ...prev, [collaboratorId]: false }))
    }
  }

  return (
    <div className="space-y-3">
      {error && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
          {error}
        </div>
      )}

      {/* Owner */}
      <div className="flex items-center justify-between p-3 bg-purple-50 border border-purple-100 rounded-lg">
        <div className="flex-1 min-w-0">
          <p className="font-medium text-gray-900 truncate">
            {ownerName || ownerEmail}
          </p>
          {ownerName && (
            <p className="text-sm text-gray-600 truncate">{ownerEmail}</p>
          )}
        </div>
        <PermissionBadge permission="owner" size="sm" />
      </div>

      {/* Collaborators */}
      {collaborators.length === 0 ? (
        <p className="text-sm text-gray-500 text-center py-4">
          No collaborators yet. Share this list to collaborate!
        </p>
      ) : (
        collaborators.map((collaborator) => (
          <div
            key={collaborator.id}
            className="flex items-center justify-between gap-3 p-3 bg-white border border-gray-200 rounded-lg"
          >
            <div className="flex-1 min-w-0">
              <p className="font-medium text-gray-900 truncate">
                {collaborator.user.name || collaborator.user.email}
              </p>
              {collaborator.user.name && (
                <p className="text-sm text-gray-600 truncate">
                  {collaborator.user.email}
                </p>
              )}
            </div>

            <div className="flex items-center gap-2">
              {isOwner ? (
                <>
                  <div className="relative">
                    <select
                      value={collaborator.permission}
                      onChange={(e) =>
                        handlePermissionChange(
                          collaborator.id,
                          e.target.value as 'editor' | 'viewer'
                        )
                      }
                      disabled={loadingStates[collaborator.id]}
                      className="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed cursor-pointer"
                    >
                      <option value="editor">Editor</option>
                      <option value="viewer">Viewer</option>
                    </select>
                    <ChevronDown
                      size={14}
                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none"
                    />
                  </div>
                  <button
                    onClick={() => handleRemove(collaborator.id)}
                    disabled={loadingStates[collaborator.id]}
                    className="p-2 text-red-600 hover:bg-red-50 active:bg-red-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    aria-label="Remove collaborator"
                  >
                    <UserMinus size={18} />
                  </button>
                </>
              ) : (
                <PermissionBadge permission={collaborator.permission} size="sm" />
              )}
            </div>
          </div>
        ))
      )}
    </div>
  )
}