import React from 'react'
import { Save, CheckCircle2 } from 'lucide-react'

/**
 * Save button (the reference builder SaveChangesButton.jsx): h-9 with a Save icon and focus ring. Texts stay
 * "Save Changes" / "Saving..." / "Saved" (the e2e gates look for them).
 * Props: isDirty, saving, disabled (e.g. form not loaded), onSave().
 */
export default function SaveButton({ isDirty, saving, disabled = false, onSave }) {
  const off = saving || !isDirty || disabled
  return (
    <button
      type="button"
      onClick={onSave}
      disabled={off}
      data-testid="save-button"
      title={saving ? 'Saving…' : isDirty ? 'Save Changes (all edits are saved together)' : 'All changes saved'}
      className={`inline-flex items-center gap-1.5 h-9 px-3.5 text-sm font-semibold rounded-lg transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 ${
        saving
          ? 'bg-blue-50 border border-blue-200 text-blue-700 cursor-not-allowed'
          : isDirty && !disabled
            ? 'bg-blue-600 hover:bg-blue-700 text-white shadow-sm cursor-pointer active:scale-95'
            : 'bg-transparent text-gray-400 cursor-default select-none'
      }`}
    >
      {saving ? (
        <>
          <svg className="animate-spin h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
          </svg>
          <span>Saving...</span>
        </>
      ) : isDirty ? (
        <>
          <Save className="w-4 h-4" aria-hidden="true" />
          <span>Save Changes</span>
        </>
      ) : (
        <>
          <CheckCircle2 className="w-4 h-4 text-emerald-500" aria-hidden="true" />
          <span>Saved</span>
        </>
      )}
    </button>
  )
}