import type { Server as HTTPServer } from "http";
import type { Socket as NetSocket } from "net";
import type { NextApiRequest, NextApiResponse } from "next";
import { NextResponse } from "next/server";
import type { Server as IOServer } from "socket.io";
import { Server } from "socket.io";

interface SocketServer extends HTTPServer {
  io?: IOServer | undefined;
}

interface SocketWithIO extends NetSocket {
  server: SocketServer;
}

interface NextApiResponseWithSocket extends NextApiResponse {
  socket: SocketWithIO;
}

export async function GET(_req: NextApiRequest, res: NextApiResponseWithSocket) {
  if (res.socket?.server?.io) {
    return NextResponse.json({
      success: true,
      message: "Socket is already running",
      socket: `:${process.env.SOCKET_PORT}`,
    });
  }

  console.log("Starting Socket.IO server on port:", process.env.SOCKET_PORT);

  const io = new Server({
    path: "/api/socket",
    addTrailingSlash: false,
    cors: { origin: "*" },
  }).listen(Number(process.env.SOCKET_PORT));

  io.on("connect", (socket) => {
    const _socket = socket;
    console.log("socket connect", socket.id);
    _socket.broadcast.emit("welcome", `Welcome ${_socket.id}`);
    socket.on("disconnect", async () => {
      console.log("socket disconnect");
    });
  });

  res.socket.server.io = io;

  return NextResponse.json({
    success: true,
    message: "Socket is started",
    socket: `:${process.env.SOCKET_PORT}`,
  });
}

"use client";

import { useEffect, useState } from "react";
import { io, Socket } from "socket.io-client";

export default function TestPage() {
  const [isConnected, setIsConnected] = useState(false);
  const [lastMessage, setLastMessage] = useState("");
  const [socket, setSocket] = useState<Socket | null>(null);

  useEffect(() => {
    const initSocket = async () => {
      const res = await fetch("/api/socket");
      const data = await res.json();

      if (data.success) {
        const newSocket = io(data.socket, {
          path: "/api/socket",
          addTrailingSlash: false,
        });

        setSocket(newSocket);

        newSocket.on("connect", () => {
          setIsConnected(true);
          console.log("Connected to socket server");
          newSocket.emit("test", "Hello from client");
        });

        newSocket.on("disconnect", () => {
          setIsConnected(false);
          console.log("Disconnected from socket server");
        });

        newSocket.on("welcome", (data) => {
          setLastMessage(data);
          console.log("Received welcome message:", data);
        });

        newSocket.on("connect_error", (error) => {
          console.error("Connection error:", error);
        });

        newSocket.on("error", (error) => {
          console.error("Socket error:", error);
        });
      }
    };

    initSocket();

    return () => {
      if (socket) {
        socket.disconnect();
      }
    };
  }, [socket]);

  return (
    <div>
      <h1>Socket.IO Test Page</h1>
      <p>Connection status: {isConnected ? "Connected" : "Disconnected"}</p>
      <p>Last message received: {lastMessage}</p>
    </div>
  );
}