"use client";

import { useActionState, useEffect, useState } from "react";
import { createConfession } from "@/lib/confessions/actions";
import type { ActionState } from "@/lib/auth/actions";
import { Button } from "@/components/ui/Button";
import { RichTextEditor } from "@/components/confessions/RichTextEditor";

export function ConfessionForm({ onSuccess }: { onSuccess?: () => void }) {
  const [state, formAction, pending] = useActionState<ActionState, FormData>(createConfession, undefined);
  const [visibility, setVisibility] = useState<"ACIK" | "GIZLI">("ACIK");
  const succeeded = state?.message === "İtirafın paylaşıldı.";

  // Başarılı gönderimden sonra çağıranı bilgilendir (örn. formu kapatmak için) — bir üst
  // bileşenin state'ini render sırasında değil effect içinde güncelliyoruz.
  useEffect(() => {
    if (succeeded) onSuccess?.();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [succeeded]);

  return (
    <form action={formAction} className="rounded-2xl border border-border bg-surface p-5">
      <div className="mb-3">
        <label className="mb-1 block text-[12px] font-semibold text-text-muted">Başlık (opsiyonel)</label>
        <input
          name="title"
          maxLength={100}
          placeholder="Boş bırakırsan itirafından otomatik oluşturulur"
          className="w-full rounded-xl border border-border px-4 py-2.5 text-[14px] outline-none focus:border-accent"
        />
      </div>

      <div>
        <label className="mb-1 block text-[12px] font-semibold text-text-muted">İtirafın</label>
        <RichTextEditor name="body" placeholder="İçini dök..." />
      </div>

      <div className="mt-3 flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-4">
          <label className="flex items-center gap-1.5 text-[13px] font-semibold">
            <input
              type="radio"
              name="visibility"
              value="ACIK"
              checked={visibility === "ACIK"}
              onChange={() => setVisibility("ACIK")}
              className="accent-accent"
            />
            Açık
          </label>
          <label className="flex items-center gap-1.5 text-[13px] font-semibold">
            <input
              type="radio"
              name="visibility"
              value="GIZLI"
              checked={visibility === "GIZLI"}
              onChange={() => setVisibility("GIZLI")}
              className="accent-accent"
            />
            Gizli (isim maskelenir)
          </label>
        </div>

        <input
          name="taggedUsername"
          placeholder="@kullaniciadi (opsiyonel etiket)"
          className="rounded-lg border border-border px-3 py-2 text-[13px] outline-none focus:border-accent"
        />
      </div>

      {state?.message && <p className="mt-3 text-[13px] text-accent">{state.message}</p>}
      {state?.errors?.taggedUsername && (
        <p className="mt-1 text-[12.5px] text-accent">{state.errors.taggedUsername[0]}</p>
      )}

      <Button type="submit" disabled={pending} className="mt-3">
        {pending ? "Paylaşılıyor..." : "İtiraf Et"}
      </Button>
    </form>
  );
}