"use client";

import { useState } from "react";
import { useSession } from "next-auth/react";
import { LoginModal } from "@/components/common/LoginModal";

interface ForumEditorProps {
  onSubmit: (content: string) => void;
  placeholder?: string;
  maxLength?: number;
  submitText?: string;
  disabled?: boolean;
}

export default function ForumEditor({
  onSubmit,
  placeholder = "写下你的想法...",
  maxLength = 10000,
  submitText = "发布",
  disabled = false,
}: ForumEditorProps) {
  const { data: session, status } = useSession();
  const [content, setContent] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async () => {
    if (status !== "authenticated") {
      setShowLoginModal(true);
      return;
    }

    const trimmed = content.trim();
    if (!trimmed) {
      setError("内容不能为空");
      return;
    }
    if (trimmed.length > maxLength) {
      setError(`内容不能超过${maxLength}个字符`);
      return;
    }

    setSubmitting(true);
    setError("");

    try {
      await onSubmit(trimmed);
      setContent("");
    } catch (err) {
      setError(err instanceof Error ? err.message : "提交失败");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <>
      <div className="rounded-xl border border-border/50 bg-white shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
        <textarea
          value={content}
          onChange={(e) => {
            setContent(e.target.value);
            if (error) setError("");
          }}
          placeholder={placeholder}
          rows={4}
          maxLength={maxLength}
          disabled={disabled}
          className="w-full resize-none rounded-t-xl border-0 bg-transparent px-4 py-3 text-sm focus:outline-none focus:ring-0 placeholder:text-muted-foreground/40 disabled:opacity-50"
        />

        <div className="flex items-center justify-between border-t border-border/40 px-4 py-2">
          <div className="flex items-center gap-3">
            <span className="text-xs text-muted-foreground/50">
              {content.length}/{maxLength}
            </span>
            {error && (
              <span className="text-xs text-destructive">{error}</span>
            )}
          </div>
          <button
            onClick={handleSubmit}
            disabled={submitting || !content.trim() || disabled}
            className="rounded-lg bg-primary text-white text-sm px-4 py-2 hover:bg-primary/90 disabled:opacity-50 transition-colors shadow-sm shadow-primary/20"
          >
            {submitting ? "发布中..." : submitText}
          </button>
        </div>
      </div>

      <LoginModal open={showLoginModal} onClose={() => setShowLoginModal(false)} />
    </>
  );
}