"use client";

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

export function GoogleSyncSettingsPanel({ googleSyncSettings }: { googleSyncSettings: SettingsDoc["googleSyncSettings"] }) {
  const [state, formAction, pending] = useActionState(updateGoogleSyncSettingsAction, {});

  return (
    <form
      action={formAction}
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-4 max-w-2xl mb-8"
    >
      <p className="text-sm font-medium">Google-Kalender: Löschungen übernehmen</p>
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Der 2-Stunden-Sync übernimmt Zeit-Änderungen aus Google schon immer automatisch zurück. Ein in Google
        gelöschter/abgesagter Termin wird standardmäßig NICHT lokal entfernt (nur ignoriert) — mit dieser Option wird
        auch das übernommen (Termin beim Auftrag zurückgesetzt bzw. Kalendereintrag gelöscht). Bewusst standardmäßig
        aus, falls eine Löschung in Google versehentlich passiert.
      </p>

      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="reflectDeletionsFromGoogle"
          defaultChecked={googleSyncSettings?.reflectDeletionsFromGoogle ?? false}
          className="h-4 w-4"
        />
        Löschungen aus Google automatisch übernehmen
      </label>

      <button
        type="submit"
        disabled={pending}
        className="self-start 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.error && <p className="text-sm text-red-400">{state.error}</p>}
      {state.success && <p className="text-sm text-emerald-400">Gespeichert.</p>}
    </form>
  );
}