import type { Metadata } from "next";
import { prisma } from "@/lib/db";
import { getSiteSettings } from "@/lib/settings/site-settings";
import {
  updateSiteSettingsAction,
  upsertSeoMetaAction,
  updateAnalyticsSettingsAction,
  updateSitemapSectionsAction,
  updateRobotsAction,
} from "@/lib/admin/seo-actions";

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

const PAGES = [
  { path: "/", label: "Ana Sayfa" },
  { path: "/uyeler", label: "Üyeler" },
  { path: "/itiraflar", label: "İtiraflar" },
  { path: "/sozler", label: "Güzel Sözler" },
  { path: "/odalar", label: "Odalar" },
  { path: "/iletisim", label: "İletişim" },
  { path: "/giris", label: "Giriş" },
  { path: "/kayit", label: "Kayıt" },
];

const SITEMAP_SECTIONS = [
  { field: "sitemapIncludeStatic", label: "Statik Sayfalar", description: "Ana sayfa, üyeler, itiraflar vb. sabit sayfalar" },
  { field: "sitemapIncludeProfiles", label: "Üye Profilleri", description: "/profil/[kullaniciadi] sayfaları" },
  { field: "sitemapIncludeRooms", label: "Odalar", description: "/odalar/[oda] detay sayfaları" },
  { field: "sitemapIncludeRoomCategories", label: "Oda Kategorileri", description: "/odalar/kategori/[kategori] sayfaları" },
  { field: "sitemapIncludeQuotes", label: "Sözler", description: "/sozler/soz/[slug] detay sayfaları" },
  { field: "sitemapIncludeQuoteCategories", label: "Söz Kategorileri", description: "/sozler/[kategori] sayfaları" },
  { field: "sitemapIncludeConfessions", label: "İtiraflar", description: "/itiraflar/[slug] detay sayfaları (yalnızca \"herkese açık\" modundayken)" },
] as const;

