export default function StepAccessControl({
  accessControl,
  remoteButtonOptions,
  selected,
  remoteButtons,
  remoteQuantity,
  onToggle,
  onSetRemoteButtons,
  onSetRemoteQuantity,
  onBack,
  onNext,
}) {
  return (
    <div>
      <div className="flex items-center gap-2 mb-6">
        <button
          onClick={onBack}
          className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500 transition-colors"
        >
          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <div>
          <h2 className="text-xl font-semibold text-gray-900">
            Step 3: Access Control
          </h2>
          <p className="text-gray-500">
            Select the access control methods for your gate (choose one or more)
          </p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        {accessControl.map((ac) => {
          const isSelected = selected.includes(ac.id);
          const isRemote = ac.id === 'remote-kit';

          return (
            <div
              key={ac.id}
              className={`rounded-xl border-2 transition-all ${
                isSelected
                  ? 'border-blue-600 bg-blue-50'
                  : 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
              }`}
            >
              <button
                onClick={() => onToggle(ac.id)}
                className={`text-left w-full p-4 ${isSelected && isRemote ? 'pb-3' : ''}`}
              >
                <div className="flex items-start justify-between">
                  <div className="min-w-0">
                    <div className="font-semibold text-gray-900">{ac.name}</div>
                    {ac.model && (
                      <div className="text-sm text-gray-500">
                        Model: {ac.model}
                      </div>
                    )}
                    <div className="text-sm text-gray-500 mt-1">
                      {ac.description}
                    </div>
                    <div className="mt-2 text-lg font-bold text-blue-600">
                      {isRemote ? (
                        'Varies by buttons'
                      ) : (
                        'C$' + ac.price.toLocaleString('en-CA', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                      )}
                    </div>
                  </div>
                  <div
                    className={`shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center mt-1 transition-colors ${
                      isSelected
                        ? 'border-blue-600 bg-blue-600'
                        : 'border-gray-300'
                    }`}
                  >
                    {isSelected && (
                      <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                      </svg>
                    )}
                  </div>
                </div>
              </button>

              {isSelected && isRemote && (
                <div className="px-4 pt-3 pb-4 border-t border-blue-200 mt-0 space-y-3">
                  <div>
                    <label className="block text-xs font-medium text-gray-500 mb-2">
                      Number of Buttons
                    </label>
                    <div className="grid grid-cols-4 gap-2">
                      {remoteButtonOptions.map((opt) => {
                        const isBtnSelected = remoteButtons === Number(opt.id);
                        return (
                          <button
                            key={opt.id}
                            onClick={(e) => {
                              e.stopPropagation();
                              onSetRemoteButtons(Number(opt.id));
                            }}
                            className={`px-3 py-2 text-sm rounded-lg border-2 transition-all text-center ${
                              isBtnSelected
                                ? 'border-blue-600 bg-white shadow-sm'
                                : 'border-gray-200 bg-white hover:border-gray-300'
                            }`}
                          >
                            <div className={`font-medium ${isBtnSelected ? 'text-blue-700' : 'text-gray-700'}`}>
                              {opt.id}-Button
                            </div>
                            <div className={`text-xs mt-0.5 ${isBtnSelected ? 'text-blue-500' : 'text-gray-400'}`}>
                              C${opt.price.toLocaleString('en-CA', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                            </div>
                          </button>
                        );
                      })}
                    </div>
                  </div>

                  <div>
                    <label className="block text-xs font-medium text-gray-500 mb-2">
                      Quantity
                    </label>
                    <div className="flex items-center gap-2">
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          onSetRemoteQuantity(remoteQuantity - 1);
                        }}
                        disabled={remoteQuantity <= 1}
                        className={`w-9 h-9 rounded-lg border-2 flex items-center justify-center text-lg font-medium transition-all ${
                          remoteQuantity <= 1
                            ? 'border-gray-200 text-gray-300 cursor-not-allowed'
                            : 'border-gray-300 text-gray-600 hover:border-gray-400 hover:bg-gray-50'
                        }`}
                      >
                        &minus;
                      </button>
                      <div className="w-14 h-9 rounded-lg border-2 border-gray-300 flex items-center justify-center text-sm font-semibold text-gray-900 bg-white">
                        {remoteQuantity}
                      </div>
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          onSetRemoteQuantity(remoteQuantity + 1);
                        }}
                        className="w-9 h-9 rounded-lg border-2 border-gray-300 flex items-center justify-center text-lg font-medium text-gray-600 hover:border-gray-400 hover:bg-gray-50 transition-all"
                      >
                        +
                      </button>
                      <span className="text-xs text-gray-400 ml-1">
                        {remoteQuantity > 1 ? 'remotes' : 'remote'}
                      </span>
                    </div>
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div className="flex items-center justify-between pt-4 border-t border-gray-200">
        <div className="text-sm text-gray-500">
          {selected.length === 0
            ? 'No access control selected (you can skip this step)'
            : `${selected.length} item${selected.length > 1 ? 's' : ''} selected`}
        </div>
        <button
          onClick={onNext}
          className="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
        >
          Continue
        </button>
      </div>
    </div>
  );
}