"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import type { NotificationItem } from "@/app/(dashboard)/notifications/notification.types";
import { useMarkAllAsRead } from "@/app/(dashboard)/notifications/hooks/useMarkAllAsRead";
import { useMarkAsRead } from "@/app/(dashboard)/notifications/hooks/useMarkAsRead";
import { useNotifications } from "@/app/(dashboard)/notifications/hooks/useNotifications";
import { EmptyNotification } from "./components/EmptyNotification";
import { NotificationList } from "./components/NotificationList";
import { NotificationSkeleton } from "./components/NotificationSkeleton";

type NotificationTab = "all" | "unread";

export default function NotificationsPage() {
  const [tab, setTab] = useState<NotificationTab>("all");
  const [page, setPage] = useState(1);
  const router = useRouter();
  const { data, isLoading } = useNotifications({
    page,
    per_page: 10,
    unread_only: tab === "unread",
  });
  const { mutateAsync: markAsRead } = useMarkAsRead();
  const { mutate: markAllAsRead, isPending: isMarkingAll } = useMarkAllAsRead();
  const notificationPage = data?.data.notifications;
  const notifications = notificationPage?.data ?? [];
  const meta = notificationPage?.meta;
  const handleSelect = async (notification: NotificationItem) => {
    if (!notification.is_read) await markAsRead(notification.id);
    router.push(`/notifications/${notification.id}`);
  };
  const selectTab = (nextTab: NotificationTab) => {
    setTab(nextTab);
    setPage(1);
  };

  return (
    <section className="bg-expertise-box-bg w-full px-5 py-6">
      <div className="mx-auto w-full max-w-4xl rounded-2xl bg-white p-6 shadow-sm">
        <div className="flex flex-wrap items-center justify-between gap-4 border-b pb-4">
          <div>
            <h1 className="text-2xl font-bold">Notifications</h1>
            <p className="mt-1 text-sm text-gray-500">
              Stay up to date with your account activity.
            </p>
          </div>
          <button
            type="button"
            disabled={isMarkingAll}
            onClick={() => markAllAsRead()}
            className="border-border rounded-lg border px-3 py-2 text-sm font-medium text-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
          >
            {isMarkingAll ? "Marking..." : "Mark all as read"}
          </button>
        </div>
        <div className="flex gap-2 py-4">
          <button
            type="button"
            onClick={() => selectTab("all")}
            className={`rounded-full px-4 py-1.5 text-sm ${tab === "all" ? "bg-blue-100 font-medium text-blue-600" : "hover:bg-gray-100"}`}
          >
            All
          </button>
          <button
            type="button"
            onClick={() => selectTab("unread")}
            className={`rounded-full px-4 py-1.5 text-sm ${tab === "unread" ? "bg-blue-100 font-medium text-blue-600" : "hover:bg-gray-100"}`}
          >
            Unread
          </button>
        </div>
        <div className="divide-y">
          {isLoading ? (
            <NotificationSkeleton count={6} />
          ) : notifications.length ? (
            <NotificationList
              notifications={notifications}
              onSelect={handleSelect}
            />
          ) : (
            <EmptyNotification />
          )}
        </div>
        {meta && (
          <div className="mt-5 flex items-center justify-between border-t pt-4 text-sm">
            <span>
              Page {meta.current_page} of {meta.last_page} · {meta.total} total
            </span>
            <div className="flex gap-2">
              <button
                type="button"
                disabled={meta.current_page <= 1}
                onClick={() => setPage((current) => current - 1)}
                className="border-border rounded-lg border px-3 py-1.5 disabled:cursor-not-allowed disabled:opacity-50"
              >
                Previous
              </button>
              <button
                type="button"
                disabled={meta.current_page >= meta.last_page}
                onClick={() => setPage((current) => current + 1)}
                className="border-border rounded-lg border px-3 py-1.5 disabled:cursor-not-allowed disabled:opacity-50"
              >
                Next
              </button>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}