import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getRoomBySlug, listRelatedRooms } from "@/lib/rooms/queries";
import { resolvePageMetadata } from "@/lib/seo/metadata";
import { RICH_TEXT_CONTENT_CLASSES } from "@/lib/shared/rich-text-classes";
import { roomDisplayName } from "@/lib/shared/text";
import { Breadcrumbs } from "@/components/seo/Breadcrumbs";

type Props = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const room = await getRoomBySlug(slug);
  if (!room) return { title: "Oda Bulunamadı" };

  const displayName = roomDisplayName(room.name);
  return resolvePageMetadata(`/odalar/${slug}`, {
    title: displayName,
    description: room.description || `${displayName} sohbet odasını SohbeteGir.com'da keşfet.`,
  });
}

export default async function RoomDetailPage({ params }: Props) {
  const { slug } = await params;
  const room = await getRoomBySlug(slug);

  if (!room) notFound();

  const relatedRooms = await listRelatedRooms(room.categoryId, room.id);

  return (
    <div className="mx-auto max-w-2xl px-6 py-14">
      <Breadcrumbs
        items={[
          { name: "Ana Sayfa", path: "/" },
          { name: "Odalar", path: "/odalar" },
          { name: room.category.name, path: `/odalar/kategori/${room.category.slug}` },
          { name: roomDisplayName(room.name), path: `/odalar/${room.slug}` },
        ]}
      />

      {room.coverImage && (
        <div className="mb-8 h-56 w-full overflow-hidden rounded-2xl sm:h-72">
          {/* eslint-disable-next-line @next/next/no-img-element -- yerel diskten servis edilen kullanıcı içeriği */}
          <img src={room.coverImage} alt={room.name} className="h-full w-full object-cover" />
        </div>
      )}
      <div className="mb-8">
        <Link
          href={`/odalar/kategori/${room.category.slug}`}
          className="mb-3 inline-block rounded-full bg-gradient-to-r from-accent to-accent-2 px-4 py-1.5 text-[12px] font-extrabold uppercase tracking-wide text-white hover:opacity-90"
        >
          {room.category.name}
        </Link>
        <h1 className="text-[28px]">{roomDisplayName(room.name)}</h1>
        {room.description && <p className="mt-2 text-[14.5px] text-text-muted">{room.description}</p>}
      </div>

      {room.introArticle ? (
        <div
          dangerouslySetInnerHTML={{ __html: room.introArticle }}
          className={`text-[15px] leading-relaxed text-ink [&_p]:mb-3 ${RICH_TEXT_CONTENT_CLASSES}`}
        />
      ) : (
        <p className="text-[13.5px] text-text-muted">Bu oda için tanıtım yazısı yakında eklenecek.</p>
      )}

      {relatedRooms.length > 0 && (
        <div className="mt-12 border-t border-border pt-6">
          <h2 className="mb-3 text-[15px] font-bold">{room.category.name} Kategorisindeki Diğer Odalar</h2>
          <div className="flex flex-wrap gap-2">
            {relatedRooms.map((related) => (
              <Link
                key={related.id}
                href={`/odalar/${related.slug}`}
                className="rounded-full border border-border px-3.5 py-2 text-[13px] font-semibold text-text-muted hover:border-accent hover:text-accent"
              >
                {related.name}
              </Link>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}