"use client";

import MessageBox from "@/components/channel/MessageBox";
import AppLayout from "@/components/app/AppLayout";
import { useParams, useRouter } from "next/navigation";
import useApp from "@/hooks/use-app";
import { useEffect, useRef, useState } from "react";
import auth, { waitForOpen } from "@/lib/auth";
import useAsync from "@/hooks/use-async";
import { Button } from "@/components/ui/button";
import useIndicators from "@/hooks/use-indicators";
import { useEffectOnceWhenReady } from "@/hooks/use-once";
import { ClientMessage } from "@/types/protocol";

export default function DMs() {
  const { id } = useParams<{ id: string }>();
  const app = useApp();
  const targetNode = useRef<WebSocket | null>(null);
  const { value: target, loading } = useAsync(() => app.getUserById(id));
  const router = useRouter();
  const { indicators, addIndicator } = useIndicators();

  const sendRequest = async (req: ClientMessage) => {
    console.log("Sending request: ", req);
    await waitForOpen(targetNode.current);
    await waitForOpen(app.node.current);

    switch (req.type) {
      case "send_message":
        targetNode.current?.send(JSON.stringify(req));
        break;
      case "load_chunk":
        targetNode.current?.send(JSON.stringify(req));
        app.node.current?.send(JSON.stringify(req));
        break;
      default:
        app.node.current?.send(JSON.stringify(req));
        break;
    }
  };

  useEffectOnceWhenReady(
    () => {
      async function connectTargetNode() {
        if (!target) return;
        await auth({
          id: target.node_address,
          wsRef: targetNode,
          messageStore: app.privateMessages,
          onIndicator: addIndicator,
        });
      }

      connectTargetNode().then(() => {
        app.setCurrentChannel({
          id: id,
          name: target?.display_name || id,
          kind: "text",
        });
      });
    },
    [target],
    [(v) => v]
  );

  return loading || target ? (
    <AppLayout app={app}>
      <MessageBox
        app={app}
        channelName={target?.display_name || id}
        channelIcon={target?.avatar_url || "_"}
        messages={app.privateMessages.messages.filter(
          (m) =>
            (m.channel_id === id && m.from === app.profile?.id) ||
            (m.from === id && m.channel_id === app.profile?.id)
        )}
        sendRequest={sendRequest}
        indicators={indicators.filter(
          (indicator) => indicator.indicator.params.user_id !== app.profile?.id
        )}
      />
    </AppLayout>
  ) : (
    <div className="flex min-h-screen flex-col items-center justify-center text-center">
      <h1 className="text-9xl font-extrabold text-gray-500 tracking-widest">
        404
      </h1>
      <div className="border border-border text-white px-2 text-sm rounded rotate-12 absolute backdrop-blur-sm">
        User Not Found
      </div>
      <p className="mt-5 text-gray-600">
        Sorry, we couldn't find the user you're looking for.
      </p>
      <Button className="mt-4" onClick={() => router.push("/chat")}>
        Go home
      </Button>
    </div>
  );
}