"use client";

import { useState } from "react";

interface ReplyFormProps {
  topicId: number;
  isLocked: boolean;
}

export function ReplyForm({ topicId, isLocked }: ReplyFormProps) {
  const [submitting, setSubmitting] = useState(false);

  if (isLocked) {
    return (
      <div className="mt-8 text-center py-6 rounded-xl border border-border/40 bg-muted/20">
        <p className="text-sm text-muted-foreground">此话题已锁定，无法回复</p>
      </div>
    );
  }

  return (
    <div className="mt-8">
      <form
        onSubmit={async (e) => {
          e.preventDefault();
          setSubmitting(true);
          const formData = new FormData(e.currentTarget);
          const content = formData.get("content") as string;
          if (!content.trim()) {
            setSubmitting(false);
            return;
          }
          const res = await fetch(`/api/forum/topics/${topicId}/posts`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ content }),
          });
          setSubmitting(false);
          if (res.ok) {
            window.location.reload();
          }
        }}
        className="rounded-xl border border-border/50 bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.04)]"
      >
        <h3 className="text-sm font-semibold mb-3">发表回复</h3>
        <textarea
          name="content"
          placeholder="写下你的回复..."
          rows={4}
          maxLength={5000}
          className="w-full resize-none rounded-lg border border-border/60 bg-white px-3 py-2 text-sm focus:outline-none focus:border-primary/50 focus:ring-2 focus:ring-primary/15 transition-colors placeholder:text-muted-foreground/40 mb-3"
          disabled={submitting}
        />
        <div className="flex justify-end">
          <button
            type="submit"
            disabled={submitting}
            className="rounded-lg bg-primary text-white text-sm px-5 py-2 hover:bg-primary/90 transition-colors shadow-sm shadow-primary/20 disabled:opacity-50"
          >
            {submitting ? "提交中..." : "发表回复"}
          </button>
        </div>
      </form>
    </div>
  );
}