import { useState } from 'react';
import { useParams } from 'react-router-dom';
import { useRoom, useUser } from '@/contexts';
import { RoomProvider } from '@/contexts';
import { Loader2 } from 'lucide-react';
import { CreateRoomDialog } from '@/components/room/CreateRoomDialog';
import { DeleteRoomAlert } from '@/components/room/DeleteRoomAlert';
import { EditRoomDialog } from '@/components/room/EditRoomDialog';
import { RoomChatPanel } from '@/components/room/RoomChatPanel';
import { RoomList } from '@/components/room/RoomList';

function ProjectRoomInner() {
  const params = useParams();
  const projectName = params['project_name'] ?? '';

  const { user } = useUser();

  const {
    rooms,
    roomsLoading,
    activeRoom,
    activeRoomId,
    setActiveRoom,
    createRoom,
    updateRoom,
    deleteRoom,
    members,
  } = useRoom();

  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [roomName, setRoomName] = useState('');
  const [roomPublic, setRoomPublic] = useState(true);
  const [isPending, setIsPending] = useState(false);

  const handleSelectRoom = (room: { id: string }) => {
    setActiveRoom(room.id);
  };

  const handleClose = () => {
    setActiveRoom(null);
  };

  const handleOpenCreate = () => {
    setRoomName('');
    setRoomPublic(true);
    setCreateDialogOpen(true);
  };

  const handleCreateSubmit = async () => {
    if (!roomName.trim()) return;
    setIsPending(true);
    try {
      const newRoom = await createRoom(roomName.trim(), roomPublic);
      setCreateDialogOpen(false);
      setActiveRoom(newRoom.id);
    } catch (err) {
      console.error('Failed to create room:', err);
    } finally {
      setIsPending(false);
    }
  };

  const handleEditSubmit = async () => {
    if (!activeRoom || !roomName.trim()) return;
    setIsPending(true);
    try {
      await updateRoom(activeRoom.id, roomName.trim(), roomPublic);
      setEditDialogOpen(false);
    } catch (err) {
      console.error('Failed to update room:', err);
    } finally {
      setIsPending(false);
    }
  };

  const handleDeleteConfirm = async () => {
    if (!activeRoom) return;
    setIsPending(true);
    try {
      await deleteRoom(activeRoom.id);
      setDeleteDialogOpen(false);
      setActiveRoom(null);
    } catch (err) {
      console.error('Failed to delete room:', err);
    } finally {
      setIsPending(false);
    }
  };

  const isAdmin = !!user && members.some(
    (m) =>
      m.user === user.uid &&
      (m.role === 'owner' || m.role === 'admin'),
  );

  if (roomsLoading) {
    return (
      <div className="flex flex-1 items-center justify-center">
        <Loader2 className="h-7 w-7 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div className="flex h-full min-w-0 flex-1 overflow-hidden">
      <RoomList
        projectDisplayName={projectName}
        rooms={rooms}
        selectedRoomId={activeRoomId}
        onSelectRoom={handleSelectRoom}
        onCreateRoom={handleOpenCreate}
      />

      {activeRoom ? (
        <RoomChatPanel
          room={activeRoom}
          isAdmin={isAdmin}
          onClose={handleClose}
          onDelete={() => setDeleteDialogOpen(true)}
        />
      ) : (
        <div className="hidden flex-1 items-center justify-center md:flex">
          <div className="rounded-lg border border-dashed border-border/70 bg-muted/20 px-6 py-8 text-center">
            <p className="text-sm font-medium text-foreground">Select a channel</p>
            <p className="mt-1 text-xs text-muted-foreground">
              Choose a channel from the sidebar to start chatting.
            </p>
          </div>
        </div>
      )}

      <CreateRoomDialog
        open={createDialogOpen}
        onOpenChange={setCreateDialogOpen}
        roomName={roomName}
        roomPublic={roomPublic}
        onRoomNameChange={setRoomName}
        onRoomPublicChange={setRoomPublic}
        onSubmit={handleCreateSubmit}
        isPending={isPending}
      />

      <EditRoomDialog
        open={editDialogOpen}
        onOpenChange={setEditDialogOpen}
        roomName={roomName}
        roomPublic={roomPublic}
        onRoomNameChange={setRoomName}
        onRoomPublicChange={setRoomPublic}
        onSubmit={handleEditSubmit}
        isPending={isPending}
      />

      <DeleteRoomAlert
        open={deleteDialogOpen}
        onOpenChange={setDeleteDialogOpen}
        roomName={activeRoom?.room_name ?? ''}
        onConfirm={handleDeleteConfirm}
        isPending={isPending}
      />
    </div>
  );
}

export function ProjectRoom() {
  const params = useParams();
  const projectName = params['project_name'] ?? null;
  const roomIdFromUrl = params['roomId'] ?? null;

  return (
    <RoomProvider projectName={projectName} initialRoomId={roomIdFromUrl}>
      <ProjectRoomInner />
    </RoomProvider>
  );
}
