import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getCurrentUser, requireUser } from "@/lib/auth/dal";
import { getSiteSettings } from "@/lib/settings/site-settings";
import {
  getConfessionBySlug,
  incrementConfessionViewCount,
  listMostLikedConfessions,
  listMostViewedConfessions,
  listMostCommentedConfessions,
} from "@/lib/confessions/queries";
import { listCommentsForConfession } from "@/lib/confessions/comment-queries";
import { stripHtmlToText } from "@/lib/shared/sanitize-html";
import { RICH_TEXT_CONTENT_CLASSES } from "@/lib/shared/rich-text-classes";
import { maskName } from "@/lib/confessions/mask";
import { ConfessionLikeButton } from "@/components/confessions/ConfessionLikeButton";
import { CommentSection } from "@/components/confessions/CommentSection";
import { ConfessionSidebar } from "@/components/confessions/ConfessionSidebar";
import { resolvePageMetadata } from "@/lib/seo/metadata";
import { truncateAtWordBoundary } from "@/lib/shared/text";
import { Breadcrumbs } from "@/components/seo/Breadcrumbs";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const confession = await getConfessionBySlug(slug);

  if (!confession) {
    return resolvePageMetadata("/itiraflar", {
      title: "İtiraflar",
      description: "Üyelerin gizli veya açık şekilde paylaştığı itiraflar.",
    });
  }

  // <title> etiketi kısa tutulur (H1'de tam başlık gösterilmeye devam eder) — uzun kullanıcı
  // başlıkları (100 karaktere kadar) Google'da kesilmesin diye.
  const metaTitle = truncateAtWordBoundary(confession.title, 60);
  const excerpt = truncateAtWordBoundary(stripHtmlToText(confession.body), 155);

  return resolvePageMetadata(`/itiraflar/${slug}`, {
    title: metaTitle,
    description: excerpt || "Bir üyenin paylaştığı itiraf — SohbeteGir İtiraf Köşesi.",
  });
}

export default async function ConfessionDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const settings = await getSiteSettings();

  const viewer =
    settings.confessionVisibility === "MEMBERS_ONLY" ? await requireUser() : await getCurrentUser();

  const confession = await getConfessionBySlug(slug, viewer?.id);
  if (!confession) notFound();

  await incrementConfessionViewCount(confession.id);

  const [comments, mostLiked, mostViewed, mostCommented] = await Promise.all([
    listCommentsForConfession(confession.id),
    listMostLikedConfessions(5, confession.id),
    listMostViewedConfessions(5, confession.id),
    listMostCommentedConfessions(5, confession.id),
  ]);

  const fullName = confession.user.profile?.fullName ?? "Bir üye";
  const isPrivate = confession.visibility === "GIZLI";
  const displayName = isPrivate ? maskName(fullName) : fullName;
  const initials = displayName.slice(0, 2).toUpperCase();
  const avatarPhoto = !isPrivate ? confession.user.profile?.avatarPhoto : null;

  return (
    <div className="relative overflow-hidden">
      <div className="pointer-events-none absolute -right-40 -top-20 h-[420px] w-[420px] rounded-full bg-[radial-gradient(circle,oklch(88%_0.06_40_/_.5),transparent_70%)]" />

      <div className="relative mx-auto max-w-5xl px-6 py-14">
        <Breadcrumbs
          items={[
            { name: "Ana Sayfa", path: "/" },
            { name: "İtiraflar", path: "/itiraflar" },
            { name: confession.title, path: `/itiraflar/${confession.slug}` },
          ]}
        />

        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_260px]">
          <div className="fade-up rounded-2xl border border-border bg-surface p-6 shadow-[0_1px_2px_rgba(30,15,8,.04)]">
            <div className="mb-4 flex items-center justify-between">
              <div className="flex items-center gap-2.5">
                {avatarPhoto ? (
                  <div className="h-10 w-10 shrink-0 overflow-hidden rounded-full">
                    {/* eslint-disable-next-line @next/next/no-img-element -- yerel diskten servis edilen kullanıcı içeriği */}
                    <img src={avatarPhoto.thumbUrl} alt={avatarPhoto.altText ?? fullName} className="h-full w-full object-cover" />
                  </div>
                ) : (
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-accent to-accent-2 text-[12px] font-bold text-white">
                    {initials}
                  </div>
                )}
                <div>
                  <span className="block text-[14px] font-semibold">{displayName}</span>
                  <span className="block text-[11.5px] text-text-muted">{confession.createdAt.toLocaleDateString("tr-TR")}</span>
                </div>
              </div>
              <span
                className={`flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-semibold ${
                  confession.visibility === "GIZLI" ? "bg-text-muted/10 text-text-muted" : "bg-accent-2/10 text-accent-2"
                }`}
              >
                {confession.visibility === "GIZLI" ? "Gizli" : "Açık"}
              </span>
            </div>

            <h1 className="mb-4 text-[24px] leading-snug">{confession.title}</h1>

            <div
              dangerouslySetInnerHTML={{ __html: confession.body }}
              className={`text-[15.5px] leading-relaxed text-text [&_p]:mb-3 ${RICH_TEXT_CONTENT_CLASSES}`}
            />

            {confession.tags.length > 0 && (
              <div className="mt-4 flex flex-wrap gap-1.5 border-t border-dashed border-border pt-4">
                {confession.tags.map((tag) => {
                  const taggedProfile = tag.taggedUser.profile;
                  return taggedProfile ? (
                    <Link
                      key={tag.id}
                      href={`/profil/${taggedProfile.username}`}
                      className="rounded-full bg-bg-alt px-2.5 py-1 text-[12px] font-semibold text-accent"
                    >
                      @{taggedProfile.username}
                    </Link>
                  ) : null;
                })}
              </div>
            )}

            <div className="mt-4 flex items-center gap-4 border-t border-dashed border-border pt-4">
              {viewer ? (
                <ConfessionLikeButton
                  confessionId={confession.id}
                  initiallyLiked={confession.likes.length > 0}
                  likeCount={confession._count.likes}
                />
              ) : (
                <span className="flex items-center gap-1.5 text-[12.5px] font-semibold text-text-muted">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 20s-7-4.35-9.5-8.5C.5 8 2 4 6 4c2 0 3.5 1.2 4 2.5C10.5 5.2 12 4 14 4c4 0 5.5 4 3.5 7.5C19 15.65 12 20 12 20z" />
                  </svg>
                  {confession._count.likes > 0 ? confession._count.likes : "Beğen"}
                </span>
              )}

              <span className="flex items-center gap-1.5 text-[12.5px] font-semibold text-text-muted">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round">
                  <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
                  <circle cx="12" cy="12" r="3" />
                </svg>
                {confession.viewCount} okunma
              </span>

              <span className="flex items-center gap-1.5 text-[12.5px] font-semibold text-text-muted">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z" />
                </svg>
                {confession._count.comments} yorum
              </span>
            </div>

            <CommentSection
              confessionId={confession.id}
              comments={comments}
              viewerId={viewer?.id ?? null}
              isAdmin={viewer?.role === "ADMIN"}
            />
          </div>

          <aside className="lg:sticky lg:top-24 lg:self-start">
            <ConfessionSidebar mostLiked={mostLiked} mostViewed={mostViewed} mostCommented={mostCommented} />
          </aside>
        </div>
      </div>
    </div>
  );
}