"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import useTags from "@/features/tags/hooks/use-tags";
import useGroupSettings from "@/features/groups/hooks/use-group-settings";
import useGroupMembers from "@/features/groups/hooks/use-group-members";
import useGroupInvites from "@/features/groups/hooks/use-group-invites";
import useGroupAudit from "@/features/groups/hooks/use-group-audit";
import { useGroupsContext } from "@/hooks/groups-context";
import TagInput from "@/components/tag-input";
import { useNotificationsContext } from "@/hooks/notifications-context";
import ConfirmSlideModal from "@/components/confirm-slide-modal";
import ConfirmRetypeModal from "@/components/confirm-retype-modal";
import { groupsDelete, groupsRename } from "@/lib/client/groups";
import ToggleButtonGroup from "@/components/toggle-button-group";

export default function GroupSettingsContent({ groupId }: { groupId: number }) {
    const router = useRouter();
    const { groups, activeGroupId, setActiveGroup } = useGroupsContext();
    const { notify } = useNotificationsContext();
    const group = useMemo(() => groups.find(item => item.id === groupId) || null, [groups, groupId]);
    const role = group?.role;
    const isAdmin = role === "GROUP_ADMIN" || role === "GROUP_OWNER";
    const isOwner = role === "GROUP_OWNER";
    const canViewAudit = isAdmin;
    const hasSyncedActiveRef = useRef(false);
    const lastGroupIdRef = useRef(groupId);

    useEffect(() => {
        if (lastGroupIdRef.current !== groupId) {
            lastGroupIdRef.current = groupId;
            hasSyncedActiveRef.current = false;
        }
        if (!groupId || hasSyncedActiveRef.current) return;
        if (activeGroupId !== groupId) setActiveGroup(groupId);
        hasSyncedActiveRef.current = true;
    }, [activeGroupId, groupId, setActiveGroup]);

    const { tags, addTags, removeTag } = useTags(activeGroupId === groupId ? groupId : null);
    const { settings, updateSettings } = useGroupSettings(activeGroupId === groupId ? groupId : null);
    const { members, requests, currentUserId, approve, deny, promote, demote, kick, transferOwner, leave } = useGroupMembers(activeGroupId === groupId ? groupId : null);
    const { links, create: createInvite, revoke: revokeInvite, revive: reviveInvite, remove: deleteInvite } = useGroupInvites(activeGroupId === groupId ? groupId : null);
    const { events } = useGroupAudit(activeGroupId === groupId && canViewAudit ? groupId : null);
    const [pendingTags, setPendingTags] = useState<string[]>([]);
    const [toggleRemoveTags, setToggleRemoveTags] = useState<string[]>([]);
    const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
    const [renameValue, setRenameValue] = useState(group?.name || "");
    const [renameModalOpen, setRenameModalOpen] = useState(false);
    const [confirmRenameOpen, setConfirmRenameOpen] = useState(false);
    const [confirmLeaveOpen, setConfirmLeaveOpen] = useState(false);
    const [confirmKick, setConfirmKick] = useState<{ userId: number; name: string } | null>(null);
    const [confirmTransfer, setConfirmTransfer] = useState<{ userId: number; name: string } | null>(null);
    const [confirmDeleteGroupOpen, setConfirmDeleteGroupOpen] = useState(false);
    const [deleteConfirmText, setDeleteConfirmText] = useState("");
    const [tagModalOpen, setTagModalOpen] = useState(false);
    const [showAllTags, setShowAllTags] = useState(false);
    const [inviteTtlDays, setInviteTtlDays] = useState(7);
    const [inviteMaxUses, setInviteMaxUses] = useState<"UNLIMITED" | "SINGLE">("UNLIMITED");
    const [auditOpen, setAuditOpen] = useState(false);
    const [confirmDeleteInvite, setConfirmDeleteInvite] = useState<{ id: number; token: string } | null>(null);
    const [auditFilters, setAuditFilters] = useState(["members", "tags", "settings", "entries"] as Array<"members" | "tags" | "settings" | "entries">);
    const [auditQuery, setAuditQuery] = useState("");
    const [auditFrom, setAuditFrom] = useState("");
    const [auditTo, setAuditTo] = useState("");
    const [auditLimit, setAuditLimit] = useState(10);
    const [localAllowMemberTagManage, setLocalAllowMemberTagManage] = useState(settings.allowMemberTagManage);
    const [localJoinPolicy, setLocalJoinPolicy] = useState(settings.joinPolicy);

    const canManageTags = role === "GROUP_ADMIN" || role === "GROUP_OWNER" || localAllowMemberTagManage;
    const adminCount = members.filter(member => member.role === "GROUP_ADMIN" || member.role === "GROUP_OWNER").length;
    const isLastAdmin = isAdmin && adminCount <= 1;

    useEffect(() => {
        setRenameValue(group?.name || "");
    }, [group?.name]);

    useEffect(() => {
        setLocalAllowMemberTagManage(settings.allowMemberTagManage);
        setLocalJoinPolicy(settings.joinPolicy);
    }, [settings.allowMemberTagManage, settings.joinPolicy]);

    async function handleSaveTags() {
        if (!pendingTags.length) return;
        const ok = await addTags(pendingTags);
        if (ok) {
            notify({ title: "Tags updated", message: pendingTags.join(", "), tone: "success" });
            setPendingTags([]);
        }
    }

    async function handleRemoveTag(tag: string) {
        const ok = await removeTag(tag);
        if (ok) notify({ title: "Tag removed", message: `#${tag}`, tone: "danger" });
    }

    async function handleConfirmDelete() {
        if (!toggleRemoveTags.length) return;
        await Promise.all(toggleRemoveTags.map(tag => removeTag(tag)));
        notify({ title: "Tags removed", message: toggleRemoveTags.join(", "), tone: "danger" });
        setToggleRemoveTags([]);
    }

    async function handleToggleAllowMembers(value: boolean) {
        setLocalAllowMemberTagManage(value);
        const ok = await updateSettings(value, localJoinPolicy);
        if (ok) {
            notify({ title: "Tag permissions updated" });
            return;
        }
        setLocalAllowMemberTagManage(settings.allowMemberTagManage);
        notify({ title: "Update failed", message: "Could not save tag permissions.", tone: "danger" });
    }

    async function handleJoinPolicyChange(nextPolicy: "NOT_ACCEPTING" | "AUTO_ACCEPT" | "APPROVAL_REQUIRED") {
        setLocalJoinPolicy(nextPolicy);
        const ok = await updateSettings(localAllowMemberTagManage, nextPolicy);
        if (ok) {
            notify({ title: "Join policy updated" });
            return;
        }
        setLocalJoinPolicy(settings.joinPolicy);
        notify({ title: "Update failed", message: "Could not save join policy.", tone: "danger" });
    }

    function handleOpenRenameModal() {
        setRenameValue(group?.name || "");
        setRenameModalOpen(true);
    }

    function handleCloseRenameModal() {
        setRenameModalOpen(false);
        setRenameValue(group?.name || "");
    }

    async function handleRenameGroup() {
        const name = renameValue.trim();
        if (!name) return;
        const result = await groupsRename({ name });
        if ("error" in result) {
            notify({ title: "Rename failed", message: result.error.message, tone: "danger" });
            return;
        }
        notify({ title: "Group renamed", message: name });
        setConfirmRenameOpen(false);
        setRenameModalOpen(false);
    }

    async function handleRoleChange(targetUserId: number, nextRole: "MEMBER" | "GROUP_ADMIN" | "GROUP_OWNER") {
        if (!isAdmin) return;
        const member = members.find(item => item.userId === targetUserId);
        if (!member) return;
        if (member.role === nextRole) return;
        if (nextRole === "GROUP_OWNER") {
            if (!isOwner) return;
            await transferOwner(targetUserId);
            return;
        }
        if (nextRole === "GROUP_ADMIN") {
            await promote(targetUserId);
            return;
        }
        await demote(targetUserId);
    }

    function getInviteLinkUrl(token: string) {
        if (typeof window === "undefined") return token;
        return `${window.location.origin}/invite/${token}`;
    }

    async function handleCopyInvite(token: string) {
        try {
            await navigator.clipboard.writeText(getInviteLinkUrl(token));
            notify({ title: "Invite link copied", message: "Link copied to clipboard" });
        } catch {
            notify({ title: "Copy failed", tone: "danger" });
        }
    }

    function formatInviteExpiry(expiresAt: string) {
        const expiry = new Date(expiresAt).getTime();
        if (Number.isNaN(expiry)) return "Unknown";
        const diffMs = expiry - Date.now();
        const absMs = Math.abs(diffMs);
        const minute = 60 * 1000;
        const hour = 60 * minute;
        const day = 24 * hour;
        const pick = (value: number, unit: string) => `${value} ${unit}${value === 1 ? "" : "s"}`;
        let label = "";

        if (absMs < hour) {
            const value = Math.max(1, Math.round(absMs / minute));
            label = pick(value, "minute");
        } else if (absMs < day) {
            const value = Math.max(1, Math.round(absMs / hour));
            label = pick(value, "hour");
        } else {
            const value = Math.max(1, Math.round(absMs / day));
            label = pick(value, "day");
        }

        return diffMs >= 0 ? `in ${label}` : `${label} ago`;
    }

    function isInviteExpired(expiresAt: string) {
        const expiry = new Date(expiresAt).getTime();
        if (Number.isNaN(expiry)) return false;
        return Date.now() > expiry;
    }

    function eventCategory(eventType: string) {
        const upper = eventType.toUpperCase();
        if (upper.includes("SPENDING") || upper.includes("ENTRY")) return "entries" as const;
        if (upper.includes("TAG")) return "tags" as const;
        if (upper.includes("SETTING") || upper.includes("RENAMED")) return "settings" as const;
        return "members" as const;
    }

    const memberLookup = useMemo(() => {
        return new Map(members.map(member => [member.userId, { name: member.displayName || member.email, email: member.email }]));
    }, [members]);

    function getMemberLabel(userId?: number | null) {
        if (!userId) return "System";
        const member = memberLookup.get(userId);
        return member?.name || `User ${userId}`;
    }

    const filteredEvents = events.filter(event => {
        const category = eventCategory(event.eventType);
        if (!auditFilters.includes(category)) return false;
        if (auditQuery) {
            const query = auditQuery.toLowerCase();
            const actor = event.actorUserId ? memberLookup.get(event.actorUserId) : null;
            const haystack = `${event.eventType} ${event.actorUserId ?? ""} ${actor?.name || ""} ${actor?.email || ""} ${event.requestId}`.toLowerCase();
            if (!haystack.includes(query)) return false;
        }
        if (auditFrom) {
            const from = new Date(auditFrom).getTime();
            if (!Number.isNaN(from) && new Date(event.createdAt).getTime() < from) return false;
        }
        if (auditTo) {
            const to = new Date(auditTo).getTime();
            if (!Number.isNaN(to) && new Date(event.createdAt).getTime() > to + 24 * 60 * 60 * 1000 - 1) return false;
        }
        return true;
    });

    const todayKey = new Date().toISOString().slice(0, 10);
    const logsToday = events.filter(event => event.createdAt?.slice(0, 10) === todayKey).length;
    const mostActiveUser = (() => {
        const counts = new Map<number, number>();
        for (const event of events) {
            if (!event.actorUserId) continue;
            counts.set(event.actorUserId, (counts.get(event.actorUserId) ?? 0) + 1);
        }
        let top: number | null = null;
        let topCount = 0;
        counts.forEach((count, userId) => {
            if (count > topCount) {
                top = userId;
                topCount = count;
            }
        });
        if (!top) return null;
        const member = memberLookup.get(top);
        const name = member?.name || `User ${top}`;
        const searchValue = member?.name || member?.email || String(top);
        return { userId: top, count: topCount, name, searchValue };
    })();
    const mostActiveCount = mostActiveUser?.count ?? 0;
    const renameDirty = Boolean(group && renameValue.trim() !== group.name);
    const memberCount = members.length;
    const showLeaveGroup = role !== "GROUP_OWNER" && !isLastAdmin;

    useEffect(() => {
        if (!renameModalOpen && !tagModalOpen) return;
        function handleKeyDown(event: KeyboardEvent) {
            if (event.key === "Escape") {
                if (tagModalOpen) setTagModalOpen(false);
                if (renameModalOpen) handleCloseRenameModal();
            }
            if (event.key === "Enter" && !event.shiftKey && !event.defaultPrevented) {
                if (renameModalOpen && renameDirty && isAdmin && renameValue.trim()) setConfirmRenameOpen(true);
            }
        }
        window.addEventListener("keydown", handleKeyDown);
        return () => window.removeEventListener("keydown", handleKeyDown);
    }, [renameModalOpen, tagModalOpen, renameDirty, isAdmin, renameValue, handleCloseRenameModal]);

    async function handleDeleteGroup() {
        const result = await groupsDelete();
        if ("error" in result) {
            notify({ title: "Delete failed", message: result.error.message, tone: "danger" });
            return;
        }
        setConfirmDeleteGroupOpen(false);
        setDeleteConfirmText("");
        notify({ title: "Group deleted", tone: "danger" });
        router.push("/");
    }

    if (!group) {
        return (
            <div className="panel panel-accent p-4">
                <div className="text-sm text-muted">Loading group settings...</div>
            </div>
        );
    }

    const visibleTags = showAllTags ? tags : tags.slice(0, 5);
    const hasMoreTags = tags.length > 5;
    const tagsScrollable = showAllTags && tags.length > 15;

    return (
        <>
            <div className="space-y-4">
                <div className="flex items-center justify-between">
                    <div>
                        <h1 className="text-2xl font-semibold">{group.name} settings</h1>
                        <p className="text-sm text-muted">Manage tags and permissions for this group.</p>
                    </div>
                    <button
                        type="button"
                        className="rounded-lg btn-outline-accent px-3 py-1.5 text-sm"
                        onClick={() => router.push("/")}
                    >
                        Back
                    </button>
                </div>
                <div className="panel panel-accent p-4 space-y-4">
                    <div className="card-header">
                        <div className="card-title">General Settings</div>
                    </div>
                    <div className="space-y-4">
                        <div className="flex flex-wrap items-center justify-between gap-3">
                            <div>
                                <div className="text-xs text-soft">Group name</div>
                                <div className="text-base font-semibold">{group.name}</div>
                            </div>
                            {isAdmin ? (
                                <button
                                    type="button"
                                    className="rounded-lg btn-outline-accent px-3 py-2 text-sm font-semibold"
                                    onClick={handleOpenRenameModal}
                                >
                                    Change
                                </button>
                            ) : null}
                        </div>
                        {!isAdmin ? (
                            <div className="text-xs text-soft">Only admins can rename the group.</div>
                        ) : null}
                        <div className="divider" />
                        {isAdmin ? (
                            <>
                                <div className="flex flex-wrap items-center justify-between gap-3">
                                    <div className="text-sm font-semibold">Allow members to manage tags</div>
                                    <button
                                        type="button"
                                        aria-pressed={localAllowMemberTagManage}
                                        className={`relative h-7 w-12 rounded-full border transition ${localAllowMemberTagManage ? "border-emerald-400 bg-emerald-500/20" : "border-red-400/60 bg-red-500/10"}`}
                                        onClick={() => handleToggleAllowMembers(!localAllowMemberTagManage)}
                                    >
                                        <span
                                            className={`absolute left-0.5 top-1/2 h-5 w-5 -translate-y-1/2 rounded-full transition ${localAllowMemberTagManage ? "translate-x-[22px] bg-emerald-200" : "translate-x-0 bg-red-200"}`}
                                        />
                                    </button>
                                </div>
                                <div className="divider" />
                            </>
                        ) : null}
                        <div className="flex flex-wrap items-center justify-between gap-2">
                            <div className="text-sm font-semibold">Group Tags ({tags.length})</div>
                            <div className="flex items-center gap-2">
                                {showAllTags ? (
                                    <button
                                        type="button"
                                        className="rounded-lg btn-outline-accent px-2 py-1 text-xs"
                                        onClick={() => setShowAllTags(false)}
                                    >
                                        Show less
                                    </button>
                                ) : null}
                                {canManageTags ? (
                                    <button
                                        type="button"
                                        className="rounded-lg btn-accent px-2 py-1 text-xs font-semibold"
                                        onClick={() => setTagModalOpen(true)}
                                    >
                                        Edit tags
                                    </button>
                                ) : null}
                            </div>
                        </div>
                        <div className={tagsScrollable ? "max-h-60 overflow-auto resize-y pr-1" : ""}>
                            <div className="flex flex-wrap gap-2">
                                {visibleTags.map(tag => (
                                    <span key={tag} className="rounded-full border border-accent-weak bg-accent-soft px-2 py-0.5 text-xs text-[color:var(--color-text)]">
                                        #{tag}
                                    </span>
                                ))}
                                {!showAllTags && hasMoreTags ? (
                                    <button
                                        type="button"
                                        className="rounded-full border border-accent-weak bg-panel px-2 py-0.5 text-xs text-soft"
                                        onClick={() => setShowAllTags(true)}
                                        aria-label="Show all tags"
                                    >
                                        more . . .
                                    </button>
                                ) : null}
                                {!tags.length ? <div className="text-xs text-soft">No tags yet.</div> : null}
                            </div>
                        </div>
                    </div>
                </div>

                {isAdmin ? (
                    <div className="panel panel-accent p-4 space-y-4">
                        <div className="card-header">
                            <div className="card-title">Join and Invites</div>
                        </div>
                        <div className="space-y-3">
                            <div className="flex flex-wrap items-center justify-between gap-3">
                                <div className="text-sm font-semibold">Join policy</div>
                                <ToggleButtonGroup
                                    value={localJoinPolicy}
                                    onChange={policy => handleJoinPolicyChange(policy)}
                                    ariaLabel="Join policy"
                                    className="flex flex-wrap gap-2"
                                    buttonBaseClassName="rounded-lg border"
                                    sizeClassName="px-3 py-1.5 text-xs font-semibold transition"
                                    activeClassName="border-accent bg-accent-soft"
                                    inactiveClassName="border-accent-weak bg-panel hover:border-accent"
                                    options={[
                                        { value: "NOT_ACCEPTING", label: "Disabled" },
                                        { value: "AUTO_ACCEPT", label: "Auto" },
                                        { value: "APPROVAL_REQUIRED", label: "Manual" }
                                    ]}
                                />
                            </div>
                        </div>
                        <div className="divider" />
                        <div className="space-y-2">
                            <div className="text-sm font-semibold">Join Requests ({requests.length})</div>
                            {!requests.length ? (
                                <div className="text-xs text-soft">No pending requests.</div>
                            ) : (
                                <div className="space-y-2">
                                    {requests.map(request => (
                                        <div key={request.id} className="flex items-center justify-between rounded-lg border border-accent-weak bg-panel px-3 py-2 text-sm">
                                            <div>
                                                <div className="font-medium">{request.displayName || request.email}</div>
                                                <div className="text-xs text-soft">{request.email}</div>
                                            </div>
                                            <div className="flex items-center gap-2">
                                                <button
                                                    type="button"
                                                    className="rounded-lg btn-outline-accent px-3 py-1.5 text-xs"
                                                    onClick={() => approve(request.userId, request.id)}
                                                >
                                                    Approve
                                                </button>
                                                <button
                                                    type="button"
                                                    className="rounded-lg border border-red-400/60 bg-red-500/10 px-3 py-1.5 text-xs text-red-200"
                                                    onClick={() => deny(request.userId)}
                                                >
                                                    Deny
                                                </button>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                        <div className="divider" />
                        <div className="space-y-3">
                            <div className="text-sm font-semibold">Invite links</div>
                            <div className="flex flex-wrap items-center gap-2">
                                <select
                                    className="input-base px-2 py-1.5 text-xs"
                                    value={inviteTtlDays}
                                    onChange={e => setInviteTtlDays(Number(e.target.value))}
                                >
                                    {[1, 2, 3, 4, 5, 6, 7].map(days => (
                                        <option key={days} value={days}>{days} day{days === 1 ? "" : "s"}</option>
                                    ))}
                                </select>
                                <select
                                    className="input-base px-2 py-1.5 text-xs"
                                    value={inviteMaxUses}
                                    onChange={e => setInviteMaxUses(e.target.value as "UNLIMITED" | "SINGLE")}
                                >
                                    <option value="UNLIMITED">Unlimited</option>
                                    <option value="SINGLE">1 use</option>
                                </select>
                                <button
                                    type="button"
                                    className="rounded-lg btn-accent px-3 py-1.5 text-xs font-semibold"
                                    onClick={() => createInvite({ policy: localJoinPolicy, singleUse: inviteMaxUses === "SINGLE", ttlDays: inviteTtlDays })}
                                    disabled={localJoinPolicy === "NOT_ACCEPTING"}
                                >
                                    Create link
                                </button>
                            </div>
                            {!links.length ? (
                                <div className="text-xs text-soft">No invite links yet.</div>
                            ) : (
                                <div className="space-y-2">
                                    {links.map(link => (
                                        <div
                                            key={link.id}
                                            className={`rounded-lg border px-3 py-2 text-sm ${link.revokedAt || isInviteExpired(link.expiresAt) || (link.singleUse && link.usedAt) ? "border-red-400/60 bg-red-500/5" : "border-accent-weak bg-panel"}`}
                                        >
                                            <div className="flex flex-wrap items-center justify-between gap-2">
                                                <div className="text-xs text-soft">Token: {link.token.slice(0, 6)}...{link.token.slice(-4)}</div>
                                                {(() => {
                                                    const showRevive = link.revokedAt || isInviteExpired(link.expiresAt) || (link.singleUse && link.usedAt);
                                                    const showRevoke = !showRevive && !link.revokedAt && !(link.singleUse && link.usedAt) && !isInviteExpired(link.expiresAt);
                                                    const options = [
                                                        {
                                                            value: "COPY",
                                                            label: "Copy link",
                                                            className: "btn-outline-accent",
                                                            disabled: localJoinPolicy === "NOT_ACCEPTING",
                                                            onClick: () => handleCopyInvite(link.token)
                                                        },
                                                        ...(showRevive
                                                            ? [{
                                                                value: "REVIVE",
                                                                label: "Revive",
                                                                className: "btn-outline-accent",
                                                                disabled: localJoinPolicy === "NOT_ACCEPTING",
                                                                onClick: () => reviveInvite(link.id, inviteTtlDays)
                                                            }]
                                                            : showRevoke
                                                                ? [{
                                                                    value: "REVOKE",
                                                                    label: "Revoke",
                                                                    className: "border border-red-400/60 bg-red-500/10 text-red-200",
                                                                    onClick: () => revokeInvite(link.id)
                                                                }]
                                                                : []),
                                                        {
                                                            value: "DELETE",
                                                            label: "Delete",
                                                            className: "border border-red-400/60 bg-red-500/10 text-red-200",
                                                            onClick: () => setConfirmDeleteInvite({ id: link.id, token: link.token })
                                                        }
                                                    ];

                                                    return (
                                                        <ToggleButtonGroup
                                                            value={null}
                                                            ariaLabel="Invite actions"
                                                            className="flex items-center gap-2"
                                                            buttonBaseClassName="rounded-lg"
                                                            sizeClassName="px-2 py-1 text-xs"
                                                            activeClassName=""
                                                            inactiveClassName=""
                                                            options={options}
                                                        />
                                                    );
                                                })()}
                                            </div>
                                            <div className="mt-2 flex flex-wrap gap-3 text-[11px] text-soft">
                                                <span>Expires {formatInviteExpiry(link.expiresAt)}</span>
                                                <span>Uses: {link.singleUse ? "1 use" : "Unlimited"}</span>
                                                <span>Status: {link.revokedAt ? "Revoked" : link.singleUse && link.usedAt ? "Used" : isInviteExpired(link.expiresAt) ? "Expired" : "Active"}</span>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>
                ) : null}

                <div className="panel panel-accent p-4 space-y-3">
                    <div className="card-header">
                        <div className="card-title">Members</div>
                        <div className="text-xs text-soft">{memberCount} total</div>
                    </div>
                    <div className="space-y-2">
                        {members.map(member => {
                            const isSelf = member.userId === currentUserId;
                            const privilegeLabel = member.role === "GROUP_OWNER"
                                ? "Owner - Full control"
                                : member.role === "GROUP_ADMIN"
                                    ? "Admin - Manage members"
                                    : "Member - Entries only";
                            return (
                                <div
                                    key={member.userId}
                                    className={`flex flex-wrap items-center justify-between gap-3 rounded-lg border border-accent-weak px-3 py-2 text-sm ${isSelf ? "bg-accent-soft" : "bg-panel"}`}
                                >
                                    <div>
                                        <div className={`font-medium ${isSelf ? "text-[color:var(--color-text)]" : ""}`}>
                                            {member.displayName || member.email}
                                            {isSelf ? <span className="ml-2 rounded-full border border-accent-weak px-2 py-0.5 text-[10px] text-soft">You</span> : null}
                                        </div>
                                        <div className="text-xs text-soft">{member.email}</div>
                                        <div className="mt-1 text-[11px] text-soft">{privilegeLabel}</div>
                                    </div>
                                    <div className="flex flex-wrap items-center gap-2">
                                        {isAdmin ? (
                                            <select
                                                className="input-base px-2 py-1 text-xs"
                                                value={member.role}
                                                onChange={e => handleRoleChange(member.userId, e.target.value as "MEMBER" | "GROUP_ADMIN" | "GROUP_OWNER")}
                                                disabled={member.role === "GROUP_OWNER"}
                                            >
                                                <option value="MEMBER">Member</option>
                                                <option value="GROUP_ADMIN">Admin</option>
                                                {isOwner ? <option value="GROUP_OWNER">Owner</option> : null}
                                            </select>
                                        ) : (
                                            <span className="text-xs text-soft">{member.role}</span>
                                        )}
                                        {isAdmin && member.role !== "GROUP_OWNER" ? (
                                            <button
                                                type="button"
                                                className="rounded-lg border border-red-400/60 bg-red-500/10 px-2 py-1 text-xs text-red-200"
                                                onClick={() => setConfirmKick({ userId: member.userId, name: member.displayName || member.email })}
                                            >
                                                Remove
                                            </button>
                                        ) : null}
                                        {isOwner && member.role !== "GROUP_OWNER" ? (
                                            <button
                                                type="button"
                                                className="rounded-lg btn-accent px-2 py-1 text-xs"
                                                onClick={() => setConfirmTransfer({ userId: member.userId, name: member.displayName || member.email })}
                                            >
                                                Make owner
                                            </button>
                                        ) : null}
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>

                <div className="panel panel-accent p-4 space-y-3">
                    <div className="card-header">
                        <div className="card-title text-red-200">Danger zone</div>
                    </div>
                    <div className="space-y-2">
                        {showLeaveGroup ? (
                            <button
                                type="button"
                                className="w-full rounded-lg btn-outline-accent px-3 py-2 text-sm font-semibold"
                                onClick={() => setConfirmLeaveOpen(true)}
                            >
                                Leave group
                            </button>
                        ) : null}
                        <button
                            type="button"
                            className="w-full rounded-lg border border-red-400/60 bg-red-500/10 px-3 py-2 text-sm font-semibold text-red-200"
                            onClick={() => setConfirmDeleteGroupOpen(true)}
                            disabled={!isOwner}
                        >
                            Delete group
                        </button>
                    </div>
                    {!isOwner ? <div className="text-xs text-soft">Only the owner can delete this group.</div> : null}
                </div>

                {canViewAudit ? (
                    <div className="panel panel-accent p-4 space-y-3">
                        <div className="card-header">
                            <div className="card-title">Audit log</div>
                            <button
                                type="button"
                                className="rounded-lg btn-outline-accent px-2 py-1 text-xs"
                                onClick={() => setAuditOpen(prev => !prev)}
                            >
                                {auditOpen ? "Collapse" : "Expand"}
                            </button>
                        </div>
                        {auditOpen ? (
                            <>
                                <div className="flex flex-wrap items-center gap-2">
                                    <div className="rounded-lg border border-accent-weak bg-panel px-3 py-2">
                                        <div className="text-[11px] text-soft">Total logs</div>
                                        <div className="text-base font-semibold">{events.length}</div>
                                    </div>
                                    <div className="rounded-lg border border-accent-weak bg-panel px-3 py-2">
                                        <div className="text-[11px] text-soft">Logs today</div>
                                        <div className="text-base font-semibold">{logsToday}</div>
                                    </div>
                                    <button
                                        type="button"
                                        className="rounded-lg border border-accent-weak bg-panel px-3 py-2 text-left disabled:opacity-60"
                                        onClick={() => mostActiveUser ? setAuditQuery(mostActiveUser.searchValue) : null}
                                        disabled={!mostActiveUser}
                                    >
                                        <div className="text-[11px] text-soft">Most Active User ({mostActiveCount})</div>
                                        <div className="text-base font-semibold">
                                            {mostActiveUser ? `${mostActiveUser.name}` : "-"}
                                        </div>
                                    </button>
                                </div>
                                <div className="flex flex-wrap items-center gap-2">
                                    {([
                                        { key: "entries", label: "Entries" },
                                        { key: "members", label: "Members" },
                                        { key: "tags", label: "Tags" },
                                        { key: "settings", label: "Settings" }
                                    ] as const).map(filter => (
                                        <button
                                            key={filter.key}
                                            type="button"
                                            className={`rounded-lg border px-2 py-1 text-xs font-semibold ${auditFilters.includes(filter.key) ? "border-accent bg-accent-soft" : "border-accent-weak bg-panel"}`}
                                            onClick={() => setAuditFilters(prev => prev.includes(filter.key) ? prev.filter(item => item !== filter.key) : [...prev, filter.key])}
                                        >
                                            {filter.label}
                                        </button>
                                    ))}
                                </div>
                                <div className="flex flex-wrap items-center gap-2">
                                    <div className="relative min-w-[220px] flex-1">
                                        <svg className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-soft" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                            <circle cx="11" cy="11" r="8" />
                                            <path d="m21 21-4.3-4.3" />
                                        </svg>
                                        <input
                                            className="input-base w-full px-9 py-2 text-sm"
                                            placeholder="Search by user, action, or request id"
                                            value={auditQuery}
                                            onChange={e => setAuditQuery(e.target.value)}
                                        />
                                    </div>
                                    <div className="flex min-w-[220px] flex-1 items-center gap-2 flex-nowrap">
                                        <div className="relative flex-1">
                                            <svg className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-soft" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                                                <line x1="16" y1="2" x2="16" y2="6" />
                                                <line x1="8" y1="2" x2="8" y2="6" />
                                                <line x1="3" y1="10" x2="21" y2="10" />
                                            </svg>
                                            <input
                                                type="date"
                                                className="no-date-icon input-base date-input w-full pl-9 pr-3 py-2 text-sm"
                                                value={auditFrom}
                                                onChange={e => setAuditFrom(e.target.value)}
                                            />
                                        </div>
                                        <div className="relative flex-1">
                                            <svg className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-soft" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                                                <line x1="16" y1="2" x2="16" y2="6" />
                                                <line x1="8" y1="2" x2="8" y2="6" />
                                                <line x1="3" y1="10" x2="21" y2="10" />
                                            </svg>
                                            <input
                                                type="date"
                                                className="no-date-icon input-base date-input w-full pl-9 pr-3 py-2 text-sm"
                                                value={auditTo}
                                                onChange={e => setAuditTo(e.target.value)}
                                            />
                                        </div>
                                    </div>
                                </div>
                                {!filteredEvents.length ? (
                                    <div className="text-xs text-soft">No audit events match your filters.</div>
                                ) : (
                                    <div className="max-h-72 space-y-2 overflow-auto rounded-lg border border-accent-weak bg-panel p-2">
                                        {filteredEvents.slice(0, auditLimit).map(event => (
                                            <div key={event.id} className="rounded-lg border border-accent-weak bg-panel px-3 py-2 text-xs text-soft">
                                                <div className="text-sm font-semibold text-[color:var(--color-text)]">{event.eventType}</div>
                                                <div className="mt-1 flex flex-wrap gap-2 text-[11px] text-soft">
                                                    <span>Actor: {getMemberLabel(event.actorUserId)}</span>
                                                    <span>Role: {event.actorRole ?? "-"}</span>
                                                    <span>{new Date(event.createdAt).toLocaleString()}</span>
                                                </div>
                                            </div>
                                        ))}
                                        {filteredEvents.length > auditLimit ? (
                                            <button
                                                type="button"
                                                className="w-full rounded-lg btn-outline-accent px-2 py-1 text-xs"
                                                onClick={() => setAuditLimit(prev => prev + 10)}
                                            >
                                                Load more
                                            </button>
                                        ) : null}
                                    </div>
                                )}
                            </>
                        ) : (
                            <div className="text-xs text-soft">Audit log is collapsed.</div>
                        )}
                    </div>
                ) : null}

                {renameModalOpen ? (
                    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 p-4 !mt-0" onClick={handleCloseRenameModal}>
                        <div
                            className="relative w-full max-w-sm rounded-2xl border border-accent-weak bg-panel p-5"
                            onClick={event => event.stopPropagation()}
                            onKeyDown={event => {
                                if (event.key === "Escape") handleCloseRenameModal();
                                if (event.key === "Enter" && renameDirty && isAdmin && renameValue.trim()) setConfirmRenameOpen(true);
                            }}
                            role="dialog"
                            tabIndex={-1}
                        >
                            <button
                                type="button"
                                className="absolute right-3 top-3 rounded-lg btn-outline-accent px-2 py-1 text-sm"
                                onClick={handleCloseRenameModal}
                                aria-label="Close"
                            >
                                x
                            </button>
                            <div className="text-lg font-semibold">Change group name</div>
                            <input
                                className={`mt-4 w-full input-base px-3 py-2 text-sm ${renameValue.trim() ? "" : "border-red-400/70"}`}
                                value={renameValue}
                                onChange={e => setRenameValue(e.target.value)}
                                placeholder="Group name"
                            />
                            {renameDirty ? (
                                <div className="mt-3 rounded-lg border border-yellow-400/60 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-200">
                                    You have unsaved changes.
                                </div>
                            ) : null}
                            <div className="mt-4 flex items-center gap-2">
                                {renameDirty ? (
                                    <>
                                        <button
                                            type="button"
                                            className="flex-1 rounded-lg btn-outline-accent px-3 py-2 text-sm font-semibold"
                                            onClick={handleCloseRenameModal}
                                        >
                                            Discard changes
                                        </button>
                                        <button
                                            type="button"
                                            className="flex-1 rounded-lg btn-accent px-3 py-2 text-sm font-semibold disabled:opacity-60"
                                            onClick={() => setConfirmRenameOpen(true)}
                                            disabled={!isAdmin || !renameValue.trim()}
                                        >
                                            Rename
                                        </button>
                                    </>
                                ) : (
                                    <button
                                        type="button"
                                        className="flex-1 rounded-lg btn-outline-accent px-3 py-2 text-sm font-semibold"
                                        onClick={handleCloseRenameModal}
                                    >
                                        Dismiss
                                    </button>
                                )}
                            </div>
                        </div>
                    </div>
                ) : null}

                {tagModalOpen ? (
                    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 p-4 !mt-0" onClick={() => setTagModalOpen(false)}>
                        <div
                            className="w-full max-w-xl rounded-2xl border border-accent-weak bg-panel p-5"
                            onClick={event => event.stopPropagation()}
                            onKeyDown={event => {
                                if (event.key === "Escape") setTagModalOpen(false);
                                // if (event.key === "Enter" && !event.shiftKey && pendingTags.length && canManageTags) handleSaveTags();
                            }}
                            role="dialog"
                            tabIndex={-1}
                        >
                            <div className="flex items-center justify-between">
                                <div className="text-lg font-semibold">Edit tags</div>
                                <button type="button" className="rounded-lg btn-outline-accent px-2 py-1 text-sm" onClick={() => setTagModalOpen(false)} aria-label="Close">x</button>
                            </div>
                            <div className="mt-4 space-y-3">
                                <TagInput
                                    label="Add tags"
                                    tags={pendingTags}
                                    suggestions={tags}
                                    enableBackspaceRemove
                                    onToggleTag={tag => setPendingTags(prev => prev.filter(item => item !== tag))}
                                    onAddTag={tag => setPendingTags(prev => prev.includes(tag) ? prev : [...prev, tag])}
                                />
                                <button
                                    type="button"
                                    className="rounded-lg btn-accent px-3 py-2 text-sm font-semibold disabled:opacity-60"
                                    onClick={handleSaveTags}
                                    disabled={!pendingTags.length || !canManageTags}
                                >
                                    Save tags
                                </button>
                                {!canManageTags ? (
                                    <div className="text-xs text-soft">Only admins can add new tags.</div>
                                ) : null}
                                <div className="divider" />
                                <div className="text-sm font-semibold">Existing tags</div>
                                <div className="max-h-60 overflow-auto resize-y pr-1">
                                    <div className="flex flex-wrap gap-2">
                                        {tags.map(tag => (
                                            <button
                                                key={tag}
                                                type="button"
                                                className={`rounded-full border px-2 py-0.5 text-xs text-[color:var(--color-text)] ${toggleRemoveTags.includes(tag) ? "border-red-400/60 text-red-200 bg-red-500/10" : "border-accent-weak bg-accent-soft hover:border-accent"}`}
                                                onClick={() => {
                                                    if (!canManageTags) return;
                                                    setToggleRemoveTags(prev => prev.includes(tag) ? prev.filter(item => item !== tag) : [...prev, tag]);
                                                }}
                                            >
                                                #{tag}
                                            </button>
                                        ))}
                                        {!tags.length ? <div className="text-xs text-soft">No tags yet.</div> : null}
                                    </div>
                                </div>
                                {toggleRemoveTags.length ? (
                                    <button
                                        type="button"
                                        className="rounded-lg border border-red-400/60 bg-red-500/10 px-3 py-2 text-sm font-semibold text-red-200"
                                        onClick={() => setConfirmDeleteOpen(true)}
                                    >
                                        Delete selected ({toggleRemoveTags.length})
                                    </button>
                                ) : null}
                            </div>
                        </div>
                    </div>
                ) : null}
                <ConfirmSlideModal
                    isOpen={confirmDeleteOpen}
                    title="Delete selected tags"
                    description="Tags will be removed from this group and any entries using them."
                    confirmLabel="Delete tags"
                    onClose={() => setConfirmDeleteOpen(false)}
                    onConfirm={() => {
                        setConfirmDeleteOpen(false);
                        handleConfirmDelete();
                    }}
                />
                <ConfirmSlideModal
                    isOpen={Boolean(confirmDeleteInvite)}
                    title="Delete invite link"
                    description={confirmDeleteInvite ? `Delete invite ${confirmDeleteInvite.token.slice(0, 6)}...${confirmDeleteInvite.token.slice(-4)}?` : ""}
                    confirmLabel="Delete link"
                    onClose={() => setConfirmDeleteInvite(null)}
                    onConfirm={async () => {
                        if (!confirmDeleteInvite) return;
                        const target = confirmDeleteInvite;
                        setConfirmDeleteInvite(null);
                        const ok = await deleteInvite(target.id);
                        if (ok) notify({ title: "Invite deleted", tone: "danger" });
                    }}
                />
                <ConfirmSlideModal
                    isOpen={confirmRenameOpen}
                    title="Rename group"
                    description={`Change group name to "${renameValue.trim()}"?`}
                    confirmLabel="Rename"
                    onClose={() => setConfirmRenameOpen(false)}
                    onConfirm={handleRenameGroup}
                />
                <ConfirmSlideModal
                    isOpen={confirmLeaveOpen}
                    title="Leave group"
                    description="You will lose access to this group."
                    confirmLabel="Leave"
                    onClose={() => setConfirmLeaveOpen(false)}
                    onConfirm={async () => {
                        setConfirmLeaveOpen(false);
                        const ok = await leave();
                        if (ok) {
                            notify({ title: "Left group" });
                            router.push("/");
                        }
                    }}
                />
                <ConfirmSlideModal
                    isOpen={Boolean(confirmKick)}
                    title="Kick member"
                    description={confirmKick ? `Remove ${confirmKick.name} from this group?` : ""}
                    confirmLabel="Kick"
                    onClose={() => setConfirmKick(null)}
                    onConfirm={async () => {
                        if (!confirmKick) return;
                        const target = confirmKick;
                        setConfirmKick(null);
                        const ok = await kick(target.userId);
                        if (ok) notify({ title: "Member removed", message: target.name, tone: "danger" });
                    }}
                />
                <ConfirmSlideModal
                    isOpen={Boolean(confirmTransfer)}
                    title="Transfer ownership"
                    description={confirmTransfer ? `Make ${confirmTransfer.name} the new owner?` : ""}
                    confirmLabel="Transfer"
                    onClose={() => setConfirmTransfer(null)}
                    onConfirm={async () => {
                        if (!confirmTransfer) return;
                        const target = confirmTransfer;
                        setConfirmTransfer(null);
                        const ok = await transferOwner(target.userId);
                        if (ok) notify({ title: "Ownership transferred", message: target.name });
                    }}
                />
                <ConfirmRetypeModal
                    isOpen={confirmDeleteGroupOpen}
                    title="Delete group"
                    description="Type DELETE to confirm. This cannot be undone."
                    expectedText="DELETE"
                    value={deleteConfirmText}
                    onChange={setDeleteConfirmText}
                    confirmLabel="Delete"
                    onClose={() => setConfirmDeleteGroupOpen(false)}
                    onConfirm={handleDeleteGroup}
                />
            </div>
        </>
    );
}