import type { HTMLAttributes, ReactNode } from "react";
import { ProgressBar, type ProgressBarProps } from "./ProgressBar.js";
import { cn } from "./cn.js";

export interface ResourceRowProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title: ReactNode;
  icon?: ReactNode;
  description?: ReactNode;
  metadata?: ReactNode;
  status?: ReactNode;
  statusPlacement?: "leading" | "trailing";
  actions?: ReactNode;
  progress?: Pick<ProgressBarProps, "label" | "value" | "valueText">;
}

/** Compact resource presentation extracted from Mission Core AI Inference.
 * Actions stay canonical controls; the row itself is not a nested button. */
export function ResourceRow({ title, icon, description, metadata, status, statusPlacement = "trailing", actions, progress, className, ...props }: ResourceRowProps) {
  const leadingStatus = !progress && !!status && statusPlacement === "leading";
  return <div className={cn("nodedc-resource-row", progress && "nodedc-resource-row--progress", leadingStatus && "nodedc-resource-row--leading-status", className)} {...props}>
    {icon ? <span className="nodedc-resource-row__icon" aria-hidden="true">{icon}</span> : null}
    {leadingStatus ? <div className="nodedc-resource-row__status">{status}</div> : null}
    <div className="nodedc-resource-row__copy">
      <strong>{title}</strong>
      {description ? <span>{description}</span> : null}
      {metadata ? <small>{metadata}</small> : null}
    </div>
    {progress ? <ProgressBar {...progress} /> : null}
    {!progress && status && statusPlacement === "trailing" ? <div className="nodedc-resource-row__status">{status}</div> : null}
    {actions ? <div className="nodedc-resource-row__actions">{actions}</div> : null}
  </div>;
}

export function ResourceList({ className, children, ...props }: HTMLAttributes<HTMLUListElement>) {
  return <ul className={cn("nodedc-resource-list", className)} {...props}>{children}</ul>;
}