"use client";

import { useActionState } from "react";
import { updateSeoSettingsAction } from "@/lib/actions/seo";
import type { SettingsDoc } from "@/models/Settings";

function Field({
  label,
  name,
  defaultValue,
  type = "text",
  hint,
}: {
  label: string;
  name: string;
  defaultValue?: string | number;
  type?: string;
  hint?: string;
}) {
  return (
    <label className="flex flex-col gap-1.5 text-sm">
      <span className="text-[var(--rk-ink-muted)]">{label}</span>
      <input
        name={name}
        type={type}
        defaultValue={defaultValue}
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
      />
      {hint && <span className="text-xs text-[var(--rk-ink-muted)]">{hint}</span>}
    </label>
  );
}

export function SeoSettingsForm({ seoSettings }: { seoSettings: SettingsDoc["seoSettings"] }) {
  const [state, formAction, pending] = useActionState(updateSeoSettingsAction, {});

  return (
    <form
      action={formAction}
      encType="multipart/form-data"
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-5 max-w-2xl"
    >
      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" name="indexable" defaultChecked={seoSettings.indexable} className="h-4 w-4" />
        Von Suchmaschinen indexieren lassen
      </label>
      <p className="text-xs text-[var(--rk-ink-muted)] -mt-3">
        Ausschalten, um die Seite komplett aus der Google-/Bing-Suche herauszuhalten (z. B. während einer Vorschauphase auf
        dieser Domain, bevor der eigentliche Umzug auf rakku.de stattfindet).
      </p>

      <p className="text-xs text-[var(--rk-ink-muted)] -mt-2">
        Seitentitel sind fest als „Rakku Photography“ bzw. „Rakku Photography | Unterseite“ formatiert — überall
        einheitlich, kein separates Einstellungsfeld mehr nötig.
      </p>
      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-[var(--rk-ink-muted)]">Standard-Meta-Beschreibung (Deutsch)</span>
        <textarea
          name="defaultMetaDescription"
          defaultValue={seoSettings.defaultMetaDescription}
          rows={3}
          placeholder="Erscheint als Beschreibungstext in Google-Suchergebnissen, wenn eine Seite keine eigene hat."
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 resize-y"
        />
      </label>
      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-[var(--rk-ink-muted)]">Standard-Meta-Beschreibung (Englisch, optional — sonst wird die deutsche verwendet)</span>
        <textarea
          name="defaultMetaDescriptionEn"
          defaultValue={seoSettings.defaultMetaDescriptionEn}
          rows={3}
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 resize-y"
        />
      </label>
      <Field
        label="Keywords Deutsch (Komma-getrennt, optional)"
        name="keywords"
        defaultValue={seoSettings.keywords}
        hint="Heute kaum noch ein Ranking-Faktor, aber manche Tools werten es noch aus."
      />
      <Field
        label="Keywords Englisch (optional — sonst werden die deutschen verwendet)"
        name="keywordsEn"
        defaultValue={seoSettings.keywordsEn}
      />

      <div className="flex flex-col gap-2 border-t border-white/10 pt-4">
        <p className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Social-Preview-Bild</p>
        <p className="text-xs text-[var(--rk-ink-muted)]">
          Wird gezeigt, wenn ein Link zu deiner Seite z. B. bei Instagram, Discord oder in WhatsApp geteilt wird.
        </p>
        {seoSettings.ogImage && (
          <div className="flex items-center gap-3">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={seoSettings.ogImage} alt="" className="w-32 h-16 rounded-lg object-cover border border-white/15" />
            <label className="flex items-center gap-2 text-xs">
              <input type="checkbox" name="removeOgImage" className="h-3.5 w-3.5" />
              Entfernen
            </label>
          </div>
        )}
        <input name="ogImage" type="file" accept="image/jpeg,image/png,image/webp" className="text-sm" />
      </div>

      <div className="flex flex-col gap-4 border-t border-white/10 pt-4">
        <p className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Suchmaschinen-Verifizierung</p>
        <Field
          label="Google Search Console"
          name="googleSiteVerification"
          defaultValue={seoSettings.googleSiteVerification}
          hint="Nur der Inhalt des Verifizierungs-Codes, ohne HTML-Tag drumherum."
        />
        <Field
          label="Bing Webmaster Tools"
          name="bingSiteVerification"
          defaultValue={seoSettings.bingSiteVerification}
        />
        <Field
          label="Google Analytics Measurement-ID (optional)"
          name="googleAnalyticsId"
          defaultValue={seoSettings.googleAnalyticsId}
          hint="Format G-XXXXXXXXXX. Leer lassen, um kein Tracking einzubinden."
        />
      </div>

      <div className="flex flex-col gap-4 border-t border-white/10 pt-4">
        <p className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">
          Für Google-Suchergebnisse (Unternehmensangaben)
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <Field label="Telefonnummer (optional)" name="businessPhone" defaultValue={seoSettings.businessPhone} />
          <Field
            label="Preisklasse (optional)"
            name="priceRange"
            defaultValue={seoSettings.priceRange}
            hint="Z. B. €€"
          />
          <Field
            label="Öffnungszeiten (optional)"
            name="openingHours"
            defaultValue={seoSettings.openingHours}
            hint='Z. B. "Nach Vereinbarung" oder "Mo-Fr 09:00-18:00"'
          />
        </div>
      </div>

      <div className="flex items-center gap-3">
        <button
          type="submit"
          disabled={pending}
          className="border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
        >
          Speichern
        </button>
        {state.success && <span className="text-sm text-emerald-400">Gespeichert.</span>}
        {state.error && <span className="text-sm text-red-400">{state.error}</span>}
      </div>
    </form>
  );
}