import { prisma } from "@/lib/prisma";
import { updateStoreSettings } from "@/lib/actions/settings";
import SettingsTabs from "@/components/admin/SettingsTabs";
import { SITE, DEFAULT_CHECKOUT_PAUSED_MESSAGE } from "@/lib/site";

export default async function AdminStoreSettingsPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const settings = await prisma.storeSettings.findFirst();
  const { error } = await searchParams;

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Store Settings</h1>
      <p className="mt-1 text-sm text-stone-500">
        {SITE.name} — basic site name and contact details live in code (<code className="rounded bg-stone-100 px-1">src/lib/site.ts</code>) since
        they&apos;re used all over the site; the toggles below are the parts that make sense to flip from here.
      </p>

      <SettingsTabs active="/iv-manage-84x2/settings" />

      {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={updateStoreSettings} className="max-w-xl space-y-4 rounded-lg border border-rose-100 bg-white p-4">
        <label className="flex items-start gap-3 rounded-md border border-amber-200 bg-amber-50 p-3">
          <input
            type="checkbox"
            name="salesEnabled"
            defaultChecked={settings?.salesEnabled ?? true}
            className="mt-0.5 h-4 w-4 rounded border-stone-300"
          />
          <span>
            <span className="block text-sm font-medium text-stone-700">Add to Cart &amp; Checkout enabled</span>
            <span className="block text-xs text-stone-500">
              Turn off any time you need to stop taking online orders — a soft launch, restocking, going away, whatever
              the reason. The site stays fully browsable (products, prices, categories), but &ldquo;Add to cart&rdquo;,
              &ldquo;Buy now&rdquo;, and the checkout page show the message below instead. Turn back on when you&apos;re ready.
            </span>
          </span>
        </label>
        <div className="ml-7 -mt-2">
          <label className="text-xs font-medium text-stone-600">Message shown to customers while paused</label>
          <textarea
            name="checkoutPausedMessage"
            rows={2}
            maxLength={500}
            defaultValue={settings?.checkoutPausedMessage ?? ""}
            placeholder={DEFAULT_CHECKOUT_PAUSED_MESSAGE}
            className="mt-1 block w-full rounded-md border border-stone-300 px-2 py-1.5 text-sm"
          />
          <p className="mt-1 text-xs text-stone-400">Leave blank to use the default shown above.</p>
        </div>
        <label className="flex items-start gap-3">
          <input
            type="checkbox"
            name="maintenanceMode"
            defaultChecked={settings?.maintenanceMode ?? false}
            className="mt-0.5 h-4 w-4 rounded border-stone-300"
          />
          <span>
            <span className="block text-sm font-medium text-stone-700">Maintenance mode</span>
            <span className="block text-xs text-stone-500">
              Shows a &ldquo;we&apos;ll be back soon&rdquo; page to every visitor except you — the admin panel stays reachable so you can turn it back off.
            </span>
          </span>
        </label>
        <label className="flex items-start gap-3">
          <input
            type="checkbox"
            name="showWhatsAppButton"
            defaultChecked={settings?.showWhatsAppButton ?? true}
            className="mt-0.5 h-4 w-4 rounded border-stone-300"
          />
          <span>
            <span className="block text-sm font-medium text-stone-700">Floating WhatsApp button</span>
            <span className="block text-xs text-stone-500">The chat bubble shown in the bottom-right corner of every page.</span>
          </span>
        </label>
        <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>
    </div>
  );
}