"use client";

/**
 * /notifications — the signed-in user's notifications, split into two tabs:
 *
 *   • "Notifications" — the activity feed (likes, comments, mentions, accepted
 *     follows, admin messages). Marked read on open so the header bell clears.
 *   • "Friend Requests" — pending incoming follow requests, accepted/rejected
 *     inline. Sourced from the live `follows` table (not the notifications
 *     feed), so handled requests disappear and never go stale.
 *
 * Anonymous visitors are bounced through the auth gate (then home if they
 * dismiss it), mirroring /u/me.
 */

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { Bell, Check, UserPlus, X } from "lucide-react";
import { toast } from "sonner";
import { useAuth } from "@/components/auth/auth-provider";
import { useAuthGate } from "@/components/auth/auth-gate";
import { useNotifications } from "@/components/notifications/notifications-provider";
import {
  notifications,
  relationships,
  SocialError,
  type AppNotification,
  type UserSummary,
} from "@/lib/social";
import { UserAvatar } from "@/components/ui/user-avatar";
import { Button } from "@/components/ui/button";
import { timeAgo } from "@/lib/time";
import { cn } from "@/lib/utils";

type Tab = "all" | "requests";

export default function NotificationsPage() {
  const { user, loading } = useAuth();
  const { requireAuth } = useAuthGate();
  const { lastEventAt, clearUnread } = useNotifications();
  const router = useRouter();

  const [tab, setTab] = useState<Tab>("all");
  const [items, setItems] = useState<AppNotification[]>([]);
  const [requests, setRequests] = useState<UserSummary[]>([]);
  const [state, setState] = useState<"loading" | "ready" | "error">("loading");

  // Auth gate — same pattern as /u/me.
  useEffect(() => {
    if (loading || user) return;
    let cancelled = false;
    (async () => {
      const ok = await requireAuth();
      if (!ok && !cancelled) router.replace("/");
    })();
    return () => {
      cancelled = true;
    };
  }, [loading, user, requireAuth, router]);

  // Load the feed + pending requests, and mark the feed read, once we have a
  // user — and again whenever a realtime notification arrives while the page
  // is open (lastEventAt bumps). Marking read here clears the header badge.
  useEffect(() => {
    if (!user) return;
    let cancelled = false;
    Promise.all([notifications.list(), relationships.incomingRequests()])
      .then(([rows, reqs]) => {
        if (!cancelled) {
          setItems(rows ?? []);
          setRequests(reqs?.users ?? []);
          setState("ready");
        }
      })
      .catch(() => {
        if (!cancelled) setState("error");
      });
    notifications
      .markAllRead()
      .then(() => clearUnread())
      .catch(() => {
        /* non-critical */
      });
    return () => {
      cancelled = true;
    };
  }, [user, lastEventAt, clearUnread]);

  if (loading || !user) {
    return (
      <main className="flex-1 flex items-center justify-center px-4 py-12">
        <p className="text-sm text-muted-foreground">
          {loading ? "Loading…" : "Sign in to view your notifications."}
        </p>
      </main>
    );
  }

  // Follow requests live in their own tab — keep them out of the activity feed.
  const feedItems = items.filter((n) => n.kind !== "follow_request");

  const resolveRequest = (handle: string) =>
    setRequests((prev) => prev.filter((r) => r.handle !== handle));

  return (
    <main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-6 space-y-6">
      <h1 className="font-[family-name:var(--font-title)] text-3xl font-semibold text-foreground">
        Notifications
      </h1>

      {/* Tabs */}
      <div className="flex gap-1 rounded-lg bg-muted p-1">
        <TabButton active={tab === "all"} onClick={() => setTab("all")}>
          Notifications
        </TabButton>
        <TabButton
          active={tab === "requests"}
          onClick={() => setTab("requests")}
          badge={requests.length}
        >
          Friend Requests
        </TabButton>
      </div>

      {state === "error" ? (
        <p className="text-sm text-destructive">
          Could not load notifications. Please try again.
        </p>
      ) : state === "loading" ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : tab === "all" ? (
        feedItems.length === 0 ? (
          <Empty
            icon={<Bell className="size-8" />}
            text="No notifications yet."
          />
        ) : (
          <ul className="divide-y divide-border rounded-2xl border border-border overflow-hidden">
            {feedItems.map((n) => (
              <NotificationRow key={n.id} n={n} selfHandle={user.handle} />
            ))}
          </ul>
        )
      ) : requests.length === 0 ? (
        <Empty
          icon={<UserPlus className="size-8" />}
          text="No pending friend requests."
        />
      ) : (
        <ul className="divide-y divide-border rounded-2xl border border-border overflow-hidden">
          {requests.map((u) => (
            <RequestRow key={u.handle} u={u} onResolve={resolveRequest} />
          ))}
        </ul>
      )}
    </main>
  );
}

function TabButton({
  active,
  onClick,
  badge,
  children,
}: {
  active: boolean;
  onClick: () => void;
  badge?: number;
  children: React.ReactNode;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "flex-1 inline-flex items-center justify-center gap-2 h-9 rounded-md text-sm font-medium transition-colors",
        active
          ? "bg-background text-foreground shadow-sm"
          : "text-muted-foreground hover:text-foreground",
      )}
    >
      {children}
      {badge && badge > 0 ? (
        <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary text-primary-foreground dark:text-white text-xs font-semibold">
          {badge}
        </span>
      ) : null}
    </button>
  );
}

