import { CheckCircle2, Loader2, X, XCircle } from "lucide-react";
import type { StackActionStatus } from "@/hooks/useStackActions";

const TONE = {
  running: "border-sp-border bg-sp-surface-2 text-sp-text-1",
  success: "border-sp-green/30 bg-sp-green/10 text-sp-green",
  error:
    "border-red-300 bg-red-50 text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300",
} as const;

/** Persistent status line for one stack action (start/stop/pull/update/…),
 *  shown in addition to the transient toast so the outcome doesn't vanish
 *  with it — and so a failure stays readable until acknowledged. */
export function ActionStatusBanner({
  status,
  onDismiss,
}: {
  status: StackActionStatus;
  onDismiss: (id: string) => void;
}) {
  return (
    <div
      className={`flex items-center gap-2 rounded-card border px-3 py-2 text-sm ${TONE[status.phase]}`}
    >
      {status.phase === "running" && (
        <Loader2 className="h-4 w-4 shrink-0 animate-spin text-accent dark:text-accent-dark" />
      )}
      {status.phase === "success" && <CheckCircle2 className="h-4 w-4 shrink-0" />}
      {status.phase === "error" && <XCircle className="h-4 w-4 shrink-0" />}
      <span className="flex-1">
        {status.phase === "running" && `${status.label} ${status.id}…`}
        {status.phase === "success" && `${status.label} ${status.id} — done`}
        {status.phase === "error" &&
          `${status.label} ${status.id} — failed${status.message ? `: ${status.message}` : ""}`}
      </span>
      {status.phase !== "running" && (
        <button
          onClick={() => onDismiss(status.id)}
          className="shrink-0 opacity-60 transition-opacity hover:opacity-100"
          aria-label="Dismiss"
        >
          <X className="h-4 w-4" />
        </button>
      )}
    </div>
  );
}

/** Stacked banners, one per stack currently being acted on. Renders nothing
 *  when idle. */
export function ActionStatusList({
  statuses,
  onDismiss,
}: {
  statuses: StackActionStatus[];
  onDismiss: (id: string) => void;
}) {
  if (statuses.length === 0) return null;
  return (
    <div className="space-y-2">
      {statuses.map((s) => (
        <ActionStatusBanner key={s.id} status={s} onDismiss={onDismiss} />
      ))}
    </div>
  );
}