"use client";

import { useEffect, useRef, useState, useTransition } from "react";
import { io, type Socket } from "socket.io-client";
import { sendMessage } from "@/lib/messages/actions";
import { STATUS_SHARE_PREFIX } from "@/lib/messages/constants";

type ThreadMessage = {
  id: string;
  senderId: string;
  body: string;
  createdAt: string | Date;
};

const REALTIME_URL = process.env.NEXT_PUBLIC_REALTIME_URL ?? "http://localhost:4001";

function parseStatusShare(body: string): { thumbUrl: string; altText: string | null } | null {
  if (!body.startsWith(STATUS_SHARE_PREFIX)) return null;
  try {
    return JSON.parse(body.slice(STATUS_SHARE_PREFIX.length));
  } catch {
    return null;
  }
}

export function MessageThread({
  conversationId,
  currentUserId,
  otherName,
  initialMessages,
}: {
  conversationId: string;
  currentUserId: string;
  otherName: string;
  initialMessages: ThreadMessage[];
}) {
  const [messages, setMessages] = useState(initialMessages);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();
  const bottomRef = useRef<HTMLDivElement>(null);
  const formRef = useRef<HTMLFormElement>(null);

  useEffect(() => {
    let socket: Socket | null = null;
    let cancelled = false;

    async function connect() {
      const res = await fetch("/api/realtime-token");
      if (!res.ok || cancelled) return;
      const { token } = await res.json();

      socket = io(REALTIME_URL, {
        path: "/realtime/socket.io",
        auth: { token },
      });

      socket.on("connect", () => {
        socket?.emit("join", { conversationId });
      });

      socket.on("message:new", (message: ThreadMessage) => {
        // Gönderenin kendi mesajı zaten optimistic olarak eklendi — sadece karşı taraftan geleni ekle.
        if (message.senderId === currentUserId) return;
        setMessages((prev) => (prev.some((m) => m.id === message.id) ? prev : [...prev, message]));
      });
    }

    connect();

    return () => {
      cancelled = true;
      socket?.disconnect();
    };
  }, [conversationId, currentUserId]);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  function handleSubmit(formData: FormData) {
    const body = String(formData.get("body") ?? "").trim();
    if (!body) return;

    const optimistic: ThreadMessage = {
      id: `optimistic-${Date.now()}`,
      senderId: currentUserId,
      body,
      createdAt: new Date(),
    };
    setMessages((prev) => [...prev, optimistic]);
    formRef.current?.reset();
    setErrorMessage(null);

    startTransition(async () => {
      const result = await sendMessage(conversationId, undefined, formData);
      if (result?.message) {
        setErrorMessage(result.message);
        setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
      }
    });
  }

  return (
    <div className="flex h-[calc(100vh-73px)] flex-col">
      <div className="border-b border-border px-6 py-4">
        <h1 className="text-[16px] font-bold">{otherName}</h1>
      </div>

      <div className="flex-1 overflow-y-auto px-6 py-4">
        <div className="flex flex-col gap-2">
          {messages.map((message) => {
            const mine = message.senderId === currentUserId;
            const sharedStatus = parseStatusShare(message.body);
            return (
              <div key={message.id} className={`flex ${mine ? "justify-end" : "justify-start"}`}>
                {sharedStatus ? (
                  <div
                    className={`max-w-[70%] overflow-hidden rounded-2xl border ${
                      mine ? "border-accent/30" : "border-border"
                    } bg-surface`}
                  >
                    {/* eslint-disable-next-line @next/next/no-img-element -- yerel diskten servis edilen kullanıcı içeriği */}
                    <img src={sharedStatus.thumbUrl} alt={sharedStatus.altText ?? "Durum"} className="max-h-56 w-full object-cover" />
                    <div className="px-3 py-2 text-[11.5px] font-semibold text-text-muted">📸 Bir durum paylaştı</div>
                  </div>
                ) : (
                  <div
                    className={`max-w-[70%] rounded-2xl px-4 py-2.5 text-[14px] ${
                      mine ? "bg-accent text-white" : "border border-border bg-surface text-text"
                    }`}
                  >
                    {message.body}
                  </div>
                )}
              </div>
            );
          })}
          <div ref={bottomRef} />
        </div>
      </div>

      <form ref={formRef} action={handleSubmit} className="flex items-center gap-2 border-t border-border p-4">
        <input
          name="body"
          placeholder="Mesaj yaz..."
          autoComplete="off"
          className="flex-1 rounded-full border border-border px-4 py-2.5 text-[14px] outline-none focus:border-accent"
        />
        <button
          type="submit"
          disabled={isPending}
          className="rounded-full bg-accent px-5 py-2.5 text-[13.5px] font-semibold text-white hover:bg-accent-dark disabled:opacity-60"
        >
          Gönder
        </button>
      </form>
      {errorMessage && <p className="px-6 pb-3 text-[12.5px] text-accent">{errorMessage}</p>}
    </div>
  );
}