'use client';

import { Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { ChatRoomAvatarDisplay } from '@/components/family/chat-room-avatar-display';
import type { ChatRoom } from '@/lib/api';
import { roomDisplayLabel } from '@/lib/family-chat';

interface ChatForwardDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  rooms: ChatRoom[];
  viewerUserId: string;
  token: string | null;
  currentRoomId?: string;
  forwarding?: boolean;
  onSelectRoom: (roomId: string) => void;
}

export function ChatForwardDialog({
  open,
  onOpenChange,
  rooms,
  viewerUserId,
  token,
  currentRoomId,
  forwarding,
  onSelectRoom
}: ChatForwardDialogProps) {
  const targets = rooms.filter((room) => room.id !== currentRoomId && room.type !== 'BOT');

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md rounded-[24px]">
        <DialogHeader>
          <DialogTitle>Переслать в чат</DialogTitle>
        </DialogHeader>
        {forwarding ? (
          <div className="flex items-center justify-center gap-2 py-8 text-sm text-[#667085]">
            <Loader2 className="h-4 w-4 animate-spin" />
            Пересылка...
          </div>
        ) : (
          <div className="max-h-[360px] space-y-1 overflow-y-auto">
            {targets.length ? (
              targets.map((room) => (
                <button
                  key={room.id}
                  type="button"
                  className="flex w-full items-center gap-3 rounded-xl px-2 py-2 text-left transition hover:bg-[#f4f5f8]"
                  onClick={() => onSelectRoom(room.id)}
                >
                  <ChatRoomAvatarDisplay room={room} viewerUserId={viewerUserId} token={token} size="sm" />
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-medium">{roomDisplayLabel(room, viewerUserId)}</p>
                    <p className="text-xs text-[#667085]">{room.members.length} участников</p>
                  </div>
                </button>
              ))
            ) : (
              <p className="py-6 text-center text-sm text-[#667085]">Нет доступных чатов для пересылки</p>
            )}
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}