"use client";

import { useState } from "react";
import { AlertTriangle } from "lucide-react";
import { useOfflineStatus } from "@/hooks/use-offline-status";
import { ReviewFailedDialog } from "./ReviewFailedDialog";

/**
 * The offline banner (TASK-0095 R2): top, below the topbar, `role=status` —
 * "You're offline — changes are saved on this device" + the pending count
 * (the CRDT-pending + outbox SUM — `computeOfflineStatus.pendingCount`) + a
 * "Review failed changes" link (when the failed list is non-empty).
 *
 * Visible when `navigator.onLine` is false OR the provider is `offline` OR it
 * has been `reconnecting` ≥ 5 s (a < 5 s blip shows no banner — only the
 * StatusChip flashes). Dismisses automatically when back online.
 */
export function OfflineBanner() {
  const status = useOfflineStatus();
  const [reviewOpen, setReviewOpen] = useState(false);

  if (!status.bannerVisible) return null;

  return (
    <>
      <div
        data-testid="offline-banner"
        role="status"
        aria-live="polite"
        className="flex items-center justify-center gap-2 border-b border-amber-200 bg-amber-50 px-3 py-1.5 text-xs text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200"
      >
        <AlertTriangle className="size-3.5 shrink-0" aria-hidden />
        <span>
          You're offline — changes are saved on this device
          {status.pendingCount > 0 ? (
            <>
              {" "}
              · <strong className="font-semibold">{status.pendingCount}</strong>{" "}
              pending
            </>
          ) : null}
        </span>
        {status.showReviewLink ? (
          <button
            type="button"
            data-testid="review-failed-changes"
            onClick={() => setReviewOpen(true)}
            className="ml-1 shrink-0 rounded font-medium underline underline-offset-2 hover:opacity-80"
          >
            Review failed changes
          </button>
        ) : null}
      </div>
      {reviewOpen ? <ReviewFailedDialog onClose={() => setReviewOpen(false)} /> : null}
    </>
  );
}