"use client";

import { Suspense, useEffect, useMemo, useState } from "react";
import { useSearchParams } from "next/navigation";
import { IncomingCallWatcher } from "./IncomingCallWatcher";
import { api, getCurrentUserId } from "../lib/api";

interface MemberRow {
  user: { id: string | number; name: string };
}

function GlobalIncomingCallWatcherInner() {
  const params = useSearchParams();
  const routeWorkspaceId = params.get("workspaceId") ?? params.get("id");
  const [workspaceId, setWorkspaceId] = useState<string | null>(null);
  const [myUserId, setMyUserId] = useState<number | null>(null);
  const [members, setMembers] = useState<MemberRow[]>([]);

  useEffect(() => {
    const fromQuery = routeWorkspaceId ?? (typeof window !== "undefined"
      ? (() => {
          const parsed = new URLSearchParams(window.location.search);
          return parsed.get("workspaceId") ?? parsed.get("id");
        })()
      : null);
    setWorkspaceId(fromQuery);
  }, [routeWorkspaceId]);

  useEffect(() => {
    getCurrentUserId().then(setMyUserId);
  }, []);

  useEffect(() => {
    if (!workspaceId) return;
    api
      .members(workspaceId)
      .then((res) => setMembers(res.members as MemberRow[]))
      .catch(() => undefined);
  }, [workspaceId]);

  const nameById = useMemo(
    () => new Map(members.map((row) => [String(row.user.id), row.user.name])),
    [members],
  );

  if (!workspaceId || myUserId == null) return null;

  return <IncomingCallWatcher workspaceId={workspaceId} myUserId={myUserId} nameById={nameById} />;
}

/** App-wide ringer — mounted from the root layout so calls reach users on
 * channel/chat pages, not only AppShell routes like /people or /tasks. */
export function GlobalIncomingCallWatcher() {
  return (
    <Suspense fallback={null}>
      <GlobalIncomingCallWatcherInner />
    </Suspense>
  );
}