import type { Metadata } from "next";
import { prisma } from "@/lib/db";
import {
  updateRateLimit,
  setConfessionVisibilityAction,
  setDisplayCountAction,
  updateAnnouncementAction,
  updateContactEmailAction,
  updateRequireEmailVerificationAction,
} from "@/lib/admin/actions";
import { DEFAULT_LIMITS } from "@/lib/rate-limit";
import { DISPLAY_SECTIONS } from "@/lib/settings/display-settings";
import { getSiteSettings } from "@/lib/settings/site-settings";

export const metadata: Metadata = {
  title: "Ayarlar",
};

export default async function AdminSettingsPage() {
  const [rateLimitSettings, siteSettings, displaySettings] = await Promise.all([
    prisma.rateLimitSetting.findMany(),
    getSiteSettings(),
    prisma.displaySetting.findMany(),
  ]);

  const rateLimitByKey = new Map(rateLimitSettings.map((s) => [s.key, s]));
  const displayByKey = new Map(displaySettings.map((s) => [s.sectionKey, s]));

  return (
    <div className="p-8">
      <div className="mb-6 border-b border-border pb-6">
        <h1 className="text-[22px]">Ayarlar</h1>
        <p className="mt-0.5 text-[12.5px] text-text-muted">Sistem genelindeki kural ve görünürlükleri buradan yönetin.</p>
      </div>

      <div className="grid max-w-3xl grid-cols-1 gap-8 sm:grid-cols-2">
        <div>
          <h2 className="mb-3 text-[14px] font-bold text-text-muted">Kullanım Limitleri</h2>
          <div className="flex flex-col gap-4">
            {Object.entries(DEFAULT_LIMITS).map(([key, fallback]) => {
              const current = rateLimitByKey.get(key) ?? fallback;
              const action = updateRateLimit.bind(null, key);
              return (
                <form key={key} action={action} className="rounded-2xl border border-border bg-surface p-5">
                  <div className="mb-3 text-[14.5px] font-semibold">{fallback.label}</div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="mb-1 block text-[12px] font-semibold text-text-muted">Limit</label>
                      <input
                        type="number"
                        name="limitValue"
                        min={1}
                        defaultValue={current.limitValue}
                        className="w-full rounded-lg border border-border px-3 py-2 text-[14px]"
                      />
                    </div>
                    <div>
                      <label className="mb-1 block text-[12px] font-semibold text-text-muted">Periyot (saat)</label>
                      <input
                        type="number"
                        name="periodHours"
                        min={1}
                        defaultValue={current.periodHours}
                        className="w-full rounded-lg border border-border px-3 py-2 text-[14px]"
                      />
                    </div>
                  </div>
                  <button type="submit" className="mt-4 rounded-full bg-accent px-5 py-2 text-[13px] font-semibold text-white hover:bg-accent-dark">
                    Kaydet
                  </button>
                </form>
              );
            })}
          </div>
        </div>

        <div>
          <h2 className="mb-3 text-[14px] font-bold text-text-muted">İçerik Ayarları</h2>
          <div className="flex flex-col gap-4">
            <form action={setConfessionVisibilityAction} className="rounded-2xl border border-border bg-surface p-5">
              <div className="mb-3 text-[14.5px] font-semibold">İtiraf Görünürlüğü</div>
              <div className="flex flex-col gap-2">
                <label className="flex items-center gap-2 text-[13px]">
                  <input
                    type="radio"
                    name="confessionVisibility"
                    value="EVERYONE"
                    defaultChecked={siteSettings.confessionVisibility === "EVERYONE"}
                    className="accent-accent"
                  />
                  Herkese açık (misafirler dahil)
                </label>
                <label className="flex items-center gap-2 text-[13px]">
                  <input
                    type="radio"
                    name="confessionVisibility"
                    value="MEMBERS_ONLY"
                    defaultChecked={siteSettings.confessionVisibility === "MEMBERS_ONLY"}
                    className="accent-accent"
                  />
                  Sadece üyeler
                </label>
              </div>
              <button type="submit" className="mt-4 rounded-full bg-accent px-5 py-2 text-[13px] font-semibold text-white hover:bg-accent-dark">
                Kaydet
              </button>
            </form>

            {Object.entries(DISPLAY_SECTIONS).map(([sectionKey, fallback]) => {
              const current = displayByKey.get(sectionKey)?.itemCount ?? fallback.defaultCount;
              const action = setDisplayCountAction.bind(null, sectionKey);
              return (
                <form key={sectionKey} action={action} className="rounded-2xl border border-border bg-surface p-5">
                  <div className="mb-3 text-[14.5px] font-semibold">{fallback.label} — Gösterilecek Sayı</div>
                  <input
                    type="number"
                    name="itemCount"
                    min={1}
                    defaultValue={current}
                    className="w-full rounded-lg border border-border px-3 py-2 text-[14px]"
                  />
                  <button type="submit" className="mt-4 rounded-full bg-accent px-5 py-2 text-[13px] font-semibold text-white hover:bg-accent-dark">
                    Kaydet
                  </button>
                </form>
              );
            })}
          </div>
        </div>

        <div>
          <h2 className="mb-3 text-[14px] font-bold text-text-muted">Duyuru Barı</h2>
          <form action={updateAnnouncementAction} className="rounded-2xl border border-border bg-surface p-5">
            <div className="mb-3 text-[14.5px] font-semibold">Sitenin üstünde gösterilen kapatılabilir bar</div>
            <textarea
              name="announcementText"
              defaultValue={siteSettings.announcementText ?? ""}
              placeholder="Örn. Yeni içerik botu özelliğimiz yayında! 🎉"
              rows={2}
              className="w-full resize-none rounded-lg border border-border px-3 py-2 text-[13px]"
            />
            <label className="mt-3 flex items-center gap-2 text-[13px]">
              <input
                type="checkbox"
                name="announcementActive"
                defaultChecked={siteSettings.announcementActive}
                className="accent-accent"
              />
              Yayında (ziyaretçilere göster)
            </label>
            <button type="submit" className="mt-4 rounded-full bg-accent px-5 py-2 text-[13px] font-semibold text-white hover:bg-accent-dark">
              Kaydet
            </button>
          </form>
        </div>

        <div>
          <h2 className="mb-3 text-[14px] font-bold text-text-muted">Üyelik</h2>
          <form action={updateRequireEmailVerificationAction} className="rounded-2xl border border-border bg-surface p-5">
            <div className="mb-3 text-[14.5px] font-semibold">E-posta Doğrulama Zorunluluğu</div>
            <label className="flex items-center gap-2 text-[13px]">
              <input
                type="checkbox"
                name="requireEmailVerification"
                defaultChecked={siteSettings.requireEmailVerification}
                className="accent-accent"
              />
              Kayıt olan üyelerden e-posta doğrulaması istensin
            </label>
            <p className="mt-2 text-[11.5px] text-text-muted">
              Kapalıyken yeni üyeler kayıt olur olmaz e-posta doğrulaması beklenmeden doğrudan giriş yapmış olur.
              Açıkken kayıt sonrası doğrulama bağlantısı gönderilir ve doğrulanmadan giriş yapılamaz.
            </p>
            <button type="submit" className="mt-4 rounded-full bg-accent px-5 py-2 text-[13px] font-semibold text-white hover:bg-accent-dark">
              Kaydet
            </button>
          </form>
        </div>

        <div>
          <h2 className="mb-3 text-[14px] font-bold text-text-muted">İletişim Bildirimi</h2>
          <form action={updateContactEmailAction} className="rounded-2xl border border-border bg-surface p-5">
            <div className="mb-3 text-[14.5px] font-semibold">İletişim formundan gelen mesajların gönderileceği e-posta</div>
            <input
              type="email"
              name="contactEmail"
              defaultValue={siteSettings.contactEmail ?? ""}
              placeholder="ornek@eposta.com"
              className="w-full rounded-lg border border-border px-3 py-2 text-[13px]"
            />
            <p className="mt-2 text-[11.5px] text-text-muted">
              Boş bırakılırsa e-posta gönderilmez, mesajlar yine de admin panelinde görünür.
            </p>
            <button type="submit" className="mt-4 rounded-full bg-accent px-5 py-2 text-[13px] font-semibold text-white hover:bg-accent-dark">
              Kaydet
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}