"use client";
// 클라이언트 라우터/검색파라미터 훅으로 새 글 작성 폼을 제어합니다.
import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useToast } from "@/app/components/ui/ToastProvider";
import { UploadButton } from "@/app/components/UploadButton";
import { Editor } from "@/app/components/Editor";
import { HeroBanner } from "@/app/components/HeroBanner";

export default function NewPostPage() {
  const router = useRouter();
  const { show } = useToast();
  const sp = useSearchParams();
  const initialBoardId = sp.get("boardId") ?? "";
  const boardSlug = sp.get("boardSlug") ?? undefined;
  const [form, setForm] = useState({ boardId: initialBoardId, title: "", content: "" });
  const [isSecret, setIsSecret] = useState(false);
  const [loading, setLoading] = useState(false);
  async function submit() {
    try {
      if (!form.boardId.trim()) {
        show("boardId가 비어 있습니다");
        return;
      }
      if (!form.title.trim()) {
        show("제목을 입력하세요");
        return;
      }
      if (!form.content.trim()) {
        show("내용을 입력하세요");
        return;
      }
      setLoading(true);
      const r = await fetch("/api/posts", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ ...form }),
      });
      const data = await r.json();
      if (!r.ok) {
        const fe = (data?.error?.fieldErrors ?? {}) as Record<string, string[]>;
        const msg = data?.error?.message || Object.values(fe)[0]?.[0] || "작성 실패";
        throw new Error(msg);
      }
      show("작성되었습니다");
      router.push(`/posts/${data.post.id}`);
    } catch (e) {
      show(e instanceof Error ? e.message : "작성 실패");
    } finally {
      setLoading(false);
    }
  }
  const plainLength = (form.content || "").replace(/<[^>]*>/g, "").length;
  const MAX_LEN = 10000;
  return (
    <div className="space-y-6">
      <section>
        <HeroBanner />
      </section>

      <section className="mx-auto max-w-5xl bg-white rounded-2xl border border-neutral-300 px-6 sm:px-8 pt-6 pb-8">
        <div className="flex items-center justify-between">
          <h1 className="text-[22px] md:text-[26px] font-semibold text-neutral-900 leading-none">게시글 작성</h1>
          <button
            aria-label="닫기"
            onClick={() => router.back()}
            className="inline-flex items-center justify-center rounded-xl p-2 hover:bg-neutral-100"
          >
            ✕
          </button>
        </div>

        <div className="mt-5 grid grid-cols-1 sm:grid-cols-[1fr_162px] gap-3">
          <input
            className="h-16 w-full rounded-2xl border border-neutral-300 px-6 text-lg placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-400"
            placeholder="제목을 작성해주세요"
            value={form.title}
            onChange={(e) => setForm({ ...form, title: e.target.value })}
          />
          <button
            type="button"
            className="h-16 rounded-2xl border border-neutral-300 px-6 text-base text-neutral-900 bg-white hover:bg-neutral-50"
            onClick={() => {/* 태그 선택 자리표시 */}}
          >
            테그선택
          </button>
        </div>

        <div className="mt-3 rounded-2xl border border-neutral-300">
          <div className="p-5">
            <Editor value={form.content} onChange={(v) => setForm({ ...form, content: v })} placeholder="내용을 작성해주세요" />
          </div>
          <div className="px-4 py-3 flex items-center justify-between bg-neutral-100 rounded-b-2xl">
            <label className="inline-flex items-center gap-2 bg-white px-2.5 py-1.5 rounded-lg border border-red-300">
              <input
                type="checkbox"
                className="size-4 accent-[#f94b37]"
                checked={isSecret}
                onChange={(e) => setIsSecret(e.target.checked)}
              />
              <span className="text-sm text-[#f94b37]">비밀글</span>
            </label>

            <div className="flex items-center gap-3 text-[13px]">
              <span className="text-orange-600">{plainLength}</span>
              <span className="text-neutral-900">/ {MAX_LEN.toLocaleString()}</span>
              <span aria-hidden>🙂</span>
              <UploadButton
                multiple
                onUploaded={(url) => setForm((f) => ({ ...f, content: `${f.content}\n![image](${url})` }))}
                {...(boardSlug ? require("@/lib/photoPresets").getPhotoPresetBySlug(boardSlug) : {})}
              />
            </div>
          </div>
        </div>

        <div className="mt-4">
          <button
            disabled={loading}
            onClick={submit}
            className="w-full h-14 rounded-2xl bg-[#f94b37] text-white text-[20px] font-semibold hover:opacity-95 disabled:opacity-60 border border-[#d73b29]"
          >
            {loading ? "저장 중..." : "게시하기"}
          </button>
        </div>

        <div className="sr-only">
          <input
            className="hidden"
            placeholder="boardId"
            value={form.boardId}
            onChange={(e) => setForm({ ...form, boardId: e.target.value })}
            aria-hidden
            readOnly
          />
        </div>
      </section>
    </div>
  );
}


