import { getAdminUser } from "@/lib/admin-permissions";
import { getShippingOrders } from "@/actions/shipping";
import ShippingFulfillmentPanel from "@/components/admin/ShippingFulfillmentPanel";
import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
import { PageHeader } from "@/components/admin/design-system";

export const dynamic = "force-dynamic";

const TruckIcon = () => (
  <svg
    className="h-5 w-5 sm:h-6 sm:w-6 text-current"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M5 17h14M5 17a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM19 17a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z" />
    <path d="M14 17V5H3v12M14 9h4l3 4v4" />
  </svg>
);

export default async function ShippingFulfillmentPage() {
  const adminUser = await getAdminUser();
  if (!adminUser) return <AdminAccessDenied />;

  const { orders } = await getShippingOrders();

  return (
    <div className="min-h-screen" style={{ backgroundColor: "var(--admin-bg)" }}>
      <div className="px-4 sm:px-6 md:px-8 pt-4 sm:pt-6">
        <p className="ha-eyebrow mb-2">Operations</p>
        <PageHeader
          title="Shipping Fulfillment"
          subtitle="Create FedEx labels, print packing slips, and track outbound shipments."
          icon={<TruckIcon />}
        />
      </div>

      <div className="px-4 sm:px-6 md:px-8 pb-6 sm:pb-8">
        <ShippingFulfillmentPanel
          initialOrders={orders ?? []}
          canManageOrders={adminUser.can_manage_orders ?? false}
        />
      </div>
    </div>
  );
}
