import { AlertTriangle, Inbox, RefreshCw } from "lucide-react";
import { ApiError } from "../api/client";

export function LoadingBlock({ label = "Loading…" }: { label?: string }) {
  return (
    <div className="state-block" role="status" aria-live="polite">
      <span className="spinner" aria-hidden="true" />
      <span>{label}</span>
    </div>
  );
}

export function ErrorBlock({
  error,
  onRetry,
  title = "Failed to load data",
}: {
  error: unknown;
  onRetry?: () => void;
  title?: string;
}) {
  const message =
    error instanceof ApiError
      ? `${error.message}${error.status ? ` (HTTP ${error.status})` : ""}`
      : error instanceof Error
        ? error.message
        : "Unknown error";
  return (
    <div className="banner error" role="alert">
      <AlertTriangle size={16} aria-hidden="true" />
      <div className="banner-body">
        <strong>{title}.</strong> {message}
      </div>
      {onRetry ? (
        <button type="button" className="btn small" onClick={onRetry}>
          <RefreshCw size={13} aria-hidden="true" /> Retry
        </button>
      ) : null}
    </div>
  );
}

export function EmptyBlock({
  title = "No data",
  hint,
}: {
  title?: string;
  hint?: string;
}) {
  return (
    <div className="state-block">
      <Inbox size={22} aria-hidden="true" />
      <span className="state-title">{title}</span>
      {hint ? <span className="text-muted text-small">{hint}</span> : null}
    </div>
  );
}

/** Inline warning/info banner. */
export function Notice({
  kind,
  children,
}: {
  kind: "info" | "warning" | "error";
  children: React.ReactNode;
}) {
  return (
    <div className={`banner ${kind}`} role={kind === "error" ? "alert" : "status"}>
      <AlertTriangle size={16} aria-hidden="true" />
      <div className="banner-body">{children}</div>
    </div>
  );
}
