IdP/apps/frontend/components/family/family-sidebar-panel.tsx

'use client';

import Link from 'next/link';
import { useState } from 'react';
import { Loader2, Plus, Search, UsersRound } from 'lucide-react';
import { AvatarWithPresence } from '@/components/family/avatar-with-presence';
import { FamilyGroupSelector } from '@/components/family/family-group-selector';
import { FamilyInviteDialog } from '@/components/family/family-invite-dialog';
import { useFamilyOverlay } from '@/components/family/family-overlay-provider';
import { useAuth } from '@/components/id/auth-provider';
import { useSelectedFamily } from '@/hooks/use-primary-family';
import { addBotFatherToFamily, getApiErrorMessage } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { useToast } from '@/components/id/toast-provider';
import { cn } from '@/lib/utils';

export function FamilySidebarPanel() {
  const { user, token } = useAuth();
  const {
    group,
    groupSummaries,
    loading,
    hasFamily,
    selectedGroupId,
    setSelectedGroupId,
    presenceByUserId,
    refresh
  } = useSelectedFamily(Boolean(user && token));
  const { openChatWithMember } = useFamilyOverlay();
  const { showToast } = useToast();
  const [inviteOpen, setInviteOpen] = useState(false);
  const [addingBotFather, setAddingBotFather] = useState(false);

  if (!user || !token) return null;

  return (
    <>
      <div className="mt-5 border-t border-[#eceef4] pt-4">
        <div className="mb-2 flex items-center justify-between gap-1">
          <div className="min-w-0">
            <p className="truncate text-[11px] font-semibold uppercase tracking-wide text-[#667085]">Семья</p>
            {hasFamily ? (
              <FamilyGroupSelector
                groups={groupSummaries}
                selectedGroupId={selectedGroupId}
                onSelect={setSelectedGroupId}
                href={`/family/${group!.id}`}
                nameClassName="text-xs font-medium text-[#1f2430]"
              />
            ) : (
              <Link href="/family" className="text-xs font-medium text-[#3390ec] hover:underline">
                Создать семью
              </Link>
            )}
          </div>
          {hasFamily ? (
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className="h-7 w-7 shrink-0 rounded-lg"
              aria-label="Найти и пригласить"
              onClick={() => setInviteOpen(true)}
            >
              <Search className="h-3.5 w-3.5" />
            </Button>
          ) : null}
        </div>

        {loading ? (
          <div className="flex items-center gap-2 py-2 text-[11px] text-[#667085]">
            <Loader2 className="h-3.5 w-3.5 animate-spin" />
            Загрузка...
          </div>
        ) : hasFamily ? (
          <div className="max-h-[220px] space-y-1 overflow-y-auto pr-1">
            {(group?.members ?? []).map((member) => {
              const presence = presenceByUserId.get(member.userId);
              const isSelf = member.userId === user.id;
              return (
                <button
                  key={member.id}
                  type="button"
                  className={cn(
                    'flex w-full items-center gap-2 rounded-xl px-2 py-1.5 text-left transition hover:bg-[#f4f5f8]',
                    isSelf && 'bg-[#fafbfd]'
                  )}
                  onClick={() =>
                    openChatWithMember(member.userId, member.displayName, {
                      isBot: member.isBot,
                      botUsername: member.botUsername
                    })
                  }
                  title={isSelf ? 'Вы' : `Написать ${member.displayName}`}
                >
                  <AvatarWithPresence
                    userId={member.userId}
                    displayName={member.displayName}
                    hasAvatar={member.hasAvatar}
                    token={token}
                    isVerified={member.isVerified}
                    verificationIcon={member.verificationIcon}
                    online={isSelf ? undefined : presence?.online}
                    className="h-8 w-8"
                  />
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-[12px] font-medium leading-tight">
                      {member.displayName}
                      {member.isBot ? ' 🤖' : ''}
                      {isSelf ? ' (Вы)' : ''}
                    </p>
                    {!isSelf ? (
                      <p className={cn('truncate text-[10px]', member.isBot ? 'text-[#3390ec]' : presence?.online ? 'text-emerald-600' : 'text-[#a8adbc]')}>
                        {member.isBot ? 'Бот' : presence?.online ? 'В сети' : 'Не в сети'}
                      </p>
                    ) : null}
                  </div>
                </button>
              );
            })}
            {group?.botFatherAvailable ? (
              <button
                type="button"
                disabled={addingBotFather}
                className="flex w-full items-center gap-2 rounded-xl border border-dashed border-[#d5dbe8] px-2 py-2 text-left transition hover:bg-[#f4f5f8] disabled:opacity-60"
                onClick={() => {
                  if (!group || !token) return;
                  setAddingBotFather(true);
                  void addBotFatherToFamily(group.id, token)
                    .then(() => {
                      showToast('BotFather добавлен в семью');
                      void refresh();
                    })
                    .catch((error) => showToast(getApiErrorMessage(error, 'Не удалось добавить BotFather') ?? 'Ошибка'))
                    .finally(() => setAddingBotFather(false));
                }}
              >
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#eef4ff] text-[#3390ec]">
                  {addingBotFather ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
                </div>
                <div className="min-w-0 flex-1">
                  <p className="truncate text-[12px] font-medium leading-tight">Добавить BotFather 🤖</p>
                  <p className="truncate text-[10px] text-[#667085]">Создавайте ботов через чат</p>
                </div>
              </button>
            ) : null}
          </div>
        ) : (
          <div className="rounded-xl bg-[#f4f5f8] px-2 py-3 text-[11px] text-[#667085]">
            <UsersRound className="mb-1 h-4 w-4" />
            Приглашайте близких и общайтесь в чатах
          </div>
        )}
      </div>

      {hasFamily ? (
        <FamilyInviteDialog
          groupId={group!.id}
          group={group}
          open={inviteOpen}
          onOpenChange={setInviteOpen}
          onInvited={() => void refresh()}
        />
      ) : null}
    </>
  );
}