"use client";

import { useCallback, useState } from "react";
import { Can } from "@/components/staff-context";
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 { useConfirm } from "@/components/confirm";
import { RichTextarea } from "@/components/ui/rich-textarea";
import { RichText } from "@/lib/rich-text";
import { cn, fmtDate } from "@/lib/utils";
import { Clamp } from "@/components/ui/clamp";

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 confirm = useConfirm();
  const [reply, setReply] = useState<AdminFeedback | null>(null);

  async function run(action: Promise<unknown>, successMsg: string) {
    try {
      await action;
      toast.success(successMsg);
      list.refresh();
    } catch (err) {
      toast.error(err instanceof AdminError ? err.message : "Action failed.");
    }
  }

  async function acknowledge(f: AdminFeedback) {
    if (
      await confirm({
        title: "Acknowledge this feedback?",
        message:
          "The author will be emailed that we've seen it and started work.",
        confirmLabel: "Acknowledge",
      })
    ) {
      run(api.acknowledgeFeedback(f.id), "Feedback acknowledged.");
    }
  }

  async function resolve(f: AdminFeedback) {
    if (
      await confirm({
        title: "Mark resolved?",
        message:
          "The author will be emailed a thank-you. This can't be undone.",
        confirmLabel: "Mark resolved",
      })
    ) {
      run(api.resolveFeedback(f.id), "Feedback resolved.");
    }
  }

  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>
      }
    >
      {/* Phone: each field stacked, label above value, so a long message
          gets the card's full width. Desktop: ordinary table rows. */}
      <Table card="stacked">
        <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="max-w-[14rem]">
                  {f.author_handle ? (
                    <>
                      <Clamp className="font-medium">{f.author_name}</Clamp>
                      <Clamp className="text-xs text-muted-foreground">
                        {`@${f.author_handle}`}
                      </Clamp>
                    </>
                  ) : (
                    <Clamp className="text-xs text-muted-foreground">
                      {f.contact_email ?? "Anonymous"}
                    </Clamp>
                  )}
                </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>
                      <RichText text={f.reply_message} />
                    </div>
                  ) : null}
                </TD>
                <TD>
                  <StatusBadge f={f} />
                </TD>
                <TD className="whitespace-nowrap">{fmtDate(f.created_at)}</TD>
                <TD className="text-right">
                  <div className="flex flex-wrap justify-start gap-2 md:justify-end">
                    <Can perm="feedback:resolve">
                      {!f.resolved_at && !f.acknowledged_at ? (
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => acknowledge(f)}
                        >
                          Acknowledge
                        </Button>
                      ) : null}
                      {!f.resolved_at ? (
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => resolve(f)}
                        >
                          Resolve
                        </Button>
                      ) : null}
                    </Can>
                    <Can perm="feedback:reply">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => setReply(f)}
                      >
                        {f.replied_at ? "Reply again" : "Reply"}
                      </Button>
                    </Can>
                  </div>
                </TD>
              </TR>
            ))
          )}
        </tbody>
      </Table>

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

function StatusBadge({ f }: { f: AdminFeedback }) {
  const label = f.resolved_at
    ? "Resolved"
    : f.replied_at
      ? "Replied"
      : f.acknowledged_at
        ? "Acknowledged"
        : "Open";
  const tone =
    f.replied_at || f.resolved_at
      ? "text-primary"
      : f.acknowledged_at
        ? "text-amber-600"
        : "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>
          <RichTextarea
            value={message}
            onValueChange={setMessage}
            rows={5}
            maxLength={4000}
            placeholder="Write your reply… (emailed to the submitter; use Resolve separately to close it)"
          />
        </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>
  );
}