spsays-training/app/(app)/feedback/page.tsx

"use client";

/**
 * /feedback — single-page form for bug reports, feature requests, and
 * general comments. Submissions persist to the BFF and trigger an
 * admin notification email. No follow-up UI beyond a success toast
 * and a redirect back to /.
 *
 * Authed visitors don't see the contact-email field — the BFF reads
 * their account email from the session cookie. Anonymous visitors get
 * the field and must fill it in so we have a reply path.
 *
 * Categories are managed in the admin panel and loaded from the BFF. If
 * that request fails the form falls back to the original four, so it can
 * always be submitted.
 */

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowLeft, MessageSquare, Send } from "lucide-react";
import { toast } from "sonner";
import {
  feedback as feedbackAPI,
  SocialError,
  type FeedbackCategory,
} from "@/lib/social";
import { useAuth } from "@/components/auth/auth-provider";

// Used only if the categories can't be loaded — the original four, which
// the BFF seeds and keeps accepting unless an admin archives them.
const FALLBACK_CATEGORIES: FeedbackCategory[] = [
  { key: "general", label: "General feedback", description: "Thoughts, impressions, suggestions — anything else." },
  { key: "bug", label: "Bug report", description: "Something is broken or behaving unexpectedly." },
  { key: "feature", label: "Feature request", description: "An idea for something new on the site." },
  { key: "other", label: "Other", description: "Doesn't fit the above? Use this." },
];

export default function FeedbackPage() {
  const router = useRouter();
  const { user, loading } = useAuth();
  const authed = !loading && !!user;

  const [categories, setCategories] =
    useState<FeedbackCategory[]>(FALLBACK_CATEGORIES);
  // Empty until chosen: the first category on the form.
  const [picked, setPicked] = useState("");
  const category = categories.some((c) => c.key === picked)
    ? picked
    : (categories[0]?.key ?? "");

  useEffect(() => {
    let cancelled = false;
    feedbackAPI
      .categories()
      .then((list) => {
        if (!cancelled && list?.length) setCategories(list);
      })
      .catch(() => {
        /* keep the fallback list */
      });
    return () => {
      cancelled = true;
    };
  }, []);
  const [message, setMessage] = useState("");
  const [contactEmail, setContactEmail] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    const trimmed = message.trim();
    if (!trimmed) {
      setError("Message is required.");
      return;
    }
    if (!authed && !contactEmail.trim()) {
      setError("Email is required so we can reply.");
      return;
    }
    setSubmitting(true);
    try {
      await feedbackAPI.submit({
        category,
        message: trimmed,
        contact_email: authed ? undefined : contactEmail.trim(),
      });
      toast.success("Thanks for the feedback!", {
        description: "We've forwarded it to the team.",
        duration: 5000,
      });
      setMessage("");
      setContactEmail("");
      router.push("/");
    } catch (err) {
      setError(err instanceof SocialError ? err.message : "Could not send feedback.");
    } finally {
      setSubmitting(false);
    }
  }

  const selected = categories.find((c) => c.key === category);

  return (
    <main className="flex-1 max-w-xl w-full mx-auto px-4 sm:px-6 py-10 sm:py-14">
      <Link
        href="/"
        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
      >
        <ArrowLeft className="size-4" /> Back to home
      </Link>

      <header className="mt-6 mb-6 flex items-start gap-3">
        <span
          aria-hidden
          className="inline-flex size-11 items-center justify-center rounded-full bg-primary/10 text-primary shrink-0"
        >
          <MessageSquare className="size-5" />
        </span>
        <div>
          <h1 className="font-[family-name:var(--font-title)] font-semibold text-2xl text-foreground leading-tight">
            Send feedback
          </h1>
          <p className="mt-1 text-sm text-muted-foreground">
            Tell us what&apos;s working, what&apos;s broken, or what you&apos;d like to see next. We read every message.
          </p>
        </div>
      </header>

      <form
        onSubmit={submit}
        className="space-y-5 rounded-2xl bg-card ring-1 ring-foreground/10 p-5"
      >
        <div>
          <label htmlFor="category" className="text-sm font-medium text-foreground">
            What&apos;s this about?
          </label>
          <select
            id="category"
            value={category}
            onChange={(e) => setPicked(e.target.value)}
            className="mt-1.5 h-10 w-full rounded-lg border border-border bg-card px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
            disabled={submitting}
          >
            {categories.map((c) => (
              <option key={c.key} value={c.key}>{c.label}</option>
            ))}
          </select>
          <p className="mt-1 text-xs text-muted-foreground">
            {selected?.description}
          </p>
        </div>

        <div>
          <label htmlFor="message" className="text-sm font-medium text-foreground">
            Message
          </label>
          <textarea
            id="message"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="Share as much detail as you'd like…"
            rows={6}
            maxLength={5000}
            disabled={submitting}
            className="mt-1.5 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-y"
          />
          <p className="mt-1 text-xs text-muted-foreground text-right tabular-nums">
            {message.length}/5000
          </p>
        </div>

        {!loading && !authed ? (
          <div>
            <label htmlFor="contact_email" className="text-sm font-medium text-foreground">
              Your email
            </label>
            <input
              id="contact_email"
              type="email"
              value={contactEmail}
              onChange={(e) => setContactEmail(e.target.value)}
              placeholder="you@example.com"
              required
              disabled={submitting}
              className="mt-1.5 h-10 w-full rounded-lg border border-border bg-card px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
            />
            <p className="mt-1 text-xs text-muted-foreground">
              So we can write back if needed. We don&apos;t add you to a mailing list.
            </p>
          </div>
        ) : null}

        {error ? <p className="text-sm text-destructive">{error}</p> : null}

        <button
          type="submit"
          disabled={submitting || !message.trim()}
          className="w-full h-11 inline-flex items-center justify-center gap-2 rounded-lg bg-primary text-primary-foreground text-base font-medium hover:bg-primary/90 transition-colors disabled:opacity-60"
        >
          <Send className="size-4" />
          {submitting ? "Sending…" : "Send feedback"}
        </button>
      </form>
    </main>
  );
}