import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { auth } from "@/lib/auth";
import { avatarImageUrl, excerpt } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
import { HomeLoginForm } from "@/components/auth/home-login-form";

export const dynamic = "force-dynamic";

export default async function HomePage() {
  const t = await getTranslations("pages.home");
  const session = await auth();
  const hotelName = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
  const imager =
    (await siteSettings.get("habbo_imaging_url", "https://www.habbo.com/habbo-imaging/avatarimage")) ?? "";

  if (!session?.user) {
    let articles: Array<{ slug: string; title: string; shortStory: string; image: string }> = [];
    try {
      articles = await prisma.websiteArticles.findMany({
        orderBy: { createdAt: "desc" },
        take: 8,
        select: { slug: true, title: true, shortStory: true, image: true },
      });
    } catch {}

    let recentUsers: Array<{ username: string; look: string }> = [];
    try {
      recentUsers = await prisma.user.findMany({
        orderBy: { lastOnline: "desc" },
        take: 12,
        select: { username: true, look: true },
      });
    } catch {}

    return (
      <div className="flex flex-col gap-4 md:flex-row">
        {/* LEFT COLUMN — 1/3 */}
        <div className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
          {/* Login Card */}
          <div className="overflow-hidden rounded-lg border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)" }}>
            <div className="relative h-[120px] overflow-hidden md:h-[150px]">
              <div className="absolute inset-0" style={{
                backgroundImage: "url(/assets/images/kasja_mepage_header.png)",
                backgroundSize: "cover",
                backgroundPosition: "center 30%",
                backgroundRepeat: "no-repeat",
              }} />
              <div className="absolute inset-0" style={{
                background: "linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.5) 100%)",
              }} />
              <div className="absolute -bottom-8 right-4 w-32 h-32 rounded-full opacity-[0.12] blur-[60px]" style={{ background: "var(--color-primary)" }} />
            </div>
            <div className="p-3" style={{ backgroundColor: "var(--color-surface)" }}>
              <HomeLoginForm />
            </div>
          </div>

          {/* Register Button */}
          <a href="/register" className="relative block">
            <div className="inline-block overflow-hidden rounded-lg border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)" }}>
              <img src="/assets/images/EnterHubbly.png" alt="Register" className="block" />
            </div>
            <span
              className="pointer-events-none absolute inset-0 flex items-center text-4xl font-extrabold text-white"
              style={{ textShadow: "1px 1px 2px rgba(0,0,0,0.8)", marginLeft: "15px" }}
            >
              REGISTER NOW
            </span>
          </a>

          {/* Recent Users */}
          {recentUsers.length > 0 && (
            <div className="overflow-hidden rounded-lg border bg-white dark:bg-gray-800" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)" }}>
              <div
                className="flex h-12 w-full items-center justify-center bg-repeat"
                style={{
                  background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
                }}
              >
                <h2 className="px-3 text-xl font-bold text-white">Recent Users</h2>
              </div>
              <div className="grid grid-cols-6 gap-4 p-4">
                {recentUsers.map((u) => (
                  <div
                    key={u.username}
                    className="relative overflow-visible rounded-md bg-white p-0 shadow-lg dark:bg-gray-800"
                    style={{ width: "50px", height: "50px", justifySelf: "center" }}
                  >
                    <img
                      src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 3 })}
                      alt={u.username}
                      loading="lazy"
                      decoding="async"
                      style={{
                        position: "absolute",
                        top: "-12px",
                        left: "50%",
                        transform: "translateX(-50%)",
                        width: "auto",
                        height: "auto",
                        maxWidth: "none",
                        maxHeight: "none",
                      }}
                    />
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* RIGHT COLUMN — 2/3 */}
        <div className="flex w-full flex-col gap-4 md:w-2/3">
          {/* News */}
          <div className="overflow-hidden rounded-lg border bg-white dark:bg-gray-800" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)" }}>
            <div
              className="flex h-12 w-full items-center justify-center"
              style={{
                background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
              }}
            >
              <h2 className="text-xl font-bold text-white">Latest News</h2>
            </div>
            <div className="p-4">
              {articles.length === 0 ? (
                <p className="py-8 text-center text-gray-500 dark:text-gray-400">No articles available</p>
              ) : (
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                  {articles.map((a) => (
                    <Link
                      key={a.slug}
                      href={`/news/${a.slug}`}
                      className="group relative w-full overflow-hidden rounded-lg transition-all duration-200"
                      style={{
                        height: "215px",
                        backgroundColor: "var(--color-surface)",
                        border: "1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent)",
                      }}
                    >
                      <div className="relative h-full w-full overflow-hidden rounded-lg">
                        <img
                          src={a.image}
                          alt={a.title}
                          className="h-full w-full rounded-lg object-cover transition-all duration-300 group-hover:scale-105"
                          loading="lazy"
                        />
                        <div
                          className="absolute left-0 w-full p-2"
                          style={{ bottom: "-2px", background: "linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%)" }}
                        >
                          <h3 className="truncate text-lg font-semibold text-white text-shadow-sm">{a.title}</h3>
                          {a.shortStory && (
                            <p className="truncate text-xs font-normal text-white text-shadow-sm">
                              {excerpt(a.shortStory, 80)}
                            </p>
                          )}
                        </div>
                      </div>
                    </Link>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }

  const dbUser = await prisma.user.findUnique({
    where: { id: Number(session.user.id) },
    select: { username: true, look: true },
  }).catch(() => null);
  if (!dbUser) {
    return <p className="py-8 text-center text-gray-500">User not found.</p>;
  }

  const userId = Number(session.user.id);
  let onlineFriends: Array<{ username: string; look: string }> = [];
  try {
    const friendships = await prisma.messengerFriendships.findMany({
      where: {
        OR: [
          { userOneId: userId },
          { userTwoId: userId },
        ],
      },
      select: { userOneId: true, userTwoId: true },
    });
    const friendIds = friendships.map((f) =>
      f.userOneId === userId ? f.userTwoId : f.userOneId,
    );
    if (friendIds.length > 0) {
      onlineFriends = await prisma.user.findMany({
        where: { id: { in: friendIds }, online: "1" },
        take: 10,
        select: { username: true, look: true },
      });
    }
  } catch {}

  const [latestArticle] = await prisma.websiteArticles.findMany({
    orderBy: { createdAt: "desc" },
    take: 1,
    select: { slug: true, title: true, shortStory: true, image: true },
  }).catch(() => []);

  return (
    <div className="flex flex-col gap-6 md:flex-row">
      {/* Left column — 9/12 */}
      <div className="flex w-full flex-col gap-6 md:w-3/4">
        {/* User Hero */}
        <div className="relative flex h-[200px] items-end overflow-hidden rounded-lg">
          <div className="absolute inset-0" style={{
            backgroundImage: "url(/assets/images/kasja_mepage_header.png)",
            backgroundSize: "cover",
            backgroundPosition: "center 30%",
            backgroundRepeat: "no-repeat",
          }} />
          <div className="absolute inset-0" style={{
            background: "linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.25) 65%, rgba(0,0,0,0.6) 100%)",
          }} />
          <div className="absolute -bottom-10 -right-10 w-64 h-64 rounded-full opacity-[0.15] blur-[80px]" style={{ background: "var(--color-primary)" }} />
          <div className="absolute -top-10 -left-10 w-48 h-48 rounded-full opacity-[0.08] blur-[60px]" style={{ background: "var(--color-primary)" }} />
          <div className="relative z-10 flex w-full items-end justify-between px-6 pb-2">
            <Link href={`/u/${dbUser.username}`} className="transition-transform duration-300 hover:scale-105 -mb-8">
              <img
                src={avatarImageUrl(imager, dbUser.look, { size: "l", direction: 2 })}
                alt={dbUser.username}
                className="drop-shadow-2xl"
                style={{ imageRendering: "pixelated" }}
              />
            </Link>
            <div className="flex items-center mb-4">
              <Link href="/client">
                <button
                  type="button"
                  className="rounded-full px-6 py-2.5 text-sm font-bold tracking-wide transition-all duration-200 hover:scale-105"
                  style={{
                    background: "var(--button-color)",
                    color: "var(--button-text-color)",
                    border: "none",
                    boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
                  }}
                >
                  Enter {hotelName}
                </button>
              </Link>
            </div>
          </div>
        </div>

        {/* Online Friends */}
        <div
          className="flex flex-col gap-3 rounded-lg border p-1 lg:flex-row"
          style={{
            backgroundColor: "var(--color-surface)",
            borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)",
          }}
        >
          <div
            className="relative flex items-center justify-center rounded p-2 text-sm font-semibold"
            style={{ backgroundColor: "#e9b124" }}
          >
            <span className="relative text-white">Online Friends</span>
          </div>
          <div className="flex items-center gap-3 px-3">
            {onlineFriends.length === 0 ? (
              <p className="mb-3 block w-full text-center text-xs font-medium text-gray-500 dark:text-white md:mb-0 md:text-left">
                No friends online
              </p>
            ) : (
              onlineFriends.map((f) => (
                <Link
                  key={f.username}
                  href={`/u/${f.username}`}
                  className="transition-all duration-200 hover:scale-110"
                >
                  <img
                    src={avatarImageUrl(imager, f.look, { headOnly: true })}
                    alt={f.username}
                    className="h-10 w-10"
                    loading="lazy"
                    title={f.username}
                  />
                </Link>
              ))
            )}
          </div>
        </div>
      </div>

      {/* Right column — 3/12 */}
      <div className="flex w-full flex-col gap-6 md:w-1/4">
        {latestArticle ? (
          <div
            className="overflow-hidden rounded-lg border"
            style={{
              backgroundColor: "var(--color-surface)",
              borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)",
            }}
          >
            <div
              className="flex h-12 items-center justify-center"
              style={{
                background:
                  "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
              }}
            >
              <h2 className="text-lg font-bold text-white">Latest Article</h2>
            </div>
            <Link
              href={`/news/${latestArticle.slug}`}
              className="group block"
            >
              <div className="relative aspect-[16/9] overflow-hidden">
                <img
                  src={latestArticle.image}
                  alt={latestArticle.title}
                  className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
                  loading="lazy"
                />
              </div>
              <div className="p-3">
                <h3 className="text-sm font-semibold">{latestArticle.title}</h3>
                {latestArticle.shortStory && (
                  <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    {excerpt(latestArticle.shortStory, 100)}
                  </p>
                )}
              </div>
            </Link>
          </div>
        ) : null}
      </div>
    </div>
  );
}