"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 submit = async () => {
    if (!content.trim()) return;
    setLoading(true);
    try {
      await api.submitFeedback(content.trim(), token || undefined, category);
      toast(t.feedback.ok, "success");
      setContent("");
    } 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>
        <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)} />
          <button type="button" className="btn btn-primary" disabled={loading} onClick={submit}>{t.feedback.submit}</button>
        </div>
      </div>
    </div>
  );
}