import { notFound } from "next/navigation";
import Link from "next/link";
import { verifySession } from "@/lib/dal";
import { createClient } from "@/lib/supabase/server";
import { ChatWindow } from "@/components/messages/chat-window";

export default async function ConversationPage({
  params,
}: {
  params: Promise<{ conversationId: string }>;
}) {
  const user = await verifySession();
  const { conversationId } = await params;
  const supabase = await createClient();

  const { data: conversation } = await supabase
    .from("conversations")
    .select(
      "id, author_id, merchant_id, needs(title), author:profiles!conversations_author_id_fkey(full_name), merchant:profiles!conversations_merchant_id_fkey(full_name)"
    )
    .eq("id", conversationId)
    .single();

  if (!conversation) {
    notFound();
  }

  const { data: messages } = await supabase
    .from("messages")
    .select("id, conversation_id, sender_id, body, created_at")
    .eq("conversation_id", conversationId)
    .order("created_at", { ascending: true });

  const isAuthor = conversation.author_id === user.id;
  const other = isAuthor ? conversation.merchant : conversation.author;
  const otherName = Array.isArray(other) ? other[0]?.full_name : other?.full_name;
  const need = Array.isArray(conversation.needs)
    ? conversation.needs[0]
    : conversation.needs;

  return (
    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
      <Link href="/messages" className="text-sm text-muted-foreground underline">
        ← Toutes les conversations
      </Link>
      <h1 className="mt-2 text-2xl font-semibold">{otherName ?? "Utilisateur"}</h1>
      <p className="text-sm text-muted-foreground">{need?.title}</p>

      <div className="mt-6">
        <ChatWindow
          conversationId={conversationId}
          currentUserId={user.id}
          initialMessages={messages ?? []}
        />
      </div>
    </div>
  );
}