import Link from "next/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { excerpt } from "@/lib/format";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

type GuildCard = {
  id: number;
  name: string;
  description: string;
  badge: string;
};

async function getGuilds(): Promise<GuildCard[]> {
  try {
    const guilds = await prisma.guilds.findMany({
      orderBy: { id: "desc" },
      take: 40,
      select: { id: true, name: true, description: true, badge: true },
    });
    return guilds;
  } catch {
    return [];
  }
}

export default async function GuildsPage() {
  const guilds = await getGuilds();

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <ContentCard
        icon="🚪"
        title="Guilds"
        subtitle="Browse the groups players have created and joined"
      />

      <ContentCard padded={guilds.length === 0}>
        {guilds.length === 0 ? (
          <EmptyState icon="🚪">No guilds yet.</EmptyState>
        ) : (
          <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
            {guilds.map((g) => (
              <Link
                key={g.id}
                href={`/guilds/${g.id}`}
                className="card hover"
                style={{
                  display: "flex",
                  gap: "0.85rem",
                  alignItems: "flex-start",
                  color: "inherit",
                  textDecoration: "none",
                }}
              >
                {g.badge ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={`https://habbo-stories-content.s3.amazonaws.com/badge-part-images/${g.badge}.gif`}
                    alt={`${g.name} badge`}
                    width={40}
                    height={40}
                    style={{ flex: "0 0 auto" }}
                  />
                ) : null}
                <div style={{ minWidth: 0 }}>
                  <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
                    {g.name || "Unnamed guild"}
                  </h3>
                  <p className="muted" style={{ margin: 0 }}>
                    {g.description ? excerpt(g.description, 120) : "No description"}
                  </p>
                </div>
              </Link>
            ))}
          </div>
        )}
      </ContentCard>
    </main>
  );
}