import Link from "next/link";
import { requireCurrentUser } from "@/lib/auth";
import { getDashboardStats, getOrders } from "@/app/actions/orders";
import { Navbar } from "@/components/Navbar";
import { StatCard } from "@/components/StatCard";
import { OrderTable } from "@/components/OrderTable";

export default async function DashboardPage() {
  await requireCurrentUser();
  const stats = await getDashboardStats();
  const orders = await getOrders();

  return (
    <div className="min-h-screen bg-bg">
      <Navbar />

      <main className="max-w-[1080px] mx-auto px-6 py-8">
        {/* Hero */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="font-display text-3xl font-bold text-fg">Dashboard</h1>
            <p className="text-muted text-sm mt-1">Your order overview at a glance</p>
          </div>
          <Link
            href="/orders/new"
            className="bg-accent text-accent-on px-5 py-2.5 rounded-xl font-bold text-sm border-b-4 border-accent-active hover:bg-accent-hover active:translate-y-1 active:border-b-0 transition-all shadow-[0_4px_0_0_var(--accent-active)]"
          >
            + New Order
          </Link>
        </div>

        {/* Stat Cards */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <StatCard label="Pending" value={stats.pending} color="text-yellow-600" />
          <StatCard label="Purchased" value={stats.purchased} color="text-blue-600" />
          <StatCard label="Delivered" value={stats.delivered} color="text-green-600" />
          <StatCard label="Closed" value={stats.closed} color="text-gray-500" />
        </div>

        {/* Order Table */}
        <div>
          <h2 className="font-display text-xl font-bold text-fg mb-4">Order History</h2>
          <OrderTable orders={orders} />
        </div>
      </main>
    </div>
  );
}