"use client";

/**
 * CommentThread — threaded comments anchored to a page / block / database
 * record (docs/api/comments.md).
 *
 * The in-file `useComments` hook owns the thread list (TanStack Query) and
 * exposes create / reply / delete / resolve / reopen / react. Anchors:
 *   - page:   { pageId }
 *   - block:  { pageId, blockId }
 *   - record: { pageId, recordId }   (record's 1:1 page)
 *
 * Composer uses <MentionInput/> (@-mention autocomplete over workspace
 * members); the server re-parses `@Name` tokens into mentions on write.
 */
import { useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { CheckCircle2, CornerDownRight, Loader2, MessageSquare, RotateCcw, Send, SmilePlus, Trash2, XCircle } from "lucide-react";
import { cn, formatRelativeTime } from "@/lib/utils";
import { apiFetch } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import { UserAvatar } from "@/components/database/cell-renderer";
import { MentionInput } from "@/components/comments/mention-input";
import type { MentionMember } from "@/components/mentions/mention-model";

// ---------------------------------------------------------------------------
// Wire types (docs/api/comments.md)
// ---------------------------------------------------------------------------

export interface CommentAuthor {
  id: string;
  name: string;
  image?: string | null;
}
export interface ReplyDto {
  id: string;
  commentId: string;
  body: string;
  author: CommentAuthor;
  createdAt: string;
  updatedAt: string;
}
export interface ReactionDto {
  emoji: string;
  count: number;
  userIds: string[];
}
export interface CommentThreadDto {
  id: string;
  pageId: string;
  blockId: string | null;
  recordId?: string | null;
  body: string;
  status: "open" | "resolved";
  author: CommentAuthor;
  createdAt: string;
  resolvedAt?: string | null;
  resolvedBy?: string | null;
  replyCount: number;
  replies?: ReplyDto[];
  reactions?: ReactionDto[];
}

export interface CommentAnchor {
  pageId: string;
  blockId?: string | null;
  recordId?: string | null;
}

function unwrap<T>(body: unknown): T {
  const b = body as { data?: T } | null;
  if (b && typeof b === "object" && "data" in (b as Record<string, unknown>)) {
    return (b as { data: T }).data;
  }
  return body as T;
}

const listKey = (a: CommentAnchor) => ["comments", a.pageId, a.blockId ?? null, a.recordId ?? null] as const;

// ---------------------------------------------------------------------------
// useComments (in-file hook)
// ---------------------------------------------------------------------------

export function useComments(anchor: CommentAnchor, canComment: boolean) {
  const qc = useQueryClient();
  const key = listKey(anchor);
  const queryStr = new URLSearchParams();
  if (anchor.blockId) queryStr.set("blockId", anchor.blockId);
  if (anchor.recordId) queryStr.set("recordId", anchor.recordId);
  queryStr.set("include", "replies,reactions");

  const query = useQuery({
    queryKey: key,
    queryFn: async (): Promise<CommentThreadDto[]> =>
      unwrap(await apiFetch(`/pages/${anchor.pageId}/comments?${queryStr.toString()}`))
  });

  const invalidate = () => qc.invalidateQueries({ queryKey: ["comments", anchor.pageId] });

  const create = useMutation({
    mutationFn: async (body: string): Promise<CommentThreadDto> => {
      const payload: Record<string, unknown> = { pageId: anchor.pageId, body };
      if (anchor.blockId) payload.blockId = anchor.blockId;
      if (anchor.recordId) payload.recordId = anchor.recordId;
      return unwrap(await apiFetch("/comments", { method: "POST", body: JSON.stringify(payload) }));
    },
    onSuccess: invalidate,
    onError: (e) => toast("error", "Comment failed", (e as Error).message)
  });

  const reply = useMutation({
    mutationFn: async (vars: { commentId: string; body: string }): Promise<ReplyDto> =>
      unwrap(
        await apiFetch(`/comments/${vars.commentId}/replies`, {
          method: "POST",
          body: JSON.stringify({ body: vars.body })
        })
      ),
    onSuccess: invalidate,
    onError: (e) => toast("error", "Reply failed", (e as Error).message)
  });

  const remove = useMutation({
    mutationFn: async (commentId: string): Promise<void> =>
      unwrap(await apiFetch(`/comments/${commentId}`, { method: "DELETE" })),
    onSuccess: invalidate,
    onError: (e) => toast("error", "Delete failed", (e as Error).message)
  });

  const resolve = useMutation({
    mutationFn: async (commentId: string): Promise<void> =>
      unwrap(await apiFetch(`/comments/${commentId}/resolve`, { method: "POST" })),
    onSuccess: invalidate
  });

  const reopen = useMutation({
    mutationFn: async (commentId: string): Promise<void> =>
      unwrap(await apiFetch(`/comments/${commentId}/reopen`, { method: "POST" })),
    onSuccess: invalidate
  });

  const react = useMutation({
    mutationFn: async (vars: { commentId: string; emoji: string }): Promise<ReactionDto[]> =>
      unwrap(
        await apiFetch(`/comments/${vars.commentId}/reactions`, {
          method: "POST",
          body: JSON.stringify({ emoji: vars.emoji })
        })
      ),
    onSuccess: invalidate
  });

  return {
    threads: query.data ?? [],
    isLoading: query.isLoading,
    isRefetching: query.isRefetching,
    refetch: query.refetch,
    canComment,
    create,
    reply,
    remove,
    resolve,
    reopen,
    react
  };
}

// ---------------------------------------------------------------------------
// Thread UI
// ---------------------------------------------------------------------------

const QUICK_REACTIONS = ["👍", "🎉", "❤️", "👀", "❓"];

export interface CommentThreadProps {
  anchor: CommentAnchor;
  /** Workspace members for @-mentions. */
  members: MentionMember[];
  /** Whether the current user may comment (COMMENT level). */
  canComment?: boolean;
  /** Id of the current user (controls edit/delete + own-reaction state). */
  currentUserId?: string | null;
  /**
   * Enables the full R3 grouped mention popup (People/Teams/Pages/Databases).
   * When omitted, the popup is members-only (People) — backward compatible.
   */
  workspaceId?: string;
  className?: string;
}

export function CommentThread({
  anchor,
  members,
  canComment = true,
  currentUserId,
  workspaceId,
  className
}: CommentThreadProps) {
  const api = useComments(anchor, canComment);
  const [draft, setDraft] = useState("");
  const [replyTo, setReplyTo] = useState<string | null>(null);
  const [replyDraft, setReplyDraft] = useState("");

  const threads = useMemo(
    () => [...api.threads].sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1)),
    [api.threads]
  );

  const submit = () => {
    if (!draft.trim()) return;
    api.create.mutate(draft.trim(), {
      onSuccess: () => setDraft(""),
    });
  };

  return (
    <div className={cn("space-y-4", className)}>
      {/* header */}
      <div className="flex items-center gap-2 text-sm font-medium">
        <MessageSquare className="size-4" aria-hidden />
        Comments
        <span className="text-xs font-normal text-muted-foreground">
          {threads.length} thread{threads.length === 1 ? "" : "s"}
        </span>
      </div>

      {/* composer */}
      {canComment ? (
        <div className="flex items-start gap-2">
          <MentionInput
            value={draft}
            onChange={setDraft}
            members={members}
            workspaceId={workspaceId}
            currentUserId={currentUserId}
            testId="comment-composer"
            placeholder="Add a comment…  ( @ to mention )"
            onSubmit={submit}
          />
          <button
            type="button"
            data-testid="comment-submit"
            className="mt-1 inline-flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40"
            onClick={submit}
            disabled={!draft.trim() || api.create.isPending}
            aria-label="Send comment"
          >
            {api.create.isPending ? <Loader2 className="size-4 animate-spin" /> : <Send className="size-4" />}
          </button>
        </div>
      ) : (
        <p className="rounded-md border border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
          You have view-only access — commenting is disabled.
        </p>
      )}

      {/* threads */}
      {api.isLoading && <p className="text-xs text-muted-foreground">Loading comments…</p>}
      {!api.isLoading && threads.length === 0 && (
        <p className="text-xs text-muted-foreground">No comments yet.</p>
      )}

      <ul className="space-y-3">
        {threads.map((t) => (
          <li key={t.id} className={cn("rounded-lg border border-border p-3", t.status === "resolved" && "opacity-70")}>
            {/* thread header */}
            <div className="flex items-center gap-2">
              <UserAvatar user={{ id: t.author.id, name: t.author.name, avatarUrl: t.author.image ?? null }} size={22} />
              <span className="text-sm font-medium">{t.author.name}</span>
              <span className="text-xs text-muted-foreground">{formatRelativeTime(t.createdAt)}</span>
              <span className="ml-auto flex items-center gap-0.5">
                {canComment && (
                  <>
                    <button
                      type="button"
                      className="rounded p-1 text-muted-foreground hover:bg-muted"
                      title={t.status === "resolved" ? "Reopen" : "Resolve"}
                      onClick={() =>
                        (t.status === "resolved" ? api.reopen : api.resolve).mutate(t.id, {
                          onSuccess: () => toast("success", t.status === "resolved" ? "Thread reopened" : "Thread resolved")
                        })
                      }
                      aria-label={t.status === "resolved" ? "Reopen thread" : "Resolve thread"}
                    >
                      {t.status === "resolved" ? <RotateCcw className="size-3.5" /> : <CheckCircle2 className="size-3.5" />}
                    </button>
                    <button
                      type="button"
                      className="rounded p-1 text-muted-foreground hover:bg-muted"
                      title="Delete thread"
                      onClick={() =>
                        api.remove.mutate(t.id, {
                          onSuccess: () => toast("success", "Thread deleted")
                        })
                      }
                      aria-label="Delete thread"
                    >
                      <Trash2 className="size-3.5" />
                    </button>
                  </>
                )}
                {canComment && (
                  <button
                    type="button"
                    className="rounded p-1 text-muted-foreground hover:bg-muted"
                    title="React"
                    onClick={() => api.react.mutate({ commentId: t.id, emoji: QUICK_REACTIONS[0] })}
                    aria-label="Add reaction"
                  >
                    <SmilePlus className="size-3.5" />
                  </button>
                )}
              </span>
            </div>

            {/* body */}
            <p className="mt-1.5 whitespace-pre-wrap pl-7 text-sm">{t.body}</p>

            {/* reactions */}
            {(t.reactions?.length ?? 0) > 0 && (
              <div className="mt-2 flex flex-wrap gap-1 pl-7">
                {t.reactions!.map((r) => (
                  <span
                    key={r.emoji}
                    className={cn(
                      "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-xs",
                      currentUserId && r.userIds.includes(currentUserId) ? "border-primary/40 bg-primary/10" : "border-border"
                    )}
                    title={r.userIds.length}
                  >
                    {r.emoji} {r.count}
                  </span>
                ))}
              </div>
            )}

            {/* replies */}
            <ul className="mt-2 space-y-2 border-l border-border pl-3">
              {(t.replies ?? []).map((r) => (
                <li key={r.id} className="flex items-start gap-2">
                  <UserAvatar user={{ id: r.author.id, name: r.author.name, avatarUrl: (r.author as { image?: string | null }).image ?? null }} size={18} />
                  <div className="min-w-0">
                    <div className="flex items-center gap-1.5">
                      <span className="text-xs font-medium">{r.author.name}</span>
                      <span className="text-[11px] text-muted-foreground">{formatRelativeTime(r.createdAt)}</span>
                    </div>
                    <p className="whitespace-pre-wrap text-sm">{r.body}</p>
                  </div>
                </li>
              ))}
            </ul>

            {/* reply composer */}
            {canComment && (
              replyTo === t.id ? (
                <div className="mt-2 flex items-start gap-2 pl-7">
                  <MentionInput
                    value={replyDraft}
                    onChange={setReplyDraft}
                    members={members}
                    workspaceId={workspaceId}
                    currentUserId={currentUserId}
                    testId="comment-reply-input"
                    placeholder="Reply…"
                    autoFocus
                    onSubmit={() => {
                      if (!replyDraft.trim()) return;
                      api.reply.mutate({ commentId: t.id, body: replyDraft.trim() }, { onSuccess: () => { setReplyDraft(""); setReplyTo(null); } });
                    }}
                    onEscape={() => setReplyTo(null)}
                  />
                  <button
                    type="button"
                    data-testid="comment-reply-submit"
                    className="mt-1 rounded-md bg-primary p-1.5 text-primary-foreground hover:bg-primary/90 disabled:opacity-40"
                    onClick={() => {
                      if (!replyDraft.trim()) return;
                      api.reply.mutate({ commentId: t.id, body: replyDraft.trim() }, { onSuccess: () => { setReplyDraft(""); setReplyTo(null); } });
                    }}
                    disabled={!replyDraft.trim() || api.reply.isPending}
                    aria-label="Send reply"
                  >
                    <Send className="size-3.5" />
                  </button>
                  <button
                    type="button"
                    className="mt-1 rounded-md p-1.5 text-muted-foreground hover:bg-muted"
                    onClick={() => { setReplyTo(null); setReplyDraft(""); }}
                    aria-label="Cancel reply"
                  >
                    <XCircle className="size-4" />
                  </button>
                </div>
              ) : (
                <button
                  type="button"
                  className="mt-2 inline-flex items-center gap-1 pl-7 text-xs text-muted-foreground hover:text-foreground"
                  onClick={() => setReplyTo(t.id)}
                >
                  <CornerDownRight className="size-3.5" /> Reply
                </button>
              )
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}