import type { Metadata } from "next";
import Link from "next/link";
import { getCurrentUser, requireUser } from "@/lib/auth/dal";
import { prisma } from "@/lib/db";
import { getSiteSettings } from "@/lib/settings/site-settings";
import {
  listConfessions,
  listMostLikedConfessions,
  listMostViewedConfessions,
  listMostCommentedConfessions,
} from "@/lib/confessions/queries";
import { ConfessionComposer } from "@/components/confessions/ConfessionComposer";
import { ConfessionCard } from "@/components/confessions/ConfessionCard";
import { ConfessionSidebar } from "@/components/confessions/ConfessionSidebar";
import { resolvePageMetadata } from "@/lib/seo/metadata";
import { FadeInSection } from "@/components/ui/FadeInSection";

export async function generateMetadata(): Promise<Metadata> {
  return resolvePageMetadata("/itiraflar", {
    title: "İtiraflar",
    description: "Üyelerin gizli veya açık şekilde paylaştığı itiraflar. Sen de içini dök, dilersen bir üyeyi etiketle.",
  });
}

export default async function ConfessionsPage() {
  const settings = await getSiteSettings();

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

  const [confessions, totalCount, mostLiked, mostViewed, mostCommented] = await Promise.all([
    listConfessions(viewer?.id),
    prisma.confession.count({ where: { isActive: true } }),
    listMostLikedConfessions(5),
    listMostViewedConfessions(5),
    listMostCommentedConfessions(5),
  ]);

  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="pointer-events-none absolute -bottom-24 -left-32 h-[380px] w-[380px] rounded-full bg-[radial-gradient(circle,oklch(80%_0.08_335_/_.3),transparent_70%)]" />

      <div className="relative mx-auto max-w-6xl px-6 py-14">
        <div className="fade-up mb-8 text-center">
          <span 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">
            İtiraf Köşesi
          </span>
          <h1 className="text-[28px] sm:text-[34px]">Sırlarını Güvenle Paylaş</h1>
          <p className="mx-auto mt-2 max-w-md text-[13.5px] text-text-muted">
            {totalCount > 0 ? `${totalCount} itiraf paylaşıldı — ` : ""}gizli ya da açık, seçim senin.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_280px]">
          <div>
            <div className="fade-up fade-up-d1 mb-7">
              {viewer ? (
                <ConfessionComposer />
              ) : (
                <div className="rounded-2xl border border-dashed border-border p-5 text-center text-[13.5px] text-text-muted">
                  İtiraf paylaşmak için{" "}
                  <Link href="/giris" className="font-semibold text-accent">
                    giriş yap
                  </Link>
                  .
                </div>
              )}
            </div>

            {confessions.length === 0 ? (
              <p className="text-center text-[13.5px] text-text-muted">Henüz itiraf paylaşılmamış.</p>
            ) : (
              <FadeInSection className="grid grid-cols-1 items-start gap-5 sm:grid-cols-2">
                {confessions.map((confession) => (
                  <ConfessionCard key={confession.id} confession={confession} canLike={Boolean(viewer)} />
                ))}
              </FadeInSection>
            )}
          </div>

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