import { getTranslations } from "next-intl/server";
import Link from "next/link";
import Image from "next/image";
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 default async function GuestView() {
  const t = await getTranslations("pages.home");
  const _hotelName = await siteSettings.get("hotel_name", "Atom");
  const imager =
    (await siteSettings.get("habbo_imaging_url", "https://www.habbo.com/habbo-imaging/avatarimage")) ?? "";

  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">
      <div className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
        <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>

        <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)" }}
          >
            <Image
              src="/assets/images/EnterHubbly.png"
              alt="Register"
              width={300}
              height={100}
              className="block"
              unoptimized
            />
          </div>
          <span
            className="pointer-events-none absolute inset-0 flex items-center text-4xl font-extrabold text-white text-shadow"
            style={{ marginLeft: "15px" }}
          >
            REGISTER NOW
          </span>
        </a>

        {recentUsers.length > 0 && (
          <div
            className="overflow-hidden rounded-lg border"
            style={{
              borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)",
              backgroundColor: "var(--color-surface)",
            }}
          >
            <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-4 sm:grid-cols-6 gap-3 p-3">
              {recentUsers.map((u) => (
                <div
                  key={u.username}
                  className="relative overflow-visible rounded-md p-0 shadow-lg"
                  style={{
                    width: "50px",
                    height: "50px",
                    justifySelf: "center",
                    backgroundColor: "var(--color-surface)",
                  }}
                >
                  <Image
                    src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 3 })}
                    alt={u.username}
                    width={50}
                    height={62}
                    style={{
                      position: "absolute",
                      top: "-12px",
                      left: "50%",
                      transform: "translateX(-50%)",
                      maxWidth: "none",
                      maxHeight: "none",
                    }}
                    unoptimized
                  />
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      <div className="flex w-full flex-col gap-4 md:w-2/3">
        <div
          className="overflow-hidden rounded-lg border"
          style={{
            borderColor: "color-mix(in srgb, var(--color-text-muted) 22%, transparent)",
            backgroundColor: "var(--color-surface)",
          }}
        >
          <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">{t("latestNews") || "Latest News"}</h2>
          </div>
          <div className="p-4">
            {articles.length === 0 ? (
              <p
                className="py-8 text-center"
                style={{ color: "var(--color-text-muted-readable, var(--color-text-muted))" }}
              >
                {t("noArticles")}
              </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">
                      <Image
                        src={a.image}
                        alt={a.title}
                        fill
                        className="rounded-lg object-cover transition-all duration-300 group-hover:scale-105"
                        unoptimized
                      />
                      <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>
  );
}