import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { SITE } from "@/lib/site";
import SettingsTabs from "@/components/admin/SettingsTabs";

export default async function AdminWhatsAppSettingsPage() {
  const settings = await prisma.storeSettings.findFirst();

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">WhatsApp</h1>
      <p className="mt-1 text-sm text-stone-500">One-to-one chat links only — there&apos;s no bulk WhatsApp Business API integration (see Marketing → Campaigns for why).</p>

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

      <div className="max-w-xl space-y-4">
        <div className="rounded-lg border border-rose-100 bg-white p-4 text-sm">
          <p className="text-xs uppercase text-stone-500">Number in use everywhere on the site</p>
          <p className="mt-1 font-medium text-stone-800">{SITE.whatsappDisplay}</p>
          <p className="mt-2 text-xs text-stone-400">
            Set in code (<code className="rounded bg-stone-100 px-1">src/lib/site.ts</code>) since it&apos;s used across many components — ask to have it changed if it&apos;s wrong.
          </p>
        </div>
        <div className="rounded-lg border border-rose-100 bg-white p-4 text-sm">
          <div className="flex items-center justify-between">
            <span className="font-medium text-stone-700">Floating chat button</span>
            <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${settings?.showWhatsAppButton ?? true ? "bg-emerald-100 text-emerald-800" : "bg-stone-200 text-stone-600"}`}>
              {settings?.showWhatsAppButton ?? true ? "Visible" : "Hidden"}
            </span>
          </div>
          <Link href="/iv-manage-84x2/settings" className="mt-2 inline-block text-xs font-medium text-rose-700 hover:underline">
            Toggle in Store Settings →
          </Link>
        </div>
      </div>
    </div>
  );
}