import { createFileRoute, Link } from "@tanstack/react-router";
import { requireSignedIn } from "~/lib/route-guards";
import { z } from "zod";
import { listNotifications, markNotifications } from "~/fns/account";
import { useAction } from "~/hooks/use-action";
import { Button, buttonClass } from "~/ui/Button";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { cn } from "~/utils/cn";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/notifications")({
  validateSearch: z.object({ all: z.boolean().optional() }),
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  loaderDeps: ({ search }) => ({ all: search.all ?? false }),
  loader: ({ deps }) => listNotifications({ data: { all: deps.all } }),
  component: NotificationsPage,
});

function NotificationsPage() {
  const notifications = Route.useLoaderData();
  const { all } = Route.useSearch();
  const mark = useAction(markNotifications);
  return (
    <PageContainer className="max-w-4xl space-y-4">
      <div className="flex items-center justify-between">
        <Heading size="xl">Notifications</Heading>
        <div className="flex gap-2">
          <Link to="/notifications" search={{ all: !all }} className={buttonClass("ghost", "sm")}>
            {all ? "Unread only" : "Show all"}
          </Link>
          <Button size="sm" onClick={() => mark.run({ data: { ids: null } })} pending={mark.pending}>
            Mark all read
          </Button>
        </div>
      </div>
      <Panel>
        {notifications.length === 0 ? (
          <EmptyState title="You're all caught up" icon="check" />
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {notifications.map((item) => (
              <li key={item.id} className={cn("flex items-center gap-3 px-4 py-3", item.read && "opacity-60")}>
                <Badge>{item.reason.replace("_", " ")}</Badge>
                <a
                  href={item.url}
                  onClick={() => mark.run({ data: { ids: [item.id] } })}
                  className="min-w-0 flex-1 truncate text-sm text-kumo-strong hover:text-accent-400"
                >
                  {item.title}
                </a>
                <span className="shrink-0 text-xs text-kumo-subtle">
                  <RelativeTime timestamp={item.createdAt} />
                </span>
              </li>
            ))}
          </ul>
        )}
      </Panel>
    </PageContainer>
  );
}