import { getShippingSettings } from "@/lib/shipping";
import { updateFreeShippingThreshold } from "@/lib/actions/shipping";
import { formatPaise } from "@/lib/format";
import ShippingTabs from "@/components/admin/ShippingTabs";

export default async function AdminFreeShippingPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const settings = await getShippingSettings();
  const { error } = await searchParams;

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Free Shipping</h1>
      <p className="mt-1 text-sm text-stone-500">
        Orders at or above this subtotal ship free, regardless of weight. To effectively turn free shipping off, set this
        higher than any realistic order total (there&apos;s no separate on/off switch — the threshold is the control).
      </p>

      <ShippingTabs active="/iv-manage-84x2/shipping/free-shipping" />

      {error && <p className="mb-4 mt-4 rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{decodeURIComponent(error)}</p>}

      <form action={updateFreeShippingThreshold} className="flex max-w-md items-center gap-3 rounded-lg border border-rose-100 bg-white p-4">
        <span className="text-stone-500">₹</span>
        <input
          type="number"
          name="freeShippingThreshold"
          min={0}
          step="0.01"
          defaultValue={settings.freeShippingThreshold / 100}
          className="w-32 rounded-md border border-stone-300 px-3 py-2 text-sm"
        />
        <button type="submit" className="rounded-md bg-rose-700 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-800">
          Save
        </button>
      </form>

      <p className="mt-3 text-sm text-stone-500">
        Currently: orders of <strong className="text-stone-700">{formatPaise(settings.freeShippingThreshold)}</strong> or more ship free.
      </p>
    </div>
  );
}