export const dynamic = "force-dynamic";

import InviteVendorCard from "@/components/admin/InviteVendorCard";
import BanUserCard from "@/components/admin/BanUserCard";
import RecentOrdersCard from "@/components/admin/RecentOrdersCard";

export default function AdminPage() {
  return (
    <div className="p-6 space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Admin</h1>
        <p className="text-sm text-muted-foreground mt-1">Restricted area. Only admin1 can access.</p>
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <a href="#" className="group rounded-lg border border-border/60 bg-background p-4 hover:bg-muted/40 transition-colors">
          <div className="flex items-start justify-between">
            <div>
              <h2 className="font-medium">System status</h2>
              <p className="text-sm text-muted-foreground mt-1">Uptime, versions, environment</p>
            </div>
            <span className="text-xs px-2 py-0.5 rounded bg-emerald-500/15 text-emerald-400">OK</span>
          </div>
        </a>

        <a href="#" className="group rounded-lg border border-border/60 bg-background p-4 hover:bg-muted/40 transition-colors">
          <div className="flex items-start justify-between">
            <div>
              <h2 className="font-medium">Logs</h2>
              <p className="text-sm text-muted-foreground mt-1">View recent errors and warnings</p>
            </div>
            <span className="text-xs px-2 py-0.5 rounded bg-amber-500/15 text-amber-400">New</span>
          </div>
        </a>

        <InviteVendorCard />
        <BanUserCard />
        <RecentOrdersCard />

        <a href="#" className="group rounded-lg border border-border/60 bg-background p-4 hover:bg-muted/40 transition-colors">
          <div className="flex items-start justify-between">
            <div>
              <h2 className="font-medium">Broadcast</h2>
              <p className="text-sm text-muted-foreground mt-1">Send a message to users</p>
            </div>
            <span className="text-xs px-2 py-0.5 rounded bg-fuchsia-500/15 text-fuchsia-400">Tools</span>
          </div>
        </a>

        <a href="#" className="group rounded-lg border border-border/60 bg-background p-4 hover:bg-muted/40 transition-colors">
          <div className="flex items-start justify-between">
            <div>
              <h2 className="font-medium">Config</h2>
              <p className="text-sm text-muted-foreground mt-1">Feature flags and settings</p>
            </div>
            <span className="text-xs px-2 py-0.5 rounded bg-indigo-500/15 text-indigo-400">Edit</span>
          </div>
        </a>

        <a href="#" className="group rounded-lg border border-border/60 bg-background p-4 hover:bg-muted/40 transition-colors">
          <div className="flex items-start justify-between">
            <div>
              <h2 className="font-medium">Payments</h2>
              <p className="text-sm text-muted-foreground mt-1">Gateways and webhooks</p>
            </div>
            <span className="text-xs px-2 py-0.5 rounded bg-teal-500/15 text-teal-400">Setup</span>
          </div>
        </a>
      </div>
    </div>
  );
}