import type { Metadata } from "next";
import { db, recipes, users, eq, desc, count } from "@epicure/db";
import { Badge } from "@/components/ui/badge";
import Link from "next/link";
import { UnpublishRecipeButton } from "@/components/admin/unpublish-recipe-button";

export const metadata: Metadata = {};

const PAGE_SIZE = 100;

const VISIBILITY_COLORS = {
  public: "default",
  unlisted: "outline",
  followers: "outline",
  private: "secondary",
} as const;

interface PageProps {
  searchParams: Promise<{ page?: string }>;
}

export default async function AdminRecipesPage({ searchParams }: PageProps) {
  const { page: pageParam } = await searchParams;
  const page = Math.max(1, parseInt(pageParam ?? "1", 10) || 1);
  const offset = (page - 1) * PAGE_SIZE;

  const [publicRecipes, totalRow] = await Promise.all([
    db
      .select({
        id: recipes.id,
        title: recipes.title,
        visibility: recipes.visibility,
        createdAt: recipes.createdAt,
        authorName: users.name,
        authorId: users.id,
      })
      .from(recipes)
      .leftJoin(users, eq(recipes.authorId, users.id))
      .where(eq(recipes.visibility, "public"))
      .orderBy(desc(recipes.createdAt))
      .limit(PAGE_SIZE)
      .offset(offset),
    db.select({ count: count() }).from(recipes).where(eq(recipes.visibility, "public")),
  ]);
  const total = totalRow[0]?.count ?? 0;

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Recipe Moderation</h1>
        <p className="text-muted-foreground text-sm mt-1">
          Public recipes sorted by newest. Review and decide manually.
        </p>
      </div>

      <div className="rounded-md border overflow-x-auto">
        <table className="w-full text-sm">
          <thead className="border-b bg-muted/50">
            <tr>
              <th className="px-4 py-3 text-left font-medium">Title</th>
              <th className="px-4 py-3 text-left font-medium">Author</th>
              <th className="px-4 py-3 text-left font-medium">Visibility</th>
              <th className="px-4 py-3 text-left font-medium">Created</th>
              <th className="px-4 py-3 text-left font-medium">Link</th>
              <th className="px-4 py-3 text-left font-medium">Action</th>
            </tr>
          </thead>
          <tbody>
            {publicRecipes.length === 0 ? (
              <tr>
                <td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">
                  No public recipes yet.
                </td>
              </tr>
            ) : (
              publicRecipes.map((recipe) => (
                <tr key={recipe.id} className="border-b last:border-0 hover:bg-muted/30">
                  <td className="px-4 py-3 font-medium">{recipe.title}</td>
                  <td className="px-4 py-3 text-muted-foreground">
                    {recipe.authorId ? (
                      <Link
                        href={`/admin/users/${recipe.authorId}`}
                        className="hover:underline underline-offset-4"
                      >
                        {recipe.authorName ?? "Unknown"}
                      </Link>
                    ) : (
                      <span>{recipe.authorName ?? "Unknown"}</span>
                    )}
                  </td>
                  <td className="px-4 py-3">
                    <Badge variant={VISIBILITY_COLORS[recipe.visibility]}>
                      {recipe.visibility}
                    </Badge>
                  </td>
                  <td className="px-4 py-3 text-muted-foreground">
                    {recipe.createdAt.toLocaleDateString()}
                  </td>
                  <td className="px-4 py-3">
                    <Link
                      href={`/r/${recipe.id}`}
                      className="text-primary underline-offset-4 hover:underline text-xs"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      View
                    </Link>
                  </td>
                  <td className="px-4 py-3">
                    <UnpublishRecipeButton recipeId={recipe.id} />
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      <div className="flex gap-2">
        {page > 1 && (
          <Link
            href={`/admin/recipes?page=${page - 1}`}
            className="rounded-md border px-3 py-1 text-sm hover:bg-accent"
          >
            Previous
          </Link>
        )}
        {offset + publicRecipes.length < total && (
          <Link
            href={`/admin/recipes?page=${page + 1}`}
            className="rounded-md border px-3 py-1 text-sm hover:bg-accent"
          >
            Next
          </Link>
        )}
      </div>
    </div>
  );
}