"use client";

import { useState } from "react";
import Link from "next/link";
import { api } from "@/lib/api";
import { useAuth } from "@/lib/auth";
import { useToast } from "@/lib/toast";
import { useI18n } from "@/lib/i18n";

export default function FeedbackClient() {
  const { token } = useAuth();
  const { toast } = useToast();
  const { t } = useI18n();
  const [content, setContent] = useState("");
  const [category, setCategory] = useState("general");
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);

  const submit = async () => {
    if (!content.trim() || content.trim().length < 5) {
      toast("请至少写 5 个字", "info");
      return;
    }
    setLoading(true);
    try {
      await api.submitFeedback(content.trim(), token || undefined, category);
      toast(t.feedback.ok, "success");
      setContent("");
      setDone(true);
    } catch {
      toast(t.feedback.fail, "error");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="community-page">
      <div className="container">
        <nav className="detail-nav">
          <Link href="/">{t.common.backHome}</Link>
        </nav>
        <div className="section-header reveal">
          <span className="section-tag">{t.feedback.tag}</span>
          <h1>{t.feedback.title}</h1>
          <p>{t.feedback.subtitle}</p>
        </div>
        {done ? (
          <div className="dating-gate reveal">
            <h2>已收到，谢谢</h2>
            <p>我们会认真阅读每一条反馈</p>
            <div className="dating-empty-actions">
              <button type="button" className="btn btn-primary" onClick={() => setDone(false)}>
                再写一条
              </button>
              <Link href="/community" className="btn">
                去社区
              </Link>
            </div>
          </div>
        ) : (
          <div className="community-compose reveal">
            <select value={category} onChange={(e) => setCategory(e.target.value)}>
              <option value="general">{t.feedback.catGeneral}</option>
              <option value="bug">{t.feedback.catBug}</option>
              <option value="feature">{t.feedback.catFeature}</option>
              <option value="safety">{t.feedback.catSafety}</option>
            </select>
            <textarea
              rows={6}
              placeholder={t.feedback.placeholder}
              value={content}
              onChange={(e) => setContent(e.target.value)}
              maxLength={2000}
            />
            <button type="button" className="btn btn-primary" disabled={loading} onClick={submit}>
              {loading ? "提交中…" : t.feedback.submit}
            </button>
            {!token && <p className="section-desc">未登录也可提交；登录后便于我们回复你</p>}
          </div>
        )}
      </div>
    </div>
  );
}