import { Undo2, Redo2, Copy, Trash2, Lock, Unlock, Eye, EyeOff, FlipHorizontal, ArrowUp, ArrowDown, Save, ChevronRight, Star } from 'lucide-react';

export default function CanvasActionBar({ hasPieces, selected, canSave, saving, onSave, nextLabel, onNext, canNext, onUndo, onRedo, onDuplicate, onDelete, onToggleLock, onToggleVisible, onMirror, onOrder }) {
  const btn = (onClick, icon, label, disabled, danger) => (
    <button onClick={onClick} disabled={disabled} className={`tool-button ${danger ? 'text-red-300 hover:border-red-500/40' : ''}`} title={label}>{icon}<span className="hidden sm:inline">{label}</span></button>
  );
  return (
    <footer className="panel-glass flex flex-wrap items-center gap-1.5 px-3 py-2.5">
      <div className="flex items-center gap-1">
        {btn(onUndo, <Undo2 size={13} />, 'Undo', !onUndo)}
        {btn(onRedo, <Redo2 size={13} />, 'Redo', !onRedo)}
      </div>
      <span className="mx-1 h-6 w-px bg-white/10" />
      <div className="flex items-center gap-1">
        {btn(() => onDuplicate(selected), <Copy size={13} />, 'Duplicate', !selected)}
        {btn(() => onDelete(selected), <Trash2 size={13} />, 'Delete', !selected, true)}
        {btn(() => onToggleLock(selected), selected?.locked ? <Lock size={13} className="text-amber-300" /> : <Unlock size={13} />, selected?.locked ? 'Unlock' : 'Lock', !selected)}
        {btn(() => onToggleVisible(selected), <EyeOff size={13} />, 'Hide', !selected)}
        {btn(() => onMirror(selected), <FlipHorizontal size={13} />, 'Mirror', !selected)}
        {btn(() => onOrder(selected, 1), <ArrowUp size={13} />, 'Forward', !selected)}
        {btn(() => onOrder(selected, -1), <ArrowDown size={13} />, 'Backward', !selected)}
      </div>
      <div className="ml-auto flex items-center gap-2">
        <span className="hidden text-[10px] text-slate-500 sm:inline">Master design — not tied to any cover</span>
        <button onClick={onSave} disabled={!canSave || saving} className="btn-primary text-sm">{saving ? 'Saving…' : <><Save size={14} /> Save Universal Design</>}</button>
        {nextLabel && <button onClick={onNext} disabled={!canNext} className="btn-secondary text-sm">{nextLabel} <ChevronRight size={14} /></button>}
      </div>
    </footer>
  );
}