"use client";

import type { GroupSettingsViewModelState } from "@/features/groups/components/use-group-settings-view-model";

type GroupSettingsGeneralCardProps = {
    vm: GroupSettingsViewModelState;
};

export default function GroupSettingsGeneralCard({ vm }: GroupSettingsGeneralCardProps) {
    if (!vm.group) return null;

    return (
        <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">{vm.group.name}</div>
                    </div>
                    {vm.isAdmin ? (
                        <button
                            type="button"
                            className="rounded-lg btn-outline-accent px-3 py-2 text-sm font-semibold"
                            onClick={vm.handleOpenRenameModal}
                        >
                            Change
                        </button>
                    ) : null}
                </div>
                {!vm.isAdmin ? (
                    <div className="text-xs text-soft">Only admins can rename the group.</div>
                ) : null}
                <div className="divider" />
                {vm.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={vm.localAllowMemberTagManage}
                                className={`relative h-7 w-12 rounded-full border transition ${vm.localAllowMemberTagManage ? "border-emerald-400 bg-emerald-500/20" : "border-red-400/60 bg-red-500/10"}`}
                                onClick={() => vm.handleToggleAllowMembers(!vm.localAllowMemberTagManage)}
                            >
                                <span
                                    className={`absolute left-0.5 top-1/2 h-5 w-5 -translate-y-1/2 rounded-full transition ${vm.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 ({vm.tags.length})</div>
                    <div className="flex items-center gap-2">
                        {vm.showAllTags ? (
                            <button
                                type="button"
                                className="rounded-lg btn-outline-accent px-2 py-1 text-xs"
                                onClick={() => vm.setShowAllTags(false)}
                            >
                                Show less
                            </button>
                        ) : null}
                        {vm.canManageTags ? (
                            <button
                                type="button"
                                className="rounded-lg btn-accent px-2 py-1 text-xs font-semibold"
                                onClick={() => vm.setTagModalOpen(true)}
                            >
                                Edit tags
                            </button>
                        ) : null}
                    </div>
                </div>
                <div className={vm.tagsScrollable ? "max-h-60 overflow-auto resize-y pr-1" : ""}>
                    <div className="flex flex-wrap gap-2">
                        {vm.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>
                        ))}
                        {!vm.showAllTags && vm.hasMoreTags ? (
                            <button
                                type="button"
                                className="rounded-full border border-accent-weak bg-panel px-2 py-0.5 text-xs text-soft"
                                onClick={() => vm.setShowAllTags(true)}
                                aria-label="Show all tags"
                            >
                                more . . .
                            </button>
                        ) : null}
                        {!vm.tags.length ? <div className="text-xs text-soft">No tags yet.</div> : null}
                    </div>
                </div>
            </div>
        </div>
    );
}