import Link from "next/link";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

export default async function AdminShop() {
  let packages: Awaited<ReturnType<typeof prisma.websiteShopArticles.findMany>> = [];
  try {
    packages = await prisma.websiteShopArticles.findMany({
      orderBy: [{ position: "asc" }, { name: "asc" }],
      take: 500,
    });
  } catch {
    packages = [];
  }

  let orders: Awaited<ReturnType<typeof prisma.websitePaypalTransactions.findMany>> = [];
  try {
    orders = await prisma.websitePaypalTransactions.findMany({
      orderBy: { createdAt: "desc" },
      take: 50,
    });
  } catch {
    orders = [];
  }

  return (
    <main>
      <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
        <h1 style={{ flex: 1 }}>Shop</h1>
        <Link href="/admin/shop/new">+ New package</Link>
      </div>
      <p className="muted">
        Website store packages (<code>website_shop_articles</code>). <code>costs</code> is the price
        shown in the store; credits/duckets/diamonds/badges are what the buyer receives.
      </p>

      <table style={{ width: "100%", borderCollapse: "collapse" }}>
        <thead>
          <tr style={{ textAlign: "left", color: "var(--muted)" }}>
            <th>#</th>
            <th>Name</th>
            <th>Costs</th>
            <th>Credits</th>
            <th>Duckets</th>
            <th>Diamonds</th>
            <th>Rank</th>
            <th>Position</th>
          </tr>
        </thead>
        <tbody>
          {packages.map((p) => (
            <tr key={String(p.id)} style={{ borderTop: "1px solid var(--border)" }}>
              <td className="muted">{String(p.id)}</td>
              <td>
                <Link href={`/admin/shop/${p.id}`}>{p.name}</Link>
              </td>
              <td>{p.costs}</td>
              <td className="muted">{p.credits ?? ""}</td>
              <td className="muted">{p.duckets ?? ""}</td>
              <td className="muted">{p.diamonds ?? ""}</td>
              <td className="muted">{p.giveRank ?? ""}</td>
              <td className="muted">{p.position}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {packages.length === 0 ? <p className="muted">No shop packages yet.</p> : null}

      <h2 style={{ marginTop: "2rem" }}>Recent orders</h2>
      <p className="muted">
        Read-only PayPal transaction log (<code>website_paypal_transactions</code>).
      </p>
      <table style={{ width: "100%", borderCollapse: "collapse" }}>
        <thead>
          <tr style={{ textAlign: "left", color: "var(--muted)" }}>
            <th>Transaction</th>
            <th>User</th>
            <th>Description</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          {orders.map((o) => (
            <tr key={String(o.id)} style={{ borderTop: "1px solid var(--border)" }}>
              <td>
                <code>{o.transactionId}</code>
              </td>
              <td className="muted">{o.userId}</td>
              <td className="muted">{o.description ?? ""}</td>
              <td>
                {o.amount} {o.currency}
              </td>
              <td className="muted">{o.status ?? ""}</td>
              <td className="muted">{o.createdAt ? o.createdAt.toISOString().slice(0, 10) : ""}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {orders.length === 0 ? <p className="muted">No orders recorded.</p> : null}
    </main>
  );
}