"use client";

import GroupSettingsAuditCard from "@/features/groups/components/group-settings-audit-card";
import GroupSettingsDangerCard from "@/features/groups/components/group-settings-danger-card";
import GroupSettingsGeneralCard from "@/features/groups/components/group-settings-general-card";
import GroupSettingsJoinInvitesCard from "@/features/groups/components/group-settings-join-invites-card";
import GroupSettingsMembersCard from "@/features/groups/components/group-settings-members-card";
import GroupSettingsModals from "@/features/groups/components/group-settings-modals";
import useGroupSettingsViewModel from "@/features/groups/components/use-group-settings-view-model";

export default function GroupSettingsContent({ groupId }: { groupId: number }) {
    const vm = useGroupSettingsViewModel(groupId);

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

    return (
        <>
            <div className="space-y-4">
                <div className="flex items-center justify-between">
                    <div>
                        <h1 className="text-2xl font-semibold">{vm.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={vm.goBack}
                    >
                        Back
                    </button>
                </div>

                <GroupSettingsGeneralCard vm={vm} />
                <GroupSettingsJoinInvitesCard vm={vm} />
                <GroupSettingsMembersCard vm={vm} />
                <GroupSettingsDangerCard vm={vm} />
                <GroupSettingsAuditCard vm={vm} />
            </div>

            <GroupSettingsModals vm={vm} />
        </>
    );
}