import { AlertTriangle, Inbox } from "lucide-react";
import type { ReactNode } from "react";
import { cn } from "./cn";

export function EmptyState({ title = "Nothing here yet", description, action, icon, className, compact }: { title?: ReactNode; description?: ReactNode; action?: ReactNode; icon?: ReactNode; className?: string; compact?: boolean }) {
  return (
    <div className={cn("flex flex-col items-center justify-center rounded-sm border border-dashed border-hair-2 text-center", compact ? "px-4 py-6" : "px-6 py-10", className)}>
      <div className="mb-2 text-ink-4">{icon ?? <Inbox className="size-5" strokeWidth={1.5} />}</div>
      <div className="text-[13.5px] font-medium text-ink-2">{title}</div>
      {description && <p className="mt-1 max-w-sm text-[12.5px] text-ink-3">{description}</p>}
      {action && <div className="mt-3">{action}</div>}
    </div>
  );
}

export function ErrorState({ title = "Data temporarily unavailable", description = "The index API did not respond. The page will recover automatically once it is reachable.", action, className, compact, detail }: { title?: ReactNode; description?: ReactNode; action?: ReactNode; className?: string; compact?: boolean; detail?: string }) {
  return (
    <div role="status" className={cn("flex flex-col items-center justify-center rounded-sm border border-hair text-center", compact ? "px-4 py-6" : "px-6 py-10", className)}>
      <div className="mb-2 text-warn">
        <AlertTriangle className="size-5" strokeWidth={1.5} />
      </div>
      <div className="text-[13.5px] font-medium text-ink-2">{title}</div>
      {description && <p className="mt-1 max-w-sm text-[12.5px] text-ink-3">{description}</p>}
      {detail && <code className="mt-2 rounded-xs bg-surface-2 px-1.5 py-0.5 text-[11px] text-ink-3">{detail}</code>}
      {action && <div className="mt-3">{action}</div>}
    </div>
  );
}

/** Inline offline notice shown at the top of a page when the API is down but we still render the shell. */
export function OfflineNotice({ detail, className }: { detail?: string; className?: string }) {
  return (
    <div role="status" className={cn("flex items-start gap-2 rounded-sm border border-warn/30 bg-warn/5 px-3 py-2 text-[12.5px] text-ink-2", className)}>
      <AlertTriangle className="mt-0.5 size-3.5 shrink-0 text-warn" strokeWidth={1.75} />
      <span>
        Live data is temporarily unavailable — showing the page structure without figures.
        {detail && <span className="text-ink-3"> ({detail})</span>}
      </span>
    </div>
  );
}