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

export default function EditPostPage() {
  const params = useParams<{ id: string }>();
  const id = params?.id as string;
  const router = useRouter();
  const { show } = useToast();
  const [form, setForm] = useState<{ title: string; content: string } | null>(null);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    (async () => {
      const r = await fetch(`/api/posts/${id}`);
      if (!r.ok) return;
      const { post } = await r.json();
      setForm({ title: post.title, content: post.content });
    })();
  }, [id]);
  async function submit() {
    if (!form) return;
    try {
      setLoading(true);
      const r = await fetch(`/api/posts/${id}`, {
        method: "PATCH",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await r.json();
      if (!r.ok) throw new Error(JSON.stringify(data));
      show("수정되었습니다");
      router.push(`/posts/${id}`);
    } catch (e) {
      show("수정 실패");
    } finally {
      setLoading(false);
    }
  }
  if (!form) return <div>불러오는 중...</div>;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <h1>글 수정</h1>
      <input placeholder="제목" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
      <Editor value={form.content} onChange={(v) => setForm({ ...form, content: v })} placeholder="내용을 입력하세요" />
      <UploadButton onUploaded={(url) => setForm((f) => (!f ? f : { ...f, content: `${f.content}\n![image](${url})` }))} />
      <button disabled={loading} onClick={submit}>{loading ? "저장 중..." : "저장"}</button>
    </div>
  );
}