"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { useToast } from "@/app/components/ui/ToastProvider";
import { UploadButton } from "@/app/components/UploadButton";

type Values = { title: string; content: string };

export function PostForm({
  initial,
  onSubmit,
  submitText = "등록",
}: {
  initial?: Partial<Values>;
  onSubmit: (values: Values) => Promise<{ id: string } | void>;
  submitText?: string;
}) {
  const router = useRouter();
  const { show } = useToast();
  const [form, setForm] = useState<Values>({ title: initial?.title ?? "", content: initial?.content ?? "" });
  const [loading, setLoading] = useState(false);
  async function handleSubmit() {
    try {
      setLoading(true);
      const res = await onSubmit(form);
      show("저장되었습니다");
      if (res && res.id) router.push(`/posts/${res.id}`);
    } catch (e) {
      show("저장 실패");
    } finally {
      setLoading(false);
    }
  }
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <input placeholder="제목" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
      <textarea placeholder="내용" value={form.content} onChange={(e) => setForm({ ...form, content: e.target.value })} rows={12} />
      <UploadButton onUploaded={(url) => setForm((f) => ({ ...f, content: `${f.content}\n![image](${url})` }))} />
      <button disabled={loading} onClick={handleSubmit}>{loading ? "저장 중..." : submitText}</button>
    </div>
  );
}


