import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Link } from "react-router-dom";
import { ArrowRight, Loader2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import type { UserNotificationDto } from "@/lib/userNotificationsApi";
import { fetchNotifications, markNotificationRead } from "@/lib/userNotificationsApi";
import { useVisibilityAwareRefetchInterval } from "@/hooks/useVisibilityAwareRefetchInterval";
import { POLL_INTERVALS } from "@/shared/config/polling";
import { cn } from "@/lib/utils";
import { formatIsoToDdMmYyyyHhMm } from "@/lib/vnDateFormat";

export type NotificationManagerVariant = "applicant" | "admin";

function decisionBadge(n: UserNotificationDto) {
  if (n.decision === "approved") {
    return <Badge className="bg-green-600 hover:bg-green-600/90">Đã duyệt</Badge>;
  }
  return <Badge variant="destructive">Không duyệt</Badge>;
}

function formatWhen(iso: string | null | undefined) {
  if (!iso) return "";
  const out = formatIsoToDdMmYyyyHhMm(iso);
  return out || iso;
}

export function NotificationManager({ variant = "applicant" }: { variant?: NotificationManagerVariant }) {
  const queryClient = useQueryClient();
  const isAdminLayout = variant === "admin";
  const listPoll = useVisibilityAwareRefetchInterval(POLL_INTERVALS.notificationsList);

  const listQuery = useQuery({
    queryKey: ["notifications", { page: 1 }],
    queryFn: () => fetchNotifications(1, 50),
    staleTime: 30_000,
    refetchInterval: listPoll,
    refetchOnWindowFocus: true,
  });

  const readMutation = useMutation({
    mutationFn: (id: string) => markNotificationRead(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["notifications"] });
      queryClient.invalidateQueries({ queryKey: ["notifications-unread-count"] });
    },
  });

  const items = listQuery.data?.data ?? [];

  return (
    <div className="flex flex-col w-[100%] mx-auto max-w-3xl space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Thông báo</h1>
        <p className="text-muted-foreground text-sm mt-1">
          {isAdminLayout
            ? "Đây là hộp thư dành cho ứng viên khi ban quản trị ghi nhận kết quả duyệt. Tài khoản quản trị thường không có thông báo tại đây."
            : "Kết quả duyệt hồ sơ, phân hạng (nếu được duyệt) và phản hồi từ quản trị."}
        </p>
      </div>

      {listQuery.isLoading ? (
        <div className="flex items-center gap-2 text-muted-foreground text-sm py-10">
          <Loader2 className="h-5 w-5 animate-spin" />
          Đang tải…
        </div>
      ) : listQuery.isError ? (
        <Card>
          <CardContent className="py-8 text-sm text-destructive">
            Không tải được thông báo. Vui lòng thử lại sau.
          </CardContent>
        </Card>
      ) : items.length === 0 ? (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Chưa có thông báo</CardTitle>
            <CardDescription>
              Khi hồ sơ được cập nhật kết quả từ ban quản trị, bạn sẽ thấy nội dung tại đây.
            </CardDescription>
          </CardHeader>
        </Card>
      ) : (
        <ul className="space-y-4">
          {items.map((n) => (
            <li key={n.id}>
              <Card
                className={cn(
                  "transition-colors",
                  n.readAt == null && "border-primary/30 bg-primary/[0.03]",
                )}
              >
                <CardHeader className="pb-2 space-y-2">
                  <div className="flex flex-wrap items-start justify-between gap-2">
                    <CardTitle className="text-base leading-snug">{n.title}</CardTitle>
                    {decisionBadge(n)}
                  </div>
                  <CardDescription>{formatWhen(n.createdAt)}</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4 text-sm">
                  <p className="text-muted-foreground">{n.body}</p>

                  {n.decision === "approved" && n.meritCategoryLabel ? (
                    <p>
                      <span className="text-muted-foreground">Phân hạng đề xuất: </span>
                      <strong className="text-foreground">{n.meritCategoryLabel}</strong>
                    </p>
                  ) : null}

                  <Separator />

                  <div className="space-y-2">
                    <p className="font-medium text-foreground">Phản hồi / nhận xét</p>
                    <p className="whitespace-pre-wrap text-foreground/90">
                      {n.feedback?.trim() ? n.feedback : "—"}
                    </p>
                  </div>

                  {n.decision === "rejected" && n.rationale?.trim() ? (
                    <div className="space-y-2">
                      <p className="font-medium text-foreground">Lý do chi tiết</p>
                      <p className="whitespace-pre-wrap text-foreground/90">{n.rationale}</p>
                    </div>
                  ) : null}

                  <div className="flex flex-wrap gap-2 pt-2">
                    <Button variant="outline" size="sm" asChild>
                      <Link
                        to={`/dashboard/documents/review?applicationId=${encodeURIComponent(n.applicationId)}`}
                        onClick={() => {
                          if (!n.readAt) readMutation.mutate(n.id);
                        }}
                      >
                        Xem hồ sơ
                        <ArrowRight className="ml-1 h-4 w-4" />
                      </Link>
                    </Button>
                    {!n.readAt ? (
                      <Button
                        variant="secondary"
                        size="sm"
                        disabled={readMutation.isPending}
                        onClick={() => readMutation.mutate(n.id)}
                      >
                        Đánh dấu đã đọc
                      </Button>
                    ) : null}
                  </div>
                </CardContent>
              </Card>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