function RequestRow({
  u,
  onResolve,
}: {
  u: UserSummary;
  onResolve: (handle: string) => void;
}) {
  const [busy, setBusy] = useState(false);
  const display = u.name || `@${u.handle}`;

  async function act(kind: "accept" | "reject") {
    if (busy) return;
    setBusy(true);
    try {
      await relationships[kind](u.handle);
      if (kind === "accept") {
        toast(`${display} now follows you`, { duration: 2500 });
      }
      onResolve(u.handle);
    } catch (err) {
      toast.error(
        err instanceof SocialError ? err.message : "Could not update request",
        { duration: 3000 },
      );
      setBusy(false);
    }
  }

  return (
    <li className="flex items-center gap-3 px-4 py-3">
      <Link href={`/u/${u.handle}`} className="shrink-0">
        <UserAvatar src={u.avatar_url} name={display} />
      </Link>
      <div className="min-w-0 flex-1">
        <Link
          href={`/u/${u.handle}`}
          className="block text-sm font-semibold text-foreground truncate hover:underline"
        >
          {display}
        </Link>
        <p className="text-xs text-muted-foreground truncate">
          @{u.handle} · requested to follow you
        </p>
      </div>
      <div className="flex items-center gap-2 shrink-0">
        <Button size="sm" onClick={() => act("accept")} disabled={busy}>
          <Check className="size-4" />
          Accept
        </Button>
        <Button
          size="sm"
          variant="outline"
          onClick={() => act("reject")}
          disabled={busy}
          aria-label="Reject request"
        >
          <X className="size-4" />
        </Button>
      </div>
    </li>
  );
}

function NotificationRow({
  n,
  selfHandle,
}: {
  n: AppNotification;
  selfHandle: string;
}) {
  // admin_message rows have no actor — they're a direct message from the team.
  const isAdmin = n.kind === "admin_message";
  const display = isAdmin
    ? "Prabhupāda Says"
    : n.actor_name || (n.actor_handle ? `@${n.actor_handle}` : "Someone");
  const message = messageFor(n);
  const unread = !n.read_at;

  const body = (
    <div
      className={cnRow(unread)}
    >
      <UserAvatar src={isAdmin ? null : n.actor_avatar_url} name={display} />
      <div className="min-w-0 flex-1">
        {isAdmin ? (
          <p className="text-sm text-foreground leading-snug whitespace-pre-line">
            <span className="font-semibold">{display}</span>
            {n.body ? <span className="block mt-0.5">{n.body}</span> : null}
          </p>
        ) : (
          <p className="text-sm text-foreground leading-snug">
            <span className="font-semibold">{display}</span> {message}
          </p>
        )}
        <p className="text-xs text-muted-foreground mt-0.5">
          {timeAgo(n.created_at)}
        </p>
      </div>
      {unread ? (
        <span className="mt-1.5 size-2 shrink-0 rounded-full bg-primary" />
      ) : null}
    </div>
  );

  // A like links to your own post; a mention links to the actor's post you
  // were tagged in; everything else links to the actor's profile.
  const href =
    n.kind === "post_like" && n.post_id
      ? `/u/${selfHandle}/posts#post-${n.post_id}`
      : n.kind === "post_mention" && n.post_id && n.actor_handle
        ? `/u/${n.actor_handle}/posts#post-${n.post_id}`
        : (n.kind === "post_comment" ||
              n.kind === "comment_reply" ||
              n.kind === "comment_mention") &&
            n.post_id &&
            n.post_author_handle
          ? `/u/${n.post_author_handle}/posts#post-${n.post_id}`
          : n.actor_handle
            ? `/u/${n.actor_handle}`
            : null;

  return href ? (
    <li>
      <Link href={href} className="block">
        {body}
      </Link>
    </li>
  ) : (
    <li>{body}</li>
  );
}

function cnRow(unread: boolean) {
  return [
    "flex items-start gap-3 px-4 py-3 transition-colors hover:bg-muted/50",
    unread ? "bg-primary/5" : "",
  ].join(" ");
}

/** Human-readable tail for each notification kind. Add cases as new
 *  notification kinds are introduced on the backend. */
function messageFor(n: AppNotification): string {
  switch (n.kind) {
    case "follow_request":
      return "requested to follow you.";
    case "follow_accepted":
      return "accepted your follow request.";
    case "post_like": {
      const others = (n.actor_count ?? 1) - 1;
      if (others <= 0) return "liked your post.";
      return `and ${others} ${others === 1 ? "other" : "others"} liked your post.`;
    }
    case "post_mention":
      return "mentioned you in a post.";
    case "post_comment":
      return "commented on your post.";
    case "comment_reply":
      return "replied to your comment.";
    case "comment_mention":
      return "mentioned you in a comment.";
    case "admin_message":
      return n.body ?? "sent you a message.";
    default:
      return "sent you a notification.";
  }
}

function Empty({ icon, text }: { icon: React.ReactNode; text: string }) {
  return (
    <div className="flex flex-col items-center text-center gap-3 py-16 text-muted-foreground">
      {icon}
      <p className="text-sm">{text}</p>
    </div>
  );
}