import { SpinnerIcon, WarningIcon } from '@/components/ui/icons'
import type { GitModelMode } from '@/lib/types'

interface ActionButtonsProps {
  isUploading: boolean
  isChecking: boolean
  isSecretEmpty: boolean
  hasPendingOrErrors: boolean
  allDone: boolean
  hasErrors: boolean
  onUpload: (gitModelMode: GitModelMode) => void
  onCancel: () => void
  onReset: () => void
}

export default function ActionButtons({
  isUploading,
  isChecking,
  isSecretEmpty,
  hasPendingOrErrors,
  allDone,
  hasErrors,
  onUpload,
  onCancel,
  onReset,
}: ActionButtonsProps) {
  const cantUpload = isSecretEmpty || isChecking
  const isBusy = isUploading || isChecking

  return (
    <div className="flex flex-col gap-3 sm:flex-row">
      {!isBusy && hasPendingOrErrors && (
        <>
          <button
            onClick={() => onUpload('draco-glb')}
            disabled={cantUpload}
            className={`flex-1 font-medium text-sm py-2.5 px-6 rounded-xl transition-all duration-150
                       focus:outline-none focus:ring-2 focus:ring-white/50 border border-white/20
                       ${cantUpload
                         ? 'bg-white/30 text-gray-500 cursor-not-allowed'
                         : 'bg-white text-[#000000] hover:bg-gray-200'
                       }`}
          >
            Envoyer
          </button>

          <button
            onClick={() => onUpload('keep-gltf')}
            disabled={cantUpload}
            className={`flex-1 font-medium text-sm py-2.5 px-6 rounded-xl border transition-all duration-150
                       focus:outline-none focus:ring-2 focus:ring-white/30
                       ${cantUpload
                         ? 'bg-black-800 text-gray-600 border-white/10 cursor-not-allowed'
                         : 'bg-black-700 text-gray-300 border-black-600 hover:bg-black-600'
                       }`}
          >
            <span className="flex items-center justify-center gap-2">
              <WarningIcon className="w-4 h-4 text-yellow-400" />
              <span>Envoyer en GLTF</span>
            </span>
          </button>
        </>
      )}

      {isBusy && (
        <button
          onClick={onCancel}
          disabled={!isUploading}
          className={`flex-1 font-medium text-sm py-2.5 px-6 rounded-xl border transition-all duration-150
                     disabled:opacity-50 disabled:cursor-not-allowed ${isChecking
              ? 'bg-black-800 text-gray-300 border-white/20 shadow-[0_0_0_1px_rgba(255,255,255,0.04)]'
              : 'bg-black-700 text-gray-300 border-black-600 hover:bg-black-600'
            }`}
        >
          {isChecking ? (
            <span className="flex items-center justify-center gap-2">
              <SpinnerIcon className="w-4 h-4 text-gray-400" />
              <span>Verification...</span>
            </span>
          ) : 'Annuler'}
        </button>
      )}

      {(allDone || hasErrors) && !isBusy && (
        <button
          onClick={onReset}
          className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
                     py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
                     hover:bg-black-600"
        >
          {allDone ? 'Tout effacer' : 'Reessayer'}
        </button>
      )}
    </div>
  )
}