"use client";

import { useState } from "react";
import { AlertTriangle, CloudOff } from "lucide-react";
import { PendingQueueSheet } from "@/components/offline/pending-queue-sheet";
import { Button } from "@/components/ui/button";
import { useCurrentUserId } from "@/lib/auth/auth-context";
import { useHasRejectedHiveChange, usePendingHiveCount } from "./use-pending-hive";

export function pendingHiveText(count: number): string {
  return count === 1 ? "1 Änderung wartet auf Netz" : `${count} Änderungen warten auf Netz`;
}

export const REJECTED_HIVE_TEXT =
  "Eine Änderung an dieser Beute wurde abgelehnt. Neue Änderungen warten, bis du sie in der Warteschlange klärst.";

/**
 * „1 Änderung wartet auf Netz“; with a refused change in the queue instead the
 * hint to resolve it there, with a button that opens the queue sheet. Nothing
 * while no change of the colony's hive waits.
 */
export function HivePendingNote({ colonyId, className }: { colonyId: string; className?: string }) {
  const count = usePendingHiveCount(colonyId);
  const rejected = useHasRejectedHiveChange(colonyId);
  const userId = useCurrentUserId();
  const [sheetOpen, setSheetOpen] = useState(false);
  if (rejected && userId) {
    return (
      <div role="status" className={className ?? "flex flex-col items-start gap-1.5 text-xs"}>
        <p className="flex items-start gap-1.5">
          <AlertTriangle className="mt-0.5 size-3.5 shrink-0" aria-hidden />
          {REJECTED_HIVE_TEXT}
        </p>
        <Button type="button" variant="outline" size="touch" onClick={() => setSheetOpen(true)}>
          Warteschlange öffnen
        </Button>
        <PendingQueueSheet
          userId={userId}
          foreignCount={0}
          open={sheetOpen}
          onOpenChange={setSheetOpen}
          trigger={null}
        />
      </div>
    );
  }
  if (count === 0) return null;
  return (
    <p role="status" className={className ?? "flex items-center gap-1.5 text-xs"}>
      <CloudOff className="size-3.5 shrink-0" aria-hidden />
      {pendingHiveText(count)}
    </p>
  );
}