"use client";

import { useActionState, useEffect } from "react";
import { updateRoomAction } from "@/lib/admin/rooms-actions";
import type { ActionState } from "@/lib/auth/actions";
import { RichTextEditor } from "@/components/confessions/RichTextEditor";

export function AdminRoomEditForm({
  roomId,
  name,
  description,
  categoryId,
  categories,
  introArticle,
  coverImage,
  onDone,
}: {
  roomId: string;
  name: string;
  description: string;
  categoryId: string;
  categories: { id: string; name: string }[];
  introArticle: string;
  coverImage: string | null;
  onDone: () => void;
}) {
  const updateWithId = updateRoomAction.bind(null, roomId);
  const [state, formAction, pending] = useActionState<ActionState, FormData>(updateWithId, undefined);
  const succeeded = state?.message === "Oda güncellendi.";

  useEffect(() => {
    if (succeeded) onDone();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [succeeded]);

  return (
    <form action={formAction} className="flex flex-col gap-2.5 rounded-xl border border-accent/30 bg-bg-alt p-4">
      <select name="categoryId" defaultValue={categoryId} required className="rounded-lg border border-border px-3 py-2 text-[13px]">
        {categories.map((category) => (
          <option key={category.id} value={category.id}>
            {category.name}
          </option>
        ))}
      </select>
      <input
        name="name"
        defaultValue={name}
        required
        className="rounded-lg border border-border px-3 py-2 text-[13px]"
      />
      <textarea
        name="description"
        defaultValue={description}
        placeholder="Kısa açıklama (opsiyonel — bot makale üretirken bağlam olarak kullanır, meta açıklamada gösterilir)"
        rows={2}
        className="resize-none rounded-lg border border-border px-3 py-2 text-[13px]"
      />

      <div className="mt-1 flex items-center gap-3">
        {coverImage ? (
          // eslint-disable-next-line @next/next/no-img-element -- yerel diskten servis edilen kullanıcı içeriği
          <img src={coverImage} alt={name} className="h-14 w-20 shrink-0 rounded-lg border border-border object-cover" />
        ) : (
          <div className="h-14 w-20 shrink-0 rounded-lg border border-dashed border-border" />
        )}
        <input
          type="file"
          name="coverImage"
          accept="image/jpeg,image/png,image/webp"
          className="block 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>
        <label className="mb-1 block text-[12px] font-semibold text-text-muted">Tanıtım Yazısı</label>
        <RichTextEditor name="introArticle" defaultValue={introArticle} placeholder="İçerik botu henüz üretmediyse buraya elle yazabilirsiniz." />
      </div>

      {state?.message && state.message !== "Oda güncellendi." && (
        <p className="text-[12.5px] text-accent">{state.message}</p>
      )}

      <div className="flex gap-2">
        <button type="submit" disabled={pending} className="rounded-lg bg-accent px-3.5 py-1.5 text-[12px] font-semibold text-white disabled:opacity-60">
          {pending ? "Kaydediliyor..." : "Kaydet"}
        </button>
        <button type="button" onClick={onDone} className="rounded-lg bg-white px-3.5 py-1.5 text-[12px] font-semibold text-text-muted hover:bg-bg">
          Vazgeç
        </button>
      </div>
    </form>
  );
}