import { Check, RotateCcw, Save } from "lucide-react";

// The Save / Discard bar shown while an edited draft has unsaved changes (Settings prefs,
// admin Configuration). Two visual variants share one state machine + markup:
//   - "inline":   a bar pinned to the bottom of a card (Settings panel)
//   - "floating": a centered floating pill over the page (Configuration page)
// Renders nothing while clean and idle; stays mounted through the fading saved/error message.

export type SaveState = "idle" | "saving" | "saved" | "error";

export interface DraftSaveBarLabels {
  saved: string;
  failed: string;
  unsaved: string;
  discard: string;
  save: string;
  saving: string;
}

export function DraftSaveBar({
  dirty,
  state,
  onSave,
  onDiscard,
  labels,
  variant = "inline",
}: {
  dirty: boolean;
  state: SaveState;
  onSave: () => void;
  onDiscard: () => void;
  labels: DraftSaveBarLabels;
  variant?: "inline" | "floating";
}) {
  if (!dirty && state === "idle") return null;
  const saving = state === "saving";
  const wrap =
    variant === "floating"
      ? "fixed bottom-4 left-1/2 -translate-x-1/2 z-40 glass rounded-2xl shadow-lg flex items-center justify-between gap-4 px-4 py-3 w-[min(48rem,calc(100%-2rem))]"
      : "flex items-center justify-between gap-3 border-t border-border/60 px-4 py-3 bg-card/40";
  return (
    <div className={wrap}>
      <span className="text-sm text-muted">
        {state === "saved" ? (
          <span className="text-emerald-500 inline-flex items-center gap-1.5">
            <Check className="w-4 h-4" />
            {labels.saved}
          </span>
        ) : state === "error" ? (
          <span className="text-red-500">{labels.failed}</span>
        ) : (
          labels.unsaved
        )}
      </span>
      <div className="flex items-center gap-2">
        <button
          onClick={onDiscard}
          disabled={saving || !dirty}
          className="glass-card glass-hover flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm disabled:opacity-40 transition"
        >
          <RotateCcw className="w-4 h-4" />
          {labels.discard}
        </button>
        <button
          onClick={onSave}
          disabled={saving || !dirty}
          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-accent text-accent-fg font-medium shadow-md shadow-accent/20 disabled:opacity-40 transition"
        >
          <Save className="w-4 h-4" />
          {saving ? labels.saving : labels.save}
        </button>
      </div>
    </div>
  );
}
