'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback } from 'react';
import { Button } from '../../ui/button.js';
import { Input } from '../../ui/input.js';
import { Label } from '../../ui/label.js';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
import { Badge } from '../../ui/badge.js';
import { ProjectRole } from '../../../../../../packages/core/src/domain/generated/output.js';
const ROLE_COLORS = {
    Admin: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
    Member: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
    Guest: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300',
};
export function ProjectMembersPanel({ projectId, members: initialMembers, currentUserId, onAddMember, onRemoveMember, onUpdateRole, }) {
    const [members, setMembers] = useState(initialMembers);
    const [newUserId, setNewUserId] = useState('');
    const [newRole, setNewRole] = useState(ProjectRole.Member);
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(false);
    const isCurrentUserAdmin = members.some((m) => m.userId === currentUserId && m.role === ProjectRole.Admin);
    const handleAdd = useCallback(async () => {
        if (!newUserId.trim())
            return;
        setLoading(true);
        setError(null);
        const result = await onAddMember({
            projectId,
            userId: newUserId.trim(),
            role: newRole,
            actorId: currentUserId,
        });
        if (result.error) {
            setError(result.error);
        }
        else if (result.member) {
            setMembers((prev) => [...prev, result.member]);
            setNewUserId('');
            setNewRole(ProjectRole.Member);
        }
        setLoading(false);
    }, [newUserId, newRole, projectId, currentUserId, onAddMember]);
    const handleRemove = useCallback(async (userId) => {
        setError(null);
        const result = await onRemoveMember({ projectId, userId, actorId: currentUserId });
        if (result.error) {
            setError(result.error);
        }
        else {
            setMembers((prev) => prev.filter((m) => m.userId !== userId));
        }
    }, [projectId, currentUserId, onRemoveMember]);
    const handleRoleChange = useCallback(async (userId, role) => {
        setError(null);
        const result = await onUpdateRole({
            projectId,
            userId,
            newRole: role,
            actorId: currentUserId,
        });
        if (result.error) {
            setError(result.error);
        }
        else {
            setMembers((prev) => prev.map((m) => (m.userId === userId ? { ...m, role } : m)));
        }
    }, [projectId, currentUserId, onUpdateRole]);
    return (_jsxs("div", { "data-testid": "project-members-panel", className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Project Members" }), error ? (_jsx("div", { "data-testid": "members-error", className: "rounded border border-red-200 bg-red-50 p-3 text-sm text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-300", children: error })) : null, _jsxs("div", { className: "divide-y rounded border", children: [members.map((member) => (_jsxs("div", { "data-testid": `member-row-${member.userId}`, className: "flex items-center justify-between p-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-sm font-medium", children: member.userId }), _jsx(Badge, { className: ROLE_COLORS[member.role] ?? '', variant: "secondary", children: member.role })] }), isCurrentUserAdmin && member.userId !== currentUserId ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { value: member.role, onValueChange: (value) => handleRoleChange(member.userId, value), children: [_jsx(SelectTrigger, { className: "w-[120px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: ProjectRole.Admin, children: "Admin" }), _jsx(SelectItem, { value: ProjectRole.Member, children: "Member" }), _jsx(SelectItem, { value: ProjectRole.Guest, children: "Guest" })] })] }), _jsx(Button, { variant: "destructive", size: "sm", onClick: () => handleRemove(member.userId), children: "Remove" })] })) : null] }, member.id))), members.length === 0 && (_jsx("div", { className: "text-muted-foreground p-4 text-center text-sm", children: "No members in this project." }))] }), isCurrentUserAdmin ? (_jsxs("div", { "data-testid": "add-member-form", className: "flex items-end gap-3 rounded border p-3", children: [_jsxs("div", { className: "flex-1", children: [_jsx(Label, { htmlFor: "new-user-id", children: "User ID" }), _jsx(Input, { id: "new-user-id", value: newUserId, onChange: (e) => setNewUserId(e.target.value), placeholder: "Enter user ID", disabled: loading })] }), _jsxs("div", { className: "w-[140px]", children: [_jsx(Label, { htmlFor: "new-role", children: "Role" }), _jsxs(Select, { value: newRole, onValueChange: (value) => setNewRole(value), children: [_jsx(SelectTrigger, { id: "new-role", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: ProjectRole.Admin, children: "Admin" }), _jsx(SelectItem, { value: ProjectRole.Member, children: "Member" }), _jsx(SelectItem, { value: ProjectRole.Guest, children: "Guest" })] })] })] }), _jsx(Button, { onClick: handleAdd, disabled: loading || !newUserId.trim(), children: loading ? 'Adding...' : 'Add Member' })] })) : null] }));
}
