"use client";

import { useActionState } from "react";
import { FormField, FormTextarea } from "@/components/admin/FormField";
import { WhatsAppTestButton } from "@/components/admin/settings/WhatsAppTestButton";
import { updateSettings } from "@/app/(admin-group)/admin/settings/actions";
import type { SiteSetting } from "@/generated/prisma/client";

const HERO_PAGES = [
  { key: "home", label: "Home" },
  { key: "tour", label: "Tour" },
  { key: "flight", label: "Flight" },
  { key: "about", label: "About Us" },
  { key: "gallery", label: "Gallery" },
  { key: "contact", label: "Contact" },
] as const;

export function SettingsForm({
  settings,
}: {
  settings: SiteSetting | null;
}) {
  const [state, formAction, isPending] = useActionState(
    updateSettings,
    undefined
  );

  return (
    <form action={formAction} className="space-y-10">
      {/* Hero tiap halaman */}
      <section>
        <h2 className="text-lg font-semibold text-heading">
          Judul &amp; Subjudul Hero
        </h2>
        <p className="mt-1 text-sm text-body">
          Kosongkan kalau ingin pakai teks default bawaan tiap halaman.
        </p>

        <div className="mt-4 space-y-6">
          {HERO_PAGES.map((page) => {
            const titleKey = `${page.key}HeroTitle` as keyof SiteSetting;
            const subtitleKey = `${page.key}HeroSubtitle` as keyof SiteSetting;
            return (
              <div
                key={page.key}
                className="rounded-xl border border-gray-100 p-4"
              >
                <p className="mb-3 text-sm font-semibold text-heading">
                  {page.label}
                </p>
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                  <FormField
                    label="Judul Hero"
                    name={titleKey}
                    defaultValue={(settings?.[titleKey] as string) ?? ""}
                  />
                  <FormField
                    label="Subjudul Hero"
                    name={subtitleKey}
                    defaultValue={(settings?.[subtitleKey] as string) ?? ""}
                  />
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* About Us content */}
      <section>
        <h2 className="text-lg font-semibold text-heading">
          Konten Tentang Kami
        </h2>
        <p className="mt-1 text-sm text-body">
          Tampil di section &quot;Nilai-Nilai Kami&quot; halaman About Us.
        </p>

        <div className="mt-4 space-y-4">
          <FormField
            label="Judul"
            name="aboutTitle"
            defaultValue={settings?.aboutTitle ?? ""}
          />
          <FormTextarea
            label="Ringkasan"
            name="aboutSummary"
            rows={2}
            defaultValue={settings?.aboutSummary ?? ""}
          />
          <FormTextarea
            label="Isi Lengkap"
            name="aboutBody"
            rows={4}
            defaultValue={settings?.aboutBody ?? ""}
          />
        </div>
      </section>

      {/* Info Kontak */}
      <section>
        <h2 className="text-lg font-semibold text-heading">Info Kontak</h2>
        <p className="mt-1 text-sm text-body">
          Tampil di halaman Contact dan Home.
        </p>

        <div className="mt-4 space-y-4">
          <FormTextarea
            label="Alamat"
            name="contactAddress"
            rows={2}
            defaultValue={settings?.contactAddress ?? ""}
          />
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <FormField
              label="Telepon"
              name="contactPhone"
              defaultValue={settings?.contactPhone ?? ""}
            />
            <FormField
              label="Email"
              name="contactEmail"
              type="email"
              defaultValue={settings?.contactEmail ?? ""}
            />
            <FormField
              label="Jam Operasional"
              name="contactHours"
              defaultValue={settings?.contactHours ?? ""}
            />
            <FormField
              label="URL Google Maps"
              name="contactMapUrl"
              defaultValue={settings?.contactMapUrl ?? ""}
            />
          </div>
        </div>
      </section>

      {/* WhatsApp */}
      <section>
        <h2 className="text-lg font-semibold text-heading">
          Nomor WhatsApp
        </h2>
        <p className="mt-1 text-sm text-body">
          Kosongkan salah satu untuk menyembunyikan tombol/bubble terkait di
          halaman publik.
        </p>

        <div className="mt-4 space-y-4">
          <div>
            <label
              htmlFor="orderWhatsappNumber"
              className="mb-1 block text-sm font-medium text-heading"
            >
              Nomor Pemesanan (tombol &quot;Pesan Sekarang&quot; di Tour &amp;
              Flight)
            </label>
            <div className="flex gap-2">
              <input
                id="orderWhatsappNumber"
                name="orderWhatsappNumber"
                defaultValue={settings?.orderWhatsappNumber ?? ""}
                placeholder="cth. 081234567890"
                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition focus:border-merah-ranata focus:outline-none focus:ring-1 focus:ring-merah-ranata"
              />
              <WhatsAppTestButton inputId="orderWhatsappNumber" />
            </div>
          </div>

          <div>
            <label
              htmlFor="chatWhatsappNumber"
              className="mb-1 block text-sm font-medium text-heading"
            >
              Nomor Chat (floating bubble di semua halaman publik)
            </label>
            <div className="flex gap-2">
              <input
                id="chatWhatsappNumber"
                name="chatWhatsappNumber"
                defaultValue={settings?.chatWhatsappNumber ?? ""}
                placeholder="cth. 081234567890"
                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition focus:border-merah-ranata focus:outline-none focus:ring-1 focus:ring-merah-ranata"
              />
              <WhatsAppTestButton inputId="chatWhatsappNumber" />
            </div>
          </div>
        </div>
      </section>

      {state?.message && (
        <p
          className={`rounded-lg px-3 py-2 text-sm ${
            state.success
              ? "bg-green-50 text-green-700"
              : "bg-red-50 text-red-600"
          }`}
        >
          {state.message}
        </p>
      )}

      <button
        type="submit"
        disabled={isPending}
        className="rounded-full bg-merah-ranata px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-merah-hover disabled:opacity-60"
      >
        {isPending ? "Menyimpan..." : "Simpan Pengaturan"}
      </button>
    </form>
  );
}