spsays-admin/app/(dashboard)/feedback/page.tsx

"use client";

import { useCallback, useState } from "react";
import { toast } from "sonner";
import { api, AdminError, type AdminFeedback } from "@/lib/api";
import { usePagedList } from "@/lib/use-paged-list";
import { ListShell, EmptyRow } from "@/components/list-shell";
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Modal } from "@/components/ui/modal";
import { Textarea } from "@/components/ui/input";
import { cn, fmtDate } from "@/lib/utils";

const STATUSES = ["all", "open", "resolved"] as const;
type Status = (typeof STATUSES)[number];

export default function FeedbackPage() {
  const [status, setStatus] = useState<Status>("all");
  const fetcher = useCallback(
    (limit: number, offset: number) => api.feedback(status, limit, offset),
    [status],
  );
  const list = usePagedList<AdminFeedback>(fetcher, [status]);
  const [reply, setReply] = useState<AdminFeedback | null>(null);

  return (
    <ListShell
      title="Feedback"
      total={list.total}
      list={list}
      toolbar={
        <div className="flex gap-1 rounded-lg border border-border bg-card p-1">
          {STATUSES.map((s) => (
            <button
              key={s}
              onClick={() => setStatus(s)}
              className={cn(
                "rounded-md px-3 py-1.5 text-sm capitalize transition-colors",
                status === s
                  ? "bg-accent text-accent-foreground font-medium"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              {s}
            </button>
          ))}
        </div>
      }
    >
      <Table>
        <THead>
          <TR>
            <TH>From</TH>
            <TH>Message</TH>
            <TH>Status</TH>
            <TH>Received</TH>
            <TH className="text-right">Actions</TH>
          </TR>
        </THead>
        <tbody>
          {list.items.length === 0 && !list.loading ? (
            <EmptyRow cols={5} label="No feedback." />
          ) : (
            list.items.map((f) => (
              <TR key={f.id}>
                <TD className="whitespace-nowrap">
                  {f.author_handle ? (
                    <>
                      <div className="font-medium">{f.author_name}</div>
                      <div className="text-xs text-muted-foreground">
                        @{f.author_handle}
                      </div>
                    </>
                  ) : (
                    <div className="text-xs text-muted-foreground">
                      {f.contact_email ?? "Anonymous"}
                    </div>
                  )}
                </TD>
                <TD className="max-w-md">
                  <div className="text-xs uppercase tracking-wide text-muted-foreground">
                    {f.category}
                  </div>
                  <div className="mt-0.5 whitespace-pre-line">{f.message}</div>
                  {f.reply_message ? (
                    <div className="mt-2 rounded-md bg-muted px-3 py-2 text-xs">
                      <span className="font-medium">Your reply: </span>
                      {f.reply_message}
                    </div>
                  ) : null}
                </TD>
                <TD>
                  <StatusBadge f={f} />
                </TD>
                <TD className="whitespace-nowrap">{fmtDate(f.created_at)}</TD>
                <TD className="text-right">
                  <Button size="sm" variant="outline" onClick={() => setReply(f)}>
                    {f.replied_at ? "Reply again" : "Reply"}
                  </Button>
                </TD>
              </TR>
            ))
          )}
        </tbody>
      </Table>

      <ReplyModal
        feedback={reply}
        onClose={() => setReply(null)}
        onDone={() => {
          setReply(null);
          list.refresh();
        }}
      />
    </ListShell>
  );
}

function StatusBadge({ f }: { f: AdminFeedback }) {
  const label = f.replied_at ? "Replied" : f.resolved_at ? "Resolved" : "Open";
  const tone = f.resolved_at || f.replied_at ? "text-primary" : "text-muted-foreground";
  return <span className={cn("text-sm", tone)}>{label}</span>;
}

function ReplyModal({
  feedback,
  onClose,
  onDone,
}: {
  feedback: AdminFeedback | null;
  onClose: () => void;
  onDone: () => void;
}) {
  const [message, setMessage] = useState("");
  const [busy, setBusy] = useState(false);

  async function send() {
    if (!feedback || message.trim() === "") return;
    setBusy(true);
    try {
      const { data } = (await api.replyFeedback(feedback.id, message.trim())) as {
        data: { replied: boolean; emailed: boolean };
      };
      toast.success(
        data?.emailed
          ? "Reply saved and emailed to the submitter."
          : "Reply saved (no contact email on file to send to).",
      );
      setMessage("");
      onDone();
    } catch (err) {
      toast.error(err instanceof AdminError ? err.message : "Could not reply.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <Modal open={!!feedback} onClose={onClose} title="Reply to feedback">
      <div className="space-y-4">
        {feedback ? (
          <div className="rounded-md bg-muted px-3 py-2 text-sm">
            <div className="text-xs uppercase tracking-wide text-muted-foreground">
              {feedback.category}
            </div>
            <div className="mt-0.5 whitespace-pre-line">{feedback.message}</div>
          </div>
        ) : null}
        <label className="block space-y-1.5">
          <span className="text-sm font-medium">Your reply</span>
          <Textarea
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            rows={5}
            maxLength={4000}
            placeholder="Write your reply… (emailed to the submitter, marks this resolved)"
          />
        </label>
        <div className="flex justify-end gap-2">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button onClick={send} disabled={busy || message.trim() === ""}>
            {busy ? "Sending…" : "Send reply"}
          </Button>
        </div>
      </div>
    </Modal>
  );
}