import { notFound } from "next/navigation";
import { headers } from "next/headers";
import Link from "next/link";
import { auth } from "@/lib/auth/server";
import { db, conversations, users, eq } from "@epicure/db";
import { ConversationsList } from "@/components/social/conversations-list";
import { MessageThread } from "@/components/social/message-thread";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { isParticipant, otherParticipantId } from "@/lib/messaging";

type Params = { params: Promise<{ id: string }> };

export default async function ConversationPage({ params }: Params) {
  const { id } = await params;
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) return null;

  const conversation = await db.query.conversations.findFirst({ where: eq(conversations.id, id) });
  if (!conversation || !isParticipant(conversation, session.user.id)) notFound();

  const otherId = otherParticipantId(conversation, session.user.id);
  const other = await db.query.users.findFirst({ where: eq(users.id, otherId) });
  if (!other) notFound();

  return (
    <div className="max-w-5xl mx-auto h-[calc(100vh-8rem)] border rounded-xl overflow-hidden flex">
      <div className="hidden sm:block w-80 border-r shrink-0 overflow-y-auto">
        <ConversationsList />
      </div>
      <div className="flex-1 flex flex-col min-w-0">
        <div className="border-b p-3 flex items-center gap-3">
          <Link href={`/u/${other.username}`} className="flex items-center gap-3">
            <Avatar className="h-8 w-8">
              {other.avatarUrl && <AvatarImage src={other.avatarUrl} alt={other.name} />}
              <AvatarFallback className="text-xs">{other.name.slice(0, 2).toUpperCase()}</AvatarFallback>
            </Avatar>
            <span className="font-medium text-sm hover:underline">{other.name}</span>
          </Link>
        </div>
        <MessageThread conversationId={id} currentUserId={session.user.id} />
      </div>
    </div>
  );
}