import Link from "next/link";
import { requireAdminPage } from "@/lib/require-admin-page";
import { AdminNav } from "@/components/admin/AdminNav";
import { getProducts, getOrders } from "@/lib/db";
import { formatPrice } from "@/lib/format";

export default function AdminDashboardPage() {
  requireAdminPage();

  const products = getProducts();
  const orders = getOrders();
  const pendingOrders = orders.filter((o) => o.status === "pending" || o.paymentStatus === "unpaid");
  const lowStock = products.filter((p) => p.stock > 0 && p.stock <= 3);
  const revenue = orders
    .filter((o) => o.paymentStatus === "paid")
    .reduce((sum, o) => sum + o.total, 0);

  return (
    <div>
      <AdminNav />
      <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6">
        <h1 className="font-display text-2xl font-bold text-brand-ink">Dashboard</h1>

        <div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
          <StatCard label="Products" value={products.length} href="/admin/products" />
          <StatCard label="Orders" value={orders.length} href="/admin/orders" />
          <StatCard
            label="Pending orders"
            value={pendingOrders.length}
            href="/admin/orders"
            accent={pendingOrders.length > 0}
          />
          <StatCard label="Paid revenue" value={formatPrice(revenue)} href="/admin/orders" />
        </div>

        {lowStock.length > 0 && (
          <div className="mt-8 rounded-xl border border-brand-orange/25 bg-brand-orange-light px-4 py-3">
            <p className="text-sm font-medium text-brand-orange-dark">
              {lowStock.length} product{lowStock.length === 1 ? "" : "s"} running low on stock
            </p>
            <ul className="mt-1.5 flex flex-wrap gap-x-4 gap-y-1 text-sm text-brand-ink/80">
              {lowStock.map((p) => (
                <li key={p.id}>
                  <Link href={`/admin/products/${p.id}`} className="hover:underline">
                    {p.name} ({p.stock} left)
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        )}

        <div className="mt-8 flex flex-wrap gap-3">
          <Link
            href="/admin/products/new"
            className="rounded-lg bg-brand-orange px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-orange-dark"
          >
            + Add product
          </Link>
          <Link
            href="/admin/orders"
            className="rounded-lg border border-black/10 px-4 py-2.5 text-sm font-semibold text-brand-ink hover:bg-black/5"
          >
            View orders
          </Link>
        </div>
      </div>
    </div>
  );
}

function StatCard({
  label,
  value,
  href,
  accent,
}: {
  label: string;
  value: string | number;
  href: string;
  accent?: boolean;
}) {
  return (
    <Link
      href={href}
      className="rounded-xl border border-black/[0.06] bg-white p-4 transition hover:border-black/[0.12]"
    >
      <p className="text-xs font-medium text-black/45">{label}</p>
      <p
        className={`mt-1 font-display text-2xl font-bold ${
          accent ? "text-brand-orange-dark" : "text-brand-ink"
        }`}
      >
        {value}
      </p>
    </Link>
  );
}