"use client";

import { useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import { Bell } from "lucide-react";
import { useNotificationsFeed } from "@/lib/hooks/use-notifications-feed";
import { NotificationRow } from "@/components/notifications/notification-ui";
import { numberLocaleForUi } from "@/lib/format-datetime";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type FilterMode = "all" | "unread";

export function NotificationsScreen() {
  const t = useTranslations("notifications");
  const locale = useLocale();
  const [filter, setFilter] = useState<FilterMode>("all");
  const unreadOnly = filter === "unread";

  const { cafeId, items, unreadCount, isLoading, isFetching, openNotification, markAllRead } =
    useNotificationsFeed({ unreadOnly });

  if (!cafeId) return null;

  const numberLocale = numberLocaleForUi(locale);

  return (
    <div className="mx-auto flex w-full max-w-2xl flex-col gap-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-lg font-medium text-foreground">{t("pageTitle")}</h1>
          {unreadCount > 0 ? (
            <p className="mt-0.5 text-xs text-muted-foreground">
              {t("unreadCount", { count: unreadCount.toLocaleString(numberLocale) })}
            </p>
          ) : null}
        </div>
        {unreadCount > 0 ? (
          <Button variant="outline" size="sm" onClick={() => void markAllRead()}>
            {t("markAllRead")}
          </Button>
        ) : null}
      </div>

      <div
        className="inline-flex rounded-lg border border-border bg-card p-1"
        role="tablist"
        aria-label={t("filterLabel")}
      >
        <button
          type="button"
          role="tab"
          aria-selected={filter === "all"}
          className={cn(
            "rounded-md px-3 py-1.5 text-sm transition",
            filter === "all"
              ? "bg-[#E1F5EE] font-medium text-[#0F6E56]"
              : "text-muted-foreground hover:text-foreground"
          )}
          onClick={() => setFilter("all")}
        >
          {t("filterAll")}
        </button>
        <button
          type="button"
          role="tab"
          aria-selected={filter === "unread"}
          className={cn(
            "rounded-md px-3 py-1.5 text-sm transition",
            filter === "unread"
              ? "bg-[#E1F5EE] font-medium text-[#0F6E56]"
              : "text-muted-foreground hover:text-foreground"
          )}
          onClick={() => setFilter("unread")}
        >
          {t("filterUnread")}
        </button>
      </div>

      {isLoading ? (
        <p className="py-12 text-center text-sm text-muted-foreground">{t("loading")}</p>
      ) : items.length === 0 ? (
        <div className="rounded-xl border border-border bg-card px-6 py-16 text-center">
          <Bell className="mx-auto mb-3 size-10 text-muted-foreground/50" aria-hidden />
          <p className="text-sm text-muted-foreground">
            {filter === "unread" ? t("emptyUnread") : t("empty")}
          </p>
        </div>
      ) : (
        <ul className="flex flex-col gap-2">
          {items.map((n) => (
            <li key={n.id}>
              <NotificationRow
                item={n}
                locale={locale}
                onSelect={(item) => void openNotification(item, { navigate: true })}
              />
            </li>
          ))}
        </ul>
      )}

      {isFetching && !isLoading ? (
        <p className="text-center text-[11px] text-muted-foreground">{t("refreshing")}</p>
      ) : null}
    </div>
  );
}