export default async function AdminSeoPage() {
  const [settings, seoMetaRows] = await Promise.all([getSiteSettings(), prisma.seoMeta.findMany()]);
  const seoByPath = new Map(seoMetaRows.map((row) => [row.path, row]));

  return (
    <div className="p-8">
      <div className="mb-6 border-b border-border pb-6">
        <h1 className="text-[22px]">SEO</h1>
        <p className="mt-0.5 text-[12.5px] text-text-muted">
          Site kimliği, sosyal paylaşım görselleri ve sayfa bazlı meta etiketleri buradan yönetilir.
        </p>
      </div>

      <div className="grid max-w-4xl grid-cols-1 gap-8 lg:grid-cols-2">
        <section>
          <h2 className="mb-3 text-[14px] font-bold text-text-muted">Genel Site Ayarları</h2>
          <form action={updateSiteSettingsAction} className="flex flex-col gap-3 rounded-2xl border border-border bg-surface p-5">
            <div>
              <label className="mb-1 block text-[12px] font-semibold text-text-muted">Site Başlığı</label>
              <input
                name="siteTitle"
                defaultValue={settings.siteTitle}
                required
                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">Site Açıklaması</label>
              <textarea
                name="siteDescription"
                defaultValue={settings.siteDescription ?? ""}
                required
                rows={3}
                className="w-full resize-none rounded-lg border border-border px-3 py-2 text-[14px]"
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="mb-1 block text-[12px] font-semibold text-text-muted">Organizasyon Adı</label>
                <input
                  name="organizationName"
                  defaultValue={settings.organizationName}
                  required
                  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">Tüzel Ad (opsiyonel)</label>
                <input
                  name="organizationLegalName"
                  defaultValue={settings.organizationLegalName ?? ""}
                  className="w-full rounded-lg border border-border px-3 py-2 text-[14px]"
                />
              </div>
            </div>

            <div className="flex flex-col gap-3 border-t border-dashed border-border pt-3">
              {[
                { field: "logo", label: "Logo", current: settings.logoUrl },
                { field: "favicon", label: "Favicon", current: settings.faviconUrl },
                { field: "ogImage", label: "Varsayılan OG Görseli", current: settings.defaultOgImage },
              ].map(({ field, label, current }) => (
                <div key={field} className="flex items-center gap-3">
                  {current ? (
                    // eslint-disable-next-line @next/next/no-img-element -- yerel diskten servis edilen kullanıcı içeriği
                    <img src={current} alt={label} className="h-10 w-10 shrink-0 rounded-lg border border-border object-cover" />
                  ) : (
                    <div className="h-10 w-10 shrink-0 rounded-lg border border-dashed border-border" />
                  )}
                  <div className="min-w-0 flex-1">
                    <label className="mb-1 block text-[11.5px] font-semibold text-text-muted">{label}</label>
                    <input
                      type="file"
                      name={field}
                      accept="image/jpeg,image/png,image/webp"
                      className="block w-full max-w-full text-[12px] text-text-muted file:mr-2 file:rounded-full file:border-0 file:bg-accent/10 file:px-3 file:py-1.5 file:text-[11.5px] file:font-semibold file:text-accent"
                    />
                  </div>
                </div>
              ))}
            </div>

            <button type="submit" className="mt-2 self-start rounded-full bg-accent px-5 py-2 text-[13px] font-semibold text-white hover:bg-accent-dark">
              Kaydet
            </button>
          </form>

          <h2 className="mb-3 mt-8 text-[14px] font-bold text-text-muted">Analitik &amp; Arama Konsolu</h2>
          <form action={updateAnalyticsSettingsAction} className="flex flex-col gap-3 rounded-2xl border border-border bg-surface p-5">
            <div>
              <label className="mb-1 block text-[12px] font-semibold text-text-muted">Google Analytics (GA4) Ölçüm Kimliği</label>
              <input
                name="gaMeasurementId"
                defaultValue={settings.gaMeasurementId ?? ""}
                placeholder="G-XXXXXXXXXX"
                className="w-full rounded-lg border border-border px-3 py-2 text-[14px]"
              />
              <p className="mt-1 text-[11.5px] text-text-muted">
                Girildiğinde site ziyaretçi verisini Google Analytics&apos;e göndermeye başlar. Kimliği{" "}
                <span className="font-mono">analytics.google.com</span> → Veri Akışları&apos;ndan alabilirsiniz.
              </p>
            </div>
            <div>
              <label className="mb-1 block text-[12px] font-semibold text-text-muted">Search Console Doğrulama Kodu</label>
              <input
                name="searchConsoleVerification"
                defaultValue={settings.searchConsoleVerification ?? ""}
                placeholder="google-site-verification içeriği"
                className="w-full rounded-lg border border-border px-3 py-2 text-[14px]"
              />
              <p className="mt-1 text-[11.5px] text-text-muted">
                Search Console&apos;da &quot;HTML etiketi&quot; doğrulama yöntemini seçin, sadece{" "}
                <span className="font-mono">content=&quot;...&quot;</span> içindeki kodu buraya yapıştırın.
              </p>
            </div>
            <div className="rounded-lg bg-bg-alt p-3 text-[11.5px] text-text-muted">
              Not: Bu ikisi siteyi Google&apos;a bağlar (veri göndermeye/doğrulamaya başlar). Bu verileri SohbeteGir
              yönetim panelinin içinde göstermek (ziyaretçi grafiği, anahtar kelime tablosu) için ayrıca Google Cloud
              üzerinden bir servis hesabı oluşturup erişim vermeniz gerekir — isterseniz bu adımda size eşlik edebilirim.
            </div>
            <button type="submit" className="mt-1 self-start rounded-full bg-accent px-5 py-2 text-[13px] font-semibold text-white hover:bg-accent-dark">
              Kaydet
            </button>
          </form>
        </section>

        <section>
          <h2 className="mb-3 text-[14px] font-bold text-text-muted">Sayfa Bazlı SEO</h2>
          <div className="flex flex-col gap-4">
            {PAGES.map((page) => {
              const current = seoByPath.get(page.path);
              const action = upsertSeoMetaAction.bind(null, page.path);
              return (
                <form key={page.path} action={action} className="rounded-2xl border border-border bg-surface p-5">
                  <div className="mb-2 flex items-center justify-between">
                    <span className="text-[13.5px] font-bold">{page.label}</span>
                    <code className="text-[11px] text-text-muted">{page.path}</code>
                  </div>
                  <div className="flex flex-col gap-2.5">
                    <input
                      name="title"
                      placeholder="Özel başlık (boş bırakılırsa varsayılan kullanılır)"
                      defaultValue={current?.title ?? ""}
                      className="w-full rounded-lg border border-border px-3 py-2 text-[13px]"
                    />
                    <textarea
                      name="metaDescription"
                      placeholder="Özel açıklama"
                      defaultValue={current?.metaDescription ?? ""}
                      rows={2}
                      className="w-full resize-none rounded-lg border border-border px-3 py-2 text-[13px]"
                    />
                    <input
                      name="ogImage"
                      placeholder="Özel OG görsel URL'i (opsiyonel)"
                      defaultValue={current?.ogImage ?? ""}
                      className="w-full rounded-lg border border-border px-3 py-2 text-[13px]"
                    />
                    <label className="flex items-center gap-2 text-[12px] text-text-muted">
                      <input type="checkbox" name="noindex" defaultChecked={current?.robots === "noindex,nofollow"} className="accent-accent" />
                      Arama motorlarından gizle (noindex)
                    </label>
                  </div>
                  <button type="submit" className="mt-3 rounded-full bg-accent px-4 py-1.5 text-[12.5px] font-semibold text-white hover:bg-accent-dark">
                    Kaydet
                  </button>
                </form>
              );
            })}
          </div>
        </section>
      </div>

      <div className="mt-8 max-w-4xl">
        <h2 className="mb-3 text-[14px] font-bold text-text-muted">Arama Motoru Tarama Kontrolü</h2>
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
          <form action={updateSitemapSectionsAction} className="rounded-2xl border border-border bg-surface p-5">
            <div className="mb-3 flex items-center justify-between">
              <span className="text-[13.5px] font-bold">sitemap.xml</span>
              <a href="/sitemap.xml" target="_blank" rel="noopener noreferrer" className="text-[11.5px] font-semibold text-accent hover:underline">
                Görüntüle ↗
              </a>
            </div>
            <p className="mb-3 text-[12px] text-text-muted">
              Hangi bölümlerin sitemap.xml&apos;de (dolayısıyla Google&apos;ın tarayıp indeksleyebileceği listede) yer alacağını seçin.
            </p>
            <div className="flex flex-col gap-2.5">
              {SITEMAP_SECTIONS.map((section) => (
                <label key={section.field} className="flex items-start gap-2.5">
                  <input
                    type="checkbox"
                    name={section.field}
                    defaultChecked={settings[section.field]}
                    className="mt-0.5 accent-accent"
                  />
                  <span>
                    <span className="block text-[13px] font-semibold">{section.label}</span>
                    <span className="block text-[11.5px] text-text-muted">{section.description}</span>
                  </span>
                </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>

          <div className="flex flex-col gap-6">
            <form action={updateRobotsAction} className="rounded-2xl border border-border bg-surface p-5">
              <div className="mb-3 flex items-center justify-between">
                <span className="text-[13.5px] font-bold">robots.txt</span>
                <a href="/robots.txt" target="_blank" rel="noopener noreferrer" className="text-[11.5px] font-semibold text-accent hover:underline">
                  Görüntüle ↗
                </a>
              </div>
              <p className="mb-3 text-[12px] text-text-muted">
                Arama motoru botlarının taramaması gereken yolları alt alta yazın (her satıra bir yol, örn. <span className="font-mono">/admin</span>).
                Sitemap satırı otomatik eklenir.
              </p>
              <textarea
                name="robotsDisallowPaths"
                defaultValue={settings.robotsDisallowPaths ?? "/admin\n/api"}
                rows={5}
                className="w-full resize-y rounded-lg border border-border px-3 py-2 font-mono text-[13px]"
              />
              <button type="submit" className="mt-3 rounded-full bg-accent px-5 py-2 text-[13px] font-semibold text-white hover:bg-accent-dark">
                Kaydet
              </button>
            </form>

            <div className="rounded-2xl border border-border bg-surface p-5">
              <div className="mb-2 flex items-center justify-between">
                <span className="text-[13.5px] font-bold">llms.txt</span>
                <a href="/llms.txt" target="_blank" rel="noopener noreferrer" className="text-[11.5px] font-semibold text-accent hover:underline">
                  Görüntüle ↗
                </a>
              </div>
              <p className="text-[12px] text-text-muted">
                Yapay zekâ modellerinin siteyi anlaması için içerik haritası. Statik değildir — kategori ve oda
                listesi veritabanından her istekte otomatik üretilir, siz yeni kategori/oda ekledikçe kendiliğinden
                güncel kalır. Ayrıca bir ayar gerektirmez.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}