"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ModeratorPanel;
const jsx_runtime_1 = require("react/jsx-runtime");
const lucide_react_native_1 = require("lucide-react-native");
const react_1 = require("react");
const react_native_1 = require("react-native");
const ui_1 = require("../../components/ui");
const useAvatars_1 = require("../../hooks/useAvatars");
const theme_1 = require("../../lib/theme");
const moderator_management_1 = require("../../streamplace-store/moderator-management");
const format_handle_1 = require("../../utils/format-handle");
const { flex, bg, r, borders, p, text: textStyle, layout, gap, mb, my, px, py, } = theme_1.atoms;
function ModeratorPanel({ isLive, embedded = false, }) {
    const { moderators, isLoading, error, refresh } = (0, moderator_management_1.useListModerators)();
    const [showAddDialog, setShowAddDialog] = (0, react_1.useState)(false);
    // Collect all moderator DIDs for batch fetching profiles
    const moderatorDIDs = (0, react_1.useMemo)(() => moderators.map((mod) => mod.value.moderator), [moderators]);
    const containerStyle = embedded
        ? [flex.values[1], layout.flex.column]
        : [
            flex.values[1],
            bg.neutral[900],
            r.lg,
            borders.width.thin,
            borders.color.neutral[700],
            layout.flex.column,
        ];
    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: containerStyle, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                    layout.flex.row,
                    layout.flex.spaceBetween,
                    layout.flex.alignCenter,
                    borders.bottom.width.thin,
                    borders.bottom.color.neutral[700],
                    p[4],
                ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Shield, { size: 18, color: "#ffffff" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.white, { fontSize: 18, fontWeight: "600" }], children: "Moderators" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => setShowAddDialog(true), style: [
                            layout.flex.row,
                            layout.flex.alignCenter,
                            gap.all[2],
                            bg.blue[600],
                            px[3],
                            py[2],
                            r.md,
                        ], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.UserPlus, { size: 16, color: "#ffffff" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.white, { fontSize: 13, fontWeight: "500" }], children: "Add" })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: [flex.values[1], p[4]], children: [isLoading && moderators.length === 0 && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.gray[400], { fontSize: 14, textAlign: "center" }], children: "Loading moderators..." })), error && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                            bg.red[900],
                            p[3],
                            r.md,
                            borders.width.thin,
                            borders.color.red[700],
                        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.red[400], { fontSize: 13 }], children: error }) })), !isLoading && moderators.length === 0 && !error && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.center, p[6]], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Shield, { size: 48, color: "#6b7280", style: [mb[4]] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
                                    textStyle.gray[400],
                                    { fontSize: 14, textAlign: "center", marginBottom: 8 },
                                ], children: "No moderators yet" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
                                    textStyle.gray[500],
                                    { fontSize: 12, textAlign: "center" },
                                ], children: "Add moderators to help manage your chat" })] })), moderators.map((mod, index) => ((0, jsx_runtime_1.jsx)(ModeratorCard, { moderator: mod, onRemove: refresh, isLast: index === moderators.length - 1, moderatorDIDs: moderatorDIDs }, mod.rkey)))] }), (0, jsx_runtime_1.jsx)(AddModeratorDialog, { visible: showAddDialog, onClose: () => setShowAddDialog(false), onSuccess: () => {
                    setShowAddDialog(false);
                    refresh();
                } })] }));
}
function ModeratorCard({ moderator, onRemove, isLast, moderatorDIDs, }) {
    const { removeModerator, isLoading } = (0, moderator_management_1.useRemoveModerator)();
    const [showConfirm, setShowConfirm] = (0, react_1.useState)(false);
    const toast = (0, ui_1.useToast)();
    // Use useAvatars hook to batch-fetch profiles for all moderators
    const profiles = (0, useAvatars_1.useAvatars)(moderatorDIDs);
    const profile = profiles[moderator.value.moderator];
    // Format display name using existing utility
    const displayName = (0, react_1.useMemo)(() => {
        if (profile) {
            return (0, format_handle_1.formatHandleWithAt)(profile);
        }
        return moderator.value.moderator; // Fall back to DID
    }, [profile, moderator.value.moderator]);
    const handleRemove = async () => {
        try {
            await removeModerator(moderator.rkey);
            setShowConfirm(false);
            toast.show("Moderator removed", "The moderator has been successfully removed.", { duration: 3 });
            onRemove();
        }
        catch (err) {
            console.error("Failed to remove moderator:", err);
            toast.show("Error removing moderator", err instanceof Error ? err.message : "Failed to remove moderator", { duration: 5 });
        }
    };
    const isExpired = moderator.value.expirationTime &&
        new Date(moderator.value.expirationTime) < new Date();
    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
            layout.flex.row,
            layout.flex.spaceBetween,
            layout.flex.alignCenter,
            p[3],
            bg.neutral[800],
            r.md,
            !isLast && mb[2],
            borders.width.thin,
            borders.color.neutral[700],
        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [flex.values[1]], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
                            textStyle.white,
                            { fontSize: 14, fontWeight: "500", marginBottom: 4 },
                        ], numberOfLines: 1, children: displayName }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, { flexWrap: "wrap" }, gap.all[1]], children: [moderator.value.permissions.map((perm) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                    bg.blue[900],
                                    px[2],
                                    py[1],
                                    r.sm,
                                    borders.width.thin,
                                    borders.color.blue[700],
                                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
                                        textStyle.blue[300],
                                        { fontSize: 11, fontWeight: "500" },
                                    ], children: perm }) }, perm))), isExpired && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                    bg.red[900],
                                    px[2],
                                    py[1],
                                    r.sm,
                                    borders.width.thin,
                                    borders.color.red[700],
                                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
                                        textStyle.red[300],
                                        { fontSize: 11, fontWeight: "500" },
                                    ], children: "Expired" }) }))] }), moderator.value.expirationTime && !isExpired && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [textStyle.gray[400], { fontSize: 11, marginTop: 4 }], children: ["Expires:", " ", new Date(moderator.value.expirationTime).toLocaleDateString()] }))] }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setShowConfirm(true), disabled: isLoading, style: [
                    p[2],
                    r.md,
                    bg.red[900],
                    borders.width.thin,
                    borders.color.red[700],
                    isLoading && { opacity: 0.5 },
                ], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Trash2, { size: 16, color: "#f87171" }) }), (0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: showConfirm, onOpenChange: setShowConfirm, title: "Remove Moderator?", description: "This will revoke all moderation permissions for this user.", dismissible: false, children: (0, jsx_runtime_1.jsxs)(ui_1.DialogFooter, { children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { width: "min", variant: "secondary", onPress: () => setShowConfirm(false), disabled: isLoading, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(ui_1.Button, { width: "min", variant: "destructive", onPress: handleRemove, disabled: isLoading, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: isLoading ? "Removing..." : "Remove" }) })] }) })] }));
}
function AddModeratorDialog({ visible, onClose, onSuccess, }) {
    const { addModerator, isLoading } = (0, moderator_management_1.useAddModerator)();
    const [moderatorDID, setModeratorDID] = (0, react_1.useState)("");
    const [permissions, setPermissions] = (0, react_1.useState)({
        ban: false,
        hide: false,
        "livestream.manage": false,
        "message.pin": false,
    });
    const [error, setError] = (0, react_1.useState)(null);
    const toast = (0, ui_1.useToast)();
    // Reset form when dialog closes
    (0, react_1.useEffect)(() => {
        if (!visible) {
            setModeratorDID("");
            setPermissions({
                ban: false,
                hide: false,
                "livestream.manage": false,
                "message.pin": false,
            });
            setError(null);
        }
    }, [visible]);
    // Clear error when user starts typing
    const handleDIDChange = (text) => {
        setModeratorDID(text);
        if (error)
            setError(null);
    };
    const handleAdd = async () => {
        setError(null);
        if (!moderatorDID.trim()) {
            setError("Please enter a DID or handle");
            return;
        }
        const selectedPermissions = Object.entries(permissions)
            .filter(([_, enabled]) => enabled)
            .map(([perm]) => perm);
        if (selectedPermissions.length === 0) {
            setError("Please select at least one permission");
            return;
        }
        try {
            await addModerator({
                moderatorDID: moderatorDID.trim(),
                permissions: selectedPermissions,
            });
            toast.show("Moderator added", "The new moderator has been added successfully.", { duration: 3 });
            onSuccess();
        }
        catch (err) {
            setError(err instanceof Error ? err.message : "Failed to add moderator");
        }
    };
    return ((0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDialog, { open: visible, onOpenChange: (open) => {
            if (!open)
                onClose();
        }, title: "Add Moderator", description: "Enter the DID or handle of the user you want to add as a moderator and select their permissions.", size: "md", dismissible: false, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [my[4]], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.gray[300], { fontSize: 13, marginBottom: 8 }], children: "Moderator DID or Handle" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { value: moderatorDID, onChangeText: handleDIDChange, placeholder: "did:plc:... or @handle.bsky.social", onSubmitEditing: handleAdd, returnKeyType: "done" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [mb[4]], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.gray[300], { fontSize: 13, marginBottom: 8 }], children: "Permissions" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[2]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => setPermissions((p) => ({ ...p, ban: !p.ban })), style: [
                                    layout.flex.row,
                                    layout.flex.alignCenter,
                                    p[3],
                                    r.md,
                                    bg.neutral[800],
                                    borders.width.thin,
                                    borders.color.neutral[700],
                                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                            {
                                                width: 20,
                                                height: 20,
                                                borderRadius: 4,
                                            },
                                            borders.width.thin,
                                            borders.color.neutral[600],
                                            permissions.ban ? bg.blue[600] : bg.neutral[900],
                                            layout.flex.center,
                                            { marginRight: 12 },
                                        ], children: permissions.ban && (0, jsx_runtime_1.jsx)(lucide_react_native_1.Check, { size: 12, color: "white" }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.white, { fontSize: 14, fontWeight: "500" }], children: "Ban Users" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.gray[400], { fontSize: 12 }], children: "Block users from chat" })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => setPermissions((p) => ({ ...p, hide: !p.hide })), style: [
                                    layout.flex.row,
                                    layout.flex.alignCenter,
                                    p[3],
                                    r.md,
                                    bg.neutral[800],
                                    borders.width.thin,
                                    borders.color.neutral[700],
                                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                            {
                                                width: 20,
                                                height: 20,
                                                borderRadius: 4,
                                            },
                                            borders.width.thin,
                                            borders.color.neutral[600],
                                            permissions.hide ? bg.blue[600] : bg.neutral[900],
                                            layout.flex.center,
                                            { marginRight: 12 },
                                        ], children: permissions.hide && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.white, { fontSize: 12 }], children: "\u2713" })) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.white, { fontSize: 14, fontWeight: "500" }], children: "Hide Messages" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.gray[400], { fontSize: 12 }], children: "Hide individual chat messages" })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => setPermissions((p) => ({
                                    ...p,
                                    "livestream.manage": !p["livestream.manage"],
                                })), style: [
                                    layout.flex.row,
                                    layout.flex.alignCenter,
                                    p[3],
                                    r.md,
                                    bg.neutral[800],
                                    borders.width.thin,
                                    borders.color.neutral[700],
                                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                            {
                                                width: 20,
                                                height: 20,
                                                borderRadius: 4,
                                            },
                                            borders.width.thin,
                                            borders.color.neutral[600],
                                            permissions["livestream.manage"]
                                                ? bg.blue[600]
                                                : bg.neutral[900],
                                            layout.flex.center,
                                            { marginRight: 12 },
                                        ], children: permissions["livestream.manage"] && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.white, { fontSize: 12 }], children: "\u2713" })) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.white, { fontSize: 14, fontWeight: "500" }], children: "Manage Livestream" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.gray[400], { fontSize: 12 }], children: "Update stream title" })] })] })] })] }), error && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                    bg.red[900],
                    p[3],
                    r.md,
                    borders.width.thin,
                    borders.color.red[700],
                    mb[4],
                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle.red[400], { fontSize: 13 }], children: error }) })), (0, jsx_runtime_1.jsxs)(ui_1.DialogFooter, { children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { width: "min", variant: "secondary", onPress: onClose, disabled: isLoading, children: "Cancel" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { width: "min", variant: "primary", onPress: handleAdd, disabled: isLoading ||
                            !moderatorDID.trim() ||
                            Object.values(permissions).every((p) => !p), children: isLoading ? "Adding..." : "Add Moderator" })] })] }));
}
//# sourceMappingURL=moderator-panel.js.map